增加 刷新服务 重新部署 连接中断 删除服务等功能

src/views/docker/envDetail.vue

@@ -2,11 +2,11 @@
   <div>
     <div class="shadow-content">
       <div class="warn-content">
-        <svg-icon icon-class="table" />
+        <svg-icon icon-class="service"/>
         基础服务
         <div style="float: right;min-width: 300px;overflow: hidden">
           <el-button type="warning" size="mini" round @click="getRepository('base')">新增服务</el-button>
-          <el-button type="warning" size="mini" round>刷新状态</el-button>
+          <el-button type="warning" size="mini" round @click="refresh">刷新状态</el-button>
           <el-dropdown>
             <el-button type="warning" size="mini" round>
               更多操作
@@ -52,7 +52,7 @@
                 点击
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>详细信息</el-dropdown-item>
+                <el-dropdown-item @click.native="getServiceDetails(scope.row)">详细信息</el-dropdown-item>
                 <el-dropdown-item>重置服务</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
@@ -62,12 +62,11 @@
     </div>
     <div v-for="(item,index) in typeList" :key="index" class="shadow-content">
       <div class="warn-content">
-        <svg-icon icon-class="table" />
+        <svg-icon icon-class="service"/>
         {{ item._id }}服务
         <div style="float: right">
           <el-button type="warning" size="mini" round @click="getRepository(item._id)">新增服务</el-button>
-          <el-button type="warning" size="mini" round>刷新状态</el-button>
-          <el-button type="warning" size="mini" round>重置所有UI服务</el-button>
+          <el-button type="warning" size="mini" round @click="refresh">刷新状态</el-button>
         </div>
       </div>
       <el-table
@@ -94,6 +93,17 @@
         <el-table-column
           prop="status"
           label="运行状态"/>
+        <el-table-column
+          label="调试状态">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="控制台" placement="top">
+              <el-button type="primary" icon="el-icon-tickets" circle @click="linkShell(scope.row)"/>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="日志" placement="top">
+              <el-button type="success" icon="el-icon-time" circle @click="linkLog(scope.row)"/>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column label="更多" width="80" fixed="right">
           <template slot-scope="scope">
             <el-dropdown>
@@ -101,8 +111,12 @@
                 点击
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="getServiceDetails(scope.row)">详细信息</el-dropdown-item>
-                <el-dropdown-item>重置服务</el-dropdown-item>
+                <el-dropdown-item @click.native="getServiceDetails(scope.row)"><svg-icon icon-class="detail"/>
+                  详细信息</el-dropdown-item>
+                <el-dropdown-item @click.native="updateService(scope.row)"><svg-icon icon-class="f5"/>更新服务</el-dropdown-item>
+                <el-dropdown-item @click.native="updateDomain(scope.row)"><svg-icon icon-class="doamin"/>更新域名</el-dropdown-item>
+                <el-dropdown-item @click.native="restartService(scope.row)"><svg-icon icon-class="restart"/>重置服务</el-dropdown-item>
+                <el-dropdown-item style="color: red" @click.native="deleteService(scope.row) "><svg-icon icon-class="delete"/>删除服务</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </template>
@@ -115,14 +129,20 @@
       :title="title">
       <el-alert
         :closable="false"
-        title="警告提示的文案"
+        title="温馨提醒"
         type="warning"
-        description="文字说明文字说明文字说明文字说明文字说明文字说明"
+        description="该操作会创建这个服务最新的master版本。"
       />
       <p class="title-sub">选择服务</p>
       <el-row :gutter="20">
         <el-col :span="14">
-          <el-select v-model="reponame" clearable filterable class="elSelect" placeholder="请选择服务,支持模糊搜索" @change="getTag">
+          <el-select
+            v-model="reponame"
+            clearable
+            filterable
+            class="elSelect"
+            placeholder="请选择服务,支持模糊搜索"
+            @change="getTag">
             <el-option
               v-for="(item,index) in options"
               :key="index"
@@ -148,6 +168,42 @@
         <el-button type="primary" @click="CreateClusterService">确 定</el-button>
       </span>
     </el-dialog>
+    <!--更新服务的弹框-->
+    <el-dialog
+      :visible.sync="updateDialog"
+      title="更新服务">
+      <el-alert
+        :closable="false"
+        title="温馨提醒"
+        type="warning"
+        description="警告:该操作会将会更新这个服务为指定版本，在这个pod上做的所有操作将会丢失。"
+      />
+      <p class="title-sub">选择服务</p>
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <el-input
+            v-model="rename"
+            :disabled="true"
+            placeholder="请输入内容"/>
+        </el-col>
+      </el-row>
+      <p class="title-sub">选择镜像</p>
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <el-select v-model="tagName" filterable clearable class="elSelect" placeholder="请选择镜像,支持模糊搜索">
+            <el-option
+              v-for="(item,index) in tagOptions"
+              :key="index"
+              :label="item.tagName"
+              :value="item.tagName"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="updateDialog = false">取 消</el-button>
+        <el-button type="primary" @click="updateClusterService()">确 定</el-button>
+      </span>
+    </el-dialog>
     <el-dialog
       :visible.sync="centerDialogVisible"
       title="详细信息"
