Merge branch 'xym' into dev

src/components/deployment-info.vue

+<template>
+  <div class="deployment_info">
+    <div class="state_steps">
+      <p
+        class="deploy_state icon_and_text"
+        :class="{
+          warn: deployState.state === 2,
+        }"
+      >
+        <img :src="getIcon(deployState.state)" />
+        <span v-text="getText(deployState.state)"></span>
+      </p>
+      <ul class="state_list">
+        <li
+          v-for="item in data"
+          :key="item.value"
+          class="icon_and_text"
+          :class="{ current: item.value === currentState.value }"
+          @click="selecState(item)"
+        >
+          <img :src="getIcon(item.state)" />
+          <span v-text="item.name"></span>
+        </li>
+      </ul>
+    </div>
+    <div class="state_detail">
+      <p
+        v-text="currentState.content"
+        style="text-align: center;margin-top: 20px;"
+      ></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({
+    selectedState: null, // 用户选中的状态
+  }),
+  computed: {
+    deployState() {
+      let state = {
+        name: "-",
+        value: "values",
+        content: "",
+        state: 2,
+      };
+      let status = this.data;
+      let statusLength = status.length;
+
+      if (statusLength > 0) {
+        state = status[statusLength - 1];
+      }
+
+      return state;
+    }, // 正在进行的状态
+    currentState() {
+      return this.selectedState || this.deployState;
+    }, // 需要展示的状态
+  },
+  methods: {
+    getIcon(stateValue = 2) {
+      const icons = [
+        require("../assets/imgs/ic_operation.gif"),
+        require("../assets/imgs/ic_true.png"),
+        require("../assets/imgs/ic_failed.png"),
+      ];
+
+      return icons[stateValue];
+    },
+    getText(stateValue = 2) {
+      const texts = ["部署中", "成功", "失败"];
+
+      return texts[stateValue];
+    },
+    selecState(state) {
+      if (this.selectedState && this.selectedState.value === state.value) {
+        return;
+      }
+
+      console.log(state);
+      this.selectedState = state;
+    },
+  },
+  mounted() {
+    // console.log(this.data);
+  },
+};
+</script>
+
+<style scoped>
+.deployment_info {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+}
+.state_steps {
+  width: 270px;
+  flex-shrink: 0;
+}
+.state_steps > .deploy_state {
+  margin: 10px 20px 20px 0;
+  padding: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #edf0ff;
+  font-size: 16px;
+  line-height: 24px;
+  color: #264dd9;
+  text-align: center;
+}
+.state_steps > .deploy_state.warn {
+  background-color: #ffebeb;
+  color: #da4251;
+}
+.state_steps > .state_list > li {
+  padding: 15px 20px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #242c43;
+  cursor: pointer;
+}
+.state_steps > .state_list > li.current {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  background-color: #f8f9fd;
+}
+.state_detail {
+  height: 500px;
+  flex-grow: 1;
+  border-radius: 7px;
+  background-color: #f8f9fd;
+  overflow: hidden;
+}
+.icon_and_text > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+.icon_and_text > img + span {
+  margin-left: 12px;
+}
+</style>

src/pages/workbench/yygl/deployment.vue

@@ -5,7 +5,9 @@
         <el-breadcrumb-item :to="`/yygl/${$route.params.level}/0`">
           我的应用
         </el-breadcrumb-item>
-        <el-breadcrumb-item :to="`/yygl/${$route.params.level}/${$route.params.type}`">
+        <el-breadcrumb-item
+          :to="`/yygl/${$route.params.level}/${$route.params.type}`"
+        >
           应用仓库
         </el-breadcrumb-item>
         <el-breadcrumb-item>
@@ -27,12 +29,16 @@
           :rules="image_rules"
         >
           <el-form-item label="工作区域：" prop="namespace">
-             <el-select v-model="baseInfoForm.namespace" placeholder="请选择工作区域">
+            <el-select
+              v-model="baseInfoForm.namespace"
+              placeholder="请选择工作区域"
+            >
               <el-option
                 v-for="item in area_options"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value">
+                :value="item.value"
+              >
               </el-option>
             </el-select>
           </el-form-item>
@@ -71,22 +77,34 @@
           </el-form-item>
 
           <el-form-item label="镜像版本：" prop="vision">
-         <div :class="{'select_box':true,'is_select':app_set.vision==vision}" v-for="vision in vision_arr" :key="vision" @click="app_set.vision=vision">{{vision}}</div>
+            <div
+              :class="{ select_box: true, is_select: app_set.vision == vision }"
+              v-for="vision in vision_arr"
+              :key="vision"
+              @click="app_set.vision = vision"
+            >
+              {{ vision }}
+            </div>
           </el-form-item>
 
           <el-form-item label="资源限制-内存：" prop="memory" class="limitsd">
             <el-input
