chore: update masking (#8188)

bytebase · Sep 14, 2023 · a32e080 · a32e080
1 parent 520ebdf
commit a32e080
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 33 deletions.
diff --git a/frontend/src/components/ColumnTable.vue b/frontend/src/components/ColumnTable.vue
@@ -14,6 +14,15 @@
       <BBTableCell v-if="showSensitiveColumn" class="bb-grid-cell">
         <div class="flex items-center">
           {{ getMaskingLevelText(column) }}
+          <span v-if="!isColumnConfigMasking(column)">
+            ({{
+              $t(
+                `settings.sensitive-data.masking-level.${maskingLevelToJSON(
+                  column.effectiveMaskingLevel
+                ).toLowerCase()}`
+              )
+            }})
+          </span>
           <NTooltip v-if="!isColumnConfigMasking(column)">
             <template #trigger>
               <heroicons-outline:question-mark-circle class="h-4 w-4 mr-2" />
@@ -104,7 +113,11 @@ import { useI18n } from "vue-i18n";
 import { BBTableColumn } from "@/bbkit/types";
 import { useCurrentUserV1, useSubscriptionV1Store } from "@/store";
 import { ComposedDatabase } from "@/types";
-import { Engine, maskingLevelToJSON } from "@/types/proto/v1/common";
+import {
+  Engine,
+  MaskingLevel,
+  maskingLevelToJSON,
+} from "@/types/proto/v1/common";
 import {
   ColumnMetadata,
   TableMetadata,
@@ -302,13 +315,10 @@ const columnNameList = computed(() => {
 });
 
 const isColumnConfigMasking = (column: ColumnMetadata): boolean => {
-  return props.maskDataList.some((sensitiveData) => {
-    return (
-      sensitiveData.table === props.table.name &&
-      sensitiveData.column === column.name &&
-      sensitiveData.schema === props.schema
-    );
-  });
+  return (
+    getColumnMasking(column).maskingLevel !==
+    MaskingLevel.MASKING_LEVEL_UNSPECIFIED
+  );
 };
 
 const getColumnMasking = (column: ColumnMetadata): MaskData => {
@@ -324,7 +334,7 @@ const getColumnMasking = (column: ColumnMetadata): MaskData => {
       table: props.table.name,
       column: column.name,
       semanticCategoryId: "",
-      maskingLevel: column.effectiveMaskingLevel,
+      maskingLevel: MaskingLevel.MASKING_LEVEL_UNSPECIFIED,
     }
   );
 };

diff --git a/frontend/src/components/SensitiveData/SensitiveColumnView.vue b/frontend/src/components/SensitiveData/SensitiveColumnView.vue
@@ -35,7 +35,7 @@
       <NButton
         type="primary"
         :disabled="
-          state.pendingGrantAccessColumnIndex.length === 0 ||
+          state.pendingGrantAccessColumn.length === 0 ||
           !hasPermission ||
           !hasSensitiveDataFeature
         "
@@ -55,9 +55,9 @@
       :row-selectable="true"
       :show-operation="hasPermission && hasSensitiveDataFeature"
       :column-list="filteredColumnList"
-      :checked-column-index-list="state.pendingGrantAccessColumnIndex"
+      :checked-column-index-list="checkedColumnIndexList"
       @click="onRowClick"
-      @checked:update="state.pendingGrantAccessColumnIndex = $event"
+      @checked:update="updateCheckedColumnList($event)"
     />
 
     <template v-else>
@@ -79,16 +79,13 @@
 
   <GrantAccessDrawer
     v-if="
-      state.showGrantAccessDrawer &&
-      state.pendingGrantAccessColumnIndex.length > 0
-    "
-    :column-list="
-      state.pendingGrantAccessColumnIndex.map((i) => filteredColumnList[i])
+      state.showGrantAccessDrawer && state.pendingGrantAccessColumn.length > 0
     "
+    :column-list="state.pendingGrantAccessColumn"
     @dismiss="
       () => {
         state.showGrantAccessDrawer = false;
-        state.pendingGrantAccessColumnIndex = [];
+        state.pendingGrantAccessColumn = [];
       }
     "
   />
@@ -97,17 +94,17 @@
     v-if="filteredColumnList.length > 0"
     :show="
       state.showSensitiveColumnDrawer &&
-      state.pendingGrantAccessColumnIndex.length === 1
+      state.pendingGrantAccessColumn.length === 1
     "
     :column="
-      state.pendingGrantAccessColumnIndex.length
-        ? filteredColumnList[state.pendingGrantAccessColumnIndex[0]]
+      state.pendingGrantAccessColumn.length === 1
+        ? state.pendingGrantAccessColumn[0]
         : filteredColumnList[0]
     "
     @dismiss="
       () => {
         state.showSensitiveColumnDrawer = false;
-        state.pendingGrantAccessColumnIndex = [];
+        state.pendingGrantAccessColumn = [];
       }
     "
   />
@@ -138,6 +135,7 @@ import {
   UNKNOWN_ENVIRONMENT_NAME,
   ComposedInstance,
 } from "@/types";
+import { MaskingLevel } from "@/types/proto/v1/common";
 import {
   PolicyType,
   PolicyResourceType,
@@ -154,7 +152,7 @@ interface LocalState {
   showFeatureModal: boolean;
   isLoading: boolean;
   sensitiveColumnList: SensitiveColumn[];
-  pendingGrantAccessColumnIndex: number[];
+  pendingGrantAccessColumn: SensitiveColumn[];
   showGrantAccessDrawer: boolean;
   showSensitiveColumnDrawer: boolean;
 }
@@ -169,7 +167,7 @@ const state = reactive<LocalState>({
   selectedProjectUid: String(UNKNOWN_ID),
   selectedInstanceUid: String(UNKNOWN_ID),
   selectedDatabaseUid: String(UNKNOWN_ID),
-  pendingGrantAccessColumnIndex: [],
+  pendingGrantAccessColumn: [],
   showGrantAccessDrawer: false,
   showSensitiveColumnDrawer: false,
 });
@@ -315,7 +313,7 @@ const onRowClick = async (
       await onColumnRemove(item);
       break;
     case "EDIT":
-      state.pendingGrantAccessColumnIndex = [row];
+      state.pendingGrantAccessColumn = [item];
       if (isMissingLicenseForInstance(item.database.instanceEntity)) {
         state.showFeatureModal = true;
         return;
@@ -327,6 +325,12 @@ const onRowClick = async (
 
 const filteredColumnList = computed(() => {
   return state.sensitiveColumnList.filter((column) => {
+    if (
+      column.maskData.maskingLevel === MaskingLevel.NONE ||
+      column.maskData.maskingLevel === MaskingLevel.MASKING_LEVEL_UNSPECIFIED
+    ) {
+      return false;
+    }
     if (
       state.selectedEnvironmentName !== UNKNOWN_ENVIRONMENT_NAME &&
       column.database.effectiveEnvironmentEntity.name !==
@@ -357,8 +361,8 @@ const filteredColumnList = computed(() => {
 });
 
 const findInstanceWithoutLicense = () => {
-  for (const index of state.pendingGrantAccessColumnIndex) {
-    const instance = filteredColumnList.value[index]?.database?.instanceEntity;
+  for (const column of state.pendingGrantAccessColumn) {
+    const instance = column?.database?.instanceEntity;
     const missingLicense = isMissingLicenseForInstance(instance);
     if (missingLicense) {
       return instance;
@@ -394,4 +398,31 @@ const onGrantAccessButtonClick = () => {
   }
   state.showGrantAccessDrawer = true;
 };
+
+const checkedColumnIndexList = computed(() => {
+  const resp = [];
+  for (const column of state.pendingGrantAccessColumn) {
+    const index = filteredColumnList.value.findIndex((col) => {
+      return (
+        col.database.name === column.database.name &&
+        col.maskData.table === column.maskData.table &&
+        col.maskData.schema === column.maskData.schema &&
+        col.maskData.column === column.maskData.column
+      );
+    });
+    if (index >= 0) {
+      resp.push(index);
+    }
+  }
+  return resp;
+});
+
+const updateCheckedColumnList = (indexes: number[]) => {
+  for (const index of indexes) {
+    const col = filteredColumnList.value[index];
+    if (col) {
+      state.pendingGrantAccessColumn.push(col);
+    }
+  }
+};
 </script>
diff --git a/frontend/src/locales/en-US.json b/frontend/src/locales/en-US.json
@@ -622,9 +622,9 @@
       }
     },
     "sensitive-data": {
-      "description": "The query result of the following columns is displayed as \"******\". \nYou can mark more columns as sensitive data on the table details page.",
+      "description": "Following columns are explicitly assigned masking levels and take predence over the global masking rule.",
       "remove-sensitive-column-tips": "Expose this column?",
-      "sensitive-column-list": "Sensitive Column List",
+      "sensitive-column-list": "Explict masked column list",
       "global-masking-rule": "Global Masking Rule",
       "semantic-types": "Semantic Types",
       "grant-access": "Grant Access",

diff --git a/frontend/src/locales/es-ES.json b/frontend/src/locales/es-ES.json
@@ -621,9 +621,9 @@
       }
     },
     "sensitive-data": {
-      "description": "El resultado de la consulta de las siguientes columnas se muestra como \"******\". \nPuede marcar más columnas como datos sensibles en la página de detalles de la tabla.",
+      "description": "A las siguientes columnas se les asignan niveles de enmascaramiento explícitamente y tienen prioridad sobre la regla de enmascaramiento global.",
       "remove-sensitive-column-tips": "¿Exponer esta columna?",
-      "sensitive-column-list": "Lista de columnas confidenciales",
+      "sensitive-column-list": "Lista de columnas enmascaradas explícitas",
       "global-masking-rule": "Regla de enmascaramiento global",
       "semantic-types": "Tipos semánticos",
       "grant-access": "Autorizará el acceso",

diff --git a/frontend/src/locales/zh-CN.json b/frontend/src/locales/zh-CN.json
@@ -620,9 +620,9 @@
       }
     },
     "sensitive-data": {
-      "description": "以下列的查询结果将会被显示为 \"******\"。在表详情页，您可以将多个列标记为敏感数据。",
+      "description": "以下脱敏列被显示地标记了脱敏等级，优先级高于全局脱敏规则。",
       "remove-sensitive-column-tips": "不再对此列数据脱敏？",
-      "sensitive-column-list": "敏感数据列表",
+      "sensitive-column-list": "被显式标记的脱敏列",
       "global-masking-rule": "全局脱敏规则",
       "semantic-types": "语义类型",
       "grant-access": "授权访问",