@@ -170,9 +226,14 @@ import {
   fetchTaglist,
   getType,
   CreateCluService,
-  fetchServiceDetails
+  fetchServiceDetails,
+  modifyCluService,
+  fetchServiceInstance,
+  deleteClusterService,
+  redeployClusterService
 } from '@/api/docker'
 import JsonEditor from '@/components/JsonEditor'
+
 export default {
   components: { JsonEditor },
   data() {
@@ -196,7 +257,9 @@ export default {
       formInline: {
         user: '',
         region: ''
-      }
+      },
+      updateDialog: false,
+      rename: ''
     }
   },
   created() {
@@ -213,6 +276,13 @@ export default {
         this.array2Object(servicelist)
       })
     },
+    refresh() {
+      this.getServicelist()
+      this.$message({
+        message: '状态已刷新',
+        type: 'success'
+      })
+    },
     getRepository(type) {
       this.type = type
       this.reponame = ''
@@ -235,7 +305,12 @@ export default {
     CreateClusterService() {
       const self = this
       const image = `${this.server}/${this.reponame}:${this.tagName}`
-      CreateCluService({ serviceName: this.reponame.split('/')[1], namespace: this.namespace, image: image, type: this.type }).then(res => {
+      CreateCluService({
+        serviceName: this.reponame.split('/')[1],
+        namespace: this.namespace,
+        image: image,
+        type: this.type
+      }).then(res => {
         if (res.data.code === '0000') {
           this.$message({
             message: res.data.data,
@@ -263,6 +338,103 @@ export default {
         this.value = res.data.data.service
       })
     },
+    updateService(value) {
+      this.tagName = ''
+      this.updateDialog = true
+      this.rename = value.serviceName
+      this.tagOptions = []
+      fetchTaglist({ reponame: 'qa-' + value.userLabels.type + '/' + this.rename }).then(res => {
+        if (res.data.data.tagCount) {
+          this.tagOptions = res.data.data.tagInfo
+          this.server = res.data.data.server
+        }
+      })
+    },
+    updateClusterService() {
+      const image = `${this.server}/${this.rename}:${this.tagName}`
+      const self = this
+      modifyCluService({ serviceName: this.rename, image: image, namespace: this.namespace }).then(res => {
+        if (res.data.code === '0000') {
+          this.$message({
+            message: '更新成功',
+            type: 'success',
+            duration: 1000,
+            onClose() {
+              self.updateDialog = false
+              self.getServicelist()
+            }
+          })
+        } else {
+          this.$message({
+            message: res.data.msg,
+            type: 'error'
+          })
+        }
+      })
+    },
+    restartService(data) {
+      redeployClusterService({ namespace: data.namespace, serviceName: data.serviceName }).then(res => {
+        if (res.data.code === '0000') {
+          this.$message({
+            type: 'success',
+            message: '服务重部署成功!'
+          })
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.data.msg
+          })
+        }
+      })
+    },
+    updateDomain() {
+      alert('更新域名')
+    },
+    deleteService(data) {
+      this.$confirm('此操作将永久此服务, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteClusterService({ serviceName: data.serviceName, namespace: data.namespace }).then((res) => {
+          if (res.data.code === '0000') {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+            this.getServicelist()
+          } else {
+            this.$message({
+              type: 'error',
+              message: res.data.msg
+            })
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    linkShell(scopeData) {
+      fetchServiceInstance({ serviceName: scopeData.serviceName, namespace: scopeData.namespace }).then(res => {
+        const podName = res.data.data.instances[0].name
+        window.open(`http://172.30.220.24:9600/static/terminal.html?namespace=${scopeData.namespace}&pod=${podName}`, '_blank')
+      })
+    },
+    linkLog(scopeData) {
+      let path = ''
+      if (scopeData.userLabels.type === 'ui') {
+        path = '/usr/local/openresty/nginx/logs/access.log /usr/local/openresty/nginx/logs/error.log'
+      } else {
+        path = `/home/quant_group/logs/${scopeData.serviceName}.log`
+      }
+      fetchServiceInstance({ serviceName: scopeData.serviceName, namespace: scopeData.namespace }).then(res => {
+        const podName = res.data.data.instances[0].name
+        window.open(`http://172.30.220.24:9600/static/logs.html?namespace=${scopeData.namespace}&pod=${podName}&paths=${path}`, '_blank')
+      })
+    },
     array2Object(original) { // 将数组转成对象存储
       this.FormatTabledata = {}
       original.forEach((item, index) => {
@@ -281,11 +453,12 @@ export default {
 }
 </script>
 <style scoped>
-  .title-sub{
+  .title-sub {
     margin-top: 30px;
     font-size: 15px;
   }
-  .elSelect{
+
+  .elSelect {
     width: 100%;
   }