From 9f57d7ab9bfb3da45f6b0d7e0eb664455c819257 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Wed, 29 Nov 2023 19:09:21 +0800
Subject: [PATCH] add machine base info request and display

---
 frontend/src/router/index.ts                  |  2 +-
 frontend/src/views/Batch/Detail.vue           |  2 +-
 .../src/views/Cluster/MachineDetail/Base.vue  | 47 +++++++++++++++----
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index cb1897b..fba25da 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -58,7 +58,7 @@ let sidebarRoutes = [
             }
           },
           {
-            path: '/cluster/machine/:detail',
+            path: '/cluster/machine/:uuid',
             name: 'MacDetail',
             component: () => import('../views/Cluster/MachineDetail/Index.vue'),
             meta: {
diff --git a/frontend/src/views/Batch/Detail.vue b/frontend/src/views/Batch/Detail.vue
index 6fa5a73..f533788 100644
--- a/frontend/src/views/Batch/Detail.vue
+++ b/frontend/src/views/Batch/Detail.vue
@@ -46,7 +46,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus';
 
 import PGTable from "@/components/PGTable.vue";
diff --git a/frontend/src/views/Cluster/MachineDetail/Base.vue b/frontend/src/views/Cluster/MachineDetail/Base.vue
index 07b3878..dfffb1e 100644
--- a/frontend/src/views/Cluster/MachineDetail/Base.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Base.vue
@@ -1,25 +1,52 @@
 <template>
     <div class="content">
         <el-descriptions :column="2" border>
-            <el-descriptions-item label="机器IP"> IP </el-descriptions-item>
-            <el-descriptions-item label="所属部门"> dept </el-descriptions-item>
-            <el-descriptions-item label="监控状态"> status </el-descriptions-item>
-            <el-descriptions-item label="系统版本"> macPlatform </el-descriptions-item>
-            <el-descriptions-item label="架构"> mackernel </el-descriptions-item>
-            <el-descriptions-item label="cpu"> macCPU </el-descriptions-item>
-            <el-descriptions-item label="内存"> macMEM </el-descriptions-item>
-            <el-descriptions-item label="内核版本"> osVersion </el-descriptions-item>
-            <!-- <el-descriptions-item :label="item.device" :span="2" v-for="item in diskData" :key="item.$index">
+            <el-descriptions-item label="机器IP"> {{ machineInfo.ip }} </el-descriptions-item>
+            <el-descriptions-item label="所属部门"> {{ machineInfo.department }} </el-descriptions-item>
+            <el-descriptions-item label="监控状态"> {{ machineInfo.state === 1 ? '在线' : machineInfo.state === 2 ? '离线' :
+                'unknown' }} </el-descriptions-item>
+            <el-descriptions-item label="系统版本"> {{ machineInfo.platform + ' ' + machineInfo.platform_version }} </el-descriptions-item>
+            <el-descriptions-item label="架构"> {{ machineInfo.kernel_arch }} </el-descriptions-item>
+            <el-descriptions-item label="cpu"> {{ machineInfo.cpu_num + '核 ' + machineInfo.model_name }} </el-descriptions-item>
+            <el-descriptions-item label="内存"> {{ (machineInfo.memory_total / 1024 / 1024).toFixed(2) + 'G' }} </el-descriptions-item>
+            <el-descriptions-item label="内核版本"> {{ machineInfo.kernel_version }} </el-descriptions-item>
+            <el-descriptions-item :label="item.device" :span="2" v-for="item in machineInfo.disk_usage" :key="item.$index">
                 <span class="diskMount">{{ "挂载点：" + item.path + "(" + item.total + ")" }}</span>
                 <p class="progress">
                     <span :style="{ width: item.used_percent }">{{ item.used_percent }}</span>
                 </p>
-            </el-descriptions-item> -->
+            </el-descriptions-item>
         </el-descriptions>
     </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from 'element-plus';
+import { useRoute } from 'vue-router'
+
+import { getMachineOverview } from "@/request/cluster";
+import { RespCodeOK } from "@/request/request";
+
+const route = useRoute()
+
+const machineID = ref(route.params.uuid)
+
+const machineInfo = ref<any>({})
+
+onMounted(() => {
+    getMachineOverview({
+        uuid: machineID.value
+    }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            machineInfo.value = resp.data
+        } else {
+            ElMessage.error("failed to get machines overview info: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get machines overview info:" + err.msg)
+    })
+})
 
 </script>
 
-- 
Gitee