From a4be6f26afb5a89790ee884eaad646adc94460c6 Mon Sep 17 00:00:00 2001
From: handsomewu <562390063@qq.com>
Date: Wed, 13 Nov 2024 23:52:38 +0800
Subject: [PATCH 1/2] update service and pod page

---
 src/views/deploy/app.vue     | 89 ++++++++++++++++++++++++++++++++++++
 src/views/deploy/service.vue | 87 +++++++++++++++++++++++++++++++++++
 2 files changed, 176 insertions(+)

diff --git a/src/views/deploy/app.vue b/src/views/deploy/app.vue
index e69de29b..e086cd00 100644
--- a/src/views/deploy/app.vue
+++ b/src/views/deploy/app.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="dashboard-editor-container">
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="cluster" label="Cluster" />
+      <el-table-column prop="namespace" label="Namespace" />
+      <el-table-column prop="name" label="Name" />
+      <el-table-column prop="status" label="Status" />
+      <el-table-column prop="ip" label="IP" />
+      <el-table-column prop="node" label="Node" />
+      <el-table-column prop="ready" label="Ready" />
+      <el-table-column prop="restarts" label="Restarts" />
+      <el-table-column prop="age" label="Age" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { API_URL } from '@/config/APIconfig'
+export default {
+  name: 'DashboardAdmin',
+  data() {
+    return {
+      tableData: [] // 初始为空数组，将在 mounted 时获取数据
+    }
+  },
+  mounted() {
+    this.fetchTableData() // 页面加载时调用数据请求方法
+  },
+  methods: {
+    fetchTableData() {
+      fetch(API_URL + '/pod/show', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          // 假设 data 是包含 cluster_a 和 cluster_b 的结构，结合两者数据
+          const combinedData = [
+            ...data.cluster_a.map(item => ({ ...item, cluster: 'Cluster A' })),
+            ...data.cluster_b.map(item => ({ ...item, cluster: 'Cluster B' }))
+          ]
+
+          // 将 JSON 数据转换为表格所需格式
+          this.tableData = combinedData.map(node => ({
+            cluster: node.cluster,
+            namespace: node.NAMESPACE,
+            name: node.NAME,
+            status: node.STATUS,
+            ip: node.IP,
+            node: node.NODE,
+            ready: node.READY,
+            restarts: node.RESTARTS,
+            age: node.AGE
+          }))
+        })
+        .catch(error => console.error('Error fetching table data:', error))
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+  .dashboard-editor-container {
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .github-corner {
+      position: absolute;
+      top: 0px;
+      border: 0;
+      right: 0;
+    }
+
+    .chart-wrapper {
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+    }
+  }
+
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
+  }
+  </style>
diff --git a/src/views/deploy/service.vue b/src/views/deploy/service.vue
index e69de29b..34b03095 100644
--- a/src/views/deploy/service.vue
+++ b/src/views/deploy/service.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="dashboard-editor-container">
+    <el-table :data="tableData" border style="width: 100%" :fit="true">
+      <el-table-column prop="cluster" label="Cluster" />
+      <el-table-column prop="namespace" label="Namespace" />
+      <el-table-column prop="name" label="Name" />
+      <el-table-column prop="type" label="Type" />
+      <el-table-column prop="clusterIp" label="Cluster IP" />
+      <el-table-column prop="externalIp" label="External IP" />
+      <el-table-column prop="ports" label="Ports" />
+      <el-table-column prop="age" label="Age" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { API_URL } from '@/config/APIconfig'
+export default {
+  name: 'DashboardAdmin',
+  data() {
+    return {
+      tableData: [] // 初始为空数组，将在 mounted 时获取数据
+    }
+  },
+  mounted() {
+    this.fetchTableData() // 页面加载时调用数据请求方法
+  },
+  methods: {
+    fetchTableData() {
+      fetch(API_URL + '/service/show', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          // 假设 data 是包含 cluster_a 和 cluster_b 的结构，结合两者数据
+          const combinedData = [
+            ...data.cluster_a.map(item => ({ ...item, cluster: 'Cluster A' })),
+            ...data.cluster_b.map(item => ({ ...item, cluster: 'Cluster B' }))
+          ]
+
+          // 将 JSON 数据转换为表格所需格式
+          this.tableData = combinedData.map(service => ({
+            cluster: service.cluster,
+            namespace: service.NAMESPACE,
+            name: service.NAME,
+            type: service.TYPE,
+            clusterIp: service['CLUSTER-IP'],
+            externalIp: service['EXTERNAL-IP'],
+            ports: service['PORT(S)'],
+            age: service.AGE
+          }))
+        })
+        .catch(error => console.error('Error fetching table data:', error))
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+  .dashboard-editor-container {
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .github-corner {
+      position: absolute;
+      top: 0px;
+      border: 0;
+      right: 0;
+    }
+
+    .chart-wrapper {
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+    }
+  }
+
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
+  }
+  </style>

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 2/2] 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;