From e4736f38b5113dbea3e11545a0327f7e300ab2ec Mon Sep 17 00:00:00 2001
From: handsomewu <562390063@qq.com>
Date: Thu, 14 Nov 2024 13:51:26 +0800
Subject: [PATCH] connect to backend

---
 src/views/deploy/app.vue     | 112 +++++++++++++++++++-----------
 src/views/deploy/service.vue | 128 +++++++++++++++++++++++------------
 2 files changed, 158 insertions(+), 82 deletions(-)

diff --git a/src/views/deploy/app.vue b/src/views/deploy/app.vue
index 8ead89db..00f6dc07 100644
--- a/src/views/deploy/app.vue
+++ b/src/views/deploy/app.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="dashboard-editor-container">
+  <div v-loading="loading" 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 :data="tableData" border style="width: 100%" height="800">
       <el-table-column prop="cluster" label="Cluster" />
       <el-table-column prop="namespace" label="Namespace" />
       <el-table-column prop="name" label="Name" />
@@ -13,18 +13,9 @@
       <el-table-column prop="age" label="Age" />
     </el-table>
     <!-- YAML 编辑器弹框 -->
-    <el-dialog
-      title="编辑 YAML"
-      :visible.sync="yamlEditorVisible"
-      width="50%"
-      @close="closeYamlEditorDialog"
-    >
+    <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 内容"
-        />
+        <textarea v-model="yamlContent" style="width: 100%; height: 400px;" placeholder="编辑 YAML 内容" />
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="closeYamlEditorDialog">取消</el-button>
@@ -42,7 +33,8 @@ export default {
     return {
       tableData: [], // 初始为空数组，将在 mounted 时获取数据
       yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
-      yamlContent: '' // YAML 编辑器中的内容
+      yamlContent: '', // YAML 编辑器中的内容
+      loading: false
     }
   },
   mounted() {
@@ -88,37 +80,81 @@ export default {
       this.yamlEditorVisible = false
     },
     saveYamlChanges() {
-      // 保存 YAML 数据，无需转换为 JSON
       console.log('保存的 YAML 数据:', this.yamlContent)
-      this.closeYamlEditorDialog() // 关闭弹框
+      this.loading = true
+      fetch(API_URL + '/pod/deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          yaml: this.yamlContent // 将 YAML 内容作为请求体中的 "yaml" 字段
+        })
+      })
+        .then(response => {
+          console.log('meme')
+          if (!response.ok) {
+            throw new Error('请求失败，状态码: ' + response.status)
+          }
+          return response.json() // 将响应解析为 JSON
+        })
+        .then(data => {
+          // 处理后端返回的数据
+          console.log('后端响应数据:', data)
+          if (!data.error) {
+            console.log('部署输出:', data.stdout)
+            this.$notify({
+              title: '调度成功',
+              message: '该应用已被调度到集群' + data.dst + '上\n' + data.stdout,
+              type: 'success'
+            })
+          } else if (data.error) {
+            console.error('部署错误:', data.error)
+            this.$notify.error({
+              title: '调度失败',
+              message: '调度失败'
+            })
+          }
+
+          this.fetchTableData()
+          this.loading = false
+        })
+        .catch(error => {
+          // 处理请求或解析中的任何错误
+          console.error('请求出错:', error)
+        })
+        .finally(() => {
+          this.closeYamlEditorDialog() // 关闭弹框
+        })
     }
+
   }
 }
 </script>
 
-  <style lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 32px;
-    background-color: rgb(240, 242, 245);
-    position: relative;
+<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;
-    }
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
   }
 
-  @media (max-width:1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
   }
-  </style>
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>
diff --git a/src/views/deploy/service.vue b/src/views/deploy/service.vue
index 41f013a4..c0602111 100644
--- a/src/views/deploy/service.vue
+++ b/src/views/deploy/service.vue
@@ -16,18 +16,12 @@
     </el-table>
 
     <!-- YAML 编辑器弹框 -->
-    <el-dialog
-      title="编辑 YAML"
-      :visible.sync="yamlEditorVisible"
-      width="50%"
-      @close="closeYamlEditorDialog"
-    >
+    <el-dialog title="编辑 YAML" :visible.sync="yamlEditorVisible" width="50%" @close="closeYamlEditorDialog">
+      <el-select v-model="value" placeholder="请选择">
+        <el-option v-for="item in ['a','b']" :key="item" :label="item" :value="item" />
+      </el-select>
       <div class="editor-container">
-        <textarea
-          v-model="yamlContent"
-          style="width: 100%; height: 400px;"
-          placeholder="编辑 YAML 内容"
-        />
+        <textarea v-model="yamlContent" style="width: 100%; height: 400px;" placeholder="编辑 YAML 内容" />
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="closeYamlEditorDialog">取消</el-button>
@@ -46,7 +40,9 @@ export default {
     return {
       tableData: [], // 初始为空数组，将在 mounted 时获取数据
       yamlEditorVisible: false, // 控制 YAML 编辑器弹框的显示
-      yamlContent: '' // YAML 编辑器中的内容
+      yamlContent: '', // YAML 编辑器中的内容
+      loading: false,
+      value: ''
     }
   },
   mounted() {
@@ -94,47 +90,91 @@ export default {
       this.yamlEditorVisible = false
     },
     saveYamlChanges() {
-      // 保存 YAML 数据，无需转换为 JSON
       console.log('保存的 YAML 数据:', this.yamlContent)
-      this.closeYamlEditorDialog() // 关闭弹框
+      console.log(this.value)
+      this.loading = true
+      fetch(API_URL + '/service/deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          dst: this.value,
+          yaml: this.yamlContent // 将 YAML 内容作为请求体中的 "yaml" 字段
+        })
+      })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('请求失败，状态码: ' + response.status)
+          }
+          return response.json() // 将响应解析为 JSON
+        })
+        .then(data => {
+          // 处理后端返回的数据
+          console.log('后端响应数据:', data)
+          if (!data.error) {
+            console.log('部署输出:', data.stdout)
+            this.$notify({
+              title: '调度成功',
+              message: '该服务已被部署到集群' + this.value + '上\n' + data.stdout,
+              type: 'success'
+            })
+          } else if (data.error) {
+            console.error('部署错误:', data.error)
+            this.$notify.error({
+              title: '调度失败',
+              message: '调度失败'
+            })
+          }
+
+          this.fetchTableData()
+          this.loading = false
+        })
+        .catch(error => {
+          // 处理请求或解析中的任何错误
+          console.error('请求出错:', error)
+        })
+        .finally(() => {
+          this.closeYamlEditorDialog() // 关闭弹框
+        })
     }
   }
 }
 </script>
 
-  <style lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 32px;
-    background-color: rgb(240, 242, 245);
-    position: relative;
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
 
-    .edit-yaml-button {
-      top: 16px;
-      left: 16px;
-    }
-
-    .github-corner {
-      position: absolute;
-      top: 0px;
-      border: 0;
-      right: 0;
-    }
-
-    .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px 0;
-      margin-bottom: 32px;
-    }
+  .edit-yaml-button {
+    top: 16px;
+    left: 16px;
   }
 
-  .editor-container {
-    position: relative;
-    height: 100%;
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
   }
 
-  @media (max-width:1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
   }
-  </style>
+}
+
+.editor-container {
+  position: relative;
+  height: 100%;
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>