feat(frontend): 权限查询页 TencentBlueKing#6905

3octaves · Sep 24, 2024 · e85c2cd · e85c2cd
1 parent 974e76d
commit e85c2cd
Show file tree

Hide file tree

Showing 27 changed files with 3,831 additions and 136 deletions.
diff --git a/dbm-ui/frontend/.vscode/settings.json b/dbm-ui/frontend/.vscode/settings.json
@@ -1,60 +1,19 @@
 {
-  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
-  "eslint.alwaysShowStatus": true,
+  "files.eol": "\n",
+  "editor.unfoldOnClickAfterEndOfLine": true,
+  "editor.tabSize": 2,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "explorer.confirmDelete": false,
+  "explorer.confirmDragAndDrop": false,
+  "editor.fontLigatures": false,
+  "editor.fontVariations": false,
+  "i18n-lazyer.defaultFolder": "\\src\\locales",
+  "search.smartCase": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
+  // "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "editor.tabSize": 2,
-  "css.validate": false,
-  "stylelint.enable": true,
-  "scss.validate": false,
-  "stylelint.validate": ["css", "scss", "vue"],
-  "preCI.localCodeCheck.filter.whitePath": "",
-  "preCI.localCodeCheck.filter.skipPath": "",
-  "preCI.localCodeCheck.checkerSet.JS": ["standard_js"],
-  "peacock.remoteColor": "#45e35f",
-  "bk-code-ai.enable": false,
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#71ea85",
-    "activityBar.background": "#71ea85",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#8874ea",
-    "activityBarBadge.foreground": "#15202b",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#71ea85",
-    "statusBar.background": "#45e35f",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#20d53e",
-    "statusBarItem.remoteBackground": "#45e35f",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#45e35f",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#45e35f99",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -28,7 +28,7 @@
       :is-anomalies="isAnomalies"
       :is-searching="searchValue.length > 0"
       :max-height="528"
-      :pagination="pagination.count < 10 ? false : pagination"
+      :pagination="pagination"
       remote-pagination
       :row-class="getRowClass"
       row-style="cursor: pointer"

diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -69,15 +69,16 @@
       </template>
     </BkResizeLayout>
     <template #footer>
-      <span
-        v-bk-tooltips="{
-          content: t('请选择实例'),
-          disabled: !isEmpty,
-        }"
-        class="inline-block">
+      <span class="mr24">
+        <slot
+          v-if="slots.submitTips"
+          :host-list="lastHostList"
+          name="submitTips" />
+      </span>
+      <span v-bk-tooltips="submitButtonDisabledInfo.tooltips">
         <BkButton
           class="w-88"
-          :disabled="isEmpty"
+          :disabled="submitButtonDisabledInfo.disabled"
           theme="primary"
           @click="handleSubmit">
           {{ t('确定') }}
@@ -201,8 +202,8 @@
     getSingleClusterList,
     getSqlServerInstanceList as getSqlServerSingleInstanceList,
   } from '@services/source/sqlserverSingleCluster';
-  import { getTendbhaInstanceList } from '@services/source/tendbha';
-  import { getTendbsingleInstanceList } from '@services/source/tendbsingle';
+  import { getTendbhaInstanceList, getTendbHaMachineList } from '@services/source/tendbha';
+  import { getTendbsingleInstanceList, getTendbSingleMachineList } from '@services/source/tendbsingle';
 
   import { ClusterTypes } from '@common/const';
 
@@ -217,6 +218,8 @@
   import SqlServerContent from './components/sqlserver/Index.vue';
   import TendbClusterContent from './components/tendb-cluster/Index.vue';
   import TendbClusterHostContent from './components/tendb-cluster-host/Index.vue';
+  import TendbHaHostContent from './components/tendb-ha-host/Index.vue';
+  import TendbSingleHostContent from './components/tendb-single-host/Index.vue';
 
   export type TableSetting = ReturnType<typeof getSettings>;
 
@@ -269,12 +272,21 @@
   type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number];
 
   interface Props {
-    clusterTypes: (ClusterTypes | 'TendbClusterHost' | 'RedisHost' | 'mongoCluster')[];
+    clusterTypes: (
+      | ClusterTypes
+      | 'TendbClusterHost'
+      | 'RedisHost'
+      | 'mongoCluster'
+      | 'TendbSingleHost'
+      | 'TendbHaHost'
+    )[];
     tabListConfig?: Record<string, PanelListType>;
     selected?: InstanceSelectorValues<T>;
     unqiuePanelValue?: boolean;
     unqiuePanelTips?: string;
     hideManualInput?: boolean;
+    onlyOneType?: boolean;
+    disableDialogSubmitMethod?: (hostList: Array<string>) => string | boolean;
   }
 
   interface Emits {
@@ -288,6 +300,8 @@
     unqiuePanelValue: false,
     unqiuePanelTips: t('仅可选择一种实例类型'),
     hideManualInput: false,
+    onlyOneType: false,
+    disableDialogSubmitMethod: () => false,
   });
 
   const emits = defineEmits<Emits>();
