mirror of https://github.com/certd/certd
chore: 流水线模版初步
xiaojunnuo
parent
e11b3becfd
commit
26b395110c
|
|
@ -17,6 +17,7 @@ export function createCertDomainGetterInputDefine(opts?: { certInputKey?: string
|
|||
}
|
||||
}
|
||||
`,
|
||||
template:false,
|
||||
required: true,
|
||||
},
|
||||
opts?.props
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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",
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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");
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,6 +38,7 @@ export class DeployCertToAliyunCDN extends AbstractTaskPlugin {
|
|||
name: 'output-selector',
|
||||
from: [...CertApplyPluginNames, 'uploadCertToAliyun'],
|
||||
},
|
||||
template:false,
|
||||
required: true,
|
||||
})
|
||||
cert!: string;
|
||||
|
|
|
|||
Loading…
Reference in New Issue