Merge branch 'dev-4.2.2' of code.alipay.com:oceanbase/oceanbase-devel…

…oper-center into dev-4.2.2

src/common/network/sensitiveColumn.ts

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import { IResponseData } from '@/d.ts';
+import { IDataType, IResponseData } from '@/d.ts';
 import { ISensitiveColumn } from '@/d.ts/sensitiveColumn';
+import { IServerTableColumn } from '@/d.ts/table';
 import request from '@/util/request';
 
 export async function updateSensitiveColumn(
@@ -81,7 +82,22 @@ export async function listSensitiveColumns(
   return ret?.data;
 }
 
-export async function listColumns(projectId: number, database: number[]) {
+export async function listColumns(
+  projectId: number,
+  database: number[],
+): Promise<{
+  contents: {
+    dataTypeUnits: IDataType[];
+    databaseId: number;
+    databaseName: string;
+    table2Columns: {
+      [key in string]: IServerTableColumn[];
+    };
+    view2Columns: {
+      [key in string]: IServerTableColumn[];
+    };
+  }[];
+}> {
   const result = await request.get(
     `/api/v2/collaboration/projects/${projectId}/sensitiveColumns/listColumns`,
     {
@@ -90,7 +106,7 @@ export async function listColumns(projectId: number, database: number[]) {
       },
     },
   );
-  return result?.data || [];
+  return result?.data || {};
 }
 
 export enum ScannResultType {

src/common/network/sql/index.ts

@@ -89,6 +89,7 @@ export async function getSQLExplain(sql: string, sessionId, dbName): Promise<ISQ
       tree: [formatSQLExplainTree(JSON.parse(data.expTree))],
       outline: data.outline,
       originalText: data?.originalText,
+      showFormatInfo: data?.showFormatInfo,
     };
   }
 

src/component/Task/DataArchiveTask/DetailContent/index.tsx

@@ -23,7 +23,7 @@ import { isCycleTriggerStrategy } from '@/component/Task/helper';
 import setting from '@/store/setting';
 import type { CycleTaskDetail, IDataArchiveJobParameters, TaskOperationType } from '@/d.ts';
 import { formatMessage } from '@/util/intl';
-import { getFormatDateTime, kbToMb } from '@/util/utils';
+import { getFormatDateTime, kbToMb, mbToKb } from '@/util/utils';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { Collapse, Descriptions, Divider, Space, Typography, message } from 'antd';
 import React from 'react';
@@ -60,7 +60,7 @@ const DataArchiveTaskContent: React.FC<IProps> = (props) => {
 
   const handleDataSizeLimit = async (dataSizeLimit, handleClose) => {
     const res = updateLimiterConfig(id, {
-      dataSizeLimit,
+      dataSizeLimit: mbToKb(dataSizeLimit),
     });
     if (res) {
       message.success('修改成功！');

src/component/Task/DataClearTask/DetailContent/index.tsx

@@ -23,7 +23,7 @@ import { updateLimiterConfig } from '@/common/network/task';
 import setting from '@/store/setting';
 import type { CycleTaskDetail, IDataArchiveJobParameters, TaskOperationType } from '@/d.ts';
 import { formatMessage } from '@/util/intl';
-import { getFormatDateTime, kbToMb } from '@/util/utils';
+import { getFormatDateTime, kbToMb, mbToKb } from '@/util/utils';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { Collapse, Descriptions, Divider, Space, message } from 'antd';
 import React from 'react';
@@ -56,7 +56,7 @@ const DataClearTaskContent: React.FC<IProps> = (props) => {
 
   const handleDataSizeLimit = async (dataSizeLimit, handleClose) => {
     const res = updateLimiterConfig(id, {
-      dataSizeLimit,
+      dataSizeLimit: mbToKb(dataSizeLimit),
     });
     if (res) {
       message.success('修改成功！');

src/constant/index.ts

@@ -15,7 +15,7 @@
  */
 
 import { ColumnShowType, DbObjectType } from '@/d.ts'; // @ts-ignore
-import { isClient } from '@/util/env';
+
 import { formatMessage } from '@/util/intl';
 
 import binarySvg from '@/svgr/Field-Binary.svg'; // @ts-ignore
@@ -44,6 +44,10 @@ import FileSvg from '@/svgr/File.svg'; // @ts-ignore
 
 import TypeSvg from '@/svgr/menuType.svg';
 
+import EnumSvg from '@/svgr/Enum.svg'; // 枚举类型 icon
+
+import SetSvg from '@/svgr/Set.svg'; // 集合类型 icon
+
 import timeSvg from '@/svgr/Field-time.svg'; // 同步 OCP 等保三密码强度要求
 
 export const PASSWORD_REGEX = /^(?=(.*[a-z]){2,})(?=(.*[A-Z]){2,})(?=(.*\d){2,})(?=(.*[ !"#\$%&'\(\)\*\+,-\./:;<=>\?@\[\\\]\^_`\{\|\}~]){2,})[A-Za-z\d !"#\$%&'\(\)\*\+,-\./:;<=>\?@\[\\\]\^_`\{\|\}~]{8,32}$/; // 工作区头部高度
@@ -76,6 +80,8 @@ export const fieldIconMap = {
   [ColumnShowType.TIME]: timeSvg,
   [ColumnShowType.TIMESTAMP]: timeSvg,
   [ColumnShowType.YEAR]: timeSvg,
+  [ColumnShowType.ENUM]: EnumSvg,
+  [ColumnShowType.SET]: SetSvg,
 };
 /**
  * 程序包调试开关
@@ -118,26 +124,32 @@ export const DbObjsIcon = {
   [DbObjectType.public_synonym]: SynonymSvg,
   [DbObjectType.file]: FileSvg,
 };
-
+/**
+ * lineBackground: src/page/Workspace/components/SessionContextWrap/SessionSelect/index.tsx 中使用的背景，使用场景较为特殊，单独区分出来。
+ */
 export const EnvColorMap = {
   GREEN: {
     textColor: 'var(--function-green6-color)',
     background: 'var(--function-green1-color)',
+    lineBackground: 'var(--function-green1-color)',
     tipColor: 'var(--function-green6-color)',
   },
   GRAY: {
     textColor: 'var(--text-color-secondary)',
-    background: 'transparent',
+    background: 'var(--hover-color)',
     tipColor: 'transparent',
+    lineBackground: 'transparent',
   },
   RED: {
     textColor: 'var(--function-red6-color)',
     background: 'var(--function-red1-color)',
     tipColor: 'var(--function-red6-color)',
+    lineBackground: 'var(--function-red1-color)',
   },
   ORANGE: {
     textColor: 'var(--function-gold6-color)',
     background: 'var(--function-gold1-color)',
     tipColor: 'var(--function-gold6-color)',
+    lineBackground: 'var(--function-gold1-color)',
   },
 };

src/d.ts/index.ts

@@ -1074,6 +1074,8 @@ export enum ColumnShowType {
   DATETIME = 'DATETIME',
   YEAR = 'YEAR',
   MONTH = 'MONTH',
+  ENUM = 'ENUM', // 枚举类型
+  SET = 'SET', // 集合类型
 }
 
 // 索引
@@ -1553,6 +1555,7 @@ export interface ISQLExplain {
   tree: ISQLExplainTreeNode[];
   outline: string;
   originalText: string;
+  showFormatInfo?: boolean;
 }
 
 export interface ISQLExecuteDetail {

src/page/Project/Sensitive/components/SensitiveColumn/components/EditSensitiveColumnModal.tsx

@@ -19,13 +19,16 @@ import { formatMessage } from '@/util/intl';
 import { Form, message, Modal, Select } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import styles from './index.less';
+import { MaskRyleTypeMap } from '@/d.ts';
+import { PopoverContainer } from '..';
 
-const EditModal = ({
+const EditSensitiveColumnModal = ({
   projectId,
   tableRef,
   maskingAlgorithmId = 1,
   sensitiveColumnIds = [],
   maskingAlgorithmOptions = [],
+  maskingAlgorithms,
   modalVisible,
   setModalVisible,
   initSensitiveColumn,
@@ -99,13 +102,42 @@ const EditModal = ({
                 id: 'odc.SensitiveColumn.components.EditSensitiveColumnModal.PleaseSelect',
               }) //请选择
             }
-            style={{ width: '368px' }}
-            options={maskingAlgorithmOptions}
-          />
+            style={{ width: '352px' }}
+            optionLabelProp="label"
+          >
+            {maskingAlgorithmOptions?.map((option, index) => {
+              const target = maskingAlgorithms?.find(
+                (maskingAlgorithm) => maskingAlgorithm?.id === option?.value,
+              );
+              return (
+                <Select.Option value={option?.value} key={index} label={option?.label}>
+                  <PopoverContainer
+                    key={index}
+                    title={option?.label}
+                    descriptionsData={[
+                      {
+                        label: '脱敏方式',
+                        value: MaskRyleTypeMap?.[target?.type],
+                      },
+                      {
+                        label: '测试数据',
+                        value: target?.sampleContent,
+                      },
+                      {
+                        label: '结果预览',
+                        value: target?.maskedContent,
+                      },
+                    ]}
+                    children={() => <div>{option?.label}</div>}
+                  />
+                </Select.Option>
+              );
+            })}
+          </Select>
         </Form.Item>
       </Form>
     </Modal>
   );
 };
 
-export default EditModal;
+export default EditSensitiveColumnModal;