Skip to content

Commit

Permalink
feat:流水线变量语法支持两种风格 TencentBlueKing#10576
Browse files Browse the repository at this point in the history
# Reviewed, transaction id: 15341
  • Loading branch information
useryuyu committed Aug 15, 2024
1 parent 4da27e0 commit 820410d
Show file tree
Hide file tree
Showing 17 changed files with 667 additions and 16 deletions.
10 changes: 7 additions & 3 deletions src/frontend/devops-manage/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,14 @@
"license": "ISC",
"dependencies": {
"bk-permission": "^0.0.28",
"bkui-vue": "0.0.1-beta.456",
"bkui-vue": "2.0.1-beta.43",
"dayjs": "^1.11.2",
"pinia": "^2.0.23",
"vue": "^3.2.41",
"vue-i18n": "^9.1.10",
"vue-router": "^4.1.6"
"vue-router": "^4.1.6",
"lodash.throttle": "^4.1.1",
"@icon-cool/bk-icon-bk-biz-components": "0.0.4"
},
"devDependencies": {
"@blueking/babel-preset-bk": "^2.1.0-beta7",
Expand All @@ -45,6 +47,8 @@
"postcss-preset-env": "^7.8.2",
"postcss-simple-vars": "^7.0.0",
"postcss-url": "^10.1.3",
"typescript": "^4.8.4"
"typescript": "^4.8.4",
"less": "^4.2.0",
"less-loader": "^12.2.0"
}
}
121 changes: 121 additions & 0 deletions src/frontend/devops-manage/src/components/dialectPopoverTable.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<template>
<bk-popover
theme="light"
:width="900"
:placement="placement"
extCls="dialect-popover"
>
<label class="label">{{ t('变量语法风格') }}</label>
<template #content>
<h3 class="title">{{ t('语法差异') }}</h3>
<bk-table :data="namingConventionData" show-overflow-tooltip>
<bk-table-column :label="$t('差异项')" prop="difference" :width="140" />
<bk-table-column :label="$t('传统风格')" prop="classIc" :width="290">
<template #default="{ row }">
<div
class="label-column"
v-bk-tooltips="{
content: row.classIcExample ? `${row.classIc}; ${row.classIcExample}` : row.classIc
}"
>
<p>{{ row.classIc }}</p>
<p>{{ row.classIcExample }}</p>
</div>
</template>
</bk-table-column>
<bk-table-column :label="$t('制约风格')" prop="constrained">
<template #default="{ row }">
<div
class="label-column"
v-bk-tooltips="{
content: row.constrainedExample ? `${row.constrained}; ${row.constrainedExample}` : row.constrained
}"
>
<p>{{ row.constrained }}</p>
<p>{{ row.constrainedExample }}</p>
</div>
</template>
</bk-table-column>
</bk-table>
</template>
</bk-popover>
</template>

<script setup name="DialectPopoverTable">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
defineProps({
placement: {
type: String,
default: 'top-start'
}
})
const namingConventionData = [
{
difference: t('表达式格式'),
classIc: t('单花括号或双花括号'),
classIcExample: t('如:${var}、${{var}}'),
constrained: t('仅支持双花括号,避免出现 bash 脚本变量在执行前被系统赋值的问题'),
constrainedExample: t('如:${{variables.var}}'),
},
{
difference: t('引用方式'),
classIc: t('直接引用变量名或上下文方式引用'),
constrained: t('仅支持上下文方式引用'),
constrainedExample: t('如:${{ci.pipeline_id}}、${{variables.a}}、${{steps.get_code.outputs.a}}'),
},
{
difference: t('环境变量'),
classIc: t('流水线变量、插件输出变量会自动设置为环境变量'),
constrained: t('需要时通过在 Job/Step 上按需指定,降低环境污染风险'),
},
{
difference: t('重置内置只读变量'),
classIc: t('不生效,仅警告未报错'),
constrained: t('将报错,运行失败'),
},
{
difference: t('变量值超长'),
classIc: t('仅警告未报错'),
constrained: t('将报错,运行失败'),
},
{
difference: t('变量不存在'),
classIc: t('未报错,继续执行,依赖执行逻辑自行检查'),
constrained: t('将报错,运行失败'),
},
{
difference: t('变量 ID 规范'),
classIc: t('未限制'),
constrained: t('不支持中文 ID,减少不同构建环境下的兼容问题'),
}
]
</script>

