feat: 文件型配置服务创建配置文件时提示文件权限对Windows客户端提示--story=119622492 (#3509)

* feat: 文件型配置服务创建配置文件时提示文件权限对Windows客户端提示 * fix: 默认选择任意类型，且不允许删除 * fix: 批量导入表格列表出现空行bug
TencentBlueKing · Sep 10, 2024 · 49b34a1 · 49b34a1
1 parent 708803f
commit 49b34a1
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 73 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
@@ -522,6 +522,7 @@ export default {
   是否可见: 'visibility',
   密钥类型: 'secret_type',
   '请输入配置文件的完整路径和文件名，例如：/etc/nginx/nginx.conf': 'Please enter the complete path and file name of the configuration file, for example: /etc/nginx/nginx.conf',
+  '对于Windows客户端，以上文件权限、用户及用户组设置不生效，可在后置脚本中处理文件权限': 'For Windows clients, the above file permission, user and user group settings do not take effect, and file permissions can be handled in the post-script',
 
   // 分组管理
   新增分组: 'New group',

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -521,6 +521,7 @@ export default {
   密钥类型: '密钥类型',
   '请输入配置文件的完整路径和文件名，例如：/etc/nginx/nginx.conf': '请输入配置文件的完整路径和文件名，例如：/etc/nginx/nginx.conf',
   只看冲突配置项: '只看冲突配置项',
+  '对于Windows客户端，以上文件权限、用户及用户组设置不生效，可在后置脚本中处理文件权限': '对于Windows客户端，以上文件权限、用户及用户组设置不生效，可在后置脚本中处理文件权限',
 
   // 分组管理
   新增分组: '新增分组',

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/modify-group-publish.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/modify-group-publish.vue
@@ -294,12 +294,12 @@
   };
 
   // 上线确认
-  const handleConfirm = (haveCredentials: boolean) => {
+  const handleConfirm = (havePull: boolean) => {
     isDiffSliderShow.value = false;
     publishedVersionId.value = versionData.value.id;
     handlePanelClose();
     emit('confirm');
-    if (haveCredentials) {
+    if (havePull) {
       InfoBox({
         infoType: 'success',
         'ext-cls': 'info-box-style',

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/index.vue
@@ -238,12 +238,12 @@
   };
 
   // 版本上线成功
-  const handleConfirm = (haveCredentials: boolean) => {
+  const handleConfirm = (havePull: boolean) => {
     isDiffSliderShow.value = false;
     publishedVersionId.value = versionData.value.id;
     handlePanelClose();
     emit('confirm');
-    if (haveCredentials) {
+    if (havePull) {
       InfoBox({
         infoType: 'success',
         'ext-cls': 'info-box-style',
@@ -258,7 +258,7 @@
         confirmText: t('配置客户端'),
         cancelText: t('稍后再说'),
         onConfirm: () => {
-          router.push({ name: 'credentials-management' });
+          router.push({ name: 'configuration-example' });
         },
       });
     }

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
@@ -24,58 +24,64 @@
       </bk-radio-group>
     </bk-form-item>
     <div class="user-settings">
-      <bk-form-item :label="t('文件权限')" property="privilege" required>
-        <div class="perm-input">
-          <bk-popover
-            ext-cls="privilege-tips-wrap"
-            theme="light"
-            trigger="manual"
-            placement="top"
-            :is-show="showPrivilegeErrorTips">
-            <bk-input
-              v-model="privilegeInputVal"
-              type="number"
-              :placeholder="t('请输入三位权限数字')"
-              @blur="handlePrivilegeInputBlur" />
-            <template #content>
-              <div>{{ t('只能输入三位 0~7 数字') }}</div>
-              <div class="privilege-tips-btn-area">
-                <bk-button text theme="primary" @click="showPrivilegeErrorTips = false">{{ t('我知道了') }}</bk-button>
+      <div class="user-content">
+        <bk-form-item :label="t('文件权限')" property="privilege" required>
+          <div class="perm-input">
+            <bk-popover
+              ext-cls="privilege-tips-wrap"
+              theme="light"
+              trigger="manual"
+              placement="top"
+              :is-show="showPrivilegeErrorTips">
+              <bk-input
+                v-model="privilegeInputVal"
+                type="number"
+                :placeholder="t('请输入三位权限数字')"
+                @blur="handlePrivilegeInputBlur" />
+              <template #content>
+                <div>{{ t('只能输入三位 0~7 数字') }}</div>
+                <div class="privilege-tips-btn-area">
+                  <bk-button text theme="primary" @click="showPrivilegeErrorTips = false">{{ t('我知道了') }}</bk-button>
+                </div>
+              </template>
+            </bk-popover>
+            <bk-popover ext-cls="privilege-select-popover" theme="light" trigger="click" placement="bottom">
+              <div :class="['perm-panel-trigger']">
+                <i class="bk-bscp-icon icon-configuration-line"></i>
               </div>
-            </template>
-          </bk-popover>
-          <bk-popover ext-cls="privilege-select-popover" theme="light" trigger="click" placement="bottom">
-            <div :class="['perm-panel-trigger']">
-              <i class="bk-bscp-icon icon-configuration-line"></i>
-            </div>
-            <template #content>
-              <div class="privilege-select-panel">
-                <div v-for="(item, index) in PRIVILEGE_GROUPS" class="group-item" :key="index" :label="item">
-                  <div class="header">{{ item }}</div>
-                  <div class="checkbox-area">
-                    <bk-checkbox-group
-                      class="group-checkboxs"
-                      :model-value="privilegeGroupsValue[index]"
-                      @change="handleSelectPrivilege(index, $event)">
-                      <bk-checkbox size="small" :label="4" :disabled="index === 0">
-                        {{ t('读') }}
-                      </bk-checkbox>
-                      <bk-checkbox size="small" :label="2">{{ t('写') }}</bk-checkbox>
-                      <bk-checkbox size="small" :label="1">{{ t('执行') }}</bk-checkbox>
-                    </bk-checkbox-group>
+              <template #content>
+                <div class="privilege-select-panel">
+                  <div v-for="(item, index) in PRIVILEGE_GROUPS" class="group-item" :key="index" :label="item">
+                    <div class="header">{{ item }}</div>
+                    <div class="checkbox-area">
+                      <bk-checkbox-group
+                        class="group-checkboxs"
+                        :model-value="privilegeGroupsValue[index]"
+                        @change="handleSelectPrivilege(index, $event)">
+                        <bk-checkbox size="small" :label="4" :disabled="index === 0">
+                          {{ t('读') }}
+                        </bk-checkbox>
+                        <bk-checkbox size="small" :label="2">{{ t('写') }}</bk-checkbox>
+                        <bk-checkbox size="small" :label="1">{{ t('执行') }}</bk-checkbox>
+                      </bk-checkbox-group>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </template>
-          </bk-popover>
-        </div>
-      </bk-form-item>
-      <bk-form-item :label="t('用户')" property="user" :required="true">
-        <bk-input v-model="localVal.user" :placeholder="t('请输入')" @input="change"></bk-input>
-      </bk-form-item>
-      <bk-form-item :label="t('用户组')" :placeholder="t('请输入')" property="user_group" :required="true">
-        <bk-input v-model="localVal.user_group" @input="change"></bk-input>
-      </bk-form-item>
+              </template>
+            </bk-popover>
+          </div>
+        </bk-form-item>
+        <bk-form-item :label="t('用户')" property="user" :required="true">
+          <bk-input v-model="localVal.user" :placeholder="t('请输入')" @input="change"></bk-input>
+        </bk-form-item>
+        <bk-form-item :label="t('用户组')" :placeholder="t('请输入')" property="user_group" :required="true">
+          <bk-input v-model="localVal.user_group" @input="change"></bk-input>
+        </bk-form-item>
+      </div>
+      <div v-if="isWindowsAgent" class="user-tips">
+        <info-line class="icon" />
+        <span>{{ t('对于Windows客户端，以上文件权限、用户及用户组设置不生效，可在后置脚本中处理文件权限') }}</span>
+      </div>
     </div>
     <bk-form-item v-if="localVal.file_type === 'binary'" :label="t('配置内容')" :required="true">
       <bk-upload
@@ -150,7 +156,7 @@
   import SHA256 from 'crypto-js/sha256';
   import WordArray from 'crypto-js/lib-typedarrays';
   import CryptoJS from 'crypto-js';
-  import { TextFill, Done, Info, Error, Spinner } from 'bkui-vue/lib/icon';
+  import { TextFill, Done, Info, Error, Spinner, InfoLine } from 'bkui-vue/lib/icon';
   import BkMessage from 'bkui-vue/lib/message';
   import { cloneDeep } from 'lodash';
   import { IConfigEditParams, IFileConfigContentSummary } from '../../../../../../../../types/config';
@@ -224,6 +230,7 @@
   });
   const fileDownloading = ref(false);
   const uploadFile = ref<IUploadFile>();
+  const isWindowsAgent = ref(false); // 是否为windows用户
   const rules = {
     // 配置文件名校验规则，path+filename
     fileAP: [
@@ -324,6 +331,7 @@
     } else {
       stringContent.value = props.content as string;
     }
+    isWindowsAgent.value = navigator.userAgent.indexOf('Windows') !== -1;
   });
 
   // 权限输入框失焦后，校验输入是否合法，如不合法回退到上次输入
@@ -563,9 +571,26 @@
 </script>
 <style lang="scss" scoped>
   .user-settings {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
+    margin-bottom: 24px;
+    .user-content {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      :deep(.bk-form-item) {
+        margin-bottom: 0px;
+      }
+    }
+    .user-tips {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 8px;
+      font-size: 12px;
+      color: #63656e;
+      .icon {
+        font-size: 14px;
+      }
+    }
   }
   .perm-input {
     display: flex;

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-form.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-form.vue
@@ -32,7 +32,7 @@
         @input="handleChange" />
     </bk-form-item>
     <bk-form-item :label="t('数据格式')" :description="t('tips.config')">
-      <bk-radio-group v-model="localData.config_type" :disabled="editable">
+      <bk-radio-group v-model="localData.config_type" :disabled="editable" @change="handleConfigTypeChange">
         <bk-radio label="file">{{ t('文件型') }}</bk-radio>
         <bk-radio label="kv">{{ t('键值型') }}</bk-radio>
       </bk-radio-group>
@@ -43,7 +43,7 @@
       property="data_type"
       :description="t('tips.type')"
       required>
-      <bk-select v-model="localData.data_type" class="type-select" @select="handleChange">
+      <bk-select v-model="localData.data_type" class="type-select" :clearable="false" @select="handleChange">
         <bk-option id="any" :name="t('任意类型')" />
         <bk-option v-for="kvType in CONFIG_KV_TYPE" :key="kvType.id" :id="kvType.id" :name="kvType.name" />
       </bk-select>
@@ -107,6 +107,14 @@
     },
   );
 
+  const handleConfigTypeChange = () => {
+    if (localData.value.config_type === 'kv') {
+      localData.value.data_type = 'any';
+    } else {
+      localData.value.data_type = '';
+    }
+  };
+
   const handleChange = () => {
     emits('change', localData.value);
   };

diff --git a/...pace/templates/list/package-detail/operations/add-configs/import-configs/config-table.vue b/...pace/templates/list/package-detail/operations/add-configs/import-configs/config-table.vue
@@ -168,11 +168,11 @@
         </div>
         <div class="th-cell delete"></div>
       </div>
-      <RecycleScroller class="table-body" :items="data" :item-size="44" key-field="name" v-slot="{ item, index }">
+      <RecycleScroller class="table-body" :items="data" :item-size="44" key-field="fileAP" v-slot="{ item, index }">
         <div class="table-row">
           <div class="not-editable td-cell name">
             <bk-overflow-title type="tips">
-              {{ fileAP(item) }}
+              {{ item.fileAP }}
             </bk-overflow-title>
           </div>
           <div class="not-editable td-cell type">
@@ -274,8 +274,21 @@
   watch(
     () => props.tableData,
     () => {
-      data.value = cloneDeep(props.tableData);
-      initData.value = cloneDeep(props.tableData);
+      const configList = props.tableData.map((item) => {
+        const { path, name } = item;
+        let fileAP;
+        if (path.endsWith('/')) {
+          fileAP = `${path}${name}`;
+        } else {
+          fileAP = `${path}/${name}`;
+        }
+        return {
+          ...item,
+          fileAP,
+        };
+      });
+      data.value = cloneDeep(configList);
+      initData.value = cloneDeep(configList);
     },
     { deep: true, immediate: true },
   );
@@ -291,15 +304,6 @@
     { deep: true },
   );
 
-  // 配置文件名
-  const fileAP = (config: IConfigImportItem) => {
-    const { path, name } = config;
-    if (path.endsWith('/')) {
-      return `${path}${name}`;
-    }
-    return `${path}/${name}`;
-  };
-
   // 将权限数字拆分成三个分组配置
   const privilegeGroupsValue = computed(() => (privilege: string) => {
     const data: { [index: string]: number[] } = { 0: [], 1: [], 2: [] };

diff --git a/bcs-services/bcs-bscp/ui/types/config.ts b/bcs-services/bcs-bscp/ui/types/config.ts
@@ -219,6 +219,7 @@ export interface IConfigImportItem {
   }[];
   file_name?: string;
   is_exist: boolean;
+  fileAP?: string;
 }
 
 // kv类型