From 399607ff7e3c01f5f62cab6765a4d068240e29f3 Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Fri, 10 Jul 2020 18:34:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E7=BD=B2=E5=BA=94=E7=94=A8=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/table-um.vue             |  30 ++-
 .../workbench/yygl/deploy_app_detail.vue      | 183 ++++++++----------
 2 files changed, 105 insertions(+), 108 deletions(-)

diff --git a/src/components/table/table-um.vue b/src/components/table/table-um.vue
index b336740..d544ffa 100644
--- a/src/components/table/table-um.vue
+++ b/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">
+              <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)">
                 <em v-if="btn.label == '分配'">
                   <em
                     v-if="btn.label == '分配' && scope.row.state == 0"
@@ -97,7 +97,11 @@
                   <em v-if="btn.label == '分配' && scope.row.state == 1">已分配</em>
                 </em>
 
-                <em v-if="btn.type == 'goods-shelf'">
+                <em v-else-if="btn.label == '当前版本'">
+                  <em style="pointer-events:none;color:#a9aec0;">{{btn.label}}</em>
+                </em>
+
+                <!-- <em v-if="btn.type == 'goods-shelf'">
                   <em
                     v-if="scope.row.state == 0"
                     class="cur_pointer"
@@ -111,7 +115,7 @@
                     @click="handleClick(btn.type, scope.row)"
                   >下架</em>
                   <em v-if="scope.row.state == 2">下架</em>
-                </em>
+                </em> -->
 
                 <em
                   class="cur_pointer"
@@ -363,6 +367,10 @@ export default {
       type: Array,
       default: null
     },
