seecoder-devcloud-frontend/src/views/Project/Pipeline.vue

<template>
  <ElTabs class="tabs" v-model="activeTab">
    <ElTabPane label="流水线" name="pipeline">
      <ElTable :data="pipelines" width="100%" :default-sort="{prop: 'id', order: 'descending'}">
        <ElTableColumn
          prop="id"
          label="ID"
          align="center"
          width="60"
        ></ElTableColumn>
        <ElTableColumn
          prop="name"
          label="名称"
          align="center"
          width="180"
        ></ElTableColumn>
        <ElTableColumn
          prop="username"
          label="最近执行人"
          align="center"
          width="180"
        ></ElTableColumn>
        <ElTableColumn
          label="最近执行时间"
          align="center"
          :formatter="(row) => timeFormatter(row, 'startTime')"
        ></ElTableColumn>
        <ElTableColumn
          prop="result"
          label="执行状态"
          align="center"
          width="100"
          :filters="[{ text: '成功', value: '成功' }, { text: '失败', value: '失败' }]"
          :filter-method="(value, row) => {
            return row.result === value;
          }"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <template v-if="scope.row.result === '成功'">
              <ElTag type="success">{{scope.row.result}}</ElTag>
            </template>
            <template v-else-if="scope.row.result === '失败'">
              <ElTag type="danger">{{scope.row.result}}</ElTag>
            </template>
            <template v-else-if="scope.row.result === '执行中'">
              <ElTag>{{scope.row.result}}<i class="el-icon-loading"></i></ElTag>
            </template>
            <template v-else>
              <ElTag type="warning">未知状态</ElTag>
            </template>
          </template>
        </ElTableColumn>
        <ElTableColumn
          label="详情"
          align="center"
        >
          <template #default="scope">
            <ElButton
              @click="handleClick('detail', scope.row.historyId)"
              type="text"
              size="small"
              :disabled="scope.row.result==='执行中'"
            >最近执行详情</ElButton>
            <ElButton @click="handleClick('history', scope.row.id)" type="text" size="small">历史</ElButton>
          </template>
        </ElTableColumn>
        <ElTableColumn
          align="center"
        >
          <template #header>
            <span>操作</span>
            <ElButton @click="handleClick('create')" type="text" class="add-button">新建</ElButton>
          </template>
          <template #default="scope">
            <ElButton @click="handleClick('trigger', scope.row.id)" type="text" size="small">触发</ElButton>
            <ElButton @click="handleClick('edit', scope.row.id)" type="text" size="small">编辑</ElButton>
            <ElButton @click="handleClick('delete', scope.row.id)" type="text" size="small">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElDialog v-model="showPipelineDetailModal" destroy-on-close>
        <template #title>历史执行结果详情</template>
        <pre class="pipeline-detail">{{detail}}</pre>
      </ElDialog>
      <ElDialog v-model="showPipelineHistoryModal" destroy-on-close>
        <template #title>流水线构建历史</template>
        <ElTable
          :data="pipelineHistory"
          :default-sort="{prop: 'id', order: 'descending'}"
          height="400"
        >
          <ElTableColumn
            prop="id"
            label="构建ID"
            align="center"
            width="100"
          ></ElTableColumn>
          <ElTableColumn
            prop="pipelineId"
            label="流水线ID"
            align="center"
            width="100"
          ></ElTableColumn>
          <ElTableColumn
            prop="username"
            label="触发人"
            align="center"
            width="180"
          ></ElTableColumn>
          <ElTableColumn
            label="执行时间"
            align="center"
            :formatter="(row) => timeFormatter(row, 'startTime')"
          ></ElTableColumn>
          <ElTableColumn>
            <template #default="scope">
              <ElButton @click="handleClick('detail', scope.row.id)" type="text" size="small">查看详情</ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElDialog>
      <ElDialog
        v-model="showPipelineEditModal"
        destroy-on-close
      >
        <template #title>
          <span>编辑流水线配置</span>
        </template>
        <ElSteps :active="activeStep">
          <ElStep
            v-for="(config, index) in pipelineConfig"
            :key="index"
            :title="getStage(config.name).title"
            :description="getStage(config.name).description"
          >
          </ElStep>
        </ElSteps>
        <div class="edit-pipeline-form" v-for="(config, index) in pipelineConfig" :key="index" v-show="activeStep === index">
          <ElForm label-width="160px">
            <div style="margin: 20px 0 20px 160px;">
              <ElCheckbox
                :disabled="!getStage(config.name).skippable"
                v-model="config.active"
              >启用该阶段</ElCheckbox>
            </div>
            <ElFormItem v-for="(val, key) in config.configs" :key="key" :label="key">
              <ElInput
                :disabled="!getStage(config.name).configs.find((config) => config.name === key).editable"
                v-model="config.configs[key]"
              ></ElInput>
            </ElFormItem>
          </ElForm>
        </div>
        <template #footer>
          <ElButton :disabled="activeStep == 0" @click="() => activeStep -= 1">上一步</ElButton>
          <ElButton :disabled="isLastStep"  @click="() => activeStep += 1">下一步</ElButton>
          <ElButton type="primary" :disabled="!isLastStep" @click="handlePipelineUpdateConfirm">确定</ElButton>
        </template>
      </ElDialog>
      <ElDialog
        v-model="showPipelineCreateModal"
        :before-close="(done) => {
          $refs['createPipelineForm'].resetFields();
          done();
        }"
        destroy-on-close
      >
        <template #title>
          <span>创建流水线</span>
          <span class="button-group">
            <ElButton type="text">模板详解</ElButton>
          </span>
        </template>
        <ElForm
          :model="createPipelineForm"
          ref="createPipelineForm"
          label-position="top"
          label-suffix="："
          class="create-pipeline-form"
        >
          <ElFormItem label="名称" prop="name" required>
            <ElInput v-model="createPipelineForm.name" placeholder="请输入流水线名称"></ElInput>
          </ElFormItem>
          <ElFormItem label="模板" prop="template" required>
            <ElSelect v-model="createPipelineForm.template" placeholder="请选择模板">
              <ElOption
                v-for="(template, index) in templates"
                :key="index" :label="template"
                :value="template"
              ></ElOption>
            </ElSelect>
          </ElFormItem>
        </ElForm>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="handlePipelineCreateConfirm">确 定</el-button>
          </span>
        </template>
      </ElDialog>
    </ElTabPane>
    <ElTabPane label="部署产物" name="production">
      <ElTable :data="productions" width="100%" :default-sort="{prop: 'id', order: 'descending'}">
        <ElTableColumn
          prop="id"
          label="ID"
          align="center"
          width="60"
        ></ElTableColumn>
        <ElTableColumn
          prop="name"
          label="名称"
          align="center"
        ></ElTableColumn>
        <ElTableColumn
          prop="pipelineId"
          label="流水线ID"
          align="center"
          width="100"
        ></ElTableColumn>
        <ElTableColumn
          label="部署时间"
          align="center"
          :formatter="(row) => timeFormatter(row, 'deployedTime')"
        ></ElTableColumn>
        <ElTableColumn
          label="URL"
          align="center"
        >
          <template #default="scope">
              <ElButton type="text" @click="open(scope.row.accessUrl, '_blank')">
                {{scope.row.accessUrl}}
              </ElButton>
          </template>
        </ElTableColumn>
        <ElTableColumn
          label="运行状态"
          align="center"
        >
          <template #default="scope">
            <template v-if="scope.row.status === '正常'">
              <ElTag type="success">{{scope.row.status}}</ElTag>
            </template>
            <template v-else>
              <ElTag type="danger">{{scope.row.status}}</ElTag>
            </template>
          </template>
        </ElTableColumn>
        <ElTableColumn>
          <template #default="scope">
            <ElButton type="text" @click="deleteProduction(scope.row.id)">
              <i class="el-icon-delete"></i>
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </ElTabPane>
  </ElTabs>
