运行状态微服务

src/components/table/table-um.vue

@@ -86,7 +86,7 @@
           <template slot-scope="scope">
             <!-- 操作按钮 -->
             <span v-if="item.type === 'Button'">
-              <b v-for="(btn, key) in item.btnList" :key="key" :style="{marginRight:item.btngap}" v-if="!item.public_flag||item.public_flag==false?true:get_show_func(key,scope)">
+              <b v-for="(btn, key) in item.btnList" :key="key" :style="{marginRight:item.btngap}">
                 <em v-if="btn.label == '分配'">
                   <em
                     v-if="btn.label == '分配' && scope.row.state == 0"

src/pages/workbench/yygl/deploy_app_detail.vue

@@ -181,20 +181,38 @@
                       :key="index + 6000"
                     >{{ item.name }}</span>
                   </p>
-                  <table-um
+                  <el-table
+                    :data="image_arr[index].data"
                     v-for="(item, index) in image_arr"
                     :key="index+7000"
-                    :height="300"
                     v-show="image_select == index"
-                    :headers="header_image_arr"
-                    :datas="image_arr[index].data"
-                    :public_arr="now_image_version"
-                    :stripe="true"
-                    @update="update"
-                    @rollback="rollback"
-                    @grouppublic="grouppublic"
-                    @online="online"
-                  ></table-um>
+                    stripe
+                    height="300"
+                    style="width: 100%">
+                    <el-table-column
+                      prop="tag"
+                      align="center"
+                      label="版本号">
+                    </el-table-column>
+                    <el-table-column
+                      prop="date"
+                      align="center"
+                      label="在线日期">
+                    </el-table-column>
+                    <el-table-column
+                      label="操作"
+                      align="center"
+                      width="300">
+                      <template slot-scope="scope">
+                        <el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">升级</el-button>
+                        <el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index>Math.max(...now_image_version)">回滚</el-button>
+                        <el-button @click="together(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">蓝绿发布</el-button>
+                        <el-button type="text" size="small" :disabled="true" v-if="scope.row.subsets">当前版本</el-button>
+                        <el-button @click="delete_ver(scope.row)" style="color:#830f53;font-weight:600;" type="text" size="small" :disabled="up_flag" v-if="scope.row.subsets&&now_image_version.length>=2">删除</el-button>
+                      </template>
+                    </el-table-column>
+                    
+                  </el-table>
                 </nor-card>
               </div>
             </div>
@@ -208,7 +226,6 @@
 
 <script>
 import infoList from "@/components/infoList";
-import tableUm from "@/components/table/table-um";
 import serviceHeader from "@/components/service-header";
 import dialogAction from "@/components/dialog-action";
 import uploadFile from "@/components/general/upload_file";