+    public_arr: {
+      type: Array,
+      default: null
+    },
     getSelectBtn: {
       type: Boolean,
       default: false
@@ -434,6 +442,22 @@ export default {
     }
   },
   methods: {
+    get_show_func(btn,val){
+      // return true
+      console.log(btn,val);
+      this.public_arr.forEach(e => {
+        if(e.tag==val.row.tag){
+          // if(btn == 3){
+          //   return true
+          // }else{
+          //   return false
+          // }
+          return true
+        }else{
+          return true
+        }
+      });
+    },
     //本地删除
     deleteLocal(val) {
       this.selectedTabsPage.splice(val.$index, 1);
diff --git a/src/pages/workbench/yygl/deploy_app_detail.vue b/src/pages/workbench/yygl/deploy_app_detail.vue
index 30665c3..f3587a9 100644
--- a/src/pages/workbench/yygl/deploy_app_detail.vue
+++ b/src/pages/workbench/yygl/deploy_app_detail.vue
@@ -130,7 +130,7 @@
             </p>
             <div style="overflow:hidden;height:700px;" class="limit-elscroll">
               <el-scrollbar class="service_list">
-                <div class="service_box" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <span v-if="item.is_unhealth" class="service_tips">故障</span> </div>
+                <div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <span v-if="item.is_unhealth" class="service_tips">故障</span> </div>
               </el-scrollbar>
               <div class="service_detail">
                 <nor-card title="服务概况" flag="true">
@@ -140,27 +140,27 @@
                         <p
                           style="color: #707693;font-size: 16px;text-align:center;"
                         >服务状态</p>
-                        <waveIcon :state="yx_state.state" style="margin:10px auto;"></waveIcon>
+                        <waveIcon :state="micor_state.state" style="margin:10px auto;"></waveIcon>
                         <p
                           style="color: #58617a;font-size: 16px;text-align:center;"
-                        >{{ yx_state.state }}</p>
+                        >{{ micor_state.state }}</p>
                       </div>
 
                       <div style="height:115px;" class="service_num service_card_box">
                         <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span>
-                        <p>{{ yx_state.averageTime }}</p>
-                        <p>最大响应时间：{{ yx_state.maxTime }}</p>
+                        <p>{{ micor_state.averageTime }}</p>
+                        <p>最大响应时间：{{ micor_state.maxTime }}</p>
                       </div>
 
                       <div style="height:115px;" class="service_num service_card_box">
                         <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span>
-                        <p>{{ yx_state.averageTraffic }}</p>
-                        <p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
+                        <p>{{ micor_state.averageTraffic }}</p>
+                        <p>最大吞吐率：{{ micor_state.maxTraffic }}</p>
                       </div>
 
                       <div style="height:115px;padding-top:30px;" class="service_num service_card_box">
                         <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span>
-                        <p>{{ yx_state.memory }}</p>
+                        <p>{{ micor_state.memory }}</p>
                       </div>
 
                     </div>
@@ -169,9 +169,9 @@
 
                 <nor-card title="服务设置" flag="true">
                   <div class="addimage">多版本回滚</div>
-                  <!-- <p class="imagebox">
+                  <p class="imagebox">
                     <span
-                      @click="image_select = index"
+                      @click="image_select = index;getImageInfo()"
                       :style="
                         image_select == index
                           ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
@@ -180,15 +180,16 @@
                       v-for="(item, index) in image_arr"
                       :key="index + 6000"
                     >{{ item.name }}</span>
-                  </p> -->
+                  </p>
                   <table-um
                     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"
-                    :paginationShow="true"
                     @update="update"
                     @rollback="rollback"
                     @grouppublic="grouppublic"
@@ -236,84 +237,7 @@ export default {
       imgList: [],
       imgList1: [],
       header_data:"",
-      service_list_arr:[
-        {
-          service:'cemplat-api1',
-          is_unhealth:1
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:1
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-        {
-          service:'cemplat-api1',
-          is_unhealth:0
-        },
-      ],
+      service_list_arr:[],
       yx_state: {
         state: "",
         averageTime: "",
@@ -322,6 +246,15 @@ export default {
         maxTraffic: "",
         memory: ""
       },
+      micor_state: {
+        state: "",
+        averageTime: "",
+        maxTime: "",
+        averageTraffic: "",
+        maxTraffic: "",
+        memory: ""
+      },
+      now_micor_service:0,
       image_arr: [],
       area_arr: [
         {
@@ -369,6 +302,7 @@ export default {
           value: 10
         }
       ],
+      now_image_version:[],
       form: {
         name: "",
         fileList: "",
@@ -393,28 +327,21 @@ export default {
       },
       header_image_arr: [
         {
-          prop: "vision",
+          prop: "tag",
           label: "版本号",
-          minWidth: "20%",
-          align: "center"
-        },
-        {
-          prop: "state",
-          label: "状态",
-          minWidth: "20%",
           align: "center"
         },
         {
           prop: "date",
           label: "在线日期",
-          minWidth: "30%",
           align: "center"
         },
         {
           label: "操作",
           type: "Button",
           align: "center",
-          minWidth: "30%",
+          btngap:'15px',
+          public_flag:true,
           btnList: [
             {
               type: "update",
@@ -422,7 +349,7 @@ export default {
             },
             {
               type: "rollback",
-              label: "回退"
+              label: "回滚"
             },
             {
               type: "grouppublic",
@@ -430,8 +357,12 @@ export default {
             },
             {
               type: "online",
-              label: "下线"
-            }
+              label: "当前版本",
+            },
+            {
+              type: "delete",
+              label: "删除"
+            },
           ]
         }
       ],
@@ -654,13 +585,52 @@ export default {
           }
         })
     },
+    get_micro_service(){
+      this.$http
+        .get(`/apaas/istio/service/${this.header_data.namespace}/overview/${this.service_list_arr[this.now_micor_service].service}`)
+        .then(response => {
+          if(response.data.success){
+            let data = response.data.data
+            this.image_arr = []
+            data.imageNames.forEach(e => {
+              this.image_arr.push({
+                name:e,
+                data:[]
+              })
+            });
+            this.micor_state= {
+              state: data.appState,
+              averageTime: data.respTime.avg,
+              maxTime: data.respTime.max,
+              averageTraffic: data.throughput.avg,
+              maxTraffic: data.throughput.max,
+              memory: data.resource.memory
+            }
+            this.getImageInfo()
+          }
+        })
+    }, 
+    change_micor(n){
+      this.now_micor_service = n
+      this.get_micro_service()
+    },
+    compare(property){
+        return function(a,b){
+            var value1 = a[property];
+            var value2 = b[property];
+            // return value2 - value1;
+            return value1 - value2;
+        }
+    },
     getImageInfo() {
       this.$http
-        .get("./static/deployappdetail.json")
+        .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);
           let data = response.data.data;
-          this.image_arr = data.imagearr;
+          // this.image_arr = data.imagearr;
+          this.$set(this.image_arr[this.image_select],'data',data.list.sort(this.compare('date')))
+          this.now_image_version = data.runnings
         })
         .catch(function(response) {});
     },
@@ -812,6 +782,9 @@ export default {
         .then(response => {
           if(response.data.success){
             this.service_list_arr = response.data.data
+            if(this.service_list_arr&&this.service_list_arr.length){
+              this.get_micro_service()
+            }
           }
         })
     }
-- 
2.26.0