feat: 配置项查看态优化并支持查看元数据 --task=74870899

# Reviewed, transaction id: 3271
TencentBlueKing · Mar 4, 2024 · bc19a0c · bc19a0c
1 parent 179822a
commit bc19a0c
Show file tree

Hide file tree

Showing 10 changed files with 343 additions and 100 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/components/code-editor/index.vue b/bcs-services/bcs-bscp/ui/src/components/code-editor/index.vue
@@ -81,6 +81,7 @@
     (val) => {
       if (val !== localVal.value) {
         editor.setValue(val);
+        editorHoverProvider = useEditorVariableReplace(editor, props.variables);
       }
     },
   );
@@ -340,7 +341,7 @@
     }
   }
   .placeholderBox {
-    height: calc(100% - 10px);;
+    height: calc(100% - 10px);
     background-color: #1e1e1e;
     box-sizing: content-box;
     padding-top: 10px;

diff --git a/bcs-services/bcs-bscp/ui/src/utils/config.ts b/bcs-services/bcs-bscp/ui/src/utils/config.ts
@@ -34,6 +34,32 @@ export function getDefaultConfigItem() {
   };
 }
 
+export function getDefaultKvItem() {
+  return {
+    id: 0,
+    spec: {
+      kv_type: '',
+      key: '',
+      value: '',
+    },
+    content_spec: {
+      byte_size: '',
+      signature: '',
+    },
+    kv_state: '',
+    attachment: {
+      biz_id: 0,
+      app_id: 0,
+    },
+    revision: {
+      creator: '',
+      create_at: '',
+      reviser: '',
+      update_at: '',
+    },
+  };
+}
+
 // 配置文件编辑参数
 export function getConfigEditParams() {
   return {

diff --git a/bcs-services/bcs-bscp/ui/src/utils/hooks/use-diff-editor-variable-replace.ts b/bcs-services/bcs-bscp/ui/src/utils/hooks/use-diff-editor-variable-replace.ts
@@ -86,18 +86,22 @@ class VariableReplace {
   // 递归匹配文本中变量名，逐一替换为变量值，并计算文本替换后的变量值所在新内容的行、列位置以及替换后的文本
   public getReplacedData(text: string, variablesMap: { [key: string]: string }) {
     let replacedText = text;
-    const reg = new RegExp('{{\\s*\\.([bB][kK]_[bB][sS][cC][pP]_[A-Za-z0-9_]*)\\s*}}');
+    const varRegStr = '{{\\s*\\.([bB][kK]_[bB][sS][cC][pP]_[A-Za-z0-9_]*)\\s*}}';
+    const reg = new RegExp(varRegStr, 'g');
     const variablePos: { name: string; start: number; end: number }[] = [];
-    let match = text.match(reg);
+    let match = reg.exec(text);
+
     while (match && match.length > 0) {
       const name = match[1];
       if (name in variablesMap) {
         const val = variablesMap[name];
         const index = (match.index as number) + 1;
-        replacedText = replacedText.replace(reg, val);
+        replacedText = replacedText.replace(new RegExp(varRegStr), val);
         variablePos.push({ name, start: index, end: index + val.length });
-        match = replacedText.match(reg);
+        reg.lastIndex = index + val.length;
       }
+
+      match = reg.exec(replacedText);
     }
     return { replacedText, variablePos };
   }

diff --git a/bcs-services/bcs-bscp/ui/src/utils/hooks/use-editor-variable-replace.ts b/bcs-services/bcs-bscp/ui/src/utils/hooks/use-editor-variable-replace.ts
@@ -56,18 +56,21 @@ class VariableReplace {
   // 递归匹配文本中变量名，逐一替换为变量值，并计算文本替换后的变量值所在新内容的行、列位置以及替换后的文本
   public getReplacedData(text: string, variablesMap: { [key: string]: string }) {
     let replacedText = text;
-    const reg = new RegExp('{{\\s*\\.([bB][kK]_[bB][sS][cC][pP]_[A-Za-z0-9_]*)\\s*}}');
+    const varRegStr = '{{\\s*\\.([bB][kK]_[bB][sS][cC][pP]_[A-Za-z0-9_]*)\\s*}}';
+    const reg = new RegExp(varRegStr, 'g');
     const variablePos: { name: string; start: number; end: number }[] = [];
-    let match = text.match(reg);
+    let match = reg.exec(text);
+
     while (match && match.length > 0) {
       const name = match[1];
       if (name in variablesMap) {
         const val = variablesMap[name];
         const index = (match.index as number) + 1;
-        replacedText = replacedText.replace(reg, val);
+        replacedText = replacedText.replace(new RegExp(varRegStr), val);
         variablePos.push({ name, start: index, end: index + val.length });
-        match = replacedText.match(reg);
+        reg.lastIndex = index + val.length;
       }
+      match = reg.exec(replacedText);
     }
     return { replacedText, variablePos };
   }

diff --git a/...es/bcs-bscp/ui/src/views/space/service/detail/config/components/config-content-editor.vue b/...es/bcs-bscp/ui/src/views/space/service/detail/config/components/config-content-editor.vue
@@ -3,8 +3,10 @@
     <div :class="['config-content-editor', { fullscreen: isOpenFullScreen }]">
       <div class="editor-title">
         <div class="tips">
-          <InfoLine class="info-icon" />
-          {{ t('仅支持大小不超过') }}{{ props.sizeLimit }}M
+          <template v-if="props.showTips">
+            <InfoLine class="info-icon" />
+            {{ t('仅支持大小不超过') }}{{ props.sizeLimit }}M
+          </template>
         </div>
         <div class="btns">
           <ReadFileContent
@@ -39,6 +41,7 @@
           :model-value="props.content"
           :variables="props.variables"
           :editable="editable"
+          :language="props.language"
           @update:model-value="emits('change', $event)" />
       </div>
     </div>
@@ -57,14 +60,18 @@
   const props = withDefaults(
     defineProps<{
       content: string;
+      editable: boolean;
       variables?: IVariableEditParams[];
       sizeLimit?: number;
-      editable: boolean;
+      language?: string;
+      showTips?: boolean;
     }>(),
     {
       variables: () => [],
       editable: true,
       sizeLimit: 100,
+      language: '',
+      showTips: true,
     },
   );
 

diff --git a/...ace/service/detail/config/config-list/config-simple-list/config-list-kv-with-template.vue b/...ace/service/detail/config/config-list/config-simple-list/config-list-kv-with-template.vue
@@ -16,20 +16,21 @@
       v-model:show="isShowEdit"
       :bk-biz-id="props.bkBizId"
       :app-id="props.appId"
-      :config="selectedConfig as IConfigKvItem"
+      :config="selectedConfig.spec"
       :editable="true"
       @confirm="getListData" />
-    <ViewConfig v-model:show="isShowView" :config="selectedConfig as IConfigKvItem" />
+    <ViewConfig v-model:show="isShowView" :config="selectedConfig" />
   </section>
 </template>
 <script setup lang="ts">
   import { ref, watch, computed, onMounted } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { storeToRefs } from 'pinia';
   import useConfigStore from '../../../../../../../store/config';
-  import { IConfigKvType, IConfigKvItem } from '../../../../../../../../types/config';
+  import { IConfigKvType } from '../../../../../../../../types/config';
   import { ICommonQuery } from '../../../../../../../../types/index';
   import { getKvList, getReleaseKvList } from '../../../../../../../api/config';
+  import { getDefaultKvItem } from '../../../../../../../utils/config';
   import SearchInput from '../../../../../../../components/search-input.vue';
   import EditConfig from '../config-table-list/edit-config-kv.vue';
   import ViewConfig from '../config-table-list/view-config-kv.vue';
@@ -47,7 +48,7 @@
   const loading = ref(false);
   const configList = ref<IConfigKvType[]>([]);
   const searchStr = ref('');
-  const selectedConfig = ref<IConfigKvItem>();
+  const selectedConfig = ref<IConfigKvType>(getDefaultKvItem());
   const isShowEdit = ref(false);
   const isShowView = ref(false);
   const isSearchEmpty = ref(false);
@@ -104,7 +105,7 @@
   };
 
   const handleConfigClick = (config: IConfigKvType) => {
-    selectedConfig.value = config.spec;
+    selectedConfig.value = config;
     if (isUnNamedVersion.value) {
       isShowEdit.value = true;
     } else {

diff --git a/.../views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue b/.../views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue
@@ -82,12 +82,12 @@
   </bk-loading>
   <edit-config
     v-model:show="editPanelShow"
-    :config="activeConfig as IConfigKvItem"
+    :config="activeConfig.spec as IConfigKvItem"
     :bk-biz-id="props.bkBizId"
     :app-id="props.appId"
     :editable="true"
     @confirm="getListData" />
-  <ViewConfigKv v-model:show="viewPanelShow" :config="activeConfig as IConfigKvItem" />
+  <ViewConfigKv v-model:show="viewPanelShow" :config="activeConfig" />
   <VersionDiff v-model:show="isDiffPanelShow" :current-version="versionData" :selected-config-kv="diffConfig" />
   <DeleteConfirmDialog
     v-model:isShow="isDeleteConfigDialogShow"
@@ -109,6 +109,7 @@
   import { IConfigKvItem, IConfigKvType } from '../../../../../../../../../types/config';
   import { getKvList, deleteKv, getReleaseKvList, undeleteKv } from '../../../../../../../../api/config';
   import { datetimeFormat, copyToClipBoard } from '../../../../../../../../utils/index';
+  import { getDefaultKvItem } from '../../../../../../../../utils/config';
   import { CONFIG_KV_TYPE } from '../../../../../../../../constants/config';
   import { Copy } from 'bkui-vue/lib/icon';
   import StatusTag from './status-tag';
@@ -139,7 +140,7 @@
   const configsCount = ref(0);
   const editPanelShow = ref(false);
   const viewPanelShow = ref(false);
-  const activeConfig = ref<IConfigKvItem>();
+  const activeConfig = ref<IConfigKvType>(getDefaultKvItem());
   const deleteConfig = ref<IConfigKvType>();
   const isDiffPanelShow = ref(false);
   const diffConfig = ref(0);
@@ -259,7 +260,7 @@
   };
 
   const handleEditOrView = (config: IConfigKvType) => {
-    activeConfig.value = config.spec;
+    activeConfig.value = config;
     if (isUnNamedVersion.value) {
       editPanelShow.value = true;
     } else {
@@ -268,7 +269,7 @@
   };
 
   const handleView = (config: IConfigKvType) => {
-    activeConfig.value = config.spec;
+    activeConfig.value = config;
     viewPanelShow.value = true;
   };
 

diff --git a/...ui/src/views/space/service/detail/config/config-list/config-table-list/view-config-kv.vue b/...ui/src/views/space/service/detail/config/config-list/config-table-list/view-config-kv.vue
@@ -1,47 +1,70 @@
 <template>
   <bk-sideslider width="640" quick-close :title="t('查看配置项')" :is-show="props.show" @closed="close">
     <div class="view-wrap">
-      <bk-form label-width="100" form-type="vertical">
-        <bk-form-item :label="t('配置项名称')">{{ props.config.key }}</bk-form-item>
-        <bk-form-item :label="t('配置项类型')">{{ props.config.kv_type }}</bk-form-item>
-        <bk-form-item :label="t('配置项值')">
-          <span v-if="props.config.kv_type === 'string' || props.config.kv_type === 'number'">
-            {{ props.config.value }}
-          </span>
-          <div v-else class="editor-wrap">
-            <kvConfigContentEditor :content="props.config.value" :editable="false" :languages="props.config.kv_type" />
-          </div>
-        </bk-form-item>
-      </bk-form>
+      <bk-tab v-model:active="activeTab" type="card-grid" ext-cls="view-config-tab">
+        <bk-tab-panel name="content" label="配置项信息">
+          <bk-form label-width="100" form-type="vertical">
+            <bk-form-item :label="t('配置项名称')">{{ props.config.spec.key }}</bk-form-item>
+            <bk-form-item :label="t('配置项类型')">{{ props.config.spec.kv_type }}</bk-form-item>
+            <bk-form-item :label="t('配置项值')">
+              <span v-if="props.config.spec.kv_type === 'string' || props.config.spec.kv_type === 'number'">
+                {{ props.config.spec.value }}
+              </span>
+              <div v-else class="editor-wrap">
+                <kvConfigContentEditor
+                  :content="props.config.spec.value"
+                  :editable="false"
+                  :languages="props.config.spec.kv_type" />
+              </div>
+            </bk-form-item>
+          </bk-form>
+        </bk-tab-panel>
+        <bk-tab-panel name="meta" label="元数据">
+          <ConfigContentEditor
+            language="json"
+            :content="JSON.stringify(metaData, null, 2)"
+            :editable="false"
+            :show-tips="false" />
+        </bk-tab-panel>
+      </bk-tab>
     </div>
     <section class="action-btns">
       <bk-button @click="close">{{ t('关闭') }}</bk-button>
     </section>
   </bk-sideslider>
 </template>
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
+  import { ref, computed, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { IConfigKvItem } from '../../../../../../../../types/config';
+  import { IConfigKvType } from '../../../../../../../../types/config';
   import kvConfigContentEditor from '../../components/kv-config-content-editor.vue';
+  import ConfigContentEditor from '../../components/config-content-editor.vue';
 
   const { t } = useI18n();
   const props = defineProps<{
-    config: IConfigKvItem;
+    config: IConfigKvType;
     show: boolean;
   }>();
 
   const emits = defineEmits(['update:show', 'confirm']);
 
-  const configForm = ref<IConfigKvItem>();
+  const activeTab = ref('content');
   const isFormChange = ref(false);
 
+  const metaData = computed(() => {
+    const { content_spec, revision, spec } = props.config;
+    const { byte_size, signature } = content_spec;
+    const { create_at, creator, reviser, update_at } = revision;
+    const { key, kv_type, value } = spec;
+    return { key, kv_type, value, byte_size, signature, create_at, creator, reviser, update_at };
+  });
+
   watch(
     () => props.show,
     (val) => {
       if (val) {
         isFormChange.value = false;
-        configForm.value = props.config;
+        activeTab.value = 'content';
       }
     },
   );
@@ -52,10 +75,22 @@
 </script>
 <style lang="scss" scoped>
   .view-wrap {
-    padding: 20px 24px;
     height: calc(100vh - 101px);
     font-size: 12px;
-    overflow: auto;
+    overflow: hidden;
+    .view-config-tab {
+      height: 100%;
+      overflow: auto;
+      :deep(.bk-tab-header) {
+        padding: 8px 24px 0;
+        font-size: 14px;
+        background: #eaebf0;
+      }
+      :deep(.bk-tab-content) {
+        padding: 24px 40px;
+        box-shadow: none;
+      }
+    }
     :deep(.bk-form-item) {
       margin-bottom: 24px;
       .bk-form-label,