feat: 配置示例新增配置文件筛选功能done--story=119697737

bcs-services/bcs-bscp/ui/src/assets/example-data/file-cmd.yaml

@@ -13,4 +13,6 @@ labels: {{ .Bk_Bscp_Variable_Leabels }}
 
 # 临时目录，在拉取配置文件时，用于存储配置文件的目录，默认为：/data/bscp，可根据实际情况调整
 temp_dir: {{ .Bk_Bscp_VariableTempDir }}
+
+{{ .Bk_Bscp_Variable_Rules }}
 EOF

bcs-services/bcs-bscp/ui/src/assets/example-data/file-container.yaml

@@ -38,6 +38,7 @@ spec:
             - name: temp_dir
               value: {{ .Bk_Bscp_Variable_TempDir }}
             {{ .Bk_Bscp_Variable_p2p_part1 }}
+            {{ .Bk_Bscp_Variable_Rules }}
           # 需要同时挂载文件临时目录到 Init 容器，sidecar 容器，业务容器
           volumeMounts:
             - mountPath: {{ .Bk_Bscp_Variable_TempDir }}

bcs-services/bcs-bscp/ui/src/i18n/en-us.ts

@@ -849,7 +849,7 @@ export default {
   复制命令: 'Command Copy',
   '仅支持字母，数字，\'-\'，\'_\'，\'.\' 及 \'/\' 且需以字母数字开头和结尾': 'Only supports letters, numbers, \'-\', \'_\', \'.\' and \'/\' characters, and must start and end with a letter or number',
   '需以字母、数字开头和结尾，可包含 \'-\'，\'_\'，\'.\' 和字母数字及负数': 'Must start and end with a letter or number, can include \'-\', \'_\', \'.\', and alphanumeric characters, as well as negative numbers',
-  服务标签: 'service label',
+  服务标签: 'Service label',
   '启用 P2P 网络加速': 'Enable P2P network acceleration',
   查看说明: 'View instructions',
   '启用 P2P 网络加速主要适用于业务但配置文件较大及大量节点拉取配置的场景，以实现更优的文件传输速度。': 'Enabling P2P network acceleration is primarily suitable for scenarios where business configuration files are large and many nodes are pulling configurations, to achieve better file transfer speeds',
@@ -867,6 +867,15 @@ export default {
   '请输入BCS 集群 ID，替换下方示例代码后，再尝试复制示例': 'Please enter the BCS cluster ID, replace the example code below, and then try copying the example',
   'BCS集群ID须符合以下格式：BCS-K8S-xxxxx，其中xxxxx为5位数字': 'The BCS cluster ID must follow the format: BCS-K8S-xxxxx, where xxxxx is a five-digit numbe',
   一键复制: 'Copy',
+  启用配置文件筛选: 'Enable configuration file filtering',
+  '当客户端无需拉取配置服务中的全量配置文件时，可以启用此功能，指定相应的通配符，可仅拉取客户端所需的文件': 'When the client does not need to pull the full configuration files from the configuration service, this feature can be enabled. By specifying the appropriate wildcard, the client can pull only the required files',
+  已设置的筛选规则: '{count} filtering rules have been set',
+  规则设置: 'Rule configuration',
+  配置文件筛选规则: 'Configuration file filter rules',
+  配置文件筛选: 'Configuration file filter',
+  '全局配置文件筛选：': 'Global Configuration File Filter：',
+  '(全局配置文件筛选与服务配置文件筛选一样，不同的是全局配置文件筛选可供多个服务共用)': '(The filtering of the global configuration file is the same as that of the service configuration file; the difference is that the global configuration file can be shared among multiple services)',
+  配置筛选规则: 'Configuration filtering rules',
 
   // 公共组件
   页面不存在: 'Page does not exist',

bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts

@@ -870,6 +870,15 @@ export default {
   '请输入BCS 集群 ID，替换下方示例代码后，再尝试复制示例': '请输入BCS 集群 ID，替换下方示例代码后，再尝试复制示例',
   'BCS集群ID须符合以下格式：BCS-K8S-xxxxx，其中xxxxx为5位数字': 'BCS集群ID须符合以下格式：BCS-K8S-xxxxx，其中xxxxx为5位数字',
   一键复制: '一键复制',
+  启用配置文件筛选: '启用配置文件筛选',
+  '当客户端无需拉取配置服务中的全量配置文件时，可以启用此功能，指定相应的通配符，可仅拉取客户端所需的文件': '当客户端无需拉取配置服务中的全量配置文件时，可以启用此功能，指定相应的通配符，可仅拉取客户端所需的文件',
+  已设置的筛选规则: '已设置 {count} 个筛选规则',
+  规则设置: '规则设置',
+  配置文件筛选规则: '配置文件筛选规则',
+  配置文件筛选: '配置文件筛选',
+  '全局配置文件筛选：': '全局配置文件筛选：',
+  '(全局配置文件筛选与服务配置文件筛选一样，不同的是全局配置文件筛选可供多个服务共用)': '全局配置文件筛选与服务配置文件筛选一样，不同的是全局配置文件筛选可供多个服务共用',
+  配置筛选规则: '配置筛选规则',
 
   // 公共组件
   页面不存在: '页面不存在',

bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue

@@ -15,9 +15,9 @@
     </div>
     <div class="associate-config-content" v-if="configSwitch">
       <div class="associate-info-wrap">
-        <div class="associate-info-count">已设置 {{ ruleList.length }} 个筛选规则</div>
+        <div class="associate-info-count">{{ $t('已设置的筛选规则', { count: ruleList.length }) }}</div>
         <bk-button class="associate-info-btn" theme="primary" size="small" text @click="openRuleConfig">
-          <cog-shape class="btn-icon" />规则设置
+          <cog-shape class="btn-icon" />{{ $t('规则设置') }}
         </bk-button>
       </div>
       <associate-side-bar
@@ -27,7 +27,8 @@
         :has-manage-perm="hasManagePerm"
         :example-rules="rules"
         :is-example-mode="true"
-        @send-example-rules="updateRule" />
+        @send-example-rules="updateRule"
+        @close="handleClose" />
     </div>
   </div>
 </template>
@@ -39,7 +40,7 @@
   import { permissionCheck } from '../../../../../api/index';
   import { ICredentialRule, IRuleUpdateParams } from '../../../../../../types/credential';
 
-  const emits = defineEmits(['send-switcher']);
+  const emits = defineEmits(['updateRules']);
 
   const route = useRoute();
 
@@ -96,6 +97,7 @@
       const filteredVal = ruleList.value.filter((item) => !del_id.includes(item.id));
       ruleList.value = filteredVal;
     }
+    sendRules();
     sideBarShow.value = false;
   };
 
@@ -123,13 +125,21 @@
     sideBarShow.value = true;
   };
 