</template>

<script>
import { PipelineAPI } from '@/api';

export default {
  data() {
    return {
      activeTab: 'pipeline',
      pipelines: [],
      productions: [],
      showPipelineCreateModal: false,
      showPipelineEditModal: false,
      showPipelineHistoryModal: false,
      showPipelineDetailModal: false,
      detail: '',
      pipelineHistory: [],
      pipelineConfig: '',
      jsonValid: true,
      editingPipelineId: -1,
      templates: [],
      createPipelineForm: {
        name: '',
        template: '',
      },
      stages: [],
      activeStep: 0,
    };
  },
  computed: {
    isLastStep() {
      return this.activeStep === this.stages.length - 1;
    },
    stageConfigsBase() {
      return this.stages.map((stage) => ({
        name: stage.name,
        active: true,
        configs: stage.configs.map(({ name, value, editable }) => ({
          [name]: value,
          editable,
        })).reduce((prev, curr) => Object.assign(prev, curr), {}),
      }));
    },
    stageConfigs() {
      return this.stageConfigsBase;
    },
  },
  async mounted() {
    this.pipelines = await PipelineAPI.getPipelinesByProjectId(this.$store.state.workspace.currentProjectId);
    this.productions = await PipelineAPI.getDeploymentsByProjectId(this.$store.state.workspace.currentProjectId);
    this.templates = await PipelineAPI.getPipelineTemplates();
    this.stages = await PipelineAPI.getStages();
  },
  methods: {
    timeFormatter: (row, property) => `${row[property].year}/${row[property].month}/${row[property].day} `
            + `${row[property].hours}:${row[property].minutes}:${row[property].seconds}`,
    async handleClick(action, id) {
      switch (action) {
        case 'create': {
          this.showPipelineCreateModal = true;
          break;
        }
        case 'trigger': {
          await PipelineAPI.triggerDeployment({
            projectId: this.$store.state.workspace.currentProjectId,
            pipelineId: id,
          });
          this.productions = await PipelineAPI.getDeploymentsByProjectId(this.$store.state.workspace.currentProjectId);
          break;
        }
        case 'detail': {
          this.showPipelineDetailModal = true;
          this.detail = await PipelineAPI.getPipelineHistoryDetail(id);
          break;
        }
        case 'history': {
          this.showPipelineHistoryModal = true;
          this.pipelineHistory = await PipelineAPI.getPipelineHistory({
            projectId: this.$store.state.workspace.currentProjectId,
            pipelineId: id,
          });
          break;
        }
        case 'edit': {
          this.showPipelineEditModal = true;
          this.editingPipelineId = id;
          const config = (await PipelineAPI.getPipeline({
            projectId: this.$store.state.workspace.currentProjectId,
            pipelineId: id,
          })).configJson;
          this.pipelineConfig = JSON.parse(config || '{}');
          break;
        }
        case 'delete': {
          PipelineAPI.deletePipeline({
            projectId: this.$store.state.workspace.currentProjectId,
            pipelineId: id,
          });
          break;
        }
        default: {
          console.warn('Unknown type of action.');
        }
      }
    },
    async handlePipelineUpdateConfirm() {
      await PipelineAPI.updatePipeline({
        projectId: this.$store.state.workspace.currentProjectId,
        pipelineId: this.editingPipelineId,
        configJson: JSON.stringify(this.pipelineConfig),
      });
      this.showPipelineEditModal = false;
    },
    async handlePipelineCreateConfirm() {
      this.$refs.createPipelineForm.validate(async (valid) => {
        if (valid) {
          await PipelineAPI.createPipeline({
            projectId: this.$store.state.workspace.currentProjectId,
            pipelineId: this.editingPipelineId,
            name: this.createPipelineForm.name,
            templateName: this.createPipelineForm.template,
          });
          this.showPipelineCreateModal = false;
        }
      });
    },
    open(url, target) {
      window.open(url, target);
    },
    async deleteProduction(id) {
      await PipelineAPI.deleteInstance(id);
    },
    getStage(stageName) {
      return this.stages.find((stage) => stage.name === stageName);
    },
  },
};
</script>

<style scoped>
.tabs {
  width: 80%;
  margin: auto auto;
}
.add-button {
  margin-left: 14px;
}
.pipeline-detail {
  width: 100%;
  word-break: break-word;
  white-space: pre-wrap;
}
.create-pipeline-form {
  width: 60%;
  margin: 0 auto;
}
.edit-pipeline-form {
  margin-top: 20px;
}
.button-group {
  margin-left: 40px;
}
</style>