From 914bca2d9184cf5c8b721b7cf6b6625be62e679d Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Tue, 28 Nov 2023 11:31:13 +0800
Subject: [PATCH] add machine package panel

---
 .../src/views/Cluster/MachineDetail/Index.vue |  3 +-
 .../views/Cluster/MachineDetail/Package.vue   | 60 +++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/Cluster/MachineDetail/Package.vue

diff --git a/frontend/src/views/Cluster/MachineDetail/Index.vue b/frontend/src/views/Cluster/MachineDetail/Index.vue
index 7a5f3a2..5b5549b 100644
--- a/frontend/src/views/Cluster/MachineDetail/Index.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Index.vue
@@ -16,7 +16,7 @@
             <el-tab-pane name="systl" label="内核参数">
                 <Sysctl />
             </el-tab-pane>
-            <el-tab-pane name="npm" label="软件包"> 软件包 </el-tab-pane>
+            <el-tab-pane name="npm" label="软件包"> <Package /> </el-tab-pane>
             <el-tab-pane name="terminal" label="远程终端"> 远程终端 </el-tab-pane>
         </el-tabs>
     </div>
@@ -30,6 +30,7 @@ import User from "./User.vue";
 import Service from "./Service.vue";
 import Network from "./Network.vue";
 import Sysctl from "./Sysctl.vue";
+import Package from "./Package.vue";
 
 const activePane = ref("base")
 
diff --git a/frontend/src/views/Cluster/MachineDetail/Package.vue b/frontend/src/views/Cluster/MachineDetail/Package.vue
new file mode 100644
index 0000000..f055f3a
--- /dev/null
+++ b/frontend/src/views/Cluster/MachineDetail/Package.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="content">
+        <div class="repo">
+            <el-table :data="totalRepo">
+                <el-table-column prop="File" label="文件"></el-table-column>
+                <el-table-column prop="Enabled" label="enabled"></el-table-column>
+                <el-table-column prop="URL" label="repo地址"></el-table-column>
+            </el-table>
+        </div>
+        <div class="packages">
+            <el-autocomplete style="width:30%" class="inline-input" v-model="packageName"
+                placeholder="请输入内容"></el-autocomplete>
+            <auth-button name="default_all">搜索</auth-button>
+            <auth-button auth="showOperate" name="rpm_install">安装</auth-button>
+            <auth-button auth="showOperate" name="rpm_uninstall">卸载</auth-button>
+        </div>
+        <div class="info">
+            <div class="detail" v-if="display">
+                <p class="title">软件包详情：</p>
+                <el-descriptions :column="3" border>
+                    <el-descriptions-item label="软件包名">{{ rpmInfo.Name }}</el-descriptions-item>
+                    <el-descriptions-item label="Version">{{ rpmInfo.Version }}</el-descriptions-item>
+                    <el-descriptions-item label="Release">{{ rpmInfo.Release }}</el-descriptions-item>
+                    <el-descriptions-item label="Architecture">{{ rpmInfo.Architecture }}</el-descriptions-item>
+                    <el-descriptions-item label="说明">{{ rpmInfo.Summary }}</el-descriptions-item>
+                </el-descriptions>
+            </div>
+            <div class="result" v-else>
+                <p class="title">执行结果：</p>
+                <el-descriptions :column="2" border>
+                    <el-descriptions-item label="软件包名">{{ packageName }}</el-descriptions-item>
+                    <el-descriptions-item label="执行动作">{{ action }}</el-descriptions-item>
+                    <el-descriptions-item label="结果">
+                        {{ result + ":" }}
+                        <p class="progress" v-show="result != ''">
+                            <span
+                                :style="{ background: result === '成功' ? 'rgb(109, 123, 172)' : 'rgb(223, 96, 88)' }">100%</span>
+                        </p>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+import AuthButton from "@/components/AuthButton.vue";
+
+const display = ref(false)
+const packageName = ref("")
+const totalRepo = ref([])
+const rpmInfo = ref<any>({})
+const action = ref("")
+const result = ref("")
+
+</script>
+
+<style lang="scss"></style>
\ No newline at end of file
-- 
Gitee