From b0742df32193a2a5f3e90d500f85a74f0d045e27 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Thu, 30 Nov 2023 15:12:44 +0800
Subject: [PATCH] support service search and display info

---
 .../views/Cluster/MachineDetail/Service.vue   | 163 ++++++++++------
 .../src/views/Cluster/MachineDetail/User.vue  | 184 +++++++++---------
 2 files changed, 197 insertions(+), 150 deletions(-)

diff --git a/frontend/src/views/Cluster/MachineDetail/Service.vue b/frontend/src/views/Cluster/MachineDetail/Service.vue
index 6cecec5..bc1bfba 100644
--- a/frontend/src/views/Cluster/MachineDetail/Service.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Service.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="content">
         <div class="services">
-            <el-autocomplete style="width:50%" class="inline-input" v-model="serviceName"
-                placeholder="请输入服务名称"></el-autocomplete>
+            <el-autocomplete style="width:50%" class="inline-input" v-model="searchName"
+                :fetch-suggestions="querySuggestions" @select="onSelectService" placeholder="请输入服务名称"></el-autocomplete>
             <el-button plain type="primary">搜索</el-button>
             <el-button plain type="primary">启动</el-button>
             <el-button plain type="primary">停止</el-button>
@@ -12,10 +12,10 @@
             <div class="detail" v-if="display">
                 <p class="title">服务详情：</p>
                 <el-descriptions :column="2" border>
-                    <el-descriptions-item label="服务名"> Name </el-descriptions-item>
-                    <el-descriptions-item label="状态"> Active </el-descriptions-item>
-                    <el-descriptions-item label="模块是否加载"> LOAD </el-descriptions-item>
-                    <el-descriptions-item label="SUB"> SUB </el-descriptions-item>
+                    <el-descriptions-item label="服务名"> {{ serviceInfo.Name }} </el-descriptions-item>
+                    <el-descriptions-item label="状态"> {{ serviceInfo.Active }} </el-descriptions-item>
+                    <el-descriptions-item label="模块是否加载"> {{ serviceInfo.LOAD }} </el-descriptions-item>
+                    <el-descriptions-item label="SUB"> {{ serviceInfo.SUB }} </el-descriptions-item>
                 </el-descriptions>
             </div>
             <div class="result" v-else>
@@ -36,69 +36,116 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus';
 
-const serviceName = ref("")
+import { getServiceList } from "@/request/cluster";
+import { RespCodeOK } from "@/request/request";
+
+const route = useRoute()
+
+// 机器UUID
+const machineID = ref(route.params.uuid)
+const allService = ref<any[]>([])
+
+const serviceInfo = ref<any>({})
 
 const display = ref(true)
 const result = ref("")
 
+
+onMounted(() => {
+    getServiceList({ uuid: machineID.value }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            allService.value = resp.data.service_list
+        } else {
+            ElMessage.error("failed to get machine service info: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get machine service info:" + err.msg)
+    })
+})
+
+const searchName = ref("")
+
+function querySuggestions(query: string, callback: Function) {
+    let result: any[] = []
+
+    allService.value.forEach((item: any) => {
+        if (item.Name.indexOf(query) === 0) {
+            result.push({
+                "value": item.Name,
+            })
+        }
+    })
+    callback(result)
+}
+
+function onSelectService(name: any) {
+    allService.value.forEach((item: any) => {
+        if (item.Name === name.value) {
+            serviceInfo.value = item
+        }
+    })
+}
+
 </script>
 <style lang="scss" scoped>
 .content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-