-              type='number'
+              type="number"
               class="limitinput"
               v-model="app_set.memory"
               placeholder="请输入内存"
             ></el-input>
-            <el-select v-model="app_set.memory_type" class="timeslect" placeholder="请选择内存">
+            <el-select
+              v-model="app_set.memory_type"
+              class="timeslect"
+              placeholder="请选择内存"
+            >
               <el-option
                 v-for="item in memory_arr"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value">
+                :value="item.value"
+              >
               </el-option>
             </el-select>
           </el-form-item>
@@ -102,13 +120,36 @@
           </el-form-item>
 
           <el-form-item label="是否监控：" prop="watch">
-          <div class="openbgc" @click="openstart" :style="!app_set.watch?{backgroundImage:'url('+require('@/assets/imgs/btn_off_hov.png')+')'}:{}"></div>
+            <div
+              class="openbgc"
+              @click="openstart"
+              :style="
+                !app_set.watch
+                  ? {
+                      backgroundImage:
+                        'url(' + require('@/assets/imgs/btn_off_hov.png') + ')',
+                    }
+                  : {}
+              "
+            ></div>
           </el-form-item>
           <el-form-item label="储存容量：" prop="save_memory">
-          <div :class="{'select_box':true,'is_select':app_set.save_memory==save}" v-for="save in save_arr" :key="save" @click="app_set.save_memory=save">{{save}}</div>
+            <div
+              :class="{
+                select_box: true,
+                is_select: app_set.save_memory == save,
+              }"
+              v-for="save in save_arr"
+              :key="save"
+              @click="app_set.save_memory = save"
+            >
+              {{ save }}
+            </div>
           </el-form-item>
         </el-form>
-        <div class="senior_box" @click="senior_flag=true" v-if="!senior_flag">高级配置</div>
+        <div class="senior_box" @click="senior_flag = true" v-if="!senior_flag">
+          高级配置
+        </div>
         <div class="apass_button step_action" v-if="!senior_flag">
           <el-button type="primary" plain @click="preStep">
             上一步
@@ -117,7 +158,12 @@
             下一步
           </el-button>
         </div>
-        <p v-if="senior_flag" style="color: #58617a;font-size: 14px;margin-bottom:10px;margin-top:30px;">高级配置：</p>
+        <p
+          v-if="senior_flag"
+          style="color: #58617a;font-size: 14px;margin-bottom:10px;margin-top:30px;"
+        >
+          高级配置：
+        </p>
         <v-apaas-code v-show="senior_flag" :datas="app_set.code"></v-apaas-code>
         <div class="apass_button step_action" v-if="senior_flag">
           <el-button type="primary" plain @click="deal_code(0)">
@@ -133,7 +179,10 @@
         :step="2"
         :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
       >
-        <!-- content  -->
+        <deployment-info
+          :data="stateList"
+          style="margin-top: 30px;"
+        ></deployment-info>
         <div class="apass_button step_action">
           <el-button type="primary">
             前往查看
