feat: 接入点屏蔽方案 (closed #1796)

TencentBlueKing · Sep 15, 2023 · 03326fa · 03326fa
1 parent a79ae39
commit 03326fa
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 14 deletions.
diff --git a/frontend/index-dev.html b/frontend/index-dev.html
@@ -40,6 +40,7 @@
               const CMDB_URL = ''
               const BKAPP_NAV_OPEN_SOURCE_URL = ''
               const BKAPP_NAV_HELPER_URL = ''
+              const ENABLE_AP_VERSION_MUTEX = 'False'
 
               return {
                   SITE_URL: SITE_URL,
@@ -75,6 +76,7 @@
                   CMDB_URL,
                   BKAPP_NAV_OPEN_SOURCE_URL,
                   BKAPP_NAV_HELPER_URL,
+                  ENABLE_AP_VERSION_MUTEX,
               }
           })()
           window.$DHCP = window.PROJECT_CONFIG.BKAPP_ENABLE_DHCP === 'True'

diff --git a/frontend/index.html b/frontend/index.html
@@ -44,6 +44,7 @@
               const CMDB_URL = '{{ CMDB_URL }}'
               const BKAPP_NAV_HELPER_URL = '{{ BKAPP_NAV_HELPER_URL }}'
               const BKAPP_NAV_OPEN_SOURCE_URL = '{{ BKAPP_NAV_OPEN_SOURCE_URL }}'
+              const ENABLE_AP_VERSION_MUTEX = '{{ ENABLE_AP_VERSION_MUTEX }}'
 
               return {
                   APP_CODE,
@@ -61,6 +62,7 @@
                   DEFAULT_CLOUD: parseInt(DEFAULT_CLOUD),
                   DEFAULT_SSH_PORT,
                   DESTOP_URL,
+                  ENABLE_AP_VERSION_MUTEX,
                   GLOBAL_TASK_CONFIG_PERMISSION,
                   GLOBAL_SETTING_PERMISSION,
                   GSE_LISTEN_PORT,
@@ -79,6 +81,7 @@
                   VERSION,
                   WEB_TITLE,
                   WXWORK_UIN,
+
               }
           })()
           window.$DHCP = window.PROJECT_CONFIG.BKAPP_ENABLE_DHCP === 'True'

diff --git a/frontend/src/components/common/permission-select.vue b/frontend/src/components/common/permission-select.vue
@@ -22,7 +22,9 @@
         :id="item[optionId]"
         :name="item[optionName]"
         :class="{ 'is-auth-disabled': openPermission && !(item.permission || item[permissionKey]) }"
-        :disabled="item.disabled">
+        :disabled="item.disabled"
+        @mouseenter.native="(e) => optionMouseenter(e, item)"
+        @mouseleave.native="(e) => optionMouseleave(e, item)">
         <div class="bk-option-content-default" :title="item[optionName]">
           <span class="bk-option-name">
             {{ item[optionName] }}
