Skip to content

Commit

Permalink
feat:流水线变量语法支持两种风格 TencentBlueKing#10576
Browse files Browse the repository at this point in the history
# Reviewed, transaction id: 20185
  • Loading branch information
useryuyu committed Oct 10, 2024
1 parent 7757c5b commit 43cc1c2
Show file tree
Hide file tree
Showing 9 changed files with 228 additions and 75 deletions.
51 changes: 38 additions & 13 deletions src/frontend/devops-manage/src/components/dialectPopoverTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,47 @@
:width="900"
extCls="dialect-popover"
:componentEventDelay="300"
show-overflow-tooltip
autoPlacement
>
<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="difference" :width="140">
<template #default="{ row }">
<div
class="label-column"
>
<p>{{ row.difference }}</p>
<p>{{ row.differenceTip }}</p>
</div>
</template>
</bk-table-column>
<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 v-if="!row.classicKey">
<p>{{ row.classic }}</p>
<p>{{ row.classicExample }}</p>
</div>
<div v-else class="classic-desc">
<i18n-t
tag="div"
keypath="仅在流程控制选项X设置中可以使用"
>
<span class="classic-key">{{ t('自定义表达式满足时运行') }}</span>
</i18n-t>
</div>
</div>
</template>
</bk-table-column>
<bk-table-column :label="t('制约风格')" prop="constrainedMode">
<template #default="{ row }">
<div
class="label-column"
v-bk-tooltips="{
content: row.constrainedExample ? `${row.constrainedMode}; ${row.constrainedExample}` : row.constrainedMode
}"
>
<p>{{ row.constrainedMode }}</p>
<p>{{ row.constrainedExample }}</p>
Expand All @@ -53,6 +67,14 @@ const namingConventionData = [
constrainedMode: t('仅支持双花括号,避免出现 bash 脚本变量在执行前被系统赋值的问题'),
constrainedExample: t('如:${{variables.var}}'),
},
{
difference: t('表达式函数'),
differenceTip: t('如contains、join、fromJSON'),
classic: t('仅在流程控制选项X设置中可以使用'),
classicKey: true,
constrainedMode: t('流程控制选项、插件入参、Job设置等流水线配置中均可使用函数'),
constrainedExample: t('如变量a值为Json字符串,则bash脚本中,可以使用fromJSON读取echo “a.node is ${{fromJSON(a).node}}”')
},
{
difference: t('变量值超长'),
classic: t('仅警告未报错'),
Expand Down Expand Up @@ -90,10 +112,13 @@ const namingConventionData = [
padding: 4px 0;
p {
line-height: 20px;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
white-space: pre-wrap;
}
}
.classic-desc {
white-space: pre-wrap;
}
.classic-key {
font-weight: 700;
}
</style>
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<script>
import NamingConventionTip from '@/components/namingConventionTip.vue'
export default {
name: 'form-field',
components: {
NamingConventionTip
},
props: {
label: {
type: String,
Expand Down Expand Up @@ -52,6 +55,10 @@
bottomDivider: {
type: Boolean,
default: false
},
customDesc: {
type: Boolean,
default: false
}
},
computed: {
Expand All @@ -63,7 +70,7 @@
}
},
render (h) {
const { label, inline, required, $slots, isError, errorMsg, hideColon, desc, docsLink, descLink, descLinkText, type, widthStyle, bottomDivider } = this
const { label, inline, required, $slots, isError, errorMsg, hideColon, desc, docsLink, descLink, descLinkText, type, widthStyle, bottomDivider, customDesc } = this
const descMap = desc.split('\n')
return (
<div class={{
Expand All @@ -78,22 +85,27 @@
{ docsLink
&& <a target="_blank" href={docsLink}><i class="bk-icon icon-question-circle"></i></a>
}
{ label.trim() && desc.trim() && <bk-popover placement="top">
<i class={{ 'bk-icon': true, 'icon-info-circle': true }} style={{ 'margin-left': hideColon ? '4px' : '0', color: hideColon ? '#979BA5' : '' }}></i>
<div slot="content" style="white-space: pre-wrap; font-size: 12px; max-width: 500px;">
<div>
{ label.trim() && (desc.trim() || customDesc) && <bk-popover placement="top" theme={customDesc ? 'light' : 'dark'} width={customDesc ? 892 : 'auto'}>
<i class={{ 'bk-icon': true, 'icon-info-circle': true }} style={{ 'margin-left': hideColon ? '4px' : '0', color: hideColon ? '#979BA5' : '' }}></i>
<div slot="content">
{
descMap.length > 1
? descMap.map(item => (
<div>{item}</div>
))
: desc
customDesc
? <NamingConventionTip/>
: <div style="white-space: pre-wrap; font-size: 12px; max-width: 500px;">
{
descMap.length > 1
? descMap.map(item => (
<div>{item}</div>
))
: desc
}
{ descLink && <a class="desc-link" target="_blank" href={descLink}>{descLinkText}</a>}
</div>
}
{ descLink && <a class="desc-link" target="_blank" href={descLink}>{descLinkText}</a>}
</div>
</div>
</bk-popover>
}
</bk-popover>
}
</label> }
<div class='bk-form-content'>
Expand Down
109 changes: 109 additions & 0 deletions src/frontend/devops-pipeline/src/components/namingConventionTip.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<template>
<div style="width: 100%;">
<h3>{{ $t('grammaticalDifferences') }}</h3>
<bk-table
:data="namingConventionData"
:outer-border="false"
row-auto-height
show-overflow-tooltip
>
<bk-table-column
:label="$t('differenceItem')"
prop="difference"
:width="140"
>
<template slot-scope="props">
<div class="label-column">
<p>{{ props.row.difference }}</p>
<p>{{ props.row.differenceTip }}</p>
</div>
</template>
</bk-table-column>
<bk-table-column
:label="$t('traditionalStyle')"
prop="classic"
:width="290"
>
<template slot-scope="props">
<div class="label-column">
<div v-if="!props.row.classicKey">
<p>{{ props.row.classic }}</p>
<p>{{ props.row.classicExample }}</p>
</div>
<div v-else>
<i18n
tag="p"
path="traditionalFunctionFormat"
>
<span class="classicKey">{{ $t('customExpressionsSatisfyRun') }}</span>
</i18n>
</div>
</div>
</template>
</bk-table-column>
<bk-table-column
:label="$t('constraintStyle')"
prop="constrainedMode"
>
<template slot-scope="props">
<div class="label-column">
<p>{{ props.row.constrainedMode }}</p>
<p>{{ props.row.constrainedExample }}</p>
</div>
</template>
</bk-table-column>
</bk-table>
</div>
</template>

<script>
export default {
name: 'nameing-convention-tip',
computed: {
namingConventionData () {
return [
{
difference: this.$t('expressionFormat'),
classic: this.$t('traditionalFormat'),
classicExample: this.$t('traditionalFormatExample'),
constrainedMode: this.$t('constraintFormat'),
constrainedExample: this.$t('constraintFormatExample')
},
{
difference: this.$t('expressionFunction'),
differenceTip: this.$t('expressionFunctionTip'),
classic: this.$t('traditionalFunctionFormat'),
classicKey: true,
constrainedMode: this.$t('constraintFunctionFormat'),
constrainedExample: this.$t('constraintFunctionFormatExample')
},
{
difference: this.$t('variableValueTooLong'),
classic: this.$t('traditionalValueTooLongMode'),
constrainedMode: this.$t('constraintReadOnlyMode')
},
{
difference: this.$t('variableNotFound'),
classic: this.$t('traditionalNotFoundMode'),
constrainedMode: this.$t('constraintReadOnlyMode')
},
{
difference: this.$t('variableStandard'),
classic: this.$t('traditionalStandardMode'),
constrainedMode: this.$t('constraintStandardMode')
}
]
}
}
}
</script>

<style lang="scss" scoped>
p {
word-break: keep-all;
overflow-wrap: break-word;
}
.classicKey {
font-weight: 700;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,13 @@
</form-field>

<form-field
class="namingConvention"
:label="$t('namingConvention')"
:custom-desc="true"
>
<syntax-style-configuration
:inherited-dialect="templateSetting.pipelineAsCodeSettings?.inheritedDialect ?? true"
:pipeline-dialect="templateSetting.pipelineAsCodeSettings?.pipelineDialect ?? 'CLASSIC'"
:is-show-popover="false"
:inherited-dialect="templateSetting.pipelineAsCodeSettings?.inheritedDialect"
:pipeline-dialect="templateSetting.pipelineAsCodeSettings?.pipelineDialect ?? currentPipelineDialect"
@inherited-change="inheritedChange"
@pipeline-dialect-change="pipelineDialectChange"
/>
Expand Down Expand Up @@ -425,9 +427,6 @@
.form-group-link {
width: 100%;
}
.namingConvention {
position: relative;
}
.opera-lock-radio {
margin-bottom: 0;
.view-radio {
Expand Down
Loading

0 comments on commit 43cc1c2

Please sign in to comment.