-  .services {
-    width: 98%;
-  }
-
-  .info {
-    width: 98%;
-    flex: 1;
-
-    .detail {
-      width: 100%;
-      height: 100%;
-
-      .title {
-        width: 30%;
-        margin: 2% 0;
-      }
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+
+    .services {
+        width: 98%;
     }
 
-    .result {
-      width: 100%;
-      height: 100%;
-
-      .title {
-        width: 30%;
-        margin: 2% 0;
-      }
-
-      .progress {
-        display: inline-block;
-        width: 74%;
-        margin-left: 2%;
-        border: 1px solid rgba(11, 35, 117, .5);
-        background: #fff;
-        border-radius: 10px;
-        text-align: left;
-
-        span {
-          display: inline-block;
-          text-align: center;
-          color: #fff;
-          width: 100%;
-          border: 1px solid #fff;
-          border-radius: 10px;
+    .info {
+        width: 98%;
+        flex: 1;
+
+        .detail {
+            width: 100%;
+            height: 100%;
+
+            .title {
+                width: 30%;
+                margin: 2% 0;
+            }
+        }
+
+        .result {
+            width: 100%;
+            height: 100%;
+
+            .title {
+                width: 30%;
+                margin: 2% 0;
+            }
+
+            .progress {
+                display: inline-block;
+                width: 74%;
+                margin-left: 2%;
+                border: 1px solid rgba(11, 35, 117, .5);
+                background: #fff;
+                border-radius: 10px;
+                text-align: left;
+
+                span {
+                    display: inline-block;
+                    text-align: center;
+                    color: #fff;
+                    width: 100%;
+                    border: 1px solid #fff;
+                    border-radius: 10px;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Cluster/MachineDetail/User.vue b/frontend/src/views/Cluster/MachineDetail/User.vue
index 9d8c96c..4e713ae 100644
--- a/frontend/src/views/Cluster/MachineDetail/User.vue
+++ b/frontend/src/views/Cluster/MachineDetail/User.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="content">
-    <div class="users">
-      <div class="current">
-        当前用户： {{ currentUser.Username }}
-      </div>
-      <div class="search">
-        <el-autocomplete style="width:50%" class="inline-input" v-model="userName" placeholder="请输入用户名"
-          :fetch-suggestions="querySearch" @select="onSelectUser"></el-autocomplete>
-        <el-button plain type="primary">搜索</el-button>
-      </div>
+    <div class="content">
+        <div class="users">
+            <div class="current">
+                当前用户： {{ currentUser.Username }}
+            </div>
+            <div class="search">
+                <el-autocomplete style="width:50%" class="inline-input" v-model="userName" placeholder="请输入用户名"
+                    :fetch-suggestions="querySuggestions" @select="onSelectUser"></el-autocomplete>
+                <el-button plain type="primary">搜索</el-button>
+            </div>
+        </div>
+        <div class="info">
+            <p class="title">用户信息详情：</p>
+            <el-descriptions :column="3" border>
+                <el-descriptions-item label="用户名"> {{ userInfo.Username }} </el-descriptions-item>
+                <el-descriptions-item label="用户ID"> {{ userInfo.UserId }} </el-descriptions-item>
+                <el-descriptions-item label="用户组ID"> {{ userInfo.GroupId }} </el-descriptions-item>
+                <el-descriptions-item label="家目录"> {{ userInfo.HomeDir }} </el-descriptions-item>
+                <el-descriptions-item label="shell类型"> {{ userInfo.ShellType }} </el-descriptions-item>
+                <el-descriptions-item label="描述"> {{ userInfo.Description }} </el-descriptions-item>
+            </el-descriptions>
+        </div>
     </div>
-    <div class="info">
-      <p class="title">用户信息详情：</p>
-      <el-descriptions :column="3" border>
-        <el-descriptions-item label="用户名"> {{ userInfo.Username }} </el-descriptions-item>
-        <el-descriptions-item label="用户ID"> {{ userInfo.UserId }} </el-descriptions-item>
-        <el-descriptions-item label="用户组ID"> {{ userInfo.GroupId }} </el-descriptions-item>
-        <el-descriptions-item label="家目录"> {{ userInfo.HomeDir }} </el-descriptions-item>
-        <el-descriptions-item label="shell类型"> {{ userInfo.ShellType }} </el-descriptions-item>
-        <el-descriptions-item label="描述"> {{ userInfo.Description }} </el-descriptions-item>
-      </el-descriptions>
-    </div>
-  </div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
@@ -43,97 +43,97 @@ const currentUser = ref<any>({})
 const userInfo = ref<any>({})
 
 onMounted(() => {
-  getMachineAllUser({ uuid: machineID.value }).then((resp: any) => {
-    if (resp.code === RespCodeOK) {
-      allUser.value = resp.data.user_all
-
-      // 嵌套调用，避免两者请求不同步
-      getCurrentUser({ uuid: machineID.value }).then((resp: any) => {
+    getMachineAllUser({ uuid: machineID.value }).then((resp: any) => {
         if (resp.code === RespCodeOK) {
-          currentUser.value = resp.data.user_info
+            allUser.value = resp.data.user_all
+
+            // 嵌套调用，避免两者请求不同步
+            getCurrentUser({ uuid: machineID.value }).then((resp: any) => {
+                if (resp.code === RespCodeOK) {
+                    currentUser.value = resp.data.user_info
+
+                    userInfo.value = allUser.value.filter((item: any) => item.Username === currentUser.value.Username)[0];
+                } else {
+                    ElMessage.error("failed to get current machine user info: " + resp.msg)
+                }
+            }).catch((err: any) => {
+                ElMessage.error("failed to get current machine user info:" + err.msg)
+            })
 
-          userInfo.value = allUser.value.filter((item: any) => item.Username === currentUser.value.Username)[0];
         } else {
-          ElMessage.error("failed to get current machine user info: " + resp.msg)
+            ElMessage.error("failed to get machine users info: " + resp.msg)
         }
-      }).catch((err: any) => {
-        ElMessage.error("failed to get current machine user info:" + err.msg)
-      })
-
-    } else {
-      ElMessage.error("failed to get machine users info: " + resp.msg)
-    }
-  }).catch((err: any) => {
-    ElMessage.error("failed to get machine users info:" + err.msg)
-  })
+    }).catch((err: any) => {
+        ElMessage.error("failed to get machine users info:" + err.msg)
+    })
 })
 
-function querySearch(query: string, callback: Function) {
-  let result: any[] = []
+function querySuggestions(query: string, callback: Function) {
+    let result: any[] = []
 
-  allUser.value.forEach((item: any) => {
-    if (item.Username.indexOf(query) === 0) {
-      result.push({ "value": item.Username })
-    }
-  })
-  callback(result)
+    allUser.value.forEach((item: any) => {
+        if (item.Username.indexOf(query) === 0) {
+            result.push({ "value": item.Username })
+        }
+    })
+    callback(result)
 }
 
 function onSelectUser(name: any) {
-  allUser.value.forEach((item: any) => {
-    if (item.Username === name.value) {
-      userInfo.value = item
-    }
-  })
+    allUser.value.forEach((item: any) => {
+        if (item.Username === name.value) {
+            userInfo.value = item
+        }
+    })
 }
 
 </script>
 <style lang="scss" scoped>
 .content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .users {
     width: 100%;
-    height: 20%;
+    height: 100%;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .current {
-      width: 20%;
-      height: 100%;
-      font-weight: bold;
-      color: rgb(92, 85, 85);
-      border: 1px solid rgb(236, 235, 255);
-      background: rgb(236, 235, 255);
-      border-radius: 10px;
-      display: flex;
-      align-items: center;
-
-      svg {
-        width: 36%;
-        height: 100%;
-      }
-    }
+    flex-direction: column;
+
+    .users {
+        width: 100%;
+        height: 20%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .current {
+            width: 20%;
+            height: 100%;
+            font-weight: bold;
+            color: rgb(92, 85, 85);
+            border: 1px solid rgb(236, 235, 255);
+            background: rgb(236, 235, 255);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+
+            svg {
+                width: 36%;
+                height: 100%;
+            }
+        }
 
-    .search {
-      width: 70%;
+        .search {
+            width: 70%;
+        }
     }
-  }
 
-  .info {
-    width: 100%;
-    height: 80%;
-    display: flex;
-    flex-direction: column;
+    .info {
+        width: 100%;
+        height: 80%;
+        display: flex;
+        flex-direction: column;
 
-    .title {
-      width: 30%;
-      margin: 2% 0;
+        .title {
+            width: 30%;
+            margin: 2% 0;
+        }
     }
-  }
 }
 </style>
\ No newline at end of file
-- 
Gitee