@@ -88,6 +90,7 @@ export default class PermissionSelect extends Vue {
   @Ref('permissionSelect') private readonly permissionSelect: any;
 
   private selectValue: IBizValue = this.value;
+  private optPop: any = null;
 
   private get openPermission(): boolean {
     return MainStore.permissionSwitch && !!this.permission;
@@ -168,6 +171,31 @@ export default class PermissionSelect extends Vue {
   private handleExtension() {
     return false;
   }
+  private optionMouseenter(e: MouseEvent, option: IItem) {
+    if (option.tip && !this.optPop) {
+      this.optPop = this.$bkPopover(e.target!, {
+        content: option.tip,
+        trigger: 'manual',
+        theme: 'dark',
+        interactive: true,
+        arrow: true,
+        placement: 'right',
+        maxWidth: 300,
+        delay: 100,
+        distance: 12,
+        followCursor: false,
+        flip: true,
+        boundary: 'window',
+        zIndex: 2000,
+      });
+    }
+    this.optPop && this.optPop.show();
+  }
+  private optionMouseleave() {
+    this.optPop?.hide();
+    this.optPop?.destroy();
+    this.optPop = null;
+  }
   private handleSelectClose() {
     this.permissionSelect.close();
   }

diff --git a/frontend/src/components/setup-table/install-table.vue b/frontend/src/components/setup-table/install-table.vue
@@ -42,7 +42,8 @@
                       label: config.label,
                       required: !config.noRequiredMark && config.required,
                       batch: config.getBatch ? config.getBatch.call(_self) : config.batch,
-                      isBatchIconShow: !!table.data.length,
+                      isBatchIconShow: !!table.data.length
+                        && (config.getBatch ? config.getBatch.call(_self) : config.batch),
                       type: config.type,
                       subTitle: config.subTitle,
                       options: getCellInputOptions({}, config),

diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
@@ -411,6 +411,7 @@ export default {
   动态寻址: 'Dynamic addressing',
   动态: 'Dynamic',
   静态: 'Static',
+  接入点互斥: 'The host is on a GSE{0} access point, and the {1} access point is disabled',
 
   // 安装通道
   安装通道: 'Install channel',

diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
@@ -411,6 +411,7 @@ export default {
   动态寻址: '动态寻址',
   动态: '动态',
   静态: '静态',
+  接入点互斥: '主机处于 GSE{0}接入点，{1} 的接入点禁用',
 
   // 安装通道
   安装通道: '安装通道',

diff --git a/frontend/src/types/config/config.ts b/frontend/src/types/config/config.ts
@@ -45,6 +45,7 @@ export interface IApBase {
   package_inner_url: string
   package_outer_url: string
   nginx_path: null | ''
+  gse_version: 'V1' | 'V2' // ENABLE_AP_VERSION_MUTEX 开启时使用
 }
 
 export interface IApParams extends IApBase {

diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
@@ -255,6 +255,7 @@ export interface ISetupRow {
   validator?: { [key: string]: ISetupValidator }
   install_channel_id: string | number | null
   bk_addressing: 'static' | 'dynamic'
+  gse_version?: 'V1'|'V2' // 前端添加 用于操作主机仅能选择对应版本的接入点
 }
 
 export interface ISetupParent {
@@ -297,7 +298,7 @@ export interface ISetupHead {
   rules?: any[]
   options?: any[]
   manualProp?: boolean // 手动安装需要的配置
-  getOptions?: Function
+  getOptions?: Function // row 为{}时是表头
   getBatch?: Function
   getReadonly?: Function
   getProxyStatus?: Function

diff --git a/frontend/src/views/agent/agent-setup/agent-import.vue b/frontend/src/views/agent/agent-setup/agent-import.vue
@@ -273,6 +273,9 @@ export default class AgentImport extends Mixins(mixin) {
   private get showTab() {
     return this.showSetupBtn && ['INSTALL_AGENT', 'REINSTALL_AGENT'].includes(this.type);
   }
+  private get apList() {
+    return AgentStore.apList;
+  }
 
   private created() {
     switch (this.type) {
@@ -327,27 +330,39 @@ export default class AgentImport extends Mixins(mixin) {
     this.showSetupBtn = true;
     let data: ISetupRow[] = [];
     const apDefault = this.isNotAutoSelect ? AgentStore.apList[0].id : '';
+    let defaultAp: any = {};
     if (this.isSelectedAllPages) {
       const res = await AgentStore.getHostList(this.condition);
       data = res.list.map((item: IAgentHost) => {
-        const ap = ((this.isNotAutoSelect || item.install_channel_id !== 'default') && item.ap_id === -1)
-          ? { ap_id: apDefault }
-          : {};
-          // 打平数据
+        if ((this.isNotAutoSelect || item.install_channel_id !== 'default') && item.ap_id === -1) {
+          defaultAp = { ap_id: apDefault };
+        }
+        // 打平数据
         if (!item.install_channel_id) {
           item.install_channel_id = 'default';
         }
         const prove: { [key: string]: string } = {};
-        return Object.assign({}, item, item.identity_info, ap, prove);
+        const copyRow = Object.assign({}, item, item.identity_info, apDefault, prove);
+        // 不同版本的GSE不能混用对应版本的接入点
+        if (window.PROJECT_CONFIG?.ENABLE_AP_VERSION_MUTEX === 'True') {
+          const ap = this.apList.find(item => item.id === copyRow.ap_id);
+          copyRow.gse_version = ap?.gse_version || 'V1';
+        }
+        return copyRow;
       });
     } else {
-      const defaultAp = { ap_id: apDefault };
+      defaultAp = { ap_id: apDefault };
       const formatData = this.tableData.map((item) => {
-        const row = { ...item };
+        const copyRow = { ...item };
         if (this.isNotAutoSelect && item.ap_id === -1) {
-          Object.assign(row, defaultAp);
+          Object.assign(copyRow, defaultAp);
+        }
+        // 不同版本的GSE不能混用对应版本的接入点
+        if (window.PROJECT_CONFIG?.ENABLE_AP_VERSION_MUTEX === 'True') {
+          const ap = this.apList.find(item => item.id === copyRow.ap_id);
+          copyRow.gse_version = ap?.gse_version || 'V1';
         }
-        return row;
+        return copyRow;
       });
       data = JSON.parse(JSON.stringify(formatData));
     }

diff --git a/frontend/src/views/agent/config/editTableConfig.ts b/frontend/src/views/agent/config/editTableConfig.ts
@@ -64,15 +64,46 @@ export const config: ISetupHead[] = [
     prop: 'ap_id',
     type: 'select',
     required: true,
-    batch: true,
+    // batch: true,
     default: getDefaultConfig(defaultOsType, 'ap_id', -1),
     options: [],
     popoverMinWidth: 160,
     noRequiredMark: false,
     parentProp: 'cloud_attr',
     placeholder: window.i18n.t('请选择'),
     manualProp: true,
-    getOptions(row) {
+    getBatch() {
+      return !window.PROJECT_CONFIG?.ENABLE_AP_VERSION_MUTEX
+        || window.PROJECT_CONFIG?.ENABLE_AP_VERSION_MUTEX !== 'True'
+        || this.table?.data?.every(row => row.gse_version === 'V1');
+    },
+    getOptions(oldRow) {
+      let row = oldRow;
+      if (window.PROJECT_CONFIG?.ENABLE_AP_VERSION_MUTEX === 'True') {
+        // getBatch 能确认是表格数据是否展示（同一类数据）, 如果展示, 则取第一个做操作
+        if (!row.id) {
+          row = this.table?.data?.[0] || {};
+        }
+        if (!row.id) {
+          return [];
+        }
+        const gseVersion = row.gse_version;
+        const list = this.apList.map((item) => {
+          const disabled = gseVersion !== item.gse_version
+            || (item.id === -1
+              && (row.bk_cloud_id !== window.PROJECT_CONFIG.DEFAULT_CLOUD
+                || row.install_channel_id !== 'default'));
+          return {
+            ...item,
+            tip: disabled
+              ? window.i18n.t('接入点互斥', gseVersion === 'V1' ? ['1.0', '2.0'] : ['2.0', '1.0'])
+              : '',
+            disabled,
+          };
+        });
+        list.sort(p => (p.disabled ? 1 : -1));
+        return list;
+      }
       return this.apList.map(item => ({
         ...item,
         disabled: item.id === -1