feat: 接入点改造(closed TencentBlueKing#852)

hyunfa · Nov 13, 2024 · 3ddad6a · 3ddad6a
1 parent f14f01b
commit 3ddad6a
Show file tree

Hide file tree

Showing 28 changed files with 1,101 additions and 626 deletions.
diff --git a/.gitignore b/.gitignore
@@ -188,4 +188,8 @@ build.yml
 ## Helm
 support-files/**/private_values.yaml
 support-files/**/*.tgz
-.codecc
+.codecc
+.idea
+.vscode
+
+pre-*-bkcodeai
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -20,5 +20,6 @@ module.exports = {
   rules: {
     '@typescript-eslint/member-ordering': 'off',
     'no-param-reassign': 'off',
+    'vue/camelcase': 'off',
   },
 };
diff --git a/frontend/src/common/form-check.ts b/frontend/src/common/form-check.ts
@@ -1,3 +1,4 @@
+import i18n from '@/setup';
 import { isEmpty } from './util';
 import {
   splitCodeArr,
@@ -34,7 +35,7 @@ export function createIpRegu(type: 'IPv4' | 'IPv6' | 'mixins' = 'IPv4', isBatch
     : (val: string) => !val || regex.test(val);
   return {
     trigger: 'blur',
-    message: window.i18n.t('IP格式不正确'),
+    message: i18n.t('IP格式不正确'),
     // regex,
     validator,
   };
@@ -45,7 +46,7 @@ export function createIpRegu(type: 'IPv4' | 'IPv6' | 'mixins' = 'IPv4', isBatch
  */
 export const reguRequired = {
   required: true,
-  message: window.i18n.t('必填项'),
+  message: i18n.t('必填项'),
   trigger: 'blur',
 };
 export const reguIp = createIpRegu();
@@ -57,39 +58,41 @@ export const reguIpMixinsBatch = createIpRegu('mixins', true);
 export const reguUrl = {
   regex: regUrl,
   validator: (val: string) => regUrl.test(val),
-  message: window.i18n.t('URL格式不正确'),
+  message: i18n.t('URL格式不正确'),
   trigger: 'blur',
 };
 export const reguUrlMixinIp = {
   regex: regUrlMixinIp,
-  message: window.i18n.t('URL格式不正确'),
+  message: i18n.t('URL格式不正确'),
   trigger: 'blur',
   validator: (val: string) => regUrlMixinIp.test(val),
 };
 export const reguPort = {
   // validator: (val: string) => regNaturalNumber.test(val) && parseInt(val, 10) <= 65535, // 端口范围不应该包括
-  validator: (val: string) => regNaturalNumber.test(val) && val && parseInt(val, 10) && parseInt(val, 10) <= 65535,
-  message: window.i18n.t('端口范围', { range: '1-65535' }),
+  validator: (val: string): boolean => regNaturalNumber.test(val)
+    && val && parseInt(val, 10)
+    && parseInt(val, 10) <= 65535,
+  message: i18n.t('端口范围', { range: '1-65535' }),
   trigger: 'blur',
 };
 export const reguNaturalNumber = {
   regex: regNaturalNumber,
   validator: (val: string) => regNaturalNumber.test(val),
-  message: window.i18n.t('不小于零的整数'),
+  message: i18n.t('不小于零的整数'),
   trigger: 'blur',
 };
 export function reguFnName(params?: { max: number } = {}) {
   const { max = 32 } = params;
   return {
     validator: (val: string) => regNormalText.test(val) && regrLengthCheck(val, max),
-    message: window.i18n.t('正常输入内容校验', [max]),
+    message: i18n.t('正常输入内容校验', [max]),
     trigger: 'blur',
   };
 }
 export function reguFnStrLength(max = 40) {
   return {
     validator: (val: string) => regrLengthCheck(val, max),
-    message: window.i18n.t('字符串长度校验', [Math.floor(max / 2), max]),
+    message: i18n.t('字符串长度校验', [Math.floor(max / 2), max]),
     trigger: 'blur',
   };
 }
@@ -98,29 +101,29 @@ export function reguFnSysPath(params?: { [key: string]: number | string } = {})
   const reg = regFnSysPath({ minText, maxText, minLevel, type });
   return {
     type,
-    message: window.i18n.t(i18nMap[type], { minLevel, maxText }),
+    message: i18n.t(i18nMap[type], { minLevel, maxText }),
     trigger: 'blur',
     validator: (val: string)  => reg.test(val),
   };
 }
 export function reguFnMinInteger(min = 0) {
   return {
-    message: window.i18n.t('整数最小值校验提示', { min }),
+    message: i18n.t('整数最小值校验提示', { min }),
     validator: (val: string)  => isEmpty(val) || (regInteger.test(val) && parseInt(val, 10) >= min),
     trigger: 'blur',
   };
 }
 export function reguFnRangeInteger(min: number, max: number) {
   return {
     validator: (val: string) => regInteger.test(val) && Number(val) <= max && Number(val) >= min,
-    message: window.i18n.t('整数范围校验提示', { max, min }),
+    message: i18n.t('整数范围校验提示', { max, min }),
     trigger: 'blur',
   };
 }
 // 一行内不能重复
 export const reguIpInLineRepeat = {
   trigger: 'blur',
-  message: window.i18n.t('冲突校验', { prop: 'IP' }),
+  message: i18n.t('冲突校验', { prop: 'IP' }),
   validator(val: string) {
     if (!val) return true;
     const splitCode = splitCodeArr.find(split => val.indexOf(split) > 0);

diff --git a/frontend/src/common/form-label-hook.ts b/frontend/src/common/form-label-hook.ts
@@ -0,0 +1,34 @@
+import { ref } from 'vue';
+
+export default function useFormLabelWidth() {
+  const minWidth = ref(0);
+
+  const initLabelWidth = (form: Vue) => {
+    const el = form ? form.$el : null;
+    if (!el) return;
+    let max = 0;
+    const leftPadding = 28;
+    const safePadding = 8;
+    const $labelEleList = el.querySelectorAll('.bk-label');
+    $labelEleList.forEach((item) => {
+      const spanEle = item.querySelector('span');
+      if (spanEle) {
+        const { width } = spanEle.getBoundingClientRect();
+        max = Math.max(minWidth.value, max, width);
+      }
+    });
+    const width = Math.ceil(max + leftPadding + safePadding);
+    $labelEleList.forEach((item) => {
+      (item as HTMLElement).style.width = `${width}px`;
+    });
+    el.querySelectorAll('.bk-form-content').forEach((item) => {
+      (item as HTMLElement).style.marginLeft = `${width}px`;
+    });
+    return width;
+  };
+
+  return {
+    minWidth,
+    initLabelWidth,
+  };
+}
diff --git a/frontend/src/common/regexp.ts b/frontend/src/common/regexp.ts
@@ -18,7 +18,7 @@ export const regIp = new RegExp(`^${IpStr}$`);
 export const regFilterIp = new RegExp(`^(?:\\d+:)?(${IpStr})$`);
 export const regExclusiveFilterIp = new RegExp(`^\\d+:${IpStr}$`);
 export const regIPv6 = new RegExp(`^${IPv6Str}$`);
-export const regIpMixin = window.$DHCP ? new RegExp(`^${IpStr}|${IPv6Str}$`) : regIp; // 区分环境可用的IP类型
+export const regIpMixin = window.$DHCP ? new RegExp(`^${IpStr}$|^${IPv6Str}$`) : regIp; // 区分环境可用的IP类型
 export const regFilterIpMixin = window.$DHCP ? new RegExp(`^(?:\\d+:)?(${IpStr}|${IPv6Str})$`) : regFilterIp;
 export const regExclusiveFilterIpMixin = window.$DHCP ? new RegExp(`^\\d+:(${IpStr}|${IPv6Str})$`) : regExclusiveFilterIp; // 用于区分IP还是按管控区域筛选ip
 export const regUrl = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'*+,;=.]+$/;

diff --git a/frontend/src/components/RussianDolls/DollForm.vue b/frontend/src/components/RussianDolls/DollForm.vue
@@ -16,10 +16,22 @@ import { deepClone } from '@/common/util';
 export default defineComponent({
   name: 'RussianDollsForm',
   props: {
-    data: () => [],
-    layout: () => [],
-    rules: () => ({}),
-    value: () => ({}),
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    layout: {
+      type: Array,
+      default: () => [],
+    },
+    rules: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
     labelWidth: {
       type: Number,
       default: 150,

diff --git a/frontend/src/components/RussianDolls/item/DollArray.vue b/frontend/src/components/RussianDolls/item/DollArray.vue
@@ -40,10 +40,22 @@ import bus from '@/common/bus';
 
 export default defineComponent({
   props: {
-    item: () => ({}),
-    schema: () => ({}),
-    value: () => [],
-    valueProp: '',
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+    schema: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    valueProp: {
+      type: String,
+      default: '',
+    },
     labelWidth: {
       type: Number,
       default: 110,

diff --git a/frontend/src/components/RussianDolls/item/DollBase.vue b/frontend/src/components/RussianDolls/item/DollBase.vue
@@ -22,12 +22,30 @@ import { defineComponent, inject, toRefs } from 'vue';
 
 export default defineComponent({
   props: {
-    item: () => ({}),
-    schema: () => ({}),
-    itemIndex: -1,
-    value: '',
-    valueProp: '',
-    labelWidth: 110,
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+    schema: {
+      type: Object,
+      default: () => ({}),
+    },
+    itemIndex: {
+      type: Number,
+      default: -1,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    valueProp: {
+      type: String,
+      default: '',
+    },
+    labelWidth: {
+      type: Number,
+      default: 110,
+    },
   },
   setup(props) {
     const updateFormData = inject('updateFormData');

diff --git a/frontend/src/components/RussianDolls/item/DollIndex.vue b/frontend/src/components/RussianDolls/item/DollIndex.vue
@@ -38,11 +38,26 @@ import { defineComponent, toRefs } from 'vue';
 
 export default defineComponent({
   props: {
-    item: () => ({}),
-    itemIndex: -1,
-    value: () => ({}),
-    valueProp: '',
-    labelWidth: 110,
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+    itemIndex: {
+      type: Number,
+      default: -1,
+    },
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+    valueProp: {
+      type: String,
+      default: '',
+    },
+    labelWidth: {
+      type: Number,
+      default: 110,
+    },
   },
   setup(props) {
     return {

diff --git a/frontend/src/components/RussianDolls/item/DollObject.vue b/frontend/src/components/RussianDolls/item/DollObject.vue
@@ -17,11 +17,26 @@ import { defineComponent, inject, toRefs } from 'vue';
 
 export default defineComponent({
   props: {
-    item: () => ({}),
-    schema: () => ({}),
-    itemIndex: -1,
-    value: () => ({}),
-    valueProp: '',
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+    schema: {
+      type: Object,
+      default: () => ({}),
+    },
+    itemIndex: {
+      type: Number,
+      default: -1,
+    },
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+    valueProp: {
+      type: String,
+      default: '',
+    },
     labelWidth: {
       type: Number,
       default: 110,

diff --git a/frontend/src/components/common/strategy-table.vue b/frontend/src/components/common/strategy-table.vue
@@ -168,7 +168,7 @@ export default class StrategyTable extends Vue {
       },
       {
         source: 'Agent',
-        targetAdress: 'GSE_task',
+        targetAdress: 'GSE_cluster',
         protocol: 'TCP',
         portKey: 'io_port',
         use: this.$t('任务服务端口'),
@@ -397,7 +397,7 @@ export default class StrategyTable extends Vue {
     Proxy: [
       {
         source: 'Proxy(gse_agent)',
-        targetAdress: 'GSE_task',
+        targetAdress: 'GSE_cluster',
         protocol: 'TCP',
         portKey: 'io_port',
         use: this.$t('任务服务端口'),

diff --git a/frontend/src/components/common/strategy-template.vue b/frontend/src/components/common/strategy-template.vue
@@ -115,7 +115,7 @@ export default class StrategyTemplate extends Vue {
         let idKey = cloud.ap_id;
         let ap = AgentStore.apList.find(apItem => apItem.id === idKey) as IApExpand;
 
-        const serverKey = cloud.type === 'Agent' ? 'inner_ip' : 'outer_ip'; // Pagent 非必要
+        const serverKey = cloud.type === 'Agent' ? 'inner_ip_infos' : 'outer_ip_infos'; // Pagent 非必要
         const proxyKey = cloud.type === 'Proxy' ? 'outer_ip' : 'inner_ip'; // Agent 非必要
         // 先排除掉找不到接入点的主机
         if (ap) {
@@ -136,9 +136,9 @@ export default class StrategyTemplate extends Vue {
               ap_name: ap.name,
               zk: ap.zk_hosts.map(zk => zk.zk_ip), // 仅Agent
               zkHosts: ap.zk_hosts,
-              btfileserver: ap.btfileserver.map(server => server[serverKey]),
-              dataserver: ap.dataserver.map(server => server[serverKey]),
-              taskserver: ap.taskserver.map(server => server[serverKey]),
+              btfileserver: ap.btfileserver[serverKey].map(item => item.ip),
+              dataserver: ap.btfileserver[serverKey].map(item => item.ip),
+              taskserver: ap.btfileserver[serverKey].map(item => item.ip),
               proxy: cloud.proxy.map((item: any) => item[proxyKey]),
               agent: cloud[proxyKey] ? [cloud[proxyKey]] : [], // Proxy 非必要
               ...ap.port_config,

diff --git a/frontend/src/config/test-anchor-key.ts b/frontend/src/config/test-anchor-key.ts
@@ -196,6 +196,7 @@ export default {
   accessPoint: {
     apBaseForm: 'form_apBase',
     apBaseTable: 'table_apBase',
+    apOmitBtn: 'btn_apOmit',
     apTestBtn: 'btn_apTest',
     apBaseInput: 'input_apBase',
     addRowBtn: 'btn_addRow',