SEEC-II-FrontEnd/src/views/student/Code/ProjectDetail/DeployDetail.vue

<template>
  <div class="data-table">
    <section>
      <div class="mirror-subtitle" v-if="deployStatus != 'RUNNING'">
        选择镜像
      </div>
      <div class="select-mirror" v-if="deployStatus != 'RUNNING'">
        <div class="latest-build">
          <div
            class="test-item"
            :key="`b${item.id}`"
            v-for="item in latestBuildList"
          >
            <div>
              <b-radio v-model="radio" :native-value="`b${item.id}`"> </b-radio>
              <strong>构建ID: #</strong> {{ item.id }}
              <b-tag type="is-success">success</b-tag>
              <span style="padding-left: 10px">
                <strong>镜像ID: #</strong> {{ item.mirrorId }}
              </span>
            </div>
          </div>
          <div
            class="test-item"
            :key="`d${item.id}`"
            v-for="item in latestDeployList"
          >
            <div>
              <b-radio v-model="radio" :native-value="`d${item.id}`"> </b-radio>
              <strong>部署ID: #</strong> {{ item.id }}
              <b-tag type="is-success">success</b-tag>
              <span style="padding-left: 10px">
                <strong>镜像ID: #</strong> {{ item.mirrorId }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <button
        :class="['button', 'block', 'is-link', { 'is-loading': isRunning }]"
        @click="startDeploy"
        style="margin-top: 20px;"
      >
        开始部署
      </button>
      <b-message
        title="部署进行中..."
        :active.sync="isRunning"
        type="is-warning"
      >
        部署已经开始，一次部署需要大约5－10分钟，请5-10分钟后刷新页面获取部署结果
      </b-message>
    </section>
    <!--部署记录-->
    <div class="deploy-list" v-if="deployInfo">
      <div class="subtitle">
        {{ isRunning ? "当前部署情况" : "上次部署结果" }}
      </div>
      <div class="deploy-item">本次部署ID: #{{ deployInfo.id }}</div>
      <div class="deploy-item">本次部署镜像ID: #{{ deployInfo.mirrorId }}</div>
      <div class="deploy-item">
        本次部署创建时间: {{ handleTime(deployInfo.createdAt) }}
      </div>
      <div class="deploy-item" v-if="deployInfo.endAt">
        本次部署结束时间: {{ handleTime(deployInfo.endAt) }}
      </div>
      <div class="deploy-item">
        部署结果:
        <div :class="['tag', type(deployInfo.status)]">
          {{ deployInfo.status }}
        </div>
      </div>
      <div class="subtitle">项目部署地址</div>
      <div class="deploy-item">{{ deployInfo.url }}</div>
      <div class="deploy-item">
        <div class="subtitle">部署输出信息</div>
        <a
          :class="[
            'button',
            'is-small',
            'is-info',
            { 'is-loading': isfetchLog }
          ]"
          @click="getDeployLogInfo"
        >
          {{ unfoldDeployLogInfo ? "收起部署详细信息" : "查看部署详细信息" }}</a
        >
        <div class="code-section" v-show="unfoldDeployLogInfo">
          <div class="code-content" v-html="deployLog"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getDeployDetail,
  getDeployLogInfo,
  getLatestBuildInfoList,
  makeDeploy,
  getLatestDeployInfoList
} from "@/api/codehw";

