humming_bird_sync_master

.pre-commit-config.yaml

@@ -5,13 +5,12 @@ repos:
     hooks:
     - id: check-merge-conflict
   - repo: https://github.com/psf/black
-    rev: 22.3.0
+    rev: stable
     hooks:
     - id: black
-      name: black
-      language: python
+      language_version: python3.6
   - repo: https://github.com/pycqa/isort
-    rev: 5.11.5
+    rev: 5.6.4
     hooks:
       - id: isort
         args: ["--profile", "black", "--filter-files"]

app.yml

@@ -6,7 +6,7 @@ is_use_celery: True
 author: 蓝鲸智云
 introduction: 标准运维是通过一套成熟稳定的任务调度引擎，把在多系统间的工作整合到一个流程，助力运维实现跨系统调度自动化的SaaS应用。
 introduction_en: SOPS is a SaaS application that utilizes a set of mature and stable task scheduling engines to help realize cross-system scheduling automation, and integrates the work among multiple systems into a single process.
-version: 3.31.0-alpha2
+version: 3.31.0
 category: 运维工具
 language_support: 中文
 desktop:

app_desc.yaml

@@ -1,5 +1,5 @@
 spec_version: 2
-app_version: "3.31.0-alpha2"
+app_version: "3.31.0"
 app:
     region: default
     bk_app_code: bk_sops

config/default.py

@@ -211,7 +211,7 @@
 # mako模板中：<script src="/a.js?v=${ STATIC_VERSION }"></script>
 # 如果静态资源修改了以后，上线前改这个版本号即可
 
-STATIC_VERSION = "3.31.0-alpha2"
+STATIC_VERSION = "3.31.0"
 DEPLOY_DATETIME = datetime.datetime.now().strftime("%Y%m%d%H%M%S")
 
 STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

frontend/desktop/src/components/common/RenderForm/FormGroup.vue

@@ -104,7 +104,7 @@
             <i
                 :class="['common-icon-variable-hook hook-icon', { actived: hook, disabled: !option.formEdit || !render }]"
                 v-bk-tooltips="{
-                    content: hook ? $t('恢复为非变量节点内维护') : $t('转换为变量集中维护'),
+                    content: hook ? $t('取消使用变量，节点内维护') : $t('转换为变量，集中维护'),
                     placement: 'bottom',
                     zIndex: 3000
                 }"
@@ -425,7 +425,15 @@
         background: #ffeeec;
     }
     &.rf-has-hook .rf-tag-form {
-        margin-right: 45px;
+        margin-right: 40px;
+    }
+    &.show-render {
+        > .rf-tag-form {
+            margin-right: 58px;
+        }
+        .hook-icon {
+            padding-right: 3px !important;
+        }
     }
     .rf-group-name {
         display: block
@@ -446,15 +454,17 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 0 8px;
         height: 32px;
         background: #f0f1f5;
         border-radius: 2px;
+        cursor: pointer;
         z-index: 1;
-        .hook-icon {
-            font-size: 16px;
+        .hook-icon,
+        .render-skip-icon {
+            height: 32px;
+            line-height: 32px;
+            font-size: 12px;
             color: #979ba5;
-            cursor: pointer;
             &.disabled {
                 color: #c4c6cc;
                 cursor: not-allowed;
@@ -464,8 +474,13 @@
             }
         }
         .hook-icon {
+            line-height: 33px;
+            padding: 0 8px;
             font-size: 16px;
         }
+        .render-skip-icon {
+            padding: 0 8px 0 3px;
+        }
         .icon-angle-up-fill {
             font-size: 12px;
             color: #c4c6cc;

frontend/desktop/src/components/common/RenderForm/FormItem.vue

@@ -477,12 +477,15 @@
     }
     &.rf-has-hook {
         & > .rf-tag-form {
-            margin-right: 45px;
+            margin-right: 40px;
         }
     }
     &.show-render {
         > .rf-tag-form {
-            margin-right: 64px;
+            margin-right: 58px;
+        }
+        .hook-icon {
+            padding-right: 3px !important;
         }
     }
     &.rf-col-layout {
@@ -548,16 +551,17 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0 8px;
         height: 32px;
         background: #f0f1f5;
         border-radius: 2px;
         z-index: 1;
+        cursor: pointer;
         .hook-icon,
         .render-skip-icon {
-            font-size: 14px;
+            height: 32px;
+            line-height: 32px;
+            font-size: 12px;
             color: #979ba5;
-            cursor: pointer;
             &.disabled {
                 color: #c4c6cc;
                 cursor: not-allowed;
@@ -567,10 +571,12 @@
             }
         }
         .hook-icon {
+            line-height: 31px;
+            padding: 0 8px;
             font-size: 16px;
         }
         .render-skip-icon {
-            margin-left: 7px;
+            padding: 0 8px 0 3px;
         }
         .icon-angle-up-fill {
             font-size: 12px;

frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue

@@ -213,12 +213,14 @@
                             }
                         })
                     })
