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

3octaves · Sep 25, 2024 · a9b3ae7 · a9b3ae7
1 parent def821e
commit a9b3ae7
Show file tree

Hide file tree

Showing 39 changed files with 3,893 additions and 161 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/package.json b/dbm-ui/frontend/package.json
@@ -27,7 +27,7 @@
     "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "^11.0.3",
     "axios": "^1.7.7",
-    "bkui-vue": "2.0.1-beta.69",
+    "bkui-vue": "^2.0.1-beta.69",
     "date-fns": "3.6.0",
     "dayjs": "^1.11.13",
     "html-to-image": "1.11.11",

diff --git a/dbm-ui/frontend/src/common/const/dbOperations.ts b/dbm-ui/frontend/src/common/const/dbOperations.ts
@@ -0,0 +1,33 @@
+export const MysqlDbOperations = {
+  dml: ['select', 'insert', 'update', 'delete', 'show view'],
+  ddl: [
+    'create',
+    'alter',
+    'drop',
+    'index',
+    'create view',
+    'execute',
+    'trigger',
+    'event',
+    'create routine',
+    'alter routine',
+    'references',
+    'create temporary tables',
+  ],
+  glob: ['file', 'reload', 'show databases', 'process', 'replication slave', 'replication client'],
+};
+
+export const MysqlDdlSensitiveWords = [
+  'trigger',
+  'event',
+  'create routine',
+  'alter routine',
+  'references',
+  'create temporary tables',
+];
+
+export const TendbClusterDbOperations = {
+  dml: ['select', 'insert', 'update', 'delete'],
+  ddl: ['execute'],
+  glob: ['file', 'reload', 'process', 'show databases'],
+};
diff --git a/dbm-ui/frontend/src/common/const/index.ts b/dbm-ui/frontend/src/common/const/index.ts
@@ -3,6 +3,7 @@ export * from './clusterInsStatus';
 export * from './clusterTypeInfos';
 export * from './clusterTypes';
 export * from './confLevels';
+export * from './dbOperations';
 export * from './dbSysExclude';
 export * from './dbTypeInfos';
 export * from './dbTypes';

diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
@@ -101,13 +101,21 @@
       </template>
     </BkResizeLayout>
     <template #footer>
-      <BkButton
-        class="cluster-selector-button mr-8"
-        :disabled="isEmpty"
-        theme="primary"
-        @click="handleConfirm">
-        {{ t('确定') }}
-      </BkButton>
+      <span class="mr24">
+        <slot
+          v-if="slots.submitTips"
+          :cluster-list="selectedClusterList"
+          name="submitTips" />
+      </span>
+      <span v-bk-tooltips="submitButtonDisabledInfo.tooltips">
+        <BkButton
+          class="cluster-selector-button mr-8"
+          :disabled="submitButtonDisabledInfo.disabled"
+          theme="primary"
+          @click="handleConfirm">
+          {{ t('确定') }}
+        </BkButton>
+      </span>
       <BkButton
         class="cluster-selector-button"
         @click="handleClose">
@@ -200,6 +208,7 @@
     clusterTypes: string[];
     tabListConfig?: Record<string, TabConfig>;
     onlyOneType?: boolean;
+    disableDialogSubmitMethod?: (hostList: Array<string>) => string | boolean;
   }
 
   interface Emits {
@@ -214,6 +223,7 @@
     default: false,
   });
 
+  const slots = useSlots();
   const copy = useCopy();
   const { dialogWidth } = useSelectorDialogWidth();
   const { t } = useI18n();
@@ -392,6 +402,41 @@
   // 选中结果是否为空
   const isEmpty = computed(() => _.every(Object.values(selectedMap.value), (item) => Object.keys(item).length < 1));
 
+  const selectedClusterList = computed(() =>
+    Object.values(selectedMap.value).reduce<string[]>((prevList, selectedItem) => {
+      const clusterList = Object.values(selectedItem).map((clusterItem) => clusterItem.master_domain);
+      prevList.push(...clusterList);
+      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 = t('请选择集群');
+      return info;
+    }
+
+    const checkValue = props?.disableDialogSubmitMethod
+      ? props.disableDialogSubmitMethod(selectedClusterList.value)
+      : false;
+    if (checkValue) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = _.isString(checkValue) ? checkValue : t('无法保存');
+    }
+    return info;
+  });
+
   watch(
     () => props.clusterTypes,
     (types) => {

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"