@@ -161,34 +210,37 @@ import apassDialog from "@/components/apass-dialog";
 import codes from "@/components/codes";
 var checkNumber = (rule, value, callback) => {
   if (!value) {
-          return callback(new Error('不能为空'));
+    return callback(new Error("不能为空"));
   }
   setTimeout(() => {
     if (new RegExp("^[1-9][0-9]*$").test(value)) {
       callback();
     } else {
-            callback(new Error('请输入正整数'))
+      callback(new Error("请输入正整数"));
     }
   });
-      };
-var checkName = (rule, value, callback)=>{
+};
+var checkName = (rule, value, callback) => {
   if (new RegExp("^[a-z]([0-9]||[a-z]||-)*$").test(value)) {
     callback();
   } else {
-    callback(new Error('小写字母开头,可以由小写字母、数字、- 组成'))
+    callback(new Error("小写字母开头,可以由小写字母、数字、- 组成"));
   }
-}
+};
+import deploymentInfo from "@/components/deployment-info";
+
 export default {
   components: {
     appBuildSteps,
     appBuildStep,
     apassDialog,
+    deploymentInfo,
     "v-apaas-code": codes,
   },
   data: () => ({
     step: 0,
-    senior_flag:false,
-    begin_code:'',
+    senior_flag: false,
+    begin_code: "",
     dialogInfo: {
       title: "",
       msg: "",
@@ -198,32 +250,42 @@ export default {
       namespace: "",
       name: "",
     },
-    app_set:{
-      title:'',
-      vision:'',
-      memory:'',
-      memory_type:1,
-      cpu:'',
-      watch:0,
-      save_memory:'',
-      code:''
+    app_set: {
+      title: "",
+      vision: "",
+      memory: "",
+      memory_type: 1,
+      cpu: "",
+      watch: 0,
+      save_memory: "",
+      code: "",
     },
-    area_options:[
+    area_options: [
       {
-        name:'12312',
-        value:1
-      }
+        name: "12312",
+        value: 1,
+      },
     ],
-    vision_arr:['1.0.1','10.1.2','2.2.3'],
-    save_arr:['2GI','4GI','8GI','16GI','32GI','64GI','128GI','256GI','512GI'],
-    memory_arr:[
+    vision_arr: ["1.0.1", "10.1.2", "2.2.3"],
+    save_arr: [
+      "2GI",
+      "4GI",
+      "8GI",
+      "16GI",
+      "32GI",
+      "64GI",
+      "128GI",
+      "256GI",
+      "512GI",
+    ],
+    memory_arr: [
       {
-        value:1,
-        label:'MI',
+        value: 1,
+        label: "MI",
       },
       {
-        value:2,
-        label:'GI',
+        value: 2,
+        label: "GI",
       },
     ],
     image_rules: {
@@ -232,56 +294,89 @@ export default {
       ],
       name: [
         { required: true, message: "请输入应用部署名称", trigger: "blur" },
-        { validator: checkName, trigger: 'blur' }
+        { validator: checkName, trigger: "blur" },
       ],
     },
     app_set_rules: {
-      title: [
-        { required: true, message: "请输入标题", trigger: "blur" },
-      ],
+      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
       memory: [
         { required: true, message: "请输入内存", trigger: "blur" },
-        { validator: checkNumber, trigger: 'blur' }
+        { validator: checkNumber, trigger: "blur" },
       ],
       cpu: [
         { required: true, message: "请输入cpu", trigger: "blur" },
-        { validator: checkNumber, trigger: 'blur' }
+        { validator: checkNumber, trigger: "blur" },
       ],
       vision: [{ required: true, message: "请选择版本号", trigger: "change" }],
-      save_memory: [{ required: true, message: "请选择存储容量", trigger: "change" }],
+      save_memory: [
+        { required: true, message: "请选择存储容量", trigger: "change" },
+      ],
+    },
+    evtUuid: "",
+    evtSource: null,
+    listStatus: [],
+    state: "",
+    text: "",
+    url: "",
+    act: 0,
+    stateList: [
+      {
+        name: "获取部署参数",
+        value: "values",
+        content: "获取部署参数",
+        state: 1,
+      },
+      {
+        name: "拉取部署文件",
+        value: "pull-chart",
+        content: "拉取部署文件",
+        state: 1,
       },
+      {
+        name: "开始部署",
+        value: "install",
+        content: "开始部署",
+        state: 1,
+      },
+      {
+        name: "部署状态",
+        value: "deploy-status",
+        content: "部署状态",
+        state: 2,
+      },
+    ],
   }),
   methods: {
-    get_step_info(){
+    get_step_info() {
       this.$http
         .get(`/apaas/hubApi/market/step/${this.$route.params.app_id}`)
         .then((response) => {
           console.log(JSON.parse(response.data.data));
-        })
+        });
     },
-    deal_code(n){
-      if(n){
-        this.begin_code = this.app_set.code
-      }else{
-        this.app_set.code = this.begin_code
+    deal_code(n) {
+      if (n) {
+        this.begin_code = this.app_set.code;
+      } else {
+        this.app_set.code = this.begin_code;
       }
-      this.senior_flag = false
+      this.senior_flag = false;
     },
-    sub_yy_form(formName){
+    sub_yy_form(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-            this.nextStep()
+          this.nextStep();
         } else {
-            console.log('error submit!!');
+          console.log("error submit!!");
           return false;
         }
       });
     },
-    openstart(){
-      if(this.app_set.watch){
-        this.app_set.watch = 0
-      }else{
-        this.app_set.watch = 1
+    openstart() {
+      if (this.app_set.watch) {
+        this.app_set.watch = 0;
+      } else {
+        this.app_set.watch = 1;
       }
     },
     preStep() {
@@ -290,19 +385,98 @@ export default {
     nextStep() {
       this.step++;
     },
+    getStatus() {
+      let evtUuid = Math.random()
+        .toString(16)
+        .substr(3);
+      let evtSource = new EventSource(
+        `/apaas/hubApi/event/subscribe/deploy/${evtUuid}`
+      );
+
+      this.evtUuid = evtUuid;
+      this.evtSource = evtSource;
+
+      evtSource.addEventListener("message", function(e) {
+        if (this.listStatus.map((o) => o.status).indexOf(e.lastEventId) == -1) {
+          if (this.listStatus.length) {
+            this.listStatus[this.listStatus.length - 1].success = "success";
+          }
+
+          this.listStatus.push({
+            status: e.lastEventId,
+            success: JSON.parse(e.data).state,
+            data: JSON.parse(e.data).data,
+          });
+
+          this.text = this.listStatus[this.listStatus.length - 1].data;
+          this.text = "<span class='linenum'></span>" + this.text;
+          this.text = this.text.replace(
+            /\n/g,
+            "\n<span class='linenum'></span>"
+          );
+          this.text = this.text.replace(/>==>/g, ">>");
+          this.act = this.listStatus.length - 1;
+        } else {
+          let i = this.listStatus.map((o) => o.status).indexOf(e.lastEventId);
+          let item = this.listStatus[i].data;
+
+          item = item + "\n" + JSON.parse(e.data).data;
+
+          this.listStatus[i].data = item;
+          this.text = this.listStatus[this.listStatus.length - 1].data;
+          this.text = "<span class='linenum'></span>" + this.text;
+          this.text = this.text.replace(
+            /\n/g,
+            "\n<span class='linenum'></span>"
+          );
+          this.text = this.text.replace(/>==>/g, ">>");
+          this.act = this.listStatus.length - 1;
+
+          if (JSON.parse(e.data).state != "notes") {
+            this.listStatus[i].success = JSON.parse(e.data).state;
+          }
+        }
+
+        if (JSON.parse(e.data).state == "success") {
+          this.state = "部署成功！";
+          this.url = `https://${window.location.host}/apaas/ui/#/pods?namespace=${this.baseInfoForm.namespace}`;
+        }
+
+        for (let i = 0; i < this.listStatus.length; i++) {
+          switch (this.listStatus[i].status) {
+            case "values":
+              this.listStatus[i].statusHan = "获取部署参数";
+              break;
+            case "pull-chart":
+              this.listStatus[i].statusHan = "拉取部署文件";
+              break;
+            case "install":
+              this.listStatus[i].statusHan = "开始部署";
+              break;
+            case "deploy-status":
+              this.listStatus[i].statusHan = "部署状态";
+              break;
+            default:
+              this.listStatus[i].statusHan = "其他";
+              break;
+          }
+        }
+      });
+    },
   },
   created() {
-    this.get_step_info()
+    this.getStatus();
+    this.get_step_info();
   },
 };
 </script>
 
 <style scoped>
-.openbgc{
+.openbgc {
   width: 56px;
   height: 23px;
-  background-image: url('~@/assets/imgs/btn_on_hov.png');
-  background-size:contain;
+  background-image: url("~@/assets/imgs/btn_on_hov.png");
+  background-size: contain;
   cursor: pointer;
 }
 .deployment-container {
@@ -320,7 +494,7 @@ export default {
 .step_action .el-button:not(:last-child) {
   margin-right: 30px;
 }
-.select_box{
+.select_box {
   height: 35px;
   width: 80px;
   line-height: 35px;
@@ -333,20 +507,20 @@ export default {
   margin-right: 10px;
   cursor: pointer;
 }
-.is_select{
+.is_select {
   background-color: #515fe7;
   color: #f8f9fd;
 }
-.limitsd{
+.limitsd {
   position: relative;
 }
-.deployment-container .step_form .el-form-item.limitsd .timeslect{
+.deployment-container .step_form .el-form-item.limitsd .timeslect {
   position: absolute;
   width: 100px;
   right: 0;
-  top:0;
+  top: 0;
 }
-.senior_box{
+.senior_box {
   width: 124px;
   height: 44px;
   background-color: #0f2683;
@@ -357,21 +531,21 @@ export default {
   text-align: center;
   cursor: pointer;
 }
-
 </style>
 
 <style>
-.deployment-container .step_form .el-form-item .el-input-group__append, .el-input-group__prepend{
+.deployment-container .step_form .el-form-item .el-input-group__append,
+.el-input-group__prepend {
   border-radius: 0 8px 8px 0;
 }
-.limitsd .timeslect .el-input__inner{
+.limitsd .timeslect .el-input__inner {
   width: 100px;
   border-radius: 0 8px 8px 0;
   background-color: rgba(15, 38, 131, 1);
   color: rgba(248, 249, 253, 1);
   border: 0;
 }
-.limitsd .limitinput .el-input__inner{
+.limitsd .limitinput .el-input__inner {
   width: 860px;
 }
 .deployment-container .avatar-uploader .el-upload {