@@ -220,7 +237,6 @@ import { mapGetters, mapState } from "vuex";
 export default {
   components: {
     infoList,
-    tableUm,
     serviceHeader,
     dialogAction,
     uploadFile,
@@ -325,47 +341,6 @@ export default {
           { required: true, message: "请选择开放程度", trigger: "change" }
         ]
       },
-      header_image_arr: [
-        {
-          prop: "tag",
-          label: "版本号",
-          align: "center"
-        },
-        {
-          prop: "date",
-          label: "在线日期",
-          align: "center"
-        },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          btngap:'15px',
-          public_flag:true,
-          btnList: [
-            {
-              type: "update",
-              label: "升级"
-            },
-            {
-              type: "rollback",
-              label: "回滚"
-            },
-            {
-              type: "grouppublic",
-              label: "蓝绿发布"
-            },
-            {
-              type: "online",
-              label: "当前版本",
-            },
-            {
-              type: "delete",
-              label: "删除"
-            },
-          ]
-        }
-      ],
       header_fw_arr: [
         {
           prop: "rank",
@@ -514,7 +489,9 @@ export default {
       appcode: "",
       showPass: false,
       public: false,
-      public_form: false
+      public_form: false,
+      now_tag:'',
+      up_flag:false,
     };
   },
   computed: {
@@ -536,8 +513,25 @@ export default {
       this.now_service = 1;
     }
   },
-  mounted() {},
+  mounted() {
+    
+  },
   methods: {
+    event_source(){
+      var _this = this
+      const se = new EventSource(`/apaas/istio/service/${this.header_data.namespace}/versions/events/${this.service_list_arr[this.now_micor_service].service}/${this.now_tag}/subscribe`, { withCredentials: true }) // 后端接口，要配置允许跨域属性
+      se.onopen=function(e){}
+      se.onmessage=function(e){
+        console.log(e.data)
+          se.close()
+          setTimeout(() => {
+            _this.get_micro_service()
+            _this.$message.success('更新完成')
+          }, 100);
+        
+      }
+      se.onerror=function(e){}
+    },
     getCurrentUser() {
       this.$api.user.getNowUser().then(({ data }) => {
         if (data.success == 1) {
@@ -556,7 +550,37 @@ export default {
       console.log(val);
     },
     update(val) {
-      console.log(val);
+      this.up_flag = true
+      this.$message.success('开始更新版本')
+      this.$http
+        .post(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/update`,{
+          tag:val.tag
+        })
+        .then(response => {
+          if(response.data.success){
+            this.get_micro_service(true)
+          }
+        })
+    },
+    together(val){
+      this.up_flag = true
+      this.$http
+        .post(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/publish`,{
+          tag:val.tag
+        }).then(response => {
+          this.up_flag = false
+          this.get_micro_service()
+        })
+    },
+    delete_ver(val){
+      this.up_flag = true
+      this.$http
+        .post(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/unpublish`,{
+          tag:val.tag
+        }).then(response => {
+          this.up_flag = false
+          this.get_micro_service(true,val.subsets)
+        })
     },
     rollback(val) {
       console.log(val);
@@ -585,7 +609,7 @@ export default {
           }
         })
     },
-    get_micro_service(){
+    get_micro_service(val,type){
       this.$http
         .get(`/apaas/istio/service/${this.header_data.namespace}/overview/${this.service_list_arr[this.now_micor_service].service}`)
         .then(response => {
@@ -606,7 +630,7 @@ export default {
               maxTraffic: data.throughput.max,
               memory: data.resource.memory
             }
-            this.getImageInfo()
+            this.getImageInfo(val,type)
           }
         })
     }, 
@@ -618,19 +642,58 @@ export default {
         return function(a,b){
             var value1 = a[property];
             var value2 = b[property];
-            // return value2 - value1;
-            return value1 - value2;
+            return value2 - value1;
+            // return value1 - value2;
         }
     },
-    getImageInfo() {
+    getImageInfo(val,type) {
       this.$http
         .get(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/versions`)
         .then(response => {
           console.log(response);
+          var _this = this
           let data = response.data.data;
           // this.image_arr = data.imagearr;
+          // console.log(data.list.sort(_this.compare('date')))
+          data.list.forEach(e => {
+            data.runnings.forEach(el => {
+              if(e.tag==el.tag){
+                e['subsets'] = el.subsets
+              }
+            });
+          });
           this.$set(this.image_arr[this.image_select],'data',data.list.sort(this.compare('date')))
-          this.now_image_version = data.runnings
+          this.now_image_version = []
+          this.image_arr[this.image_select].data.forEach((e,idx)=> {
+            if(e.subsets){
+              this.now_image_version.push(idx)
+            }
+          });
+          if(val){
+            //删除
+            if(type){
+              var temp = ''
+              this.now_tag.forEach(e => {
+                if(type==e){
+
+                }else{
+                  temp = e
+                }
+              });
+              this.now_tag = temp
+            }
+            //调用监听
+            this.event_source()
+          }else{
+            if(data.runnings.length==1){
+              this.now_tag = data.runnings[0].subsets
+            }else{
+              this.now_tag = [data.runnings[0].subsets,data.runnings[1].subsets]
+            }
+            this.up_flag = false
+          }
+          // console.log(Math.min(...now_image_version))
+          
         })
         .catch(function(response) {});
     },