+  const handleClose = () => {
+    sideBarShow.value = false;
+  };
+
   const handleSwitcher = (val: boolean) => {
     configSwitch.value = val;
-    sendVal(configSwitch.value);
+    if (!val) {
+      ruleList.value = [];
+      sendRules();
+    }
   };
 
-  const sendVal = (configSwitch: boolean) => {
-    emits('send-switcher', configSwitch);
+  const sendRules = () => {
+    const ruleString = ruleList.value.map((item) => item.scope);
+    emits('updateRules', ruleString);
   };
 </script>
 

bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/cmd-example.vue

@@ -3,6 +3,7 @@
     <form-option
       ref="fileOptionRef"
       :directory-show="basicInfo!.serviceType.value === 'file'"
+      :associate-config-show="basicInfo!.serviceType.value === 'file'"
       @update-option-data="getOptionData" />
     <div class="preview-container">
       <p class="headline">{{ $t('配置指引与示例预览') }}</p>
@@ -142,6 +143,7 @@
     privacyCredential: '',
     labelArr: [],
     tempDir: '',
+    rules: [],
   });
 
   const cmdContent = computed(() => {
@@ -173,7 +175,19 @@
     let updateString = replaceVal.value;
     updateString = updateString.replace('{{ .Bk_Bscp_Variable_BkBizId }}', bkBizId.value);
     updateString = updateString.replace('{{ .Bk_Bscp_Variable_ServiceName }}', basicInfo!.serviceName.value);
-    replaceVal.value = updateString.replaceAll('{{ .Bk_Bscp_Variable_FEED_ADDR }}', (window as any).GRPC_ADDR);
+    updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_FEED_ADDR }}', (window as any).GRPC_ADDR);
+    // 文件配置筛选规则动态增/删
+    if (optionData.value.rules?.length) {
+      const rulesPart = `
+      # 当客户端无需拉取配置服务中的全量配置文件时，指定相应的通配符，可仅拉取客户端所需的文件，支持多个通配符
+config_matches
+${optionData.value.rules.map((rule) => `- "${rule}"`).join('\n')}`;
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', rulesPart.trim());
+    } else {
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', '');
+    }
+    // 去除 动态插入的值为空的情况下产生的空白行
+    replaceVal.value = updateString.replaceAll(/\r\n\s+\r\n/g, '\n');
   };
   const updateVariables = () => {
     variables.value = [

bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/container-example.vue

@@ -1,6 +1,10 @@
 <template>
   <section class="example-wrap">
-    <form-option ref="fileOptionRef" :p2p-show="true" @update-option-data="getOptionData" />
+    <form-option
+      ref="fileOptionRef"
+      :p2p-show="true"
+      :associate-config-show="true"
+      @update-option-data="getOptionData" />
     <div class="preview-container">
       <span class="preview-label">{{ $t('示例预览') }}</span>
       <bk-button theme="primary" class="copy-btn" @click="copyExample">{{ $t('复制示例') }}</bk-button>
@@ -41,6 +45,7 @@
     tempDir: '',
     clusterSwitch: false,
     clusterInfo: '',
+    rules: [],
   });
   const bkBizId = ref(String(route.params.spaceId));
   const replaceVal = ref('');
