From 0775a815107ffee638bb746d7f60daa7c05674ab Mon Sep 17 00:00:00 2001
From: handsomewu <562390063@qq.com>
Date: Thu, 14 Nov 2024 00:23:58 +0800
Subject: [PATCH] add yaml editor in pod and service deploy page

---
 package.json                 |  1 +
 src/views/deploy/app.vue     | 37 +++++++++++++++++++++++-
 src/views/deploy/service.vue | 55 +++++++++++++++++++++++++++++++++++-
 3 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 57912ffe..aaa3fd66 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",
+    "js-yaml": "^4.1.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
     "normalize.css": "7.0.0",
diff --git a/src/views/deploy/app.vue b/src/views/deploy/app.vue
index e086cd00..8ead89db 100644
--- a/src/views/deploy/app.vue
+++ b/src/views/deploy/app.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="dashboard-editor-container">
+    <el-button class="edit-yaml-button" type="primary" @click="openYamlEditorDialog">编辑 YAML</el-button>
     <el-table :data="tableData" border style="width: 100%">
       <el-table-column prop="cluster" label="Cluster" />
       <el-table-column prop="namespace" label="Namespace" />
@@ -11,6 +12,25 @@
       <el-table-column prop="restarts" label="Restarts" />
       <el-table-column prop="age" label="Age" />
     </el-table>
+    <!-- YAML 编辑器弹框 -->
+    <el-dialog
+      title="编辑 YAML"
+      :visible.sync="yamlEditorVisible"
+      width="50%"
+      @close="closeYamlEditorDialog"
+    >
+      <div class="editor-container">
+        <textarea
+          v-model="yamlContent"
+          style="width: 100%; height: 400px;"
+          placeholder="编辑 YAML 内容"
+        />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeYamlEditorDialog">取消</el-button>
+        <el-button type="primary" @click="saveYamlChanges">部署</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -20,7 +40,9 @@ export default {
   name: 'DashboardAdmin',
   data() {
     return {
-      tableData: [] // 初始为空数组，将在 mounted 时获取数据
+      tableData: [], // 初始为空数组，将在 mounted 时获取数据
+      yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
+      yamlContent: '' // YAML 编辑器中的内容
     }
   },
   mounted() {
@@ -56,6 +78,19 @@ export default {
           }))
         })
         .catch(error => console.error('Error fetching table data:', error))
+    },
+    openYamlEditorDialog() {
+      // 打开 YAML 编辑器弹框
+      this.yamlEditorVisible = true
+    },
+    closeYamlEditorDialog() {
+      // 关闭 YAML 编辑器弹框
+      this.yamlEditorVisible = false
+    },
+    saveYamlChanges() {
+      // 保存 YAML 数据，无需转换为 JSON
+      console.log('保存的 YAML 数据:', this.yamlContent)
+      this.closeYamlEditorDialog() // 关闭弹框
     }
   }
 }
diff --git a/src/views/deploy/service.vue b/src/views/deploy/service.vue
index 34b03095..41f013a4 100644
--- a/src/views/deploy/service.vue
+++ b/src/views/deploy/service.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="dashboard-editor-container">
+    <!-- 左上角的按钮 -->
+    <el-button class="edit-yaml-button" type="primary" @click="openYamlEditorDialog">编辑 YAML</el-button>
+
+    <!-- 表格展示 -->
     <el-table :data="tableData" border style="width: 100%" :fit="true">
       <el-table-column prop="cluster" label="Cluster" />
       <el-table-column prop="namespace" label="Namespace" />
@@ -10,16 +14,39 @@
       <el-table-column prop="ports" label="Ports" />
       <el-table-column prop="age" label="Age" />
     </el-table>
+
+    <!-- YAML 编辑器弹框 -->
+    <el-dialog
+      title="编辑 YAML"
+      :visible.sync="yamlEditorVisible"
+      width="50%"
+      @close="closeYamlEditorDialog"
+    >
+      <div class="editor-container">
+        <textarea
+          v-model="yamlContent"
+          style="width: 100%; height: 400px;"
+          placeholder="编辑 YAML 内容"
+        />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeYamlEditorDialog">取消</el-button>
+        <el-button type="primary" @click="saveYamlChanges">部署</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { API_URL } from '@/config/APIconfig'
+
 export default {
   name: 'DashboardAdmin',
   data() {
     return {
-      tableData: [] // 初始为空数组，将在 mounted 时获取数据
+      tableData: [], // 初始为空数组，将在 mounted 时获取数据
+      yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
+      yamlContent: '' // YAML 编辑器中的内容
     }
   },
   mounted() {
@@ -52,8 +79,24 @@ export default {
             ports: service['PORT(S)'],
             age: service.AGE
           }))
+
+          // 转换为 YAML 格式
+          // this.yamlContent = yaml.dump(combinedData)
         })
         .catch(error => console.error('Error fetching table data:', error))
+    },
+    openYamlEditorDialog() {
+      // 打开 YAML 编辑器弹框
+      this.yamlEditorVisible = true
+    },
+    closeYamlEditorDialog() {
+      // 关闭 YAML 编辑器弹框
+      this.yamlEditorVisible = false
+    },
+    saveYamlChanges() {
+      // 保存 YAML 数据，无需转换为 JSON
+      console.log('保存的 YAML 数据:', this.yamlContent)
+      this.closeYamlEditorDialog() // 关闭弹框
     }
   }
 }
@@ -65,6 +108,11 @@ export default {
     background-color: rgb(240, 242, 245);
     position: relative;
 
+    .edit-yaml-button {
+      top: 16px;
+      left: 16px;
+    }
+
     .github-corner {
       position: absolute;
       top: 0px;
@@ -79,6 +127,11 @@ export default {
     }
   }
 
+  .editor-container {
+    position: relative;
+    height: 100%;
+  }
+
   @media (max-width:1024px) {
     .chart-wrapper {
       padding: 8px;