feat: 2.0 Proxy 支持配置临时文件传输路径 (closed #1757) (#1795)

frontend/src/common/form-check.ts

@@ -137,3 +137,9 @@ export function regrLengthCheck(val, max = 32, min = 0) {
   const len = val.replace(/[\u0391-\uFFE5]/g, 'aa').length;
   return len >= min && len <= max;
 }
+
+export function osDirReplace(str: string, filler = '/'): string {
+  const value = str.trim().replace(/[/\\]+/ig, '/');
+  const pathArr = value.split('/').filter((item: string) => !!item);
+  return pathArr.join(filler);
+}

frontend/src/components/setup-table/install-input-type.vue

@@ -316,7 +316,10 @@ export default class InputType extends Mixins(emitter) {
   public handleBlur(value: IValue, event?: Event) {
     this.isFocus = false;
     this.handleEmitBlur(value, event);
-    this.dispatch('step-verify-input', 'verify-blur', this.inputValue);
+    // 优化 - 兼容需要对值做修改之后再进行校验情况
+    this.$nextTick(() => {
+      this.dispatch('step-verify-input', 'verify-blur', this.inputValue);
+    });
   }
   /**
      * 文件变更时事件

frontend/src/components/setup-table/install-table.vue

@@ -160,7 +160,7 @@
                       fileInfo: getCellFileInfo(row, config)
                     }"
                     @focus="handleCellFocus(arguments, { row, config, rowIndex, colIndex })"
-                    @blur="handleCellBlur"
+                    @blur="handleCellBlur(arguments, { row, config, rowIndex, colIndex })"
                     @input="handleCellValueInput(arguments, row, config)"
                     @change="handleCellValueChange(row, config)"
                     @upload-change="handleCellUploadChange($event, row)">
@@ -195,6 +195,8 @@ import { Context } from 'vm';
 import { IFileInfo, IKeysMatch, ISetupHead, ISetupRow, ITabelFliter, ISetupParent } from '@/types';
 import { getDefaultConfig, passwordFillText } from '@/config/config';
 import { splitCodeArr } from '@/common/regexp';
+import { IAp } from '@/types/config/config';
+import { ICloudSource } from '@/types/cloud/cloud';
 
 interface IFilterRow {
   [key: string]: ITabelFliter
@@ -239,6 +241,9 @@ export default class SetupTable extends Vue {
   @Prop({ type: String, default: '' }) private readonly localMark!: string;
   @Prop({ type: Function }) private readonly beforeDelete!: Function;
   @Prop({ type: Number }) private readonly bkCloudId!: number;
+  @Prop({ type: Array }) private readonly aps!: IAp[];
+  @Prop({ type: Array }) private readonly clouds!: ICloudSource[];
+  @Prop() private readonly arbitrary!: any; // 可以是任意值, 用来在config文件里做为必要的一些参数
 
   @Ref('tableBody') private readonly tableBody!: any;
   @Ref('scrollPlace') private readonly scrollPlace!: any;
@@ -269,10 +274,10 @@ export default class SetupTable extends Vue {
     return AgentStore.fetchPwd;
   }
   private get cloudList() {
-    return AgentStore.cloudList;
+    return this.clouds || AgentStore.cloudList;
   }
   private get apList() {
-    return AgentStore.apList;
+    return this.aps || AgentStore.apList;
   }
   private get channelList() {
     return AgentStore.channelList;
@@ -386,7 +391,7 @@ export default class SetupTable extends Vue {
   private addPropToData(row: ISetupRow | any, config: ISetupHead) {
     const prop = config.prop as keyof ISetupRow;
     if (typeof config.getDefaultValue === 'function') {
-      row[prop] = config.getDefaultValue(row);
+      row[prop] = config.getDefaultValue.call(this, row);
     } else {
       row[prop] = isEmpty(row[prop]) && !isEmpty(config.default) ? config.default : row[prop];
     }
@@ -1076,7 +1081,7 @@ export default class SetupTable extends Vue {
       : new Array(`${row[config.prop]}`.length).fill('*')
         .join('');
   }
-  private handleCellFocus(arg: any[], cell: {
+  public handleCellFocus(arg: any[], cell: {
     row: ISetupRow
     config: ISetupHead
     rowIndex: number
@@ -1101,7 +1106,16 @@ export default class SetupTable extends Vue {
       }
     }
   }
-  private handleCellBlur() {
+  public handleCellBlur(arg: any[], cell: {
+    row: ISetupRow
+    config: ISetupHead
+    rowIndex: number
+    colIndex: number
+  }) {
+    const { row, config } = cell;
+    if (config.handleBlur) {
+      config.handleBlur(row, config);
+    }
     this.$set(this, 'focusRow', {});
     this.popoverEl && this.popoverEl.tipsHide();
     this.popoverEl = null;

frontend/src/types/config/config.ts

@@ -60,6 +60,7 @@ export interface IAp extends IApParams {
   ap_type: string
   is_enabled: boolean
   is_default: boolean
+  file_cache_dirs: string
   // nginx_path: null | string
 }
 

frontend/src/types/index.ts

@@ -304,6 +304,7 @@ export interface ISetupHead {
   getCurrentType?: Function
   getDefaultValue?: Function
   handleValueChange?: Function
+  handleBlur?: Function
 }
 
 // 文件导入配置

frontend/src/views/cloud/cloud-manager-add/cloud-manager-setup.vue

@@ -33,6 +33,9 @@
               :class="{ 'cloud-setup-table': isManual }"
               local-mark="proxy_setup`"
               :col-setting="false"
+              :aps="apList"
+              :bk-cloud-id="id"
+              :arbitrary="apId"
               :setup-info="formData.bkCloudSetupInfo"
               :key="net.active"
               :before-delete="handleBeforeDeleteRow"
@@ -246,11 +249,6 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
    */
   private initTableData() {
     const defaultAp = this.apList.find(item => item.is_default);
-    let dataPath = '';
-    if (defaultAp) {
-      const { linux = {} } = defaultAp.agent_config || {};
-      dataPath = linux.data_path;
-    }
     const table = [];
     const initRow = {
       inner_ip: '',
@@ -259,7 +257,7 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
       auth_type: '',
       prove: '',
       retention: -1,
-      data_path: dataPath,
+      data_path: defaultAp?.file_cache_dirs || '',
     };
     // 默认给两行数据
     table.push({ ...initRow });

frontend/src/views/cloud/components/sideslider-content-edit.vue

@@ -71,7 +71,7 @@
         required
         :desc="descDataPathTip"
         :rules="rules.path">
-        <bk-input v-model="proxyData.data_path"></bk-input>
+        <bk-input v-model="proxyData.data_path" @blur="(value) => pathInputBlur(value, 'data_path')" />
       </bk-form-item>
       <bk-form-item :label="$t('BT节点探测')" property="peer_exchange_switch_for_agent">
         <bk-switcher
@@ -112,7 +112,7 @@ import { authentication } from '@/config/config';
 import Upload from '@/components/setup-table/upload.vue';
 import { IProxyDetail } from '@/types/cloud/cloud';
 import InstallInputType from '@/components/setup-table/install-input-type.vue';
-import { reguFnMinInteger, reguPort, reguIPMixins, reguRequired, reguFnSysPath } from '@/common/form-check';
+import { reguFnMinInteger, reguPort, reguIPMixins, reguRequired, reguFnSysPath, osDirReplace } from '@/common/form-check';
 
 @Component({
   name: 'sideslider-content-edit',
@@ -144,7 +144,7 @@ export default class SidesliderContentEdit extends Vue {
     port: [reguRequired, reguPort],
     account: [reguRequired],
     speedLimit: [reguFnMinInteger(1)],
-    path: [reguRequired, reguFnSysPath()],
+    path: [reguRequired, reguFnSysPath({ minLevel: 2 })],
   };
   private loading = false;
   private showErrMsg = false;
@@ -231,6 +231,9 @@ export default class SidesliderContentEdit extends Vue {
                   && isEmpty(this.proxyData[this.proxyData.auth_type.toLocaleLowerCase()]);
     return !this.showErrMsg;
   }
+  public pathInputBlur(val: string, prop: string) {
+    this.proxyData[prop] = `/${osDirReplace(val)}`;
+  }
 }
 </script>
 <style lang="postcss" scoped>

frontend/src/views/cloud/config/netTableConfig.ts

@@ -1,6 +1,6 @@
 import { authentication, DHCP_FILTER_KEYS, getDefaultConfig } from '@/config/config';
 import { ISetupHead, ISetupRow } from '@/types';
-import { reguFnMinInteger, reguFnSysPath, reguIp, reguIPMixins, reguIPv6 } from '@/common/form-check';
+import { osDirReplace, reguFnMinInteger, reguFnSysPath, reguIp, reguIPMixins, reguIPv6 } from '@/common/form-check';
 import { splitCodeArr } from '@/common/regexp';
 
 export const parentHead = [
@@ -167,7 +167,13 @@ const config: ISetupHead[] = [
     width: 160,
     manualProp: true,
     parentProp: 'trans_info',
-    rules: [reguFnSysPath()],
+    rules: [reguFnSysPath({ minLevel: 2 })],
+    getDefaultValue(): string {
+      return this.apList?.find(ap => ap.id === this.arbitrary)?.file_cache_dirs || '';
+    },
+    handleBlur: (row, config) => {
+      row[config.prop] = `/${osDirReplace(row[config.prop])}`;
+    },
   },
   {
     label: 'BT节点探测',

frontend/src/views/global-config/gse-config/set-access-point/step-info.vue

@@ -76,6 +76,7 @@ import { MainStore, ConfigStore } from '@/store/index';
 import { IApParams } from '@/types/config/config';
 import { transformDataKey, toLine } from '@/common/util';
 import { apAgentInfo, apAgentInfoRules } from './apFormConfig';
+import { osDirReplace } from '@/common/form-check';
 
 @Component({ name: 'StepInfo' })
 
@@ -220,15 +221,13 @@ export default class StepInfo extends Vue {
   }
   // 安装路径修复 - 若路径以 / 结尾，则去掉末尾的 /
   public pathRepair(arg: string[], prop: string) {
-    const value = arg[0].trim().replace(/[/\\]+/ig, '/');
-    const pathArr = value.split('/').filter((item: string) => !!item);
     if (/linux/ig.test(prop)) {
-      this.formData[prop] = `/${pathArr.join('/')}`;
+      this.formData[prop] = `/${osDirReplace(arg[0])}`;
     } else {
       if (prop === 'windowsDataipc') {
         return;
       }
-      this.formData[prop] = pathArr.join('\\');
+      this.formData[prop] = osDirReplace(arg[0], '\\');
     }
   }
   public hadleFormChange() {