feat: 前端合并配置文件名称与配置文件路径为配置文件绝对路径--story=116108765 (#2937)

TencentBlueKing · Feb 1, 2024 · 5091ad4 · 5091ad4
1 parent 5006e27
commit 5091ad4
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 57 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -104,7 +104,8 @@ export default {
   批量上传: 'Bulk Upload',
   从配置模板导入: 'Import from Configuration Template',
   批量导入: 'Bulk Import',
-  配置文件名称: 'Configuration file name',
+  配置文件绝对路径: 'Absolute path to the configuration file',
+  请输入配置文件的绝对路径: 'Please enter the absolute path to the configuration file',
   '请输入1~64个字符，只允许英文、数字、下划线、中划线或点': 'Please enter 1 to 64 characters, only allowing alphabets, numbers, underscores, hyphens, or dots.',
   配置文件路径: 'Configuration file path',
   '客户端拉取配置文件后存放路径为：临时目录/业务ID/服务名称/files/配置文件路径，除了配置文件路径其它参数都在客户端sidecar中配置': 'The path for storing the configuration file after the client retrieves it is: temporary directory/business ID/service name/files/configuration file path. Except for the configuration file path, all other parameters are configured in the client sidecar',

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -104,7 +104,8 @@ export default {
   批量上传: '批量上传',
   从配置模板导入: '从配置模板导入',
   批量导入: '批量导入',
-  配置文件名称: '配置文件名称',
+  配置文件绝对路径: '配置文件绝对路径',
+  请输入配置文件的绝对路径: '请输入配置文件的绝对路径',
   '请输入1~64个字符，只允许英文、数字、下划线、中划线或点': '请输入1~64个字符，只允许英文、数字、下划线、中划线或点',
   配置文件路径: '配置文件路径',
   '客户端拉取配置文件后存放路径为：临时目录/业务ID/服务名称/files/配置文件路径，除了配置文件路径其它参数都在客户端sidecar中配置': '客户端拉取配置文件后存放路径为：临时目录/业务ID/服务名称/files/配置文件路径，除了配置文件路径其它参数都在客户端sidecar中配置',

diff --git a/...cp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue b/...cp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
@@ -1,25 +1,7 @@
 <template>
   <bk-form ref="formRef" form-type="vertical" :model="localVal" :rules="rules">
-    <bk-form-item :label="t('配置文件名称')" property="name" :required="true">
-      <bk-input
-        v-model="localVal.name"
-        :placeholder="t('请输入1~64个字符，只允许英文、数字、下划线、中划线或点')"
-        :disabled="!editable"
-        @input="change" />
-    </bk-form-item>
-    <bk-form-item :label="t('配置文件路径')" property="path" :required="true">
-      <template #label>
-        <span
-          v-bk-tooltips="{
-            content: t(
-              '客户端拉取配置文件后存放路径为：临时目录/业务ID/服务名称/files/配置文件路径，除了配置文件路径其它参数都在客户端sidecar中配置',
-            ),
-            placement: 'top',
-          }">
-          {{ t('配置文件路径') }}
-        </span>
-      </template>
-      <bk-input v-model="localVal.path" :placeholder="t('请输入绝对路径')" :disabled="!editable" @input="change" />
+    <bk-form-item :label="t('配置文件绝对路径')" property="fileAP" :required="true">
+      <bk-input v-model="localVal.fileAP" :placeholder="t('请输入配置文件的绝对路径')" :disabled="!editable" @input="change" />
     </bk-form-item>
     <bk-form-item :label="t('配置文件描述')" property="memo">
       <bk-input
@@ -190,7 +172,7 @@
   const configContentTip = `配置文件内支持引用全局变量与定义新的BSCP变量，变量规则如下
                           1.需是要go template语法， 例如 {{ .bk_bscp_appid }}
                           2.变量名需以 “bk_bscp_” 或 “BK_BSCP_” 开头`;
-  const localVal = ref({ ...props.config });
+  const localVal = ref({ ...props.config, fileAP: '' });
   const privilegeInputVal = ref('');
   const showPrivilegeErrorTips = ref(false);
   const stringContent = ref('');
@@ -199,15 +181,12 @@
   const uploadPending = ref(false);
   const formRef = ref();
   const rules = {
-    name: [
+    fileAP: [
       {
-        validator: (value: string) => value.length <= 64,
-        message: t('最大长度64个字符'),
-      },
-      {
-        validator: (value: string) =>
-          /^[\u4e00-\u9fa5A-Za-z0-9_\-#%,@^+=[\]{}]+[\u4e00-\u9fa5A-Za-z0-9_\-#%,.@^+=[\]{}]*$/.test(value),
-        message: t('请使用中文、英文、数字、下划线、中划线或点'),
+        validator: (val: string) =>
+          /^\/([\u4e00-\u9fa5A-Za-z0-9_\-#%,@^+=[\]{}]+[\u4e00-\u9fa5A-Za-z0-9_\-#%,.@^+=[\]{}]*\/?)*$/.test(val),
+        message: t('无效的路径,路径不符合Unix文件路径格式规范'),
+        trigger: 'change',
       },
     ],
     privilege: [
@@ -229,19 +208,6 @@
         trigger: 'blur',
       },
     ],
-    path: [
-      {
-        validator: (value: string) => value.length <= 1024,
-        message: t('最大长度1024个字符'),
-        trigger: 'change',
-      },
-      {
-        validator: (value: string) =>
-          /^\/([\u4e00-\u9fa5A-Za-z0-9_\-#%,@^+=[\]{}]+[\u4e00-\u9fa5A-Za-z0-9_\-#%,.@^+=[\]{}]*\/?)*$/.test(value),
-        message: t('无效的路径,路径不符合Unix文件路径格式规范'),
-        trigger: 'change',
-      },
-    ],
     memo: [
       {
         validator: (value: string) => value.length <= 200,
@@ -285,6 +251,16 @@
     { immediate: true },
   );
 
+  watch(
+    () => props.config,
+    () => {
+      const { path, name } = props.config;
+      if (!path) return;
+      localVal.value.fileAP = path.endsWith('/') ? `${path}${name}` : `${path}/${name}`;
+    },
+    { immediate: true, deep: true },
+  );
+
   // 权限输入框失焦后，校验输入是否合法，如不合法回退到上次输入
   const handlePrivilegeInputBlur = () => {
     const val = String(privilegeInputVal.value);
@@ -392,6 +368,10 @@
 
   const change = () => {
     const content = localVal.value.file_type === 'binary' ? fileContent.value : stringContent.value;
+    const { fileAP } = localVal.value;
+    const lastSlashIndex = fileAP.lastIndexOf('/');
+    localVal.value.name = fileAP.slice(lastSlashIndex + 1);
+    localVal.value.path = fileAP.slice(0, lastSlashIndex + 1);
     emits('change', localVal.value, content);
   };
 

diff --git a/...space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue b/...space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue
@@ -102,9 +102,6 @@
         size = new Blob([stringContent]).size;
         await updateConfigContent(props.bkBizId, props.appId, stringContent, sign);
       }
-      if (configForm.value.path?.endsWith('/') && configForm.value.path !== '/') {
-        configForm.value.path = configForm.value.path.slice(0, -1);
-      }
       const params = { ...configForm.value, ...{ sign, byte_size: size } };
       await createServiceConfigItem(props.appId, props.bkBizId, params);
       emits('confirm');

diff --git a/...space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue b/...space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
@@ -3,9 +3,8 @@
     <table class="config-groups-table">
       <thead>
         <tr class="config-groups-table-tr">
-          <th class="name">{{ t('配置文件名称') }}</th>
+          <th class="name">{{ t('配置文件绝对路径') }}</th>
           <th class="version">{{ t('配置模板版本') }}</th>
-          <th class="path">{{ t('配置路径') }}</th>
           <th class="user">{{ t('创建人') }}</th>
           <th class="user">{{ t('修改人') }}</th>
           <th class="datetime">{{ t('修改时间') }}</th>
@@ -52,15 +51,15 @@
                               :class="{ 'bk-text-with-no-perm': !hasEditServicePerm }"
                               :disabled="hasEditServicePerm && config.file_state === 'DELETE'"
                               @click="handleViewConfig(config.id, 'config')">
-                              {{ config.name }}
+                              {{ fileAP(config) }}
                             </bk-button>
                             <bk-button
                               v-else
                               text
                               theme="primary"
                               :disabled="config.file_state === 'DELETE'"
                               @click="handleViewConfig(config.id, 'config')">
-                              {{ config.name }}
+                              {{ fileAP(config) }}
                             </bk-button>
                           </template>
                           <bk-button
@@ -69,11 +68,10 @@
                             theme="primary"
                             :disabled="config.file_state === 'DELETE'"
                             @click="handleViewConfig(config.versionId, 'template')">
-                            {{ config.name }}
+                            {{ fileAP(config) }}
                           </bk-button>
                         </td>
                         <td class="version">{{ config.versionName }}</td>
-                        <td class="path">{{ config.path }}</td>
                         <td class="user">{{ config.creator }}</td>
                         <td class="user">{{ config.reviser }}</td>
                         <td class="datetime">{{ config.update_at }}</td>
@@ -308,6 +306,15 @@
   // 是否为未命名版本
   const isUnNamedVersion = computed(() => versionData.value.id === 0);
 
+  // 配置文件绝对路径
+  const fileAP = computed(() => (config: IConfigTableItem) => {
+    const { path, name } = config;
+    if (path.endsWith('/')) {
+      return `${path}${name}`;
+    }
+    return `${path}/${name}`;
+  });
+
   watch(
     () => versionData.value.id,
     async () => {

diff --git a/.../bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue b/.../bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
@@ -30,14 +30,13 @@
         @selection-change="handleSelectionChange"
         @select-all="handleSelectAll">
         <bk-table-column type="selection" :min-width="40" :width="40" class="aaaa"></bk-table-column>
-        <bk-table-column :label="t('配置文件名称')">
+        <bk-table-column :label="t('配置文件绝对路径')">
           <template #default="{ row }">
             <div v-if="row.spec" v-overflow-title class="config-name" @click="goToViewVersionManage(row.id)">
-              {{ row.spec.name }}
+              {{ fileAP(row) }}
             </div>
           </template>
         </bk-table-column>
-        <bk-table-column :label="t('配置文件路径')" prop="spec.path"></bk-table-column>
         <bk-table-column :label="t('配置文件描述')" prop="spec.memo">
           <template #default="{ row }">
             <span v-if="row.spec">{{ row.spec.memo || '--' }}</span>
@@ -130,7 +129,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, watch } from 'vue';
+  import { onMounted, ref, watch, computed } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRouter } from 'vue-router';
   import { storeToRefs } from 'pinia';
@@ -205,6 +204,15 @@
     loadConfigList();
   });
 
+  // 配置文件绝对路径
+  const fileAP = computed(() => (config: ITemplateConfigItem) => {
+    const { path, name } = config.spec;
+    if (path.endsWith('/')) {
+      return `${path}${name}`;
+    }
+    return `${path}/${name}`;
+  });
+
   const loadConfigList = async (isBatchUpload = false) => {
     listLoading.value = true;
     const params: ICommonQuery = {

diff --git a/bcs-services/bcs-bscp/ui/types/config.ts b/bcs-services/bcs-bscp/ui/types/config.ts
@@ -79,6 +79,7 @@ export interface IConfigEditParams {
   user?: string;
   user_group?: string;
   privilege?: string;
+  fileAP?: string;
 }
 
 // kv配置文件编辑表单参数