Merge branch 'dev_pipeline' into dev

mock/index.js

@@ -28,6 +28,7 @@ app.use(`${prefix}/pipelines`, require('./routers/pipeline'));
 app.use(`${prefix}/deployments`, require('./routers/deployment'));
 app.use(`${prefix}/tree`, require('./routers/tree'));
 app.use(`${prefix}/bug_list`, require('./routers/buglist'));
+app.use(`${prefix}/stages`, require('./routers/stage'));
 
 app.listen(4000);
 

mock/routers/pipeline.js

@@ -13,14 +13,42 @@ router.delete('', (req, res) => {
 
 router.get('', (req, res) => {
   res.json(wrapper({
-    configJson: {
-      code: 0,
-      data: {
-        configJson: 'string',
-        id: 0,
+    configJson: JSON.stringify([
+      {
+        name: 'java-image-build',
+        active: true,
+        configs: {
+          repoUrl: '#todo',
+          branchName: '#todo',
+          jarName: '#todo',
+        },
+      },
+      {
+        name: 'k8s-namespace',
+        active: true,
+        configs: {
+        },
+      },
+      {
+        name: 'k8s-deployment',
+        active: true,
+        configs: {
+          port: '#todo',
+        },
+      },
+      {
+        name: 'k8s-service',
+        active: true,
+        configs: {
+        },
+      },
+      {
+        name: 'k8s-ingress',
+        active: true,
+        configs: {
+        },
       },
-      msg: 'string',
-    },
+    ]),
     id: req.params.pipelineId,
   }));
 });

mock/routers/stage.js

@@ -0,0 +1,89 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const router = require('express').Router();
+const Mock = require('mockjs');
+const wrapper = require('../wrapper');
+
+const { Random } = Mock;
+
+router.get('',
+  (req, res) => {
+    res.json(wrapper(
+      [
+        {
+          name: 'java-image-build',
+          title: '1',
+          description: 'desc',
+          skippable: true,
+          configs: [
+            {
+              name: 'repoUrl',
+              value: '#todo',
+              editable: true,
+            },
+            {
+              name: 'branchName',
+              value: '#todo',
+              editable: true,
+            },
+            {
+              name: 'jarName',
+              value: '#todo',
+              editable: true,
+            },
+          ],
+        },
+        {
+          name: 'k8s-namespace',
+          title: '2',
+          description: 'desc',
+          skippable: true,
+          configs: [
+            {
+              name: 'repoUrl',
+              value: '#todo',
+              editable: false,
+            },
+          ],
+        },
+        {
+          name: 'k8s-deployment',
+          title: '3',
+          skippable: false,
+          description: 'desc',
+          configs: [{
+            name: 'port',
+            value: '#todo',
+            editable: true,
+          }],
+        },
+        {
+          name: 'k8s-service',
+          title: '4',
+          description: 'desc',
+          skippable: true,
+          configs: [
+            {
+              name: 'repoUrl',
+              value: '#todo',
+              editable: false,
+            },
+          ],
+        },
+        {
+          name: 'k8s-ingress',
+          title: '5',
+          description: 'desc',
+          skippable: false,
+          configs: [
+            {
+              name: 'repoUrl',
+              value: '#todo',
+              editable: false,
+            },
+          ],
+        }],
+    ));
+  });
+
+module.exports = router;

src/element-plus.ts

@@ -3,6 +3,7 @@ import {
   ElCard,
   ElCarousel,
   ElCarouselItem,
+  ElCheckbox,
   ElContainer,
   ElCol,
   ElDivider,
@@ -12,6 +13,8 @@ import {
   ElMain,
   ElMenu,
   ElDialog,
+  ElSteps,
+  ElStep,
   ElIcon,
   ElInput,
   ElSubmenu,
@@ -46,6 +49,7 @@ locale.use(ZH_CN);
 export const Components = [
   ElAside,
   ElRow,
+  ElCheckbox,
   ElContainer,
   ElCol,
   ElHeader,
@@ -53,6 +57,8 @@ export const Components = [
   ElMenu,
   ElDialog,
   ElDrawer,
+  ElSteps,
+  ElStep,
   ElLink,
   ElMenuItem,
   ElCarousel,

src/views/Project/Pipeline.vue

@@ -122,30 +122,40 @@
       <ElDialog
         v-loading="diaLogLoading"
         v-model="showPipelineEditModal"
-        :before-close="(done) => {
-          jsonValid=true;
-          done();
-        }"
         destroy-on-close
       >
         <template #title>
           <span>编辑流水线配置</span>
-          <span class="button-group">
-            <ElButton type="text">脚本教程</ElButton>
-          </span>
         </template>
-        <ElInput
-          type="textarea"
-          :rows="16"
-          placeholder="请输入流水线配置"
-          @input="lintJson"
-          v-model="pipelineConfig">
-        ></ElInput>
-        <pre v-if="!jsonValid" :innerText="hint"></pre>
+        <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>
-          <span class="dialog-footer">
-            <el-button type="primary" @click="handlePipelineUpdateConfirm" :disabled="!jsonValid">确 定</el-button>
-          </span>
+          <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
@@ -250,10 +260,7 @@
 </template>
 
 <script>
-import jsonlint from '@/utils/jsonlint';
-
 import { PipelineAPI } from '@/api';
-import debounce from '@/utils/debounce';
 
 import { formatter } from '@/utils/time';
 
@@ -280,13 +287,34 @@ export default {
         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.loading = true;
     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();
     this.loading = false;
   },
   methods: {
@@ -328,10 +356,11 @@ export default {
           this.showPipelineEditModal = true;
           this.dialogLoading = true;
           this.editingPipelineId = id;
-          this.pipelineConfig = await PipelineAPI.getPipeline({
+          const config = (await PipelineAPI.getPipeline({
             projectId: this.$store.state.workspace.currentProjectId,
             pipelineId: id,
-          }).configJson || '{}';
+          })).configJson;
+          this.pipelineConfig = JSON.parse(config || '{}');
           this.dialogLoading = false;
           break;
         }
@@ -349,23 +378,12 @@ export default {
         }
       }
     },
-    // eslint-disable-next-line func-names
-    lintJson: debounce(function (value) {
-      this.jsonValid = true;
-      try {
-        const result = jsonlint.parse(value);
-        this.pipelineConfig = JSON.stringify(result, null, '  ');
-      } catch (e) {
-        this.jsonValid = false;
-        this.hint = `${value}\n${e}`;
-      }
-    }, 500),
     async handlePipelineUpdateConfirm() {
       this.confirmLoading = true;
       await PipelineAPI.updatePipeline({
         projectId: this.$store.state.workspace.currentProjectId,
         pipelineId: this.editingPipelineId,
-        configJson: JSON.stringify(JSON.parse(this.pipelineConfig)),
+        configJson: JSON.stringify(this.pipelineConfig),
       });
       this.confirmLoading = false;
       this.showPipelineEditModal = false;
@@ -393,6 +411,9 @@ export default {
       await PipelineAPI.deleteInstance(id);
       this.loading = false;
     },
+    getStage(stageName) {
+      return this.stages.find((stage) => stage.name === stageName);
+    },
   },
 };
 </script>
@@ -414,6 +435,9 @@ export default {
   width: 60%;
   margin: 0 auto;
 }
+.edit-pipeline-form {
+  margin-top: 20px;
+}
 .button-group {
   margin-left: 40px;
 }