[feature]:(SQLManagement) Support sql analyze

src/api/SqlManage/index.d.ts

@@ -20,7 +20,8 @@ import {
   IGetSqlManageListResp,
   IBatchUpdateSqlManageReq,
   IBaseRes,
-  IGetSqlManageRuleTipsResp
+  IGetSqlManageRuleTipsResp,
+  IGetSqlManageSqlAnalysisResp
 } from '../common.d';
 
 export interface IGetSqlManageListParams {
@@ -106,6 +107,15 @@ export interface IGetSqlManageRuleTipsParams {
 export interface IGetSqlManageRuleTipsReturn
   extends IGetSqlManageRuleTipsResp {}
 
+export interface IGetSqlManageSqlAnalysisV1Params {
+  project_name: string;
+
+  sql_manage_id: string;
+}
+
+export interface IGetSqlManageSqlAnalysisV1Return
+  extends IGetSqlManageSqlAnalysisResp {}
+
 export interface IGetSqlManageListV2Params {
   project_name: string;
 

src/api/SqlManage/index.ts

@@ -14,6 +14,8 @@ import {
   IExportSqlManageV1Params,
   IGetSqlManageRuleTipsParams,
   IGetSqlManageRuleTipsReturn,
+  IGetSqlManageSqlAnalysisV1Params,
+  IGetSqlManageSqlAnalysisV1Return,
   IGetSqlManageListV2Params,
   IGetSqlManageListV2Return
 } from './index.d';
@@ -79,6 +81,24 @@ class SqlManageService extends ServiceBase {
     );
   }
 
+  public GetSqlManageSqlAnalysisV1(
+    params: IGetSqlManageSqlAnalysisV1Params,
+    options?: AxiosRequestConfig
+  ) {
+    const paramsData = this.cloneDeep(params);
+    const project_name = paramsData.project_name;
+    delete paramsData.project_name;
+
+    const sql_manage_id = paramsData.sql_manage_id;
+    delete paramsData.sql_manage_id;
+
+    return this.get<IGetSqlManageSqlAnalysisV1Return>(
+      `/v1/projects/${project_name}/sql_manages/${sql_manage_id}/sql_analysis`,
+      paramsData,
+      options
+    );
+  }
+
   public GetSqlManageListV2(
     params: IGetSqlManageListV2Params,
     options?: AxiosRequestConfig

src/api/common.d.ts

@@ -51,6 +51,12 @@ export interface IBaseRes {
   message?: string;
 }
 
+export interface IAffectRows {
+  count?: number;
+
+  err_message?: string;
+}
+
 export interface IAuditPlanCount {
   audit_plan_count?: number;
 
@@ -1385,6 +1391,14 @@ export interface IGetSqlManageRuleTipsResp {
   message?: string;
 }
 
+export interface IGetSqlManageSqlAnalysisResp {
+  code?: number;
+
+  data?: ISqlAnalysis;
+
+  message?: string;
+}
+
 export interface IGetSyncInstanceTaskListResV1 {
   code?: number;
 
@@ -1997,6 +2011,10 @@ export interface IPatchUserGroupReqV1 {
   user_name_list?: string[];
 }
 
+export interface IPerformanceStatistics {
+  affect_rows?: IAffectRows;
+}
+
 export interface IPersonaliseReqV1 {
   title?: string;
 }
@@ -2289,6 +2307,14 @@ export interface ISource {
   type?: SourceTypeEnum;
 }
 
+export interface ISqlAnalysis {
+  performance_statistics?: IPerformanceStatistics;
+
+  sql_explain?: ISQLExplain;
+
+  table_metas?: ITableMetas;
+}
+
 export interface ISqlAnalysisResDataV1 {
   sql_explain?: ISQLExplain;
 
@@ -2427,6 +2453,12 @@ export interface ITableMetaItemHeadResV1 {
   field_name?: string;
 }
 
+export interface ITableMetas {
+  err_message?: string;
+
+  table_meta_items?: ITableMeta[];
+}
+
 export interface ITestAuditPlanNotifyConfigResDataV1 {
   is_notify_send_normal?: boolean;
 
@@ -3093,12 +3125,6 @@ export interface IWorkflowTemplateDetailResV1 {
   workflow_template_name?: string;
 }
 
-export interface IAffectRows {
-  count?: number;
-
-  err_message?: string;
-}
-
 export interface IAuditPlanReportSQLResV2 {
   audit_plan_report_sql?: string;
 
@@ -3421,10 +3447,6 @@ export interface IPartialSyncAuditPlanSQLsReqV2 {
   audit_plan_sql_list?: IAuditPlanSQLReqV2[];
 }
 
-export interface IPerformanceStatistics {
-  affect_rows?: IAffectRows;
-}
-
 export interface IRejectWorkflowReqV2 {
   reason?: string;
 }
@@ -3435,12 +3457,6 @@ export interface IRuleTemplateV2 {
   name?: string;
 }
 
-export interface ITableMetas {
-  err_message?: string;
-
-  table_meta_items?: ITableMeta[];
-}
-
 export interface ITaskAnalysisDataV2 {
   performance_statistics?: IPerformanceStatistics;
 

src/locale/zh-CN/sqlManagement.ts

@@ -52,6 +52,7 @@ export default {
     status: '状态',
     comment: '备注',
     endpoint: '端点信息',
+    analyze: '分析',
 
     actions: {
       batchAssignment: '批量指派',

src/page/SQLManagement/SQLPanel/column.tsx

@@ -49,242 +49,256 @@
     id: number,
     status: BatchUpdateSqlManageReqStatusEnum
   ) => Promise<void> | undefined;
+  handleClickAnalyze: (sqlManageId: string) => void;
 }) => Array<
   | (ColumnGroupType<ISqlManage> | ColumnType<ISqlManage>) & {
       dataIndex?: keyof ISqlManage | 'operator';
     }
 > = ({
   projectName,
   updateRemark,
   signalActionsLoading,
   signalAssignment,
   actionPermission,
   username,
   updateSQLStatus,
+  handleClickAnalyze,
 }) => {
   const columns: Array<
     | (ColumnGroupType<ISqlManage> | ColumnType<ISqlManage>) & {
         dataIndex?: keyof ISqlManage | 'operator';
       }
   > = [
     {
       dataIndex: 'sql_fingerprint',
       title: () => t('sqlManagement.table.SQLFingerprint'),
       className: 'table-column-sql-fingerprint',
       render: (sql: string) => <RenderExecuteSql sql={sql} rows={2} />,
     },
     {
       dataIndex: 'sql',
       title: () => 'SQL',
       className: 'table-column-sql',
       render: (sql: string) => <RenderExecuteSql sql={sql} rows={2} />,
     },
     {
       dataIndex: 'source',
       title: () => t('sqlManagement.table.source'),
       render: (source: ISource) => {
         if (source.type && source.type === SourceTypeEnum.audit_plan) {
           return (
             <Link
               to={`project/${projectName}/auditPlan/detail/${source.audit_plan_name}`}
             >
               {t(sourceDictionary[source.type])}
             </Link>
           );
         } else if (
           source.type &&
           source.type === SourceTypeEnum.sql_audit_record
         ) {
           return (
             <Link
               to={`project/${projectName}/sqlAudit?${
                 SQLAuditRecordListUrlParamsKey.SQLAuditRecordID
               }=${
                 source.sql_audit_record_ids?.join(
                   SQLAuditRecordIDValuesSplit
                 ) ?? ''
               }`}
             >
               {t(sourceDictionary[source.type])}
             </Link>
           );
         }
         return '--';
       },
     },
     {
       dataIndex: 'instance_name',
       title: () => t('sqlManagement.table.instanceName'),
       render: (name) => {
         if (!name) {
           return '--';
         }
         return name;
       },
     },
     {
       dataIndex: 'schema_name',
       title: () => 'Schema',
       render: (schema) => {
         if (!schema) {
           return '--';
         }
         return schema;
       },
     },
     {
       dataIndex: 'audit_result',
       title: () => t('sqlManagement.table.auditResult'),
       render: (auditResult: IAuditResult[]) => {
         return <AuditResultInfo auditResult={auditResult} />;
       },
     },
     Table.EXPAND_COLUMN,
     {
       dataIndex: 'first_appear_timestamp',
       title: () => t('sqlManagement.table.firstOccurrence'),
       render: (time: string) => {
         return formatTime(time, '--');
       },
       sorter: true,
       sortDirections: ['descend', 'ascend'],
     },
     {
       dataIndex: 'last_receive_timestamp',
       title: () => t('sqlManagement.table.lastOccurrence'),
       render: (time: string) => {
         return formatTime(time, '--');
       },
       sorter: true,
       sortDirections: ['descend', 'ascend'],
     },
     {
       dataIndex: 'fp_count',
       title: () => t('sqlManagement.table.occurrenceCount'),
       sorter: true,
       sortDirections: ['descend', 'ascend'],
     },
 
     {
       dataIndex: 'assignees',
       title: () => t('sqlManagement.table.personInCharge'),
       render: (assignees: string[]) => {
         if (!Array.isArray(assignees)) {
           return '--';
         }
         return assignees.map((v) => <Tag key={v}>{v}</Tag>);
       },
     },
     {
       dataIndex: 'endpoints',
       title: () => t('sqlManagement.table.endpoint'),
       render: (endpoints: string[]) => {
         if (!Array.isArray(endpoints) || endpoints.length === 0) {
           return '--';
         }
         if (endpoints.length === 1) {
           return <Tag>{endpoints[0]}</Tag>;
         }
         return (
           <Popover
             content={
               <div style={{ maxWidth: '600px' }}>
                 <Space wrap>
                   {endpoints.map((v) => (
                     <Tag key={v}>{v}</Tag>
                   ))}
                 </Space>
               </div>
             }
           >
             <Tag>{endpoints[0]}</Tag>
             {endpoints.length > 1 ? '...' : null}
           </Popover>
         );
       },
     },
     {
       dataIndex: 'status',
       title: () => t('sqlManagement.table.status'),
       render: (status: SqlManageStatusEnum) => {
         if (!status) {
           return '--';
         }
         const colorDictionary: Record<
           GetSqlManageListFilterStatusEnum,
           TagProps['color']
         > = {
           [GetSqlManageListFilterStatusEnum.ignored]: 'gray',
           [GetSqlManageListFilterStatusEnum.solved]: 'green',
           [GetSqlManageListFilterStatusEnum.unhandled]: 'red',
           [GetSqlManageListFilterStatusEnum.manual_audited]: 'blue',
         };
         return (
           <Tag color={colorDictionary[status]}>
             {t(statusDictionary[status])}
           </Tag>
         );
       },
     },
     {
       dataIndex: 'remark',
       title: () => t('sqlManagement.table.comment'),
       width: 200,
       render: (remark: string, record) => {
         return (
           <EmptyBox
             if={actionPermission}
             defaultNode={<>{renderRemark(remark) ?? '--'}</>}
           >
             <EditText
               editable={{
                 autoSize: true,
                 onEnd: (val) => {
                   updateRemark(record.id ?? 0, val);
                 },
               }}
             >
               {remark}
             </EditText>
           </EmptyBox>
         );
       },
     },
-
     {
       dataIndex: 'operator',
       title: () => t('common.operate'),
       fixed: 'right',
       render: (_, record) => {
         return (
           <Space>
-            <AssignMember
-              projectName={projectName}
-              disabled={signalActionsLoading}
-              onConfirm={(members: string[]) =>
-                signalAssignment(record.id ?? 0, members)
-              }
-            >
-              <Typography.Link>
-                {t('sqlManagement.table.assignMember.label')}
-              </Typography.Link>
-            </AssignMember>
+            <EmptyBox if={actionPermission}>
+              <AssignMember
+                projectName={projectName}
+                disabled={signalActionsLoading}
+                onConfirm={(members: string[]) =>
+                  signalAssignment(record.id ?? 0, members)
+                }
+              >
+                <Typography.Link>
+                  {t('sqlManagement.table.assignMember.label')}
+                </Typography.Link>
+              </AssignMember>
+            </EmptyBox>
+
+            <EmptyBox if={actionPermission}>
+              <UpdateSQLStatus
+                disabled={signalActionsLoading}
+                onConfirm={(status) => updateSQLStatus(record.id ?? 0, status)}
+              >
+                <Typography.Link>
+                  {t('sqlManagement.table.updateStatus.triggerText')}
+                </Typography.Link>
+              </UpdateSQLStatus>
+            </EmptyBox>
 
-            <UpdateSQLStatus
-              disabled={signalActionsLoading}
-              onConfirm={(status) => updateSQLStatus(record.id ?? 0, status)}
+            <Typography.Link
+              disabled={
+                !record.sql || !record.schema_name || !record.instance_name
+              }
+              onClick={() => {
+                handleClickAnalyze(record.id?.toString() ?? '');
+              }}
             >
-              <Typography.Link>
-                {t('sqlManagement.table.updateStatus.triggerText')}
-              </Typography.Link>
-            </UpdateSQLStatus>
+              {t('sqlManagement.table.analyze')}
+            </Typography.Link>
           </Space>
         );
       },
     },
   ];
-  if (!actionPermission) {
-    return columns.filter((v) => v.dataIndex !== 'operator');
-  }
+
   return columns;
 };

src/page/SQLManagement/SQLPanel/index.tsx

@@ -306,6 +306,10 @@ const SQLPanel: React.FC = () => {
     ]
   );
 
+  const handleClickAnalyze = (sqlManageId: string) => {
+    window.open(`/project/${projectName}/sqlManagement/${sqlManageId}/analyze`);
+  };
+
   const [
     exportButtonDisabled,
     { setFalse: finishExport, setTrue: startExport },
@@ -454,6 +458,7 @@ const SQLPanel: React.FC = () => {
               actionPermission,
               username,
               updateSQLStatus,
+              handleClickAnalyze,
             })}
             pagination={{
               showSizeChanger: true,

src/page/SqlAnalyze/SqlManage/index.tsx

@@ -0,0 +1,77 @@
+import { useBoolean } from 'ahooks';
+import { ResultStatusType } from 'antd/lib/result';
+import { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import {
+  IPerformanceStatistics,
+  ISQLExplain,
+  ITableMetas,
+} from '../../../api/common';
+import { ResponseCode } from '../../../data/common';
+import SqlAnalyze from '../SqlAnalyze';
+import { SQLManageAnalyzeUrlParams } from './index.type';
+import SqlManage from '../../../api/SqlManage';
+import { useCurrentProjectName } from '../../ProjectManage/ProjectDetail';
+
+const SQLManageAnalyze = () => {
+  const urlParams = useParams<SQLManageAnalyzeUrlParams>();
+  const { projectName } = useCurrentProjectName();
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const [sqlExplain, setSqlExplain] = useState<ISQLExplain>();
+  const [tableMetas, setTableMetas] = useState<ITableMetas>();
+  const [performanceStatistics, setPerformancesStatistics] =
+    useState<IPerformanceStatistics>();
+  const [
+    loading,
+    { setTrue: startGetSqlAnalyze, setFalse: getSqlAnalyzeFinish },
+  ] = useBoolean();
+  const [errorType, setErrorType] = useState<ResultStatusType>('error');
+
+  const getSqlAnalyze = useCallback(async () => {
+    startGetSqlAnalyze();
+    try {
+      const res = await SqlManage.GetSqlManageSqlAnalysisV1({
+        sql_manage_id: urlParams.sqlManageId ?? '',
+        project_name: projectName,
+      });
+      if (res.data.code === ResponseCode.SUCCESS) {
+        setErrorMessage('');
+        setSqlExplain(res.data.data?.sql_explain);
+        setTableMetas(res.data.data?.table_metas);
+        setPerformancesStatistics(res.data.data?.performance_statistics);
+      } else {
+        if (res.data.code === ResponseCode.NotSupportDML) {
+          setErrorType('info');
+        } else {
+          setErrorType('error');
+        }
+        setErrorMessage(res.data.message ?? '');
+      }
+    } finally {
+      getSqlAnalyzeFinish();
+    }
+  }, [
+    getSqlAnalyzeFinish,
+    projectName,
+    startGetSqlAnalyze,
+    urlParams.sqlManageId,
+  ]);
+
+  useEffect(() => {
+    getSqlAnalyze();
+  }, [getSqlAnalyze]);
+
+  return (
+    <SqlAnalyze
+      errorType={errorType}
+      tableMetas={tableMetas}
+      sqlExplain={sqlExplain}
+      errorMessage={errorMessage}
+      performanceStatistics={performanceStatistics}
+      loading={loading}
+    />
+  );
+};
+
+export default SQLManageAnalyze;

src/page/SqlAnalyze/SqlManage/index.type.ts

@@ -0,0 +1,3 @@
+export type SQLManageAnalyzeUrlParams = {
+  sqlManageId: string;
+};