chore: 流水线模版初步

packages/plugins/plugin-lib/src/common/util.ts

@@ -17,6 +17,7 @@ export function createCertDomainGetterInputDefine(opts?: { certInputKey?: string
           }
         }
         `,
+      template:false,
       required: true,
     },
     opts?.props

packages/ui/certd-client/src/router/source/modules/certd.ts

@@ -32,6 +32,24 @@ export const certdResources = [
           isMenu: false,
         },
       },
+      {
+        title: "流水线模版",
+        name: "PipelineTemplate",
+        path: "/certd/pipeline/template",
+        component: "/certd/pipeline/template/index.vue",
+        meta: {
+          isMenu: true,
+        },
+      },
+      {
+        title: "流水线模版编辑",
+        name: "PipelineTemplateEdit",
+        path: "/certd/pipeline/template/edit",
+        component: "/certd/pipeline/template/edit.vue",
+        meta: {
+          isMenu: false,
+        },
+      },
       {
         title: "执行历史记录",
         name: "PipelineHistory",

packages/ui/certd-client/src/store/plugin/index.ts

@@ -157,5 +157,8 @@ export const usePluginStore = defineStore({
     async getPluginConfig(query: any) {
       return await api.GetPluginConfig(query);
     },
+    getPluginDefineSync(name: string) {
+      return this.group.get(name);
+    },
   },
 });

packages/ui/certd-client/src/style/common.less

@@ -300,4 +300,11 @@ h1, h2, h3, h4, h5, h6 {
 
 .ant-drawer-content-wrapper {
   max-width: 90vw;
+}
+
+
+.block-title{
+  font-size: 14px;
+  padding:10px;
+  color : #6e6e6e;
 }

packages/ui/certd-client/src/views/certd/pipeline/template/api.ts

@@ -0,0 +1,59 @@
+import { request } from "/src/api/service";
+import { CertInfo } from "/@/views/certd/pipeline/api";
+
+const apiPrefix = "/pi/template";
+export const templateApi = {
+  async GetList(query: any) {
+    return await request({
+      url: apiPrefix + "/page",
+      method: "post",
+      data: query,
+    });
+  },
+
+  async AddObj(obj: any) {
+    return await request({
+      url: apiPrefix + "/add",
+      method: "post",
+      data: obj,
+    });
+  },
+
+  async UpdateObj(obj: any) {
+    return await request({
+      url: apiPrefix + "/update",
+      method: "post",
+      data: obj,
+    });
+  },
+
+  async DelObj(id: number) {
+    return await request({
+      url: apiPrefix + "/delete",
+      method: "post",
+      params: { id },
+    });
+  },
+
+  async GetObj(id: number) {
+    return await request({
+      url: apiPrefix + "/info",
+      method: "post",
+      params: { id },
+    });
+  },
+
+  async GetDetail(id: number) {
+    return await request({
+      url: apiPrefix + "/detail",
+      method: "post",
+      params: { id },
+    });
+  },
+  async ListAll() {
+    return await request({
+      url: apiPrefix + "/all",
+      method: "post",
+    });
+  },
+};

packages/ui/certd-client/src/views/certd/pipeline/template/crud.tsx

@@ -0,0 +1,113 @@
+// @ts-ignore
+import { useI18n } from "vue-i18n";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, useFormWrapper, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { templateApi } from "./api";
+import { useRouter } from "vue-router";
+import { useModal } from "/@/use/use-modal";
+
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const api = templateApi;
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async (req: EditReq) => {
+    const { form, row } = req;
+    form.id = row.id;
+    const res = await api.UpdateObj(form);
+    return res;
+  };
+  const delRequest = async (req: DelReq) => {
+    const { row } = req;
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async (req: AddReq) => {
+    const { form } = req;
+    const res = await api.AddObj(form);
+    return res;
+  };
+  const { openCrudFormDialog } = useFormWrapper();
+  const router = useRouter();
+
+  const model = useModal();
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest,
+      },
+      form: {
+        labelCol: {
+          //固定label宽度
+          span: null,
+          style: {
+            width: "100px",
+          },
+        },
+        col: {
+          span: 22,
+        },
+        wrapper: {
+          width: 600,
+        },
+      },
+      actionbar: {
+        show: true,
+        buttons: {
+          add: {
+            text: "创建模版",
+            type: "primary",
+            show: true,
+          },
+        },
+      },
+      rowHandle: {
+        // width: 100,
+        fixed: "right",
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          search: {
+            show: false,
+          },
+          column: {
+            width: 100,
+            editable: {
+              disabled: true,
+            },
+          },
+          form: {
+            show: false,
+          },
+        },
+        title: {
+          title: "模版名称",
+          type: "text",
+          search: {
+            show: true,
+          },
+          column: {
+            width: 200,
+            sorter: true,
+          },
+        },
+        pipelineId: {
+          title: "流水线ID",
+          type: "text",
+          search: {
+            show: true,
+          },
+          column: {
+            width: 200,
+            sorter: true,
+          },
+        },
+      },
+    },
+  };
+}

packages/ui/certd-client/src/views/certd/pipeline/template/edit.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="page-template-edit">
+    <div class="base"></div>
+    <div class="props flex p-10">
+      <div class="task-list w-50%">
+        <div class="block-title">原始任务参数</div>
+        <a-collapse>
+          <a-collapse-panel v-for="step of steps" class="step-item" :header="step.title">
+            <div class="step-inputs flex flex-wrap">
+              <div v-for="(input, key) of step.input" :key="key" class="hover:bg-gray-100 p-5 w-full xl:w-[50%]">
+                <div class="flex flex-between" :title="input.define.helper">
+                  <div class="flex flex-1 overflow-hidden mr-5">
+                    <span style="min-width: 140px" class="bas">
+                      <a-tag color="green">{{ input.define.title }}</a-tag>
+                    </span>
+                    <span :title="input.value" class="ellipsis flex-1 text-nowrap">= {{ input.value }}</span>
+                  </div>
+                  <fs-button v-if="!templateProps.input?.[key]" size="small" type="primary" icon="ion:add" title="添加为模版变量" @click="addToProps(step.id, key, input)"></fs-button>
+                  <fs-button v-else size="small" danger icon="ion:close" title="删除模版变量" @click="removeToProps(step.id, key)" />
+                </div>
+              </div>
+            </div>
+          </a-collapse-panel>
+        </a-collapse>
+      </div>
+
+      <div class="template-props w-50%">
+        <div class="block-title">模版变量</div>
+        <div class="p-10">
+          <fs-form v-bind="templateFormOptions"></fs-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, Ref } from "vue";
+import { useRoute } from "vue-router";
+import { templateApi } from "./api";
+import { eachSteps } from "../utils";
+import { usePluginStore } from "/@/store/plugin";
+
+const route = useRoute();
+const templateId = route.query.templateId as string;
+
+type TemplateDetail = {
+  template: any;
+  pipeline: any;
+};
+const templateProps: Ref = ref({
+  input: {},
+});
+const detail: Ref<TemplateDetail> = ref();
+async function getTemplateDetail() {
+  const res = await templateApi.GetDetail(parseInt(templateId));
+  detail.value = res;
+  templateProps.value = JSON.parse(res.template.content ?? "{}");
+}
+
+const pluginStore = usePluginStore();
+
+onMounted(async () => {
+  await pluginStore.init();
+  await getTemplateDetail();
+});
+
+const steps = computed(() => {
+  if (!detail.value) {
+    return [];
+  }
+
+  const list: any[] = [];
+  eachSteps(detail.value.pipeline, (step: any) => {
+    const plugin = pluginStore.getPluginDefineSync(step.type);
+    if (!plugin) {
+      return;
+    }
+
+    const inputs: any = {};
+    for (const key in plugin.input) {
+      const input: any = plugin.input[key];
+      if (input.template === false || input.component?.name === "output-selector") {
+        continue;
+      }
+      inputs[key] = {
+        value: step.input[key],
+        define: plugin.input[key],
+      };
+    }
+    list.push({
+      id: step.id,
+      title: step.title,
+      type: step.type,
+      input: inputs,
+    });
+  });
+
+  return list;
+});
+
+const templateFormOptions = computed(() => {
+  const columns: any = {};
+  for (const key in templateProps.value.input) {
+    const input = templateProps.value.input[key];
+    columns[key] = {
+      title: input.define.title,
+      type: "text",
+      value: input.value,
+      ...input.define,
+    };
+  }
+  return {
+    columns,
+    labelCol: {
+      style: {
+        width: "120px",
+      },
+    },
+  };
+});
+
+function addToProps(stepId: string, key: any, input: { value: any; define: any }) {
+  if (!templateProps.value.input) {
+    templateProps.value.input = {};
+  }
+  inputKey = stepId + "." + key;
+  templateProps.value.input[inputKey] = input;
+}
+
+function removeToProps(stepId: string, key: any) {
+  inputKey = stepId + "." + key;
+  delete templateProps.value.input[inputKey];
+}
+</script>

packages/ui/certd-client/src/views/certd/pipeline/template/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        流水线模版
+        <span class="sub">可根据模版批量创建流水线</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { onActivated, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+
+defineOptions({
+  name: "PipelineTemplate",
+});
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
+
+// 页面打开后获取列表数据
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+onActivated(() => {
+  crudExpose.doRefresh();
+});
+</script>

packages/ui/certd-server/db/migration/v10026__template.sql

@@ -0,0 +1,15 @@
+CREATE TABLE "pi_template"
+(
+  "id"          integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+  "user_id"     integer,
+  "pipeline_id" integer,
+  "title"       varchar(1024),
+  "content"     text,
+  "order"       integer,
+  "disabled"    boolean  NOT NULL DEFAULT (false),
+  "create_time" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP),
+  "update_time" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP)
+);
+
+CREATE INDEX "index_template_user_id" ON "pi_template" ("user_id");
+CREATE INDEX "index_template_pipeline_id" ON "pi_template" ("pipeline_id");

packages/ui/certd-server/src/controller/user/pipeline/template-controller.ts

@@ -0,0 +1,77 @@
+import {ALL, Body, Controller, Inject, Post, Provide, Query} from '@midwayjs/core';
+import {Constants, CrudController} from '@certd/lib-server';
+import { TemplateService } from '../../../modules/pipeline/service/template-service.js';
+
+/**
+ * 流水线模版
+ */
+@Provide()
+@Controller('/api/pi/template')
+export class TemplateController extends CrudController<TemplateService> {
+  @Inject()
+  service: TemplateService;
+
+  getService() {
+    return this.service;
+  }
+
+
+  @Post('/page', { summary: Constants.per.authOnly })
+  async page(@Body(ALL) body) {
+    body.query = body.query ?? {};
+    delete body.query.userId;
+    const buildQuery = qb => {
+      qb.andWhere('user_id = :userId', { userId: this.getUserId() });
+    };
+    const res = await this.service.page({
+      query: body.query,
+      page: body.page,
+      sort: body.sort,
+      buildQuery,
+    });
+    return this.ok(res);
+  }
+
+  @Post('/list', { summary: Constants.per.authOnly })
+  async list(@Body(ALL) body) {
+    body.query = body.query ?? {};
+    body.query.userId = this.getUserId();
+    return super.list(body);
+  }
+
+  @Post('/add', { summary: Constants.per.authOnly })
+  async add(@Body(ALL) bean) {
+    bean.userId = this.getUserId();
+    return super.add(bean);
+  }
+
+  @Post('/update', { summary: Constants.per.authOnly })
+  async update(@Body(ALL) bean) {
+    await this.service.checkUserId(bean.id, this.getUserId());
+    delete bean.userId;
+    return super.update(bean);
+  }
+  @Post('/info', { summary: Constants.per.authOnly })
+  async info(@Query('id') id: number) {
+    await this.service.checkUserId(id, this.getUserId());
+    return super.info(id);
+  }
+
+  @Post('/delete', { summary: Constants.per.authOnly })
+  async delete(@Query('id') id: number) {
+    await this.service.checkUserId(id, this.getUserId());
+    return super.delete(id);
+  }
+
+  @Post('/batchDelete', { summary: Constants.per.authOnly })
+  async batchDelete(@Body('ids') ids: number[]) {
+    await this.service.batchDelete(ids, this.getUserId());
+    return this.ok({});
+  }
+
+  @Post('/detail', { summary: Constants.per.authOnly })
+  async detail(@Query('id') id: number) {
+    const detail = await this.service.detail(id, this.getUserId());
+    return this.ok(detail);
+  }
+}

packages/ui/certd-server/src/modules/pipeline/entity/template.ts

@@ -0,0 +1,52 @@
+import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
+
+
+export type PipelineTemplateType = {
+  input: {
+    [key: string]: {
+        value: string;
+    };
+  }
+}
+
+
+@Entity('pi_template')
+export class TemplateEntity {
+  @PrimaryGeneratedColumn()
+  id: number;
+
+  @Column({ name: 'user_id', comment: '用户id' })
+  userId: number;
+
+  @Column({ name: 'pipeline_id', comment: '流水线id' })
+  pipelineId: number;
+
+  @Column({ name: 'title', comment: '标题' })
+  title: string;
+
+  @Column({ comment: '配置', length: 40960 })
+  content: string;
+
+  @Column({ comment: '启用/禁用', nullable: true, default: false })
+  disabled: boolean;
+
+  @Column({
+    name: 'order',
+    comment: '排序',
+    nullable: true,
+  })
+  order: number;
+
+  @Column({
+    name: 'create_time',
+    comment: '创建时间',
+    default: () => 'CURRENT_TIMESTAMP',
+  })
+  createTime: Date;
+  @Column({
+    name: 'update_time',
+    comment: '修改时间',
+    default: () => 'CURRENT_TIMESTAMP',
+  })
+  updateTime: Date;
+}

packages/ui/certd-server/src/modules/pipeline/service/template-service.ts

@@ -0,0 +1,41 @@
+import {Inject, Provide, Scope, ScopeEnum} from '@midwayjs/core';
+import {BaseService, SysSettingsService} from '@certd/lib-server';
+import {InjectEntityModel} from '@midwayjs/typeorm';
+import {Repository} from 'typeorm';
+import { TemplateEntity } from '../entity/template.js';
+import { PipelineService } from './pipeline-service.js';
+
+@Provide()
+@Scope(ScopeEnum.Request, { allowDowngrade: true })
+export class TemplateService extends BaseService<TemplateEntity> {
+  @InjectEntityModel(TemplateEntity)
+  repository: Repository<TemplateEntity>;
+
+  @Inject()
+  pipelineService: PipelineService;
+
+  @Inject()
+  sysSettingsService: SysSettingsService;
+
+  //@ts-ignore
+  getRepository() {
+    return this.repository;
+  }
+
+  async detail(id: number, userId: number) {
+    const info = await this.info(id)
+    if (!info) {
+      throw new Error('模板不存在');
+    }
+    if (info.userId !== userId) {
+      throw new Error('无权限');
+    }
+    const pipeline = await this.pipelineService.info(info.pipelineId);
+
+    return {
+      template:info,
+      pipeline: JSON.parse(pipeline.content),
+    }
+  }
+}
+

packages/ui/certd-server/src/plugins/plugin-aliyun/plugin/deploy-to-cdn/index.ts

@@ -38,6 +38,7 @@ export class DeployCertToAliyunCDN extends AbstractTaskPlugin {
       name: 'output-selector',
       from: [...CertApplyPluginNames, 'uploadCertToAliyun'],
     },
+    template:false,
     required: true,
   })
   cert!: string;