@@ -98,13 +103,24 @@
                   apiVersion: v1
                   fieldPath: metadata.uid`;
       updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part1 }}', p2pPart1.trim());
-      replaceVal.value = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part2 }}', p2pPart2.trim());
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part2 }}', p2pPart2.trim());
     } else {
       updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part1 }}', '');
       updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part2 }}', '');
-      // 去除不含p2p相关内容后，遗留的空白行去除
-      replaceVal.value = updateString.replaceAll(/\r\n\s+\r\n/g, '\n');
     }
+
+    // 文件配置筛选规则动态增/删
+    if (optionData.value.rules?.length) {
+      const rulesPart = `
+      # 当客户端无需拉取配置服务中的全量配置文件时，指定相应的通配符，可仅拉取客户端所需的文件，支持多个通配符
+            - name: config_matches
+              value: ${optionData.value.rules}`;
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', rulesPart.trim());
+    } else {
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', '');
+    }
+    // 去除 动态插入的值为空的情况下产生的空白行
+    replaceVal.value = updateString.replaceAll(/\r\n\s+\r\n/g, '\n');
   };
   // 高亮配置
   const updateVariables = () => {

bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue

@@ -1,6 +1,10 @@
 <template>
   <section class="node-mana-container">
-    <form-option ref="fileOptionRef" label-name="服务标签" @update-option-data="getOptionData" />
+    <form-option
+      ref="fileOptionRef"
+      label-name="服务标签"
+      :associate-config-show="true"
+      @update-option-data="getOptionData" />
     <div class="node-content">
       <span class="node-label">{{ $t('示例预览') }}</span>
       <div class="top-tip">
@@ -14,37 +18,50 @@
         </span>
       </div>
       <div class="preview-content">
-        <bk-form label-width="145">
+        <bk-form :label-width="locale === 'en' ? '206' : '145'">
           <bk-form-item :label="$t('服务：')">
             <div class="service-content">
+              <!-- 服务名称 -->
+              <div class="service-item">
+                <span :class="['item-label', { 'item-label--en': locale === 'en' }]"> {{ $t('服务名称') }}： </span>
+                <span v-if="basicInfo!.serviceName.value" class="bk-form-content">
+                  <span class="content-em" @click="copyText(basicInfo!.serviceName.value)">
+                    {{ basicInfo!.serviceName.value }} <copy-shape class="icon-shape" />
+                  </span>
+                </span>
+                <div v-else class="bk-form-content">--</div>
+              </div>
+              <!-- 标签 -->
               <div class="service-item">
                 <span :class="['item-label', { 'item-label--en': locale === 'en' }]"> {{ $t('标签') }}： </span>
-                <ul class="bk-form-content" v-if="optionData.labelArr.length">
-                  <li class="label-li" v-for="(item, index) in optionData.labelArr" :key="index">
+                <ul v-if="optionData.labelArr.length" class="bk-form-content">
+                  <li v-for="(item, index) in optionData.labelArr" :key="index" class="label-li">
                     <div class="label-content">
-                      <span class="label-key">key</span>
-                      <div class="label-value">{{ item.key }}</div>
-                      <copy-shape class="icon-shape" v-show="item.key" @click="copyText(item.key as string)" />
-                    </div>
-                    <div class="label-content">
-                      <span class="label-key">value</span>
-                      <div class="label-value">{{ item.value }}</div>
-                      <copy-shape class="icon-shape" v-show="item.value" @click="copyText(item.value as string)" />
+                      <!-- <span class="label-key">key</span> -->
+                      <div class="input-wrap">{{ item.key || 'key' }}</div>
+                      &nbsp;=&nbsp;
+                      <div class="input-wrap">{{ item.value || 'value' }}</div>
+                      <copy-shape
+                        class="icon-shape"
+                        v-show="item.key && item.value"
+                        @click="copyText(`${item.key}=${item.value}`)" />
                     </div>
                   </li>
                 </ul>
                 <div v-else class="bk-form-content">--</div>
               </div>
+              <!-- 配置文件筛选 -->
               <div class="service-item">
-                <span :class="['item-label', { 'item-label--en': locale === 'en' }]"> {{ $t('服务名称') }}： </span>
-                <span class="bk-form-content">
-                  <span
-                    class="content-em"
-                    v-if="basicInfo!.serviceName.value"
-                    @click="copyText(basicInfo!.serviceName.value)">
-                    {{ basicInfo!.serviceName.value }} <copy-shape class="icon-shape" />
-                  </span>
-                </span>
+                <span :class="['item-label', { 'item-label--en': locale === 'en' }]"> {{ $t('配置文件筛选') }}： </span>
+                <ul v-if="optionData.rules.length" class="bk-form-content">
+                  <li v-for="(rule, index) in optionData.rules" :key="index" class="label-li">
+                    <div class="label-content">
+                      <div class="input-wrap full">{{ rule }}</div>
+                      <copy-shape class="icon-shape" v-show="rule" @click="copyText(rule)" />
+                    </div>
+                  </li>
+                </ul>
+                <div v-else class="bk-form-content">--</div>
               </div>
             </div>
           </bk-form-item>
@@ -68,6 +85,11 @@
               {{ $t('(全局标签与服务标签参数一样，常用于按标签进行灰度发布；不同的是全局标签可供多个服务共用)') }}
             </span>
           </bk-form-item>
+          <bk-form-item :label="$t('全局配置文件筛选：')">
+            <span class="">
+              {{ $t('(全局配置文件筛选与服务配置文件筛选一样，不同的是全局配置文件筛选可供多个服务共用)') }}
+            </span>
+          </bk-form-item>
           <bk-form-item :label="`${$t('客户端密钥')}:`">
             <span class="content-em" v-if="optionData.clientKey" @click="copyText(optionData.clientKey)">
               {{ optionData.privacyCredential }} <copy-shape class="icon-shape" />
@@ -87,7 +109,6 @@
   import BkMessage from 'bkui-vue/lib/message';
   import FormOption from '../form-option.vue';
   import { useI18n } from 'vue-i18n';
-  // import { cloneDeep } from 'lodash';
 
   interface labelItem {
     key: String;
@@ -120,6 +141,7 @@
     privacyCredential: '',
     labelArr: [] as labelItem[],
     tempDir: '',
+    rules: [],
   });
 
   const getOptionData = async (data: any) => {
@@ -202,8 +224,7 @@
   }
   .preview-content {
     margin-top: 13px;
-    padding: 24px 0;
-    // height: 500px;
+    padding: 24px 10px 24px 0;
     background-color: #f5f7fa;
     .icon-shape {
       font-size: 12px;
@@ -240,7 +261,7 @@
   }
   .label-li {
     & + .label-li {
-      margin-top: 24px;
+      margin-top: 8px;
     }
     .label-content {
       display: flex;
@@ -261,21 +282,18 @@
         cursor: pointer;
       }
     }
-    .label-key {
-      margin-right: 16px;
-      width: 31px;
-      height: 30px;
-      text-align: right;
-    }
-    .label-value {
+    .input-wrap {
       padding: 0 8px;
-      width: 240px;
+      width: 212px;
       height: 30px;
       line-height: 30px;
       border: 1px solid #dcdee5;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      &.full {
+        width: 440px;
+      }
     }
   }
   .service-content {
@@ -293,14 +311,14 @@
     }
     .item-label {
       flex-shrink: 0;
-      width: 60px;
+      width: 90px;
       font-size: 12px;
       white-space: nowrap;
       text-align: right;
       color: #63656e;
       line-height: 32px;
       &--en {
-        width: 91px;
+        width: 162px;
       }
     }
     .item-content {