PullRequest: 458 更新角色名称拼接提示、状态栏调整、总耗时添加、hover提示更新等

Merge branch 'feat/ease-of-use of [email protected]:oceanbase/oceanbase-developer-center.git into dev-4.3.1

https://code.alipay.com/oceanbase/oceanbase-developer-center/pull_requests/458


Signed-off-by: 晓康 <[email protected]>


* feat: hover tooltip 增加
* feat: 增加快捷键冲突判定
* feat: 增加快捷键冲突检测
* feat: 总耗时添加
* feat: change statusBar layout
* feat: 角色名称拼接提示
* fix: 耗时数据读取方式问题

Author: 之瑛

src/component/Manage/RoleList/index.tsx

@@ -39,13 +39,14 @@ const RoleList: React.FC<{
   isShowIcon?: boolean;
   isWrap?: boolean;
 }> = ({ roles, isShowIcon = false, isWrap = false }) => {
+  const title = roles?.map((item) => item.name)?.join(' | ');
   return (
-    <div title={roles?.map((item) => item.name)?.join(' | ')}>
+    <div title={title}>
       <Space split="|" size={10} wrap={isWrap}>
         {roles?.length ? (
           roles?.map(({ name, enabled }, index) => (
             <Space key={index} size={5}>
-              <span title={name}>{name}</span>
+              <span title={title}>{name}</span>
               {!enabled && isShowIcon && (
                 <span
                   title={formatMessage({

src/component/ODCSetting/index.tsx

@@ -101,6 +101,7 @@ const ODCSetting: React.FC<IProps> = ({ modalStore }) => {
 
       // 遍历所有子节点
       const children = dom.querySelectorAll<HTMLHeadingElement>('[data-name]'); // 假定子节点有共同的类名'child'
+      // console.log(children);
       let min = Number.MAX_SAFE_INTEGER;
       let key;
       children.forEach((child) => {
@@ -164,6 +165,13 @@ const ODCSetting: React.FC<IProps> = ({ modalStore }) => {
 
   async function save() {
     const values = await formRef.validateFields();
+    if (
+      (values['odc.editor.shortcut.executeStatement'] =
+        values['odc.editor.shortcut.executeCurrentStatement'])
+    ) {
+      message.warning('快捷键冲突, 请重新输入。');
+      return;
+    }
     const serverData: Record<string, string> = {},
       localData = {};
     Object.keys(values).forEach((key) => {

src/d.ts/index.ts

@@ -1045,6 +1045,7 @@ export interface IResultSet extends Partial<ISqlExecuteResult> {
     table?: ITable;
     editable: boolean;
   };
+  timer?: ISqlExecuteResultTimer;
 
   isQueriedEditable?: boolean;
   logTypeData?: {
@@ -1632,6 +1633,12 @@ export interface ISqlExecuteResult {
   withFullLinkTrace: boolean;
   traceEmptyReason?: string;
 }
+export interface ISqlExecuteResultTimer {
+  name: string;
+  stages: IResultTimerStage[];
+  startTimeMillis: number; // 开始时间
+  totalDurationMicroseconds: number; // 总耗时
+}
 
 export enum ISqlExecuteResultStatus {
   SUCCESS = 'SUCCESS',

src/page/Project/Database/index.tsx

@@ -343,6 +343,7 @@ const Database: React.FC<IProps> = ({ id, modalStore }) => {
             dataIndex: 'collationName',
             width: 120,
             ellipsis: true,
+            render: (collationName) => collationName || '-',
           },
           {
             title: formatMessage({

src/page/Workspace/components/DDLResultSet/StatusBar.tsx

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import { ITableColumn, ResultSetColumn } from '@/d.ts';
+import { ISqlExecuteResultTimer, ITableColumn, ResultSetColumn } from '@/d.ts';
+import { SQLStore } from '@/store/sql';
 import { formatMessage } from '@/util/intl';
 import { formatTimeTemplate } from '@/util/utils';
 import { Divider, Space, Typography } from 'antd';
 import BigNumber from 'bignumber.js';
+import { inject, observer } from 'mobx-react';
 import React, { useMemo } from 'react';
 
 interface IProps {
@@ -27,15 +29,25 @@ interface IProps {
   columns: Partial<ITableColumn>[];
   fields: ResultSetColumn[];
   selectedColumnKeys: React.Key[];
+  sqlStore?: SQLStore;
+  timer?: ISqlExecuteResultTimer;
 }
 
 const StatusBar: React.FC<IProps> = function ({
   recordCount,
   dbTotalDurationMicroseconds,
   columns,
+  timer,
   fields,
   selectedColumnKeys,
 }) {
+  const executeStage = timer?.stages?.find((stage) => stage.stageName === 'Execute');
+  const executeSQLStage = executeStage?.subStages?.find(
+    (stage) => stage.stageName === 'DB Server Execute SQL',
+  );
+  const DBCostTime = formatTimeTemplate(
+    BigNumber(executeSQLStage?.totalDurationMicroseconds).div(1000000).toNumber(),
+  );
   const selectColumns = useMemo(() => {
     if (!columns?.length || !selectedColumnKeys?.length || !fields?.length) {
       return [];
@@ -117,22 +129,26 @@ const StatusBar: React.FC<IProps> = function ({
             {formatTimeTemplate(BigNumber(dbTotalDurationMicroseconds).div(1000000).toNumber())}
           </span>
         ) : null}
-        <span>
-          {
-            formatMessage(
-              {
-                id: 'odc.components.DDLResultSet.StatusBar.TotalNumberOfEntriesRecordcount',
-              },
+        <Space size={'small'}>
+          <span>{`总耗时：${DBCostTime}`}</span>
+          <span>
+            {
+              formatMessage(
+                {
+                  id: 'odc.components.DDLResultSet.StatusBar.TotalNumberOfEntriesRecordcount',
+                },
+
+                { recordCount: recordCount },
+              )
+              /*总条数：{recordCount} 条*/
+            }
+          </span>
+        </Space>
 
-              { recordCount: recordCount },
-            )
-            /*总条数：{recordCount} 条*/
-          }
-        </span>
         {columnInfo}
       </Space>
     </div>
   );
 };
 
-export default StatusBar;
+export default inject('sqlStore')(observer(StatusBar));

src/page/Workspace/components/DDLResultSet/index.tsx

@@ -19,6 +19,7 @@ import Toolbar from '@/component/Toolbar';
 import icon, { IConStatus } from '@/component/Toolbar/statefulIcon/index';
 import {
   GeneralSQLType,
+  ISqlExecuteResultTimer,
   ITable,
   ITableColumn,
   LobExt,
@@ -125,6 +126,7 @@ interface IProps {
   resultHeight: number | string;
   pageKey?: string;
   generalSqlType?: GeneralSQLType;
+  timer?: ISqlExecuteResultTimer;
   traceId?: string;
   enableRowId?: boolean;
   autoCommit: boolean;
@@ -155,6 +157,7 @@ const DDLResultSet: React.FC<IProps> = function (props) {
     columns,
     showPagination,
     sqlStore,
+    timer,
     settingStore,
     showExplain,
     showTrace = false,
@@ -1178,6 +1181,7 @@ const DDLResultSet: React.FC<IProps> = function (props) {
         selectedColumnKeys={selectedCellColumnsKey}
         columns={table?.columns}
         dbTotalDurationMicroseconds={dbTotalDurationMicroseconds}
+        timer={timer}
       />
     </div>
   );

src/page/Workspace/components/SQLResultSet/ExecuteHistory.tsx

@@ -185,7 +185,6 @@ const ExecuteHistory: React.FC<IProps> = function (props) {
           const executeSQLStage = executeStage?.subStages?.find(
             (stage) => stage.stageName === 'DB Server Execute SQL',
           );
-
           const DBCostTime = formatTimeTemplate(
             BigNumber(executeSQLStage?.totalDurationMicroseconds).div(1000000).toNumber(),
           );
@@ -239,8 +238,7 @@ const ExecuteHistory: React.FC<IProps> = function (props) {
           message={
             formatMessage(
               {
-                id:
-                  'odc.components.SQLResultSet.ExecuteHistory.SelectedrowkeyslengthRecordsSelected',
+                id: 'odc.components.SQLResultSet.ExecuteHistory.SelectedrowkeyslengthRecordsSelected',
               },
 
               { selectedRowKeysLength: selectedRowKeys.length },

src/page/Workspace/components/SQLResultSet/index.tsx

@@ -228,10 +228,8 @@ const SQLResultSet: React.FC<IProps> = function (props) {
     );
   }
   let resultTabCount = 0;
-  if(unauthorizedDatabases?.length){
-    return (
-      <DBPermissionTable sql={unauthorizedSql} dataSource={unauthorizedDatabases} />
-    )
+  if (unauthorizedDatabases?.length) {
+    return <DBPermissionTable sql={unauthorizedSql} dataSource={unauthorizedDatabases} />;
   }
 
   return (
@@ -325,6 +323,7 @@ const SQLResultSet: React.FC<IProps> = function (props) {
                       showPagination={true}
                       showTrace={true}
                       columns={set.columns}
+                      timer={set.timer}
                       session={session}
                       sqlId={set.sqlId}
                       autoCommit={session?.params?.autoCommit}
@@ -444,12 +443,7 @@ const SQLResultSet: React.FC<IProps> = function (props) {
                     </Tooltip>
                   ),
                   key: set.uniqKey,
-                  children: (
-                    <SQLResultLog 
-                      resultHeight={resultHeight}
-                      resultSet={set}
-                    />
-                  ),
+                  children: <SQLResultLog resultHeight={resultHeight} resultSet={set} />,
                 };
               }
             }),