fix: 保存流水线时，部分插件配置引起的报错无法协助用户快速定位问题 #1920

src/frontend/devops-pipeline/src/components/Stages/AtomList.vue

@@ -10,7 +10,7 @@
                 @click.stop="showPropertyPanel(index)"
             >
                 <section class="atom-item atom-section normal-atom" :class="{ [atomCls(atom)]: true,
-                                                                              'is-error': atom.isError,
+                                                                              'is-error': atom.isError || !atom.atomCode,
                                                                               'quality-atom': atom['@type'] === 'qualityGateOutTask',
                                                                               'is-intercept': atom.isQualityCheck,
                                                                               'template-compare-atom': atom.templateModify }"
@@ -55,7 +55,7 @@
                         <Logo name="copy" size="18"></Logo>
                     </span>
                     <i v-if="editable" @click.stop="editAtom(index, false)" class="add-plus-icon close" />
-                    <i v-if="editable && atom.isError" class="devops-icon icon-exclamation-triangle-shape" />
+                    <i v-if="(editable && atom.isError) || !atom.atomCode" class="devops-icon icon-exclamation-triangle-shape" />
                     <span @click.stop="" v-if="isPreview && canSkipElement && container['@type'].indexOf('trigger') < 0">
                         <bk-checkbox class="atom-canskip-checkbox" v-model="atom.canElementSkip" :disabled="useSkipStyle(atom)" />
                     </span>
@@ -78,7 +78,10 @@
             </li>
             <span v-if="editable" :class="{ 'add-atom-entry': true, 'block-add-entry': atomList.length === 0 }" @click="editAtom(atomList.length - 1, true)">
                 <i class="add-plus-icon" />
-                <span v-if="atomList.length === 0">{{ $t('editPage.addAtom') }}</span>
+                <span v-if="atomList.length === 0">
+                    {{ $t('editPage.addAtom') }}
+                    <i class="devops-icon icon-exclamation-triangle-shape error-icon" />
+                </span>
             </span>
         </draggable>
         <check-atom-dialog :is-show-check-dialog="isShowCheckDialog" :atom="currentAtom" :toggle-check="toggleCheckDialog" :element="element"></check-atom-dialog>
@@ -633,7 +636,7 @@
                 margin-right: 6px;
             }
         }
-
+        
         .quality-item {
             height: 24px;
             line-height: 20px;
@@ -771,6 +774,15 @@
             background-color: white;
             cursor: pointer;
             z-index: 3;
+            span {
+                width: 76%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .error-icon {
+                color: $iconFailColor;
+            }
             .add-plus-icon {
                 @include add-plus-icon($fontLigtherColor, $fontLigtherColor, white, 18px, true);
                 @include add-plus-icon-hover($primaryColor, $primaryColor, white);
@@ -779,8 +791,7 @@
                 @extend .atom-item;
                 position: static;
                 border-style: dashed;
-                color: $borderWeightColor;
-                border-color: $borderWeightColor;
+                border-color: $dangerColor;
                 border-width: 1px;
                 .add-plus-icon {
                     margin: 12px 13px;

src/frontend/devops-pipeline/src/store/modules/atom/getters.js

@@ -168,10 +168,11 @@ export default {
             let timerTriggerCount = 0
             let remoteTriggerCount = 0
 
+
             if (pipelineSetting && !pipelineSetting.pipelineName) {
                 throw new Error(window.pipelineVue.$i18n && window.pipelineVue.$i18n.t('settings.emptyPipelineName'))
             }
-            
+
             if (pipelineSetting && pipelineSetting.buildNumRule && !/^[\w-{}() +?.:$"]{1,256}$/.test(pipelineSetting.buildNumRule)) {
                 throw new Error(window.pipelineVue.$i18n && window.pipelineVue.$i18n.t('settings.correctBuildNumber'))
             }
@@ -190,6 +191,16 @@ export default {
 
             const allContainers = getters.getAllContainers(stages)
 
+            // 当前所有插件element
+            const elementsMap = allContainers.reduce(function (prev, cur) {
+                prev.push(...cur.elements)
+                return prev
+            }, [])
+
+            if (elementsMap.some(element => !element.atomCode)) {
+                throw new Error(window.pipelineVue.$i18n && window.pipelineVue.$i18n.t('storeMap.PleaseSelectAtom'))
+            }
+
             if (allContainers.some(container => container.isError)) {
                 throw new Error(window.pipelineVue.$i18n && window.pipelineVue.$i18n.t('storeMap.correctPipeline'))
             }

src/frontend/locale/pipeline/en-US.json

@@ -894,6 +894,7 @@
         "jobLimit": "单个stage下的job数量不能大于",
         "atomLimit": "单个job下的插件数量不能大于",
         "correctPipeline": " Please enter the correct pipeline",
+        "PleaseSelectAtom": "Please select the Atom first",
         "oneCodecc": " Only one codecc plugin is allowed added to pipeline",
         "oneManualTrigger": " Only one manually-triggered plugin can exist in pipeline",
         "oneTimerTrigger": " Only one timer-triggered plugin can exist in pipeline ",

src/frontend/locale/pipeline/zh-CN.json

@@ -897,6 +897,7 @@
         "jobLimit": "单个stage下的job数量不能大于",
         "atomLimit": "单个job下的插件数量不能大于",
         "correctPipeline": "请输入正确的流水线",
+        "PleaseSelectAtom": "请先选择插件",
         "oneCodecc": "只允许一个代码扫描插件",
         "oneManualTrigger": "流水线不允许超过一个手动触发插件",
         "oneTimerTrigger": "流水线不允许超过一个定时触发插件",