@@ -300,6 +314,8 @@
     default: false,
   });
 
+  const slots = useSlots();
+
   const tabListMap: Record<string, PanelListType> = {
     [ClusterTypes.REDIS]: [
       {
@@ -679,6 +695,96 @@
         content: ManualInputContent,
       },
     ],
+    TendbSingleHost: [
+      {
+        id: 'TendbSingleHost',
+        name: t('MySQL 单节点'),
+        topoConfig: {
+          getTopoList: queryMysqlCluster,
+        },
+        tableConfig: {
+          getTableList: getTendbSingleMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'related_instances', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: TendbSingleHostContent,
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          getTableList: getTendbSingleMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'related_instances', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        manualConfig: {
+          checkInstances: getTendbSingleMachineList,
+          checkType: 'ip',
+          checkKey: 'ip',
+          activePanelId: 'TendbClusterHost',
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: ManualInputHostContent,
+      },
+    ],
+    TendbHaHost: [
+      {
+        id: 'TendbHaHost',
+        name: t('MySQL 主从'),
+        topoConfig: {
+          getTopoList: queryMysqlCluster,
+        },
+        tableConfig: {
+          getTableList: getTendbHaMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: TendbHaHostContent,
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          getTableList: getTendbHaMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        manualConfig: {
+          checkInstances: getTendbHaMachineList,
+          checkType: 'ip',
+          checkKey: 'ip',
+          activePanelId: 'TendbClusterHost',
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: ManualInputHostContent,
+      },
+    ],
   };
 
   const panelTabActive = ref<string>('');
@@ -753,6 +859,45 @@
   const isEmpty = computed(() => Object.values(lastValues).every((values) => values.length < 1));
   const renderCom = computed(() => (activePanelObj.value ? activePanelObj.value.content : 'div'));
 
+  const lastHostList = computed(() =>
+    Object.values(lastValues).reduce<string[]>((prevList, hostListItem) => {
+      const ipList = hostListItem.map((listItem) => listItem.ip);
+      prevList.push(...ipList);
+      return prevList;
+    }, []),
+  );
+
+  const submitButtonDisabledInfo = computed(() => {
+    const info = {
+      disabled: false,
+      tooltips: {
+        disabled: true,
+        content: '',
+      },
+    };
+
+    if (isEmpty.value) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = panelTabActive.value.includes('Host') ? t('请选择主机') : t('请选择实例');
+      return info;
+    }
+
+    const hostList = Object.values(lastValues).reduce<string[]>((prevList, hostListItem) => {
+      const ipList = hostListItem.map((listItem) => listItem.ip);
+      prevList.push(...ipList);
+      return prevList;
+    }, []);
+
+    const checkValue = props.disableDialogSubmitMethod(hostList);
+    if (checkValue) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = _.isString(checkValue) ? checkValue : t('无法保存');
+    }
+    return info;
+  });
+
   let isInnerChange = false;
 
   watch(
@@ -783,9 +928,32 @@
 
   const handleChangePanel = (obj: PanelListItem) => {
     activePanelObj.value = obj;
+    if (props.onlyOneType) {
+      const initValues = Object.keys(lastValues).reduce<Record<string, T[]>>(
+        (results, id) =>
+          Object.assign({}, results, {
+            [id]: [],
+          }),
+        {},
+      );
+      Object.assign(lastValues, initValues);
+    }
   };
 
-  const handleChange = (values: Props['selected']) => {
+  const handleChange = (values: Props['selected'] = {}) => {
+    // 如果只允许选一种类型, 则清空非当前类型的选中列表
+    // 如果是勾选的取消全选，则忽略
+    const currentKey = panelTabActive.value;
+    if (props.onlyOneType && values[currentKey].length > 0) {
+      Object.keys(lastValues).forEach((key) => {
+        if (key !== currentKey) {
+          lastValues[key] = [];
+        } else {
+          lastValues[key] = values[key];
+        }
+      });
+      return;
+    }
     Object.assign(lastValues, values);
   };