<style lang="scss" scoped>
.dialect-popover {
padding: 16px !important;
}
.label {
font-size: 12px;
padding: 4px 0;
border-bottom: 1px dashed #979BA5;
}
.title {
margin-bottom: 16px;
font-weight: 700;
font-size: 14px;
color: #63656E;
}
.label-column {
padding: 4px 0;
p {
line-height: 20px;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
</style>
19 changes: 19 additions & 0 deletions src/frontend/devops-manage/src/components/project-form.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import IAMIframe from './IAM-Iframe';
import { useI18n } from 'vue-i18n';
import { Message, Popover } from 'bkui-vue';
import http from '@/http/api';
import DialectPopoverTable from "@/components/dialectPopoverTable";
const {
t,
} = useI18n();
Expand Down Expand Up @@ -468,6 +469,24 @@ onBeforeUnmount(() => {
@click="showMemberDialog"
/>
</bk-form-item>
<bk-form-item
property="pipelineDialect"
>
<template #label>
<dialect-popover-table />
</template>
<bk-radio-group
v-model="projectData.pipelineDialect"
@change="handleChangeForm"
>
<bk-radio label="CLASSIC">
<span>{{ t('传统风格') }}</span>
</bk-radio>
<bk-radio label="CONSTRAINED">
<span>{{ t('制约风格') }}</span>
</bk-radio>
</bk-radio-group>
</bk-form-item>
<div>
<slot></slot>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/frontend/devops-manage/src/css/svg/warninfo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/frontend/devops-manage/src/views/apply-project.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const projectData = ref({
subjectScopes: [],
secrecy: false,
authSecrecy: 0,
pipelineDialect: 'CLASSIC',
});
const projectForm = ref(null);
const btnLoading = ref(false);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,16 @@ const statusDisabledTips = {
1: t('新建项目申请审批中,暂不可修改'),
4: t('更新项目信息审批中,暂不可修改'),
};
const currentDialect = ref();
const isDialectDialog = ref(false);
const fetchProjectData = async () => {
isLoading.value = true;
await http.requestProjectData({
englishName: projectCode,
}).then((res) => {
projectData.value = res;
currentDialect.value = res.pipelineDialect;
if (projectData.value.centerId === '0') projectData.value.centerId = ''
if (projectData.value.projectType === 0) projectData.value.projectType = ''
}).catch((err) => {
Expand Down Expand Up @@ -144,11 +147,28 @@ const showNeedApprovedTips = () => {
/**
* 更新项目
*/
const handleUpdate = async () => {
const handleUpdate = () => {
if(currentDialect.value === 'CLASSIC' && projectData.value.pipelineDialect === 'CONSTRAINED'){
isDialectDialog.value = true;
return
}
updateConfirm()
};
const updateConfirm = async () => {
projectForm.value?.validate().then(async () => {
await updateProject();
})
};
}
const handleConfirm = () => {
isDialectDialog.value = false;
updateConfirm()
}
const handleClosed = () => {
isDialectDialog.value = false;
}
const initProjectForm = (value) => {
projectForm.value = value;
Expand Down Expand Up @@ -228,6 +248,27 @@ onMounted(() => {
</bk-button>
</bk-exception>
</bk-loading>
<bk-dialog
:width="480"
header-align="center"
footer-align="center"
:is-show="isDialectDialog"
@confirm="handleConfirm"
@closed="handleClosed"
>
<template #header>
<img src="@/css/svg/warninfo.svg" class="manage-icon-tips">
<h2 class="dialog-header"> {{ t('确定升级变量语法风格为制约风格?')}}</h2>
</template>
<template #default>
<div class="project">
{{ t('项目:') }} <span class="project-name">{{ projectData.projectName }}</span>
</div>
<div class="description">
{{ t('升级后,该项目对变量引用方式将有更严格的要求。') }}
</div>
</template>
</bk-dialog>
</template>

<style lang="postcss" scoped>
Expand Down Expand Up @@ -269,4 +310,34 @@ onMounted(() => {
width: 88px;
}
}
.manage-icon-tips {
width: 42px;
height: 42px;
}
.dialog-header {
font-family: MicrosoftYaHei;
font-size: 20px;
color: #313238;
letter-spacing: 0;
}
.progect {
font-size: 14px;
color: #63656E;
.project-name {
color: #313238;
font-weight: bold;
}
}
.description {
display: flex;
align-items: center;
width: 416px;
height: 46px;
padding: 0 16px;
margin: 16px 0;
background: #F5F6FA;
border-radius: 2px;
font-size: 14px;
color: #63656E;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
RESOURCE_ACTION,
RESOURCE_TYPE,
} from '@/utils/permission.js'
import DialectPopoverTable from "@/components/dialectPopoverTable";
const { t } = useI18n();
const router = useRouter();
Expand Down Expand Up @@ -303,6 +304,10 @@ const projectTypeNameMap = {
4: t('平台产品'),
5: t('支撑产品'),
}
const pipelineDialectMap = {
'CLASSIC': t('传统风格'),
'CONSTRAINED': t('制约风格'),
}
watch(() => projectData.value.approvalStatus, (status) => {
if (status === 4) fetchDiffProjectData();
}, {
Expand Down Expand Up @@ -414,6 +419,20 @@ onMounted(async () => {
</bk-tag>
</div>
</bk-form-item>
<bk-form-item property="pipelineDialect">
<template #label>
<dialect-popover-table :placement="'bottom-end'"/>
</template>
<div>
<span>{{ pipelineDialectMap[projectData.pipelineDialect] }}</span>
<div class="diff-content" v-if="projectData.afterPipelineDialect">
<p class="update-title">
{{ t('本次更新:') }}
</p>
<span>{{ pipelineDialectMap[projectData.afterPipelineDialect] }}</span>
</div>
</div>
</bk-form-item>
<bk-form-item>
<!--
approvalStatus
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
},
methods: {
handleBaseInfoChange (name, value) {
if (this.pipelineSetting[name] !== value) {
if (this.pipelineSetting[name] !== value || name === 'pipelineAsCodeSettings') {
this.updatePipelineSetting({
setting: this.pipelineSetting,
param: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,9 @@
'setSaveStatus',
'updateContainer'
]),
...mapActions('pipelines', [
'getPipelineDialect'
]),
async exec (debug) {
if (debug && this.isEditing) {
const result = await this.saveDraft()
Expand Down Expand Up @@ -242,6 +245,11 @@
// 清除流水线参数渲染过程中添加的key
this.formatParams(pipeline)
if (!pipelineSetting.pipelineAsCodeSettings.pipelineDialect) {
const { data } = await this.getPipelineDialect(this.projectId)
pipelineSetting.pipelineAsCodeSettings.pipelineDialect = data
}
// 请求执行构建
const { data: { version, versionName } } = await this.saveDraftPipeline({
projectId,
Expand Down
Loading

0 comments on commit 820410d

Please sign in to comment.