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

src/api/devops.js

@@ -20,6 +20,7 @@ const devopsApi = {
   getAppDeployConfigList: '/api/devops/app/config/app/deploy',
   getBuildDeployList: '/api/devops/app/bd',
   getAppStatList: '/api/devops/app/stat',
+  getDeployer: '/api/devops/deployer',
   getSiteOptionList: '/api/devops/sys/site',
   getWebhookList: '/api/devops/sys/notify/webhook',
   getMenuTree: '/api/devops/rbac/menu/ztree',
@@ -336,6 +337,22 @@ export function getAppStat(queryInfo) {
   return get(devopsApi.getAppStatList + '/now', 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)
+}
+
+export function getRemoteHostList(queryInfo) {
+  return get(devopsApi.getDeployer + '/remote_host/list', queryInfo)
+}
+
+export function updateRemoteApp(formData) {
+  return post(devopsApi.getDeployer + '/update', formData)
+}
+
 export function getSiteOptionList() {
   return get(devopsApi.getSiteOptionList)
 }

src/views/devops/sys/SysUpdate.vue

@@ -2,155 +2,51 @@
   <el-container>
     <el-header height="220">
       <h3>系统更新</h3>
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="queryInfo.nodeType"
+          size="mini"
+          placeholder="节点类型"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        >
+          <el-option label="mgr" value="mgr" />
+          <el-option label="agent" value="agent" />
+        </el-select>
+        <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-row>
     </el-header>
     <el-main>
       <el-row>
-        <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span>devops-mgr</span>
-              <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd">添加</el-button>
-            </div>
-            <div class="text item">
-              <el-table
-                :data="mgrList"
-                border
-                height="480"
-                style="width: 100%"
-              >
-                <el-table-column
-                  prop="machineIpv4"
-                  label="机器地址"
-                />
-                <el-table-column
-                  prop="bootTime"
-                  label="应用目录"
-                />
-                <el-table-column
-                  prop="status"
-                  label="当前状态"
-                >
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.status === 'Online'" :type="'success'" disable-transitions>
-                      <span>在线</span>
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.status === 'Offline'" :type="'danger'" disable-transitions>
-                      <span>离线</span>
-                    </el-tag>
-                    <el-tag v-else :type="'warning'" disable-transitions>
-                      <span>弃用</span>
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="agentVersion"
-                  label="Agent 版本"
-                />
-              </el-table>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span>devops-agent</span>
-              <el-button style="float: right; padding: 3px 0" type="text" @click="getData">刷新</el-button>
-            </div>
-            <div class="text item">
-              <el-table
-                :data="agentList"
-                border
-                height="480"
-                style="width: 100%"
-              >
-                <el-table-column
-                  prop="machineIpv4"
-                  label="机器地址"
-                />
-                <el-table-column
-                  prop="bootTime"
-                  label="启动时间"
-                />
-                <el-table-column
-                  prop="status"
-                  label="当前状态"
-                >
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.status === 'Online'" :type="'success'" disable-transitions>
-                      <span>在线</span>
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.status === 'Offline'" :type="'danger'" disable-transitions>
-                      <span>离线</span>
-                    </el-tag>
-                    <el-tag v-else :type="'warning'" disable-transitions>
-                      <span>弃用</span>
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="agentVersion"
-                  label="Agent 版本"
-                />
-                <el-table-column
-                  prop="env"
-                  label="所属环境"
-                />
-              </el-table>
-            </div>
-          </el-card>
+        <el-col :md="16" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-table
+            :data="dataList"
+            border
+            height="480"
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="nodeType"
+              label="节点类型"
+            />
+            <el-table-column
+              prop="host"
+              label="机器地址"
+            />
+            <el-table-column
+              prop="appDir"
+              label="应用目录"
+            />
+            <el-table-column
+              prop="appVersion"
+              label="应用版本"
+            />
+          </el-table>
         </el-col>
       </el-row>
     </el-main>
 
-    <el-dialog
-      append-to-body
-      :visible.sync="showMgrDialog"
-      width="50%"
-      center
-    >
-      <div>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd">添加</el-button>
-        <el-table
-          :data="mgrList"
-          border
-          height="480"
-          style="width: 100%"
-        >
-          <el-table-column
-            prop="machineIpv4"
-            label="机器地址"
-          />
-          <el-table-column
-            prop="bootTime"
-            label="启动时间"
-          />
-          <el-table-column
-            prop="status"
-            label="当前状态"
-          >
-            <template slot-scope="scope">
-              <el-tag v-if="scope.row.status === 'Online'" :type="'success'" disable-transitions>
-                <span>在线</span>
-              </el-tag>
-              <el-tag v-else-if="scope.row.status === 'Offline'" :type="'danger'" disable-transitions>
-                <span>离线</span>
-              </el-tag>
-              <el-tag v-else :type="'warning'" disable-transitions>
-                <span>弃用</span>
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="agentVersion"
-            label="Agent 版本"
-          />
-          <el-table-column
-            prop="env"
-            label="所属环境"
-          />
-        </el-table>
-      </div>
-    </el-dialog>
     <el-dialog
       append-to-body
       :visible.sync="showAddDialog"
@@ -159,6 +55,9 @@
     >
       <div>
         <el-form :model="addForm" label-width="80px">
+          <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-input v-model="addForm.host" style="width: 70%; padding-right: 2px" />
           </el-form-item>
@@ -213,27 +112,20 @@
 </template>
 
 <script>
+import { addRemoteHost, deleteRemoteHost, getRemoteHostList, updateRemoteApp } from '@/api/devops'
+
 export default {
   name: 'SysUpdate',
   data() {
     return {
       queryInfo: {
-        scope: null,
-        pn: 1
+        nodeType: 'agent'
       },
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 10,
-      totalSize: 0,
       dataList: [],
-      nextId: 0,
-      // **********************************************************************
-      mgrList: [],
-      agentList: [],
       // **********************************************************************
       showAddDialog: false,
       addForm: {
+        nodeType: 'agent',
         host: '',
         port: 22,
         authType: 'password',
@@ -243,41 +135,80 @@ export default {
         appDir: ''
       },
       // **********************************************************************
-      showPreviewDialog: false,
-      form: {
-        videoId: null,
-        scope: 1
-      },
-      videoResources: [],
-      publishVideoDiaglog: false
+      showPreviewDialog: false
     }
   },
   created() {
     document.title = '系统更新'
+    this.getData()
   },
   methods: {
     getData() {
       this.dataList = []
+      getRemoteHostList(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
     },
-    onRefresh() {
+    onSelectChange() {
       this.getData()
     },
     handleAdd() {
       this.showAddDialog = true
     },
     onAdd() {
-      this.showAddDialog = false
-    },
-    handlePreview(index, row) {
+      addRemoteHost(this.addForm).then(resp => {
+        if (resp.code === 0) {
+          this.getData()
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.showAddDialog = false
+      })
     },
-    handleEdit(index, row) {
-      const path = '/post/video/edit/' + row.videoId
-      this.$router.push(path)
-    },
-    onSelectChange() {
-      this.$message.info(this.queryInfo)
+    handleDelete(index, row) {
+      deleteRemoteHost(row.host).then(resp => {
+        if (resp.code === 0) {
+          this.getData()
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
     },
-    handleClose() {
+    handleUpdate() {
+      const hostList = []
+      for (const item of this.dataList) {
+        hostList.push(item.host)
+      }
+      console.log(hostList)
+      this.$confirm('确定要更新所有机器上的 ' + this.queryInfo.nodeType + '?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const form = {}
+        form.hostList = hostList
+        updateRemoteApp(form).then(resp => {
+          this.$message.warning(resp.msg)
+        }).catch(error => {
+          this.$message.error(error.message)
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
     }
   }
 }