更新 SysUpdate.vue 页面中"系统更新"相关接口

src/api/devops.js

@@ -337,12 +337,24 @@ export function getAppStat(queryInfo) {
   return get(devopsApi.getAppStatList + '/now', queryInfo)
 }
 
+export function addAgentConfig(formData) {
+  return post(devopsApi.getDeployer + '/agent_config/add', formData)
+}
+
+export function deleteAgentConfig(formData) {
+  return post(devopsApi.getDeployer + '/agent_config/delete', formData)
+}
+
+export function getAgentConfigList(queryInfo) {
+  return get(devopsApi.getDeployer + '/agent_config/list', queryInfo)
+}
+
 export function addRemoteHost(formData) {
   return post(devopsApi.getDeployer + '/remote_host/add', formData)
 }
 
 export function deleteRemoteHost(formData) {
-  return post(devopsApi.getDeployer + '/remote_host/add', formData)
+  return post(devopsApi.getDeployer + '/remote_host/delete', formData)
 }
 
 export function getRemoteHostList(queryInfo) {

src/views/devops/sys/SysUpdate.vue

@@ -3,6 +3,7 @@
     <el-header height="220">
       <h3>系统更新</h3>
       <el-row style="margin-top: 10px">
+        <span>节点类型</span>
         <el-select
           v-model="queryInfo.nodeType"
           size="mini"
@@ -13,13 +14,15 @@
           <el-option label="mgr" value="mgr" />
           <el-option label="agent" value="agent" />
         </el-select>
+        <el-button size="mini" type="warning" icon="el-icon-files" style="margin-left: 5px" @click="handleAgentConfig">agent 节点配置列表</el-button>
+        <el-button size="mini" type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="getData">刷新</el-button>
         <el-button size="mini" type="warning" icon="el-icon-plus" style="margin-left: 5px" @click="handleAdd">添加</el-button>
-        <el-button size="mini" type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="handleUpdate">更新</el-button>
+        <el-button size="mini" type="warning" icon="el-icon-upload" style="margin-left: 5px" @click="handleUpdate">更新</el-button>
       </el-row>
     </el-header>
     <el-main>
       <el-row>
-        <el-col :md="16" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-col style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
           <el-table
             :data="dataList"
             border
@@ -32,16 +35,38 @@
             />
             <el-table-column
               prop="host"
-              label="机器地址"
+              label="部署的机器地址"
             />
             <el-table-column
               prop="appDir"
               label="应用目录"
             />
+            <el-table-column
+              prop="remoteAgentConfig.mgrHost"
+              label="连接的 mgr 地址"
+            />
             <el-table-column
               prop="appVersion"
               label="应用版本"
             />
+            <el-table-column
+              prop="updateTime"
+              label="更新时间"
+            />
+            <el-table-column
+              fixed="right"
+              label="操作"
+              width="120"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  style="margin-top: 5px; margin-left: 5px"
+                  size="mini"
+                  type="danger"
+                  @click="handleDelete(scope.$index, scope.row)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
           </el-table>
         </el-col>
       </el-row>
@@ -58,7 +83,7 @@
           <el-form-item label="节点类型" style="width: 70%; padding-right: 2px">
             <el-input v-model="queryInfo.nodeType" style="width: 70%; padding-right: 2px" readonly />
           </el-form-item>
-          <el-form-item label="主机地址">
+          <el-form-item label="部署的机器地址">
             <el-input v-model="addForm.host" style="width: 70%; padding-right: 2px" />
           </el-form-item>
           <el-form-item label="SSH 端口">
@@ -70,49 +95,121 @@
               <el-option label="私钥认证" value="privateKey" />
             </el-select>
           </el-form-item>
-          <div v-if="addForm.authType === 'password'">
-            <el-form-item label="用户名" style="width: 70%; padding-right: 2px">
-              <el-input v-model="addForm.username" style="width: 70%; padding-right: 2px" />
-            </el-form-item>
-            <el-form-item label="密码" style="width: 70%; padding-right: 2px">
-              <el-input v-model="addForm.password" style="width: 70%; padding-right: 2px" />
-            </el-form-item>
-          </div>
-          <div v-else>
-            <el-form-item label="私钥" style="width: 70%; padding-right: 2px">
-              <el-input
-                v-model="addForm.rsaPrikey"
-                type="textarea"
-                maxlength="10000"
-                :rows="10"
-                style="padding: 5px"
-              />
-            </el-form-item>
-          </div>
+          <el-form-item label="用户名" style="width: 70%; padding-right: 2px">
+            <el-input v-model="addForm.username" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item v-if="addForm.authType === 'password'" label="密码" style="width: 70%; padding-right: 2px">
+            <el-input v-model="addForm.password" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item v-else label="私钥" style="width: 70%; padding-right: 2px">
+            <el-input
+              v-model="addForm.privateKey"
+              type="textarea"
+              maxlength="10000"
+              :rows="10"
+              style="padding: 5px"
+            />
+          </el-form-item>
           <el-form-item label="应用目录">
             <el-input v-model="addForm.appDir" style="width: 70%; padding-right: 2px" />
           </el-form-item>
+          <el-form-item v-if="queryInfo.nodeType === 'agent'" label="agent 配置" style="width: 70%; padding-right: 2px">
+            <el-select v-model="addForm.remoteAgentConfig" placeholder="选择 agent 配置">
+              <el-option
+                v-for="(item, index) in agentConfigList"
+                :key="index"
+                :label="item.mgrHost"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onAdd">确定</el-button>
           </el-form-item>
         </el-form>
       </div>
     </el-dialog>
-    <!-- 视频预览对话框 -->
     <el-dialog
-      title="预览视频"
+      title="agent 节点配置列表"
+      append-to-body
+      :visible.sync="showAgentConfigDialog"
+      center
+    >
+      <template>
+        <el-button size="mini" type="warning" icon="el-icon-plus" style="margin: 5px" @click="handleAgentConfigAdd">添加</el-button>
+        <el-table
+          :data="agentConfigList"
+          border
+          height="480"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="mgrProtocol"
+            label="协议"
+          />
+          <el-table-column
+            prop="mgrHost"
+            label="mgr 地址"
+          />
+          <el-table-column
+            prop="mgrPort"
+            label="mgr 端口"
+          />
+          <el-table-column
+            fixed="right"
+            label="操作"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <el-button
+                style="margin-top: 5px; margin-left: 5px"
+                size="mini"
+                type="danger"
+                @click="handleAgentConfigDelete(scope.$index, scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-dialog>
+    <el-dialog
+      title="添加 agent 节点配置"
       append-to-body
-      :visible.sync="showPreviewDialog"
-      width="70%"
+      :visible.sync="addAgentConfigDialog"
       center
     >
-      <template />
+      <template>
+        <el-form :model="configForm" label-width="80px">
+          <el-form-item label="mgr 协议" style="width: 70%; padding-right: 2px">
+            <el-select v-model="configForm.mgrProtocol" placeholder="选择 websocket 协议">
+              <el-option label="ws" value="ws" />
+              <el-option label="wss" value="wss" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="mgr 地址" style="width: 70%; padding-right: 2px">
+            <el-input v-model="configForm.mgrHost" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item label="mgr 端口" style="width: 70%; padding-right: 2px">
+            <el-input v-model="configForm.mgrPort" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onAgentConfigAdd">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
     </el-dialog>
   </el-container>
 </template>
 
 <script>
-import { addRemoteHost, deleteRemoteHost, getRemoteHostList, updateRemoteApp } from '@/api/devops'
+import {
+  addAgentConfig,
+  addRemoteHost, deleteAgentConfig,
+  deleteRemoteHost,
+  getAgentConfigList,
+  getRemoteHostList,
+  updateRemoteApp
+} from '@/api/devops'
 
 export default {
   name: 'SysUpdate',
@@ -129,13 +226,21 @@ export default {
         host: '',
         port: 22,
         authType: 'password',
-        username: '',
+        username: 'root',
         password: '',
-        rsaPrikey: '',
-        appDir: ''
+        privateKey: '',
+        appDir: '/opt/app/devops-agent',
+        remoteAgentConfig: null
       },
       // **********************************************************************
-      showPreviewDialog: false
+      showAgentConfigDialog: false,
+      agentConfigList: [],
+      addAgentConfigDialog: false,
+      configForm: {
+        mgrProtocol: 'ws',
+        mgrHost: '127.0.0.1',
+        mgrPort: 4030
+      }
     }
   },
   created() {
@@ -159,7 +264,20 @@ export default {
       this.getData()
     },
     handleAdd() {
-      this.showAddDialog = true
+      if (this.queryInfo.nodeType === 'mgr') {
+        this.$message.warning('mgr 节点无配置可查看')
+        return
+      }
+      getAgentConfigList(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          this.agentConfigList = resp.data
+          this.showAddDialog = true
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
     },
     onAdd() {
       addRemoteHost(this.addForm).then(resp => {
@@ -175,7 +293,9 @@ export default {
       })
     },
     handleDelete(index, row) {
-      deleteRemoteHost(row.host).then(resp => {
+      const form = {}
+      form.id = row.id
+      deleteRemoteHost(form).then(resp => {
         if (resp.code === 0) {
           this.getData()
         } else {
@@ -190,7 +310,6 @@ export default {
       for (const item of this.dataList) {
         hostList.push(item.host)
       }
-      console.log(hostList)
       this.$confirm('确定要更新所有机器上的 ' + this.queryInfo.nodeType + '?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -208,6 +327,53 @@ export default {
           type: 'info',
           message: '已取消'
         })
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleAgentConfig() {
+      if (this.queryInfo.nodeType === 'mgr') {
+        this.$message.warning('mgr 节点无配置可查看')
+        return
+      }
+      getAgentConfigList(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          this.agentConfigList = resp.data
+          this.showAgentConfigDialog = true
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleAgentConfigAdd() {
+      this.addAgentConfigDialog = true
+    },
+    onAgentConfigAdd() {
+      addAgentConfig(this.configForm).then(resp => {
+        if (resp.code === 0) {
+          this.handleAgentConfig()
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.addAgentConfigDialog = false
+      })
+    },
+    handleAgentConfigDelete(index, row) {
+      const form = {}
+      form.id = row.id
+      deleteAgentConfig(form).then(resp => {
+        if (resp.code === 0) {
+          this.handleAgentConfig()
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
       })
     }
   }