-                } else if (this.decorationsMap[lineNumber]) {
-                    this.decorationsMap[lineNumber].forEach(decorations => {
-                        monacoInstance.deltaDecorations(
-                            [...decorations],
-                            []
-                        )
+                } else {
+                    Object.keys(this.decorationsMap).forEach(key => {
+                        this.decorationsMap[key].forEach(decorations => {
+                            monacoInstance.deltaDecorations(
+                                [...decorations],
+                                []
+                            )
+                        })
                     })
                     this.decorationsMap = {}
                 }

frontend/desktop/src/components/common/RenderForm/tags/TagDatatable.vue

@@ -81,7 +81,7 @@
                                 :parent-value="scope.row"
                                 @init="onInitColumn(scope.$index, cIndex, ...arguments)"
                                 @change="onEditColumn(scope.$index, cIndex, ...arguments)"
-                                @blur="onColumnInputBlur(scope.$index, ...arguments)">
+                                @blur="onColumnInputBlur(scope.$index, cIndex, ...arguments)">
                             </component>
                         </template>
                     </el-table-column>
@@ -570,8 +570,8 @@
                 this.$set(this.tableValue[this.editRowNumber], field, val)
                 this.triggerSameRowEvent('change', row, col, val)
             },
-            onColumnInputBlur (scope, val) {
-                this.triggerSameRowEvent('blur', scope.$index, scope.column.index, val)
+            onColumnInputBlur (row, col, val) {
+                this.triggerSameRowEvent('blur', row, col, val)
             },
             onDelete (index, row) {
                 if (this.pagination) {

frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue

@@ -32,6 +32,7 @@
                         }"
                         :contenteditable="!isDisabled"
                         :data-placeholder="placeholder"
+                        data-test-name="formTag_input_divInput"
                         v-bk-clickoutside="handleClickOutSide"
                         @mouseup="handleInputMouseUp"
                         @focus="handleInputFocus"
@@ -48,11 +49,11 @@
                             <li
                                 class="rf-select-item"
                                 v-for="item in varList"
-                                v-bk-overflow-tips
-                                :key="item"
-                                :class="{ 'is-hover': hoverKey === item }"
-                                @click.stop="onSelectVal(item)">
-                                {{ item }}
+                                :key="item.key"
+                                :class="{ 'is-hover': hoverKey === item.key }"
+                                @click.stop="onSelectVal(item.key)">
+                                <span class="key">{{ item.key }}</span>
+                                <span class="name" v-bk-overflow-tips>{{ item.name }}</span>
                             </li>
                         </ul>
                     </div>
@@ -122,14 +123,14 @@
             }),
             constantArr: {
                 get () {
-                    let Keylist = []
+                    let KeyList = []
                     if (this.constants) {
-                        Keylist = [...Object.keys(this.constants)]
+                        KeyList = [...Object.values(this.constants)]
                     }
                     if (this.internalVariable) {
-                        Keylist = [...Keylist, ...Object.keys(this.internalVariable)]
+                        KeyList = [...KeyList, ...Object.values(this.internalVariable)]
                     }
-                    return Keylist
+                    return KeyList
                 },
                 set (val) {
                     this.varList = val
@@ -203,7 +204,7 @@
             const divInputDom = this.$el.querySelector('.div-input')
             if (divInputDom) {
                 divInputDom.innerHTML = this.value
-                if (this.render) {
+                if (this.render && this.value) {
                     this.handleInputBlur()
                 }
             }
@@ -330,7 +331,7 @@
                     matchResult = [matchText]
                 }
                 if (matchResult && matchResult[0]) {
-                    this.varList = this.constantArr.filter(item => item.indexOf(matchText) > -1)
+                    this.varList = this.constantArr.filter(item => item.key.indexOf(matchText) > -1)
                     // 计算变量下拉列表的left
                     this.isListOpen = false
                     if (this.varList.length) {
@@ -352,11 +353,10 @@
                         this.$el.appendChild(newDom)
                         const focusValueWidth = newDom.offsetWidth || 0
                         this.$el.removeChild(newDom)
-                        let right = inputWidth - 238 - previousDomLeft - previousDomWidth - focusValueWidth
-                        right = right > 0 ? right : 0
-                        this.varListPositionRight = right
                         this.$nextTick(() => {
-                            const { height: varListHeight } = document.querySelector('.rf-select-list').getBoundingClientRect()
+                            const { width: varListWidth, height: varListHeight } = this.$el.querySelector('.rf-select-list').getBoundingClientRect()
+                            let right = inputWidth - varListWidth - previousDomLeft - previousDomWidth - focusValueWidth
+                            right = right > 0 ? right : 0
                             const top = window.innerHeight < inputTop + 30 + varListHeight + 50 ? -95 : 30
                             this.varListPosition = `right: ${right}px; top: ${top}px`
                         })
@@ -382,9 +382,14 @@
                 // 获取行内纯文本
                 const divInputDom = this.$el.querySelector('.div-input')
                 let inputValue = divInputDom.textContent
+                inputValue.replace(' ', ' ')
                 if (divInputDom.childNodes.length) {
                     inputValue = Array.from(divInputDom.childNodes).map(item => {
-                        return item.type === 'button' ? item.value : item.textContent
+                        return item.type === 'button'
+                            ? item.value
+                            : item.textContent.trim() === ''
+                                ? ' '
+                                : item.textContent.replace(/&nbsp;/g, ' ')
                     }).join('')
                 }
                 this.input.value = inputValue
@@ -410,7 +415,7 @@
                     let isExistVar = false
                     if ($0) {
                         isExistVar = this.constantArr.some(item => {
-                            const varText = item.slice(2, -1)
+                            const varText = item.key.slice(2, -1)
                             if ($0.indexOf(varText) > -1) {
                                 const regexp = new RegExp(`^(.*\\W|\\W)?${varText}(\\W|\\W.*)?$`)
                                 return regexp.test($0)
@@ -424,6 +429,7 @@
                     return match
                 })
                 divInputDom.innerHTML = innerHtml
+                this.updateInputValue()
             },
             // 文本框按键事件
             handleInputKeyDown (e) {
@@ -451,12 +457,12 @@
                 if (len) {
                     event.preventDefault()
                     event.stopPropagation()
-                    let curIndex = this.varList.findIndex(item => item === this.hoverKey)
+                    let curIndex = this.varList.findIndex(item => item.key === this.hoverKey)
                     curIndex = event.code === 'ArrowDown' ? curIndex + 1 : curIndex - 1
                     curIndex = curIndex > len - 1 ? 0 : (curIndex < 0 ? len - 1 : curIndex)
                     const option = this.varList[curIndex]
                     if (option) {
-                        this.hoverKey = option
+                        this.hoverKey = option.key
                         const selectDom = this.$el.querySelector('.rf-select-content')
                         const hoverItemDom = selectDom.querySelector('.is-hover')
                         if (hoverItemDom) {
@@ -487,12 +493,17 @@
             position: absolute;
             top: 30px;
             right: 0;
-            width: 238px;
+            max-width: 600px;
             background: #ffffff;
+            border: 1px solid #dcdee5;
             border-radius: 2px;
-            box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 3px 9px 0 rgba(0,0,0,.1);
             overflow-y: hidden;
             z-index: 100;
+            .name {
+                color: #c4c6cc;
+                margin-left: 16px;
+            }
         }
         .rf-select-content {
             max-height: 100px;
@@ -501,12 +512,21 @@
             @include scrollbar;
         }
         .rf-select-item {
+            display: flex;
+            align-items: center;
             padding: 0 10px;
             line-height: 32px;
             font-size: 12px;
             cursor: pointer;
-            overflow: hidden;
-            text-overflow: ellipsis;
+            > span {
+                flex-shrink: 0;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+            .name {
+                max-width: 250px;
+            }
             &.is-hover,
             &:hover {
                 background: #f5f7fa;