export default {
  data() {
    return {
      isActive: false,
      isRunning: false,
      deployStatus: "",
      deployInfo: {},
      haveDeployRecord: false,
      deployLog: "",
      unfoldDeployLogInfo: false,
      latestBuildList: [],
      latestDeployList: [],
      latestMirrorIdList: [],
      radio: -1,
      isfetchLog: false
    };
  },
  props: {
    projectDetail: {
      type: Object,
      default: () => {}
    },
    detailLoading: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    projectDetail: function(newVal) {
      console.log(newVal);
      //获取最新一次部署详细信息
      if (newVal.latestDeploy && newVal.latestDeploy.id) {
        this.haveDeployRecord = true;
        this.getLatestDeployInfo(newVal.latestDeploy.id);
        // this.getDeployLogInfo(this.projectDetail.latestDeploy.id);
      }
      this.getLatestBuildInfo(this.projectDetail && this.projectDetail.id, 5);
      this.getLastNDeployInfoList(
        this.projectDetail && this.projectDetail.id,
        5
      );
    }
  },
  mounted() {
    if (this.projectDetail.latestDeploy) {
      this.getLatestDeployInfo(this.projectDetail.latestDeploy.id);
      // this.getDeployLogInfo(this.projectDetail.latestDeploy.id);
    }
    if (this.projectDetail.id) {
      this.getLatestBuildInfo(this.projectDetail.id, 5);
      this.getLastNDeployInfoList(this.projectDetail.id, 5);
    }
  },
  methods: {
    //获取部署日志
    // checkDeployLog(){
    //     if(this.projectDetail.latestDeploy){
    //         this.getDeployLogInfo(this.projectDetail.latestDeploy.id);
    //     }
    // },
    //获取最新一次部署详细信息
    getLatestDeployInfo(deployId) {
      getDeployDetail(deployId)
        .then(res => {
          this.deployInfo = res.data;
          this.deployStatus = res.data.status;
          let isRunning = this.deployStatus == "RUNNING" ? true : false;
          this.isRunning = isRunning;
        })
        .catch(e => {
          this.$toast.open({
            message: e.message || "服务器未知错误",
            type: "is-danger"
          });
        });
    },
    //处理时间格式
    handleTime(time) {
      if (!time) {
        return "";
      }
      return time.replace("T", " ") + "ms";
    },
    //开始部署
    startDeploy() {
      if (this.radio == -1) {
        this.$toast.open({
          message: "请先选择镜像",
          type: "is-danger"
        });
        return;
      } else {
        let mirrorId = this.getSelectedMirrorId();
        //触发部署
        makeDeploy({
          projectId: this.projectDetail.id,
          mirrorId: mirrorId,
          replicas: 1
        })
          .then(res => {
            console.log(res);
            this.$toast.open({
              message: "开始部署",
              type: "is-success"
            });
            this.isRunning = true;
            // setTimeout(() => {
            //   this.getLatestDeployInfo(this.projectDetail.latestDeploy.id);
            // }, 1000);
          })
          .catch(e => {
            this.$toast.open({
              message: e.message || "服务器未知错误",
              type: "is-danger"
            });
          });
      }
    },
    //获取最近n次部署成功记录
    getLastNDeployInfoList(projectId, limit) {
      getLatestDeployInfoList(projectId, limit)
        .then(res => {
          this.latestDeployList = res.data;
          // this.latestMirrorIdList = this.latestMirrorIdList.concat(res.data);
        })
        .catch(e => {
          this.$toast.open({
            message: e.message || " 服务器未知错误",
            type: "is-danger"
          });
        });
    },
    //获取最近n个构建的信息
    getLatestBuildInfo(projectId, limit) {
      getLatestBuildInfoList(projectId, limit)
        .then(res => {
          this.latestBuildList = res.data;
          // this.latestMirrorIdList = this.latestMirrorIdList.concat(res.data);
        })
        .catch(e => {
          this.$toast.open({
            message: e.message || "服务器未知错误",
            type: "is-danger"
          });
        });
    },
    //获取部署日志
    getDeployLogInfo() {
      if (this.unfoldDeployLogInfo) {
        this.unfoldDeployLogInfo = false;
      } else {
        let deployId = this.projectDetail.latestDeploy.id;
        this.isfetchLog = true;
        getDeployLogInfo(deployId)
          .then(res => {
            this.deployLog = res.data;
            this.unfoldDeployLogInfo = true;
            this.isfetchLog = false;
          })
          .catch(e => {
            this.isfetchLog = false;
            this.$toast.open({
              message: e.message || "服务器未知错误",
              type: "is-danger"
            });
          });
      }
    },
    //部署类型
    type(value) {
      if (value == "FAILURE") {
        return "is-danger";
      } else if (value == "RUNNING") {
        return "is-warning";
      } else if (value == "SUCCESS") {
        return "is-success";
      } else {
        return "";
      }
    },
    //选择镜像ID
    getSelectedMirrorId() {
      let list =
        this.radio[0] == "b" ? this.latestBuildList : this.latestDeployList;
      let id = this.radio.substring(1);
      for (let item of list) {
        if (item.id == id) {
          return item.mirrorId;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/scss/app";
.mirror-subtitle {
  font-size: 1.25rem;
  width: 100%;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #dbdbdb;
}
.select-mirror {
  width: 100%;
  display: flex;
  .latest-build {
    width: 100%;
  }
}
.test-item {
  width: 100%;
  padding: $default-margin $default-margin-between;
  margin: 0 -#{$default-margin-between};
  cursor: pointer;
}
/*.test-item:hover,*/
/*.test-item:nth-child(even):hover {*/
/*background-color: #dde3ef;*/
/*}*/

.test-item:nth-child(even) {
  background-color: rgba(244, 247, 252, 0.6);
}
.deploy-list {
  margin-top: 1.5rem;
  .deploy-item {
    margin-top: 10px;
    font-weight: bold;
    .tag {
      margin-left: 10px;
      margin-right: 10px;
    }
    a {
      margin-bottom: 10px;
    }
  }
  .subtitle {
    margin-top: 1.5rem;
    width: 100%;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
  }
}
.code-section {
  background-color: #2d3044;
  padding: 20px 20px 20px 20px;
  white-space: pre-line;
  .code-content {
    color: #cacff1;
  }
}
</style>