From 4a0d007fabdf186329ac51770494147a637861c3 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Fri, 29 Dec 2023 15:17:42 +0800
Subject: [PATCH] support machine maintenance status display

---
 frontend/src/components/StateDot.vue   | 70 ++++++++++++++++++++++----
 frontend/src/views/Batch/Detail.vue    |  2 +-
 frontend/src/views/Cluster/Cluster.vue | 15 ++----
 3 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/StateDot.vue b/frontend/src/components/StateDot.vue
index 9a6f5d2..94f7177 100644
--- a/frontend/src/components/StateDot.vue
+++ b/frontend/src/components/StateDot.vue
@@ -1,8 +1,14 @@
 <template>
     <div>
-        <span class="status-dot" style="background: rgb(82, 196, 26)"></span>
-        <span>
-            {{ stateText }}
+        <span class="status-dot" :class="runDotClass"></span>
+        <span :class="runTextClass">
+            {{ runStateText }}
+        </span>
+    </div>
+    <div>
+        <span class="status-dot" :class="maintDotClass"></span>
+        <span :class="maintTextClass">
+            {{ maintStateText }}
         </span>
     </div>
 </template>
@@ -12,15 +18,37 @@ import { computed } from 'vue';
 
 
 const props = defineProps({
-    state: {
-        type: Number,
-        default: 1,
-    }
+    // 主机运行状态
+    runstatus: {
+        type: String,
+        default: ""
+    },
+    // 主机维护状态
+    maintstatus: {
+        type: String,
+        default: ""
+    },
 })
 
-const stateText = computed(() => {
-    return props.state == 1 ? '在线' : props.state == 3 ? '未分配' : '离线'
+const runDotClass = computed(() => {
+    return props.runstatus === 'online' ? 'online' : props.runstatus === 'offline' ? 'offline' : 'unSet';
+})
+const runTextClass = computed(() => {
+    return props.runstatus === 'online' ? 'onlineText' : props.runstatus === 'offline' ? 'offlineText' : 'unsetText';
+})
+const runStateText = computed(() => {
+    return props.runstatus === 'online' ? '在线' : props.runstatus === 'offline' ? '离线' : '未知';
+})
+const maintDotClass = computed(() => {
+    return props.maintstatus === 'normal' ? 'online' : props.maintstatus === 'maintenance' ? 'unSet' : 'offline';
 })
+const maintTextClass = computed(() => {
+    return props.maintstatus == 'normal' ? 'online' : props.maintstatus === 'maintenance' ? 'unsetText' : 'offlineText';
+})
+const maintStateText = computed(() => {
+    return props.maintstatus == 'normal' ? '正常' : props.maintstatus === 'maintenance' ? '维护中' : '未知';
+})
+
 
 </script>
 <style scoped lang="scss">
@@ -31,4 +59,28 @@ const stateText = computed(() => {
     vertical-align: middle;
     border-radius: 50%;
 }
+
+.online {
+    background: rgb(82, 196, 26);
+}
+
+.onlineText {
+    color: rgb(82, 196, 26);
+}
+
+.offline {
+    background: rgb(128, 128, 128);
+}
+
+.offlineText {
+    color: rgb(128, 128, 128);
+}
+
+.unSet {
+    background: rgb(253, 190, 0);
+}
+
+.unSetText {
+    color: rgb(255, 191, 0);
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Batch/Detail.vue b/frontend/src/views/Batch/Detail.vue
index f533788..3bf920e 100644
--- a/frontend/src/views/Batch/Detail.vue
+++ b/frontend/src/views/Batch/Detail.vue
@@ -35,7 +35,7 @@
             </el-table-column>
             <el-table-column label="状态">
                 <template #default="scope">
-                    <state-dot :state="scope.row.state"></state-dot>
+                    <state-dot :runstatus="scope.row.runstatus" :maintstatus="scope.row.maintstatus"></state-dot>
                 </template>
             </el-table-column>
             <el-table-column prop="sysinfo" label="系统">
diff --git a/frontend/src/views/Cluster/Cluster.vue b/frontend/src/views/Cluster/Cluster.vue
index bc687cb..7a227c0 100644
--- a/frontend/src/views/Cluster/Cluster.vue
+++ b/frontend/src/views/Cluster/Cluster.vue
@@ -9,7 +9,7 @@
         </div>
         <div class="cluster">
             <PGTable :data="machines" title="机器列表" :showSelect="showSelect" :total="total" :currentPage="currentPage"
-            v-model:selectedData="selectedMachines">
+                v-model:selectedData="selectedMachines">
                 <template v-slot:action>
                     <el-dropdown>
                         <el-button type="primary">
@@ -45,14 +45,9 @@
                     </el-table-column>
                     <el-table-column prop="cpu" label="cpu">
                     </el-table-column>
-                    <el-table-column label="运行状态">
+                    <el-table-column label="状态">
                         <template #default="scope">
-                            <state-dot :state="scope.row.state"></state-dot>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="维护状态">
-                        <template #default="scope">
-                            <state-dot :state="scope.row.state"></state-dot>
+                            <state-dot :runstatus="scope.row.runstatus" :maintstatus="scope.row.maintstatus"></state-dot>
                         </template>
                     </el-table-column>
                     <el-table-column prop="tags" label="标签">
@@ -64,7 +59,7 @@
         </div>
 
         <el-dialog title="主机部门变更" v-model="showChangeDepartDialog" destroy-on-close>
-            <change-depart :machines="selectedMachines"/>
+            <change-depart :machines="selectedMachines" />
         </el-dialog>
     </div>
 </template>
@@ -118,7 +113,7 @@ function updateDepartmentMachines(departID: number) {
                 uuids.push(resp.data[i].uuid)
             }
             // let result = resp
-            getMachineTags({ "uuids": uuids }).then((resp:any) => {
+            getMachineTags({ "uuids": uuids }).then((resp: any) => {
                 if (resp.code != 200) {
                     ElMessage.error("failed to get machine tags: " + resp.msg)
                 }
-- 
Gitee