From 8866dd136d0cd08b6790d2a4ca7affe3bf57100d Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Fri, 1 Dec 2023 11:38:30 +0800
Subject: [PATCH] support sysctl config search and display

---
 .../views/Cluster/MachineDetail/Sysctl.vue    | 58 ++++++++++++++++---
 1 file changed, 50 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/Cluster/MachineDetail/Sysctl.vue b/frontend/src/views/Cluster/MachineDetail/Sysctl.vue
index 221491d..597a86a 100644
--- a/frontend/src/views/Cluster/MachineDetail/Sysctl.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Sysctl.vue
@@ -1,17 +1,16 @@
 <template>
     <div class="content">
         <div class="services">
-            <el-autocomplete style="width:50%" class="inline-input" v-model="sysctlName"
-                placeholder="请输入内核名称"></el-autocomplete>
-            <el-button plain type="primary">搜索</el-button>
+            <el-autocomplete style="width:50%; margin-right: 10px;" class="inline-input" v-model="sysctlName" placeholder="请输入内核名称"
+                :fetch-suggestions="querySuggestions" @select="onSelectConfig"></el-autocomplete>
             <el-button plain type="primary" :disabled="!sysctlName">修改</el-button>
         </div>
         <div class="info">
             <div class="detail" v-if="display">
-                <p class="title">内核详情：</p>
+                <p class="title">内核参数详情：</p>
                 <el-descriptions :column="2" border>
-                    <el-descriptions-item label="内核名">{{ sysctlInfo.Name }}</el-descriptions-item>
-                    <el-descriptions-item label="参数">{{ sysctlInfo.sysNum }}</el-descriptions-item>
+                    <el-descriptions-item label="内核名">{{ sysctlInfo.name }}</el-descriptions-item>
+                    <el-descriptions-item label="参数">{{ sysctlInfo.value }}</el-descriptions-item>
 
                 </el-descriptions>
             </div>
@@ -33,14 +32,57 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { ElMessage } from 'element-plus';
+import { useRoute } from 'vue-router'
+
+import { getSysctlInfo } from "@/request/cluster";
+import { RespCodeOK } from "@/request/request";
+
+const route = useRoute()
+const machineID = ref(route.params.uuid)
 
-const display = ref(false)
 const sysctlName = ref("")
+const allSysctlInfo = ref<any>({})
 const sysctlInfo = ref<any>({})
+
+const display = ref(true)
 const action = ref("")
 const result = ref("")
 
 
+onMounted(() => {
+    getSysctlInfo({
+        uuid: machineID.value
+    }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            allSysctlInfo.value = resp.data.sysctl_info
+
+        } else {
+            ElMessage.error("failed to get machines sysctl info: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get machines sysctl info:" + err.msg)
+    })
+})
+
+function querySuggestions(query: string, callback: Function) {
+    let result: any[] = []
+
+    for (const key in allSysctlInfo.value) {
+        if (key.indexOf(query) === 0) {
+            result.push({
+                "value": key,
+            })
+        }
+    }
+    callback(result)
+}
+
+function onSelectConfig(name: any) {
+    sysctlInfo.value.name = name.value
+    sysctlInfo.value.value = allSysctlInfo.value[name.value]
+}
+
 </script>
 <style lang="scss" scoped></style>
\ No newline at end of file
-- 
Gitee