From 50645054ce04aead19ebf636e427e85d6d08eef5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9C=9D=E4=BF=8A?= Date: Tue, 26 Sep 2023 16:03:45 +0800 Subject: [PATCH] PullRequest: 193 fix: Refactoring ExecutePlan code& fix trace's table pagination MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Merge branch 'fix/dev-4.2.2-executePlan of git@gitlab.alipay-inc.com:oceanbase/oceanbase-developer-center.git into dev-4.2.2 https://code.alipay.com/oceanbase/oceanbase-developer-center/pull_requests/193 Signed-off-by: 晓康 * fix: Refactoring ExecutePlan code& fix trace's table pagination * fix: Refactoring ExecutePlan code& fix trace's table pagination * fix: Refactoring ExecutePlan code& fix trace's table pagination --- .../{ => Trace}/components/PopoverContent.tsx | 0 .../{ => Trace}/components/ProgressBar.tsx | 0 .../{ => Trace}/components/index.less | 0 .../components/SQLExplain/Trace/index.tsx | 3 +- .../Workspace/components/SQLExplain/index.tsx | 329 +++++++++++------- .../SQLPage/ExecDetail/BasicInfo.tsx | 87 +++++ .../SQLPage/ExecDetail/IOStatistics.tsx | 57 +++ .../SQLPage/ExecDetail/TimeStatistics.tsx | 32 ++ .../ExecDetail/index.less | 0 .../ExecDetail/index.tsx | 171 +-------- .../ExecPlan/index.less | 0 .../ExecPlan/index.tsx | 2 +- .../Workspace/components/SQLPage/index.tsx | 4 +- 13 files changed, 397 insertions(+), 288 deletions(-) rename src/page/Workspace/components/SQLExplain/{ => Trace}/components/PopoverContent.tsx (100%) rename src/page/Workspace/components/SQLExplain/{ => Trace}/components/ProgressBar.tsx (100%) rename src/page/Workspace/components/SQLExplain/{ => Trace}/components/index.less (100%) create mode 100644 src/page/Workspace/components/SQLPage/ExecDetail/BasicInfo.tsx create mode 100644 src/page/Workspace/components/SQLPage/ExecDetail/IOStatistics.tsx create mode 100644 src/page/Workspace/components/SQLPage/ExecDetail/TimeStatistics.tsx rename src/page/Workspace/components/{SQLExplain => SQLPage}/ExecDetail/index.less (100%) rename src/page/Workspace/components/{SQLExplain => SQLPage}/ExecDetail/index.tsx (54%) rename src/page/Workspace/components/{SQLExplain => SQLPage}/ExecPlan/index.less (100%) rename src/page/Workspace/components/{SQLExplain => SQLPage}/ExecPlan/index.tsx (98%) diff --git a/src/page/Workspace/components/SQLExplain/components/PopoverContent.tsx b/src/page/Workspace/components/SQLExplain/Trace/components/PopoverContent.tsx similarity index 100% rename from src/page/Workspace/components/SQLExplain/components/PopoverContent.tsx rename to src/page/Workspace/components/SQLExplain/Trace/components/PopoverContent.tsx diff --git a/src/page/Workspace/components/SQLExplain/components/ProgressBar.tsx b/src/page/Workspace/components/SQLExplain/Trace/components/ProgressBar.tsx similarity index 100% rename from src/page/Workspace/components/SQLExplain/components/ProgressBar.tsx rename to src/page/Workspace/components/SQLExplain/Trace/components/ProgressBar.tsx diff --git a/src/page/Workspace/components/SQLExplain/components/index.less b/src/page/Workspace/components/SQLExplain/Trace/components/index.less similarity index 100% rename from src/page/Workspace/components/SQLExplain/components/index.less rename to src/page/Workspace/components/SQLExplain/Trace/components/index.less diff --git a/src/page/Workspace/components/SQLExplain/Trace/index.tsx b/src/page/Workspace/components/SQLExplain/Trace/index.tsx index fc66bc86f..0cf3072e5 100644 --- a/src/page/Workspace/components/SQLExplain/Trace/index.tsx +++ b/src/page/Workspace/components/SQLExplain/Trace/index.tsx @@ -15,7 +15,7 @@ */ import { formatMessage } from '@/util/intl'; -import ProgressBar from '../components/ProgressBar'; +import ProgressBar from './components/ProgressBar'; import DisplayTable from '@/component/DisplayTable'; import { useEffect, useState } from 'react'; @@ -75,6 +75,7 @@ const Trace = ({ endTimestamp, startTimestamp, treeData = [] }) => { SQL: {sql} - {haveText ? ( + {haveText && ( + // 切换显示方式 {showExplainText ? ( - { this.setState({ showExplainText: false, }); }} - > - - { - formatMessage({ - id: 'odc.components.SQLExplain.ViewFormattingInformation', - }) /*查看格式化信息*/ - } - + /> ) : ( - { this.setState({ showExplainText: true, }); }} - > - - { - formatMessage({ - id: 'odc.components.SQLExplain.ViewPlanText', - }) /*查看计划文本*/ - } - + /> )} - ) : null} + )} - {!showExplainText && ( - - this.setState({ - tabName: n.target.value, - }) - } - className={styles.radioGroup} - > - - - - {traceId && ( - - {formatMessage({ id: 'odc.components.SQLExplain.FullLinkTrace' }) /*全链路 TRACE*/} - - )} - - )} - - {showExplainText ? ( - 
-            {(explain as ISQLExplain)?.originalText}
-
- ) : ( - <> -
+ ) : ( + { + this.setState({ + onlyText: e.target.checked, + }); }} - > -
-
- { - this.setState({ - onlyText: e.target.checked, - }); - }} - > - { - formatMessage({ - id: 'odc.components.SQLExplain.ViewOnlyTextFormats', - }) /*仅查看文本格式*/ - } - -
-
- {onlyText ? ( -
{explain && (explain as ISQLExplain).outline}
- ) : ( - <> - {typeof explain === 'string' ? ( - <> - - - ) : ( - explain?.tree && ( - - ) - )} - - )} -
-
- -
- - )} + handleRadioGroupOnChange={(e) => + this.setState({ + tabName: e.target.value, + }) + } + /> + ) + } ); } } +const OnlyExplainText: React.FC<{ + originalText: string; +}> = ({ originalText = '' }) => { + return ( + 
+      {originalText}
+
+ ); +}; +const Summary: React.FC<{ + onlyText: boolean; + explain: string | ISQLExplain; + columns: ColumnsType[]; + tableHeight: number; + handleSummaryOnChange: (e: CheckboxChangeEvent) => void; +}> = ({ onlyText, explain, columns, tableHeight, handleSummaryOnChange }) => { + return ( + <> +
+
+ + { + formatMessage({ + id: 'odc.components.SQLExplain.ViewOnlyTextFormats', + }) /*仅查看文本格式*/ + } + +
+
+ {onlyText ? ( +
{explain && (explain as ISQLExplain).outline}
+ ) : ( + <> + {typeof explain === 'string' ? ( + <> + + + ) : ( + explain?.tree && ( + + ) + )} + + )} + + ); +}; +const RadioSwitchContainer: React.FC<{ + tabName: string; + onlyText: boolean; + explain: string | ISQLExplain; + columns: any[]; + tableHeight: number; + traceId?: string; + endTimestamp: number; + startTimestamp: number; + treeData: any[]; + handleSummaryOnChange: (e: CheckboxChangeEvent) => void; + handleRadioGroupOnChange: (e: any) => void; +}> = ({ + tabName, + onlyText, + explain, + columns, + tableHeight, + traceId, + endTimestamp, + startTimestamp, + treeData, + handleSummaryOnChange, + handleRadioGroupOnChange, +}) => { + return ( + <> + + + + + {traceId && ( + + { + formatMessage({ + id: 'odc.components.SQLExplain.FullLinkTrace', + }) /*全链路 TRACE*/ + } + + )} + +
+ +
+
+ +
+ + ); +}; +const ViewPlanText: React.FC<{ + onClick: () => void; +}> = ({ onClick }) => { + return ( + + + { + formatMessage({ + id: 'odc.components.SQLExplain.ViewPlanText', + }) /*查看计划文本*/ + } + + ); +}; +const ViewFormattingInformation: React.FC<{ + onClick: () => void; +}> = ({ onClick }) => { + return ( + + + { + formatMessage({ + id: 'odc.components.SQLExplain.ViewFormattingInformation', + }) /*查看格式化信息*/ + } + + ); +}; diff --git a/src/page/Workspace/components/SQLPage/ExecDetail/BasicInfo.tsx b/src/page/Workspace/components/SQLPage/ExecDetail/BasicInfo.tsx new file mode 100644 index 000000000..3f4b8fb2e --- /dev/null +++ b/src/page/Workspace/components/SQLPage/ExecDetail/BasicInfo.tsx @@ -0,0 +1,87 @@ +import { getLocalFormatDateTime } from '@/util/utils'; +import { formatMessage } from '@/util/intl'; +import { Card, Descriptions, Tooltip as AntdTooltip } from 'antd'; +import classNames from 'classnames'; +import styles from './index.less'; +import { ISQLExecuteDetail } from '@/d.ts'; +const BasicInfo: React.FC<{ sqlExecuteDetailToShow: ISQLExecuteDetail }> = ({ + sqlExecuteDetailToShow, +}) => { + return ( + + + + {sqlExecuteDetailToShow?.sqlId} + + + +
+ {sqlExecuteDetailToShow?.sql} +
+ + + + {sqlExecuteDetailToShow?.traceId} + + + {getLocalFormatDateTime(sqlExecuteDetailToShow?.reqTime)} + + + {sqlExecuteDetailToShow?.planType} + + + {sqlExecuteDetailToShow?.hitPlanCache + ? formatMessage({ + id: 'odc.components.SQLPage.Is', + }) + : formatMessage({ + id: 'odc.components.SQLPage.No', + })} + + + + ); +}; +export default BasicInfo; diff --git a/src/page/Workspace/components/SQLPage/ExecDetail/IOStatistics.tsx b/src/page/Workspace/components/SQLPage/ExecDetail/IOStatistics.tsx new file mode 100644 index 000000000..964f818aa --- /dev/null +++ b/src/page/Workspace/components/SQLPage/ExecDetail/IOStatistics.tsx @@ -0,0 +1,57 @@ +import { formatMessage } from '@/util/intl'; +import { Card, Statistic, Col, Row } from 'antd'; +import classNames from 'classnames'; +import styles from './index.less'; +import { ISQLExecuteDetail } from '@/d.ts'; +const IOStatistics: React.FC<{ + sqlExecuteDetailToShow: ISQLExecuteDetail; +}> = ({ sqlExecuteDetailToShow }) => { + return ( + + + + + + + + + + + + + + ); +}; +export default IOStatistics; diff --git a/src/page/Workspace/components/SQLPage/ExecDetail/TimeStatistics.tsx b/src/page/Workspace/components/SQLPage/ExecDetail/TimeStatistics.tsx new file mode 100644 index 000000000..b4c14e0e0 --- /dev/null +++ b/src/page/Workspace/components/SQLPage/ExecDetail/TimeStatistics.tsx @@ -0,0 +1,32 @@ +import { formatMessage } from '@/util/intl'; +import { Card } from 'antd'; +import styles from './index.less'; +const TimeStatistics: React.FC<{ + stackBarBox: React.MutableRefObject; +}> = ({ stackBarBox }) => { + return ( + +
+ + ); +}; +export default TimeStatistics; diff --git a/src/page/Workspace/components/SQLExplain/ExecDetail/index.less b/src/page/Workspace/components/SQLPage/ExecDetail/index.less similarity index 100% rename from src/page/Workspace/components/SQLExplain/ExecDetail/index.less rename to src/page/Workspace/components/SQLPage/ExecDetail/index.less diff --git a/src/page/Workspace/components/SQLExplain/ExecDetail/index.tsx b/src/page/Workspace/components/SQLPage/ExecDetail/index.tsx similarity index 54% rename from src/page/Workspace/components/SQLExplain/ExecDetail/index.tsx rename to src/page/Workspace/components/SQLPage/ExecDetail/index.tsx index c390c160a..b2e49b112 100644 --- a/src/page/Workspace/components/SQLExplain/ExecDetail/index.tsx +++ b/src/page/Workspace/components/SQLPage/ExecDetail/index.tsx @@ -15,26 +15,17 @@ */ import { formatMessage } from '@/util/intl'; -import { getLocalFormatDateTime } from '@/util/utils'; -import { - Card, - Col, - Descriptions, - Drawer, - message, - Row, - Spin, - Statistic, - Tooltip as AntdTooltip, -} from 'antd'; -import classNames from 'classnames'; +import { Col, Drawer, message, Row, Spin } from 'antd'; import React, { useCallback, useEffect, useRef, useState } from 'react'; -import SQLExplain from '../index'; import { getSQLExecuteDetail, getSQLExecuteExplain } from '@/common/network/sql'; import { ISQLExecuteDetail, ISQLExplain } from '@/d.ts'; import SessionStore from '@/store/sessionManager/session'; import styles from './index.less'; +import BasicInfo from './BasicInfo'; +import TimeStatistics from './TimeStatistics'; +import IOStatistics from './IOStatistics'; +import SQLExplain from '../../SQLExplain'; interface IProps { visible: boolean; @@ -85,11 +76,7 @@ const ExecDetail: React.FC = function (props) { setSqlExecuteDetailToShow(detail); setSqlExecuteExplainToShow(explain); - const { - queueTime = 0, - execTime = 0, - totalTime = 0, - } = detail || { + const { queueTime = 0, execTime = 0, totalTime = 0 } = detail || { queueTime: 0, waitTime: 0, execTime: 0, @@ -234,7 +221,7 @@ const ExecDetail: React.FC = function (props) { }} destroyOnClose={true} width="96vw" - visible={visible} + open={visible} className={styles.explainDrawer} bodyStyle={{ position: 'absolute', @@ -260,151 +247,13 @@ const ExecDetail: React.FC = function (props) { }} > - - - - {sqlExecuteDetailToShow?.sqlId} - - - -
- {sqlExecuteDetailToShow?.sql} -
- - - - {sqlExecuteDetailToShow?.traceId} - - - {getLocalFormatDateTime(sqlExecuteDetailToShow?.reqTime)} - - - {sqlExecuteDetailToShow?.planType} - - - {sqlExecuteDetailToShow?.hitPlanCache - ? formatMessage({ - id: 'odc.components.SQLPage.Is', - }) - : formatMessage({ - id: 'odc.components.SQLPage.No', - })} - - - + - -
- + - - - - - - - - - - - - - + diff --git a/src/page/Workspace/components/SQLExplain/ExecPlan/index.less b/src/page/Workspace/components/SQLPage/ExecPlan/index.less similarity index 100% rename from src/page/Workspace/components/SQLExplain/ExecPlan/index.less rename to src/page/Workspace/components/SQLPage/ExecPlan/index.less diff --git a/src/page/Workspace/components/SQLExplain/ExecPlan/index.tsx b/src/page/Workspace/components/SQLPage/ExecPlan/index.tsx similarity index 98% rename from src/page/Workspace/components/SQLExplain/ExecPlan/index.tsx rename to src/page/Workspace/components/SQLPage/ExecPlan/index.tsx index 241815035..13d703050 100644 --- a/src/page/Workspace/components/SQLExplain/ExecPlan/index.tsx +++ b/src/page/Workspace/components/SQLPage/ExecPlan/index.tsx @@ -17,11 +17,11 @@ import { formatMessage } from '@/util/intl'; import { Button, Drawer, Spin } from 'antd'; import React, { useCallback, useEffect, useState } from 'react'; -import SQLExplain from '../index'; import { getSQLExplain } from '@/common/network/sql'; import SessionStore from '@/store/sessionManager/session'; import styles from './index.less'; +import SQLExplain from '../../SQLExplain'; interface IProps { session: SessionStore; diff --git a/src/page/Workspace/components/SQLPage/index.tsx b/src/page/Workspace/components/SQLPage/index.tsx index 9ad69e3f3..b0780cf25 100644 --- a/src/page/Workspace/components/SQLPage/index.tsx +++ b/src/page/Workspace/components/SQLPage/index.tsx @@ -55,8 +55,8 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; import { Component, forwardRef } from 'react'; import { wrapRow } from '../DDLResultSet/util'; import SessionContextWrap from '../SessionContextWrap'; -import ExecDetail from '../SQLExplain/ExecDetail'; -import ExecPlan from '../SQLExplain/ExecPlan'; +import ExecPlan from './ExecPlan'; +import ExecDetail from './ExecDetail'; import SQLResultSet, { recordsTabKey, sqlLintTabKey } from '../SQLResultSet'; import styles from './index.less'; import { isConnectionModeBeMySQLType } from '@/util/connection';