From 2343bd8a376f55dcada8ff2e443b2cac503fbee1 Mon Sep 17 00:00:00 2001 From: Zzm0809 <934230207@qq.com> Date: Tue, 12 Dec 2023 11:41:58 +0800 Subject: [PATCH] improve datastudio's menu tag logical & modify some layout (#2619) * improve some web code * improve some web code * improve some web code * Spotless Apply * improve some web code * Spotless Apply * improve some layout * Spotless Apply * modify some layout * Spotless Apply * delete unuse classname * improve some layout * Spotless Apply * fix i18n --------- Co-authored-by: Zzm0809 --- .../CustomEditor/CodeEdit/index.tsx | 1 + .../src/components/LineageGraph/index.tsx | 33 ++--- dinky-web/src/locales/en-US/pages.ts | 14 +- dinky-web/src/locales/zh-CN/pages.ts | 14 +- .../JobDetailInfoModel/StatementInfo.tsx | 2 - .../BottomContainer/JobExecHistory/index.tsx | 2 - .../BottomContainer/Result/index.tsx | 12 +- .../DataStudio/BottomContainer/index.tsx | 53 +++++++- .../LeftContainer/Project/function.tsx | 28 +++- .../LeftContainer/Project/index.tsx | 22 +++ .../DataStudio/MiddleContainer/index.tsx | 68 +++++----- .../RightContainer/JobConfig/function.tsx | 6 +- .../RightContainer/JobConfig/index.tsx | 24 ++-- .../RightContainer/JobInfo/index.tsx | 21 +-- dinky-web/src/pages/DataStudio/data.d.tsx | 23 ++++ dinky-web/src/pages/DataStudio/function.ts | 10 ++ dinky-web/src/pages/DataStudio/index.tsx | 71 +++++++--- dinky-web/src/pages/DataStudio/model.ts | 3 +- dinky-web/src/pages/DataStudio/route.tsx | 125 ++++++++++++------ .../components/AlertHistoryList/index.tsx | 1 + .../DevOps/JobDetail/AlertHistory/index.tsx | 1 - .../components/CheckpointTable.tsx | 4 +- .../components/SavePointTable.tsx | 2 +- .../JobLogs/components/ExceptionTab.tsx | 8 +- .../JobLogs/components/JobManagerLogsTab.tsx | 2 +- .../JobLogs/components/TaskManagerLogsTab.tsx | 2 +- .../JobMetrics/JobChart/JobChart.tsx | 2 +- dinky-web/src/pages/DevOps/JobList/index.tsx | 2 +- .../src/pages/Home/DevOverView/index.tsx | 78 +++++------ dinky-web/src/pages/Home/index.tsx | 10 +- dinky-web/src/pages/Metrics/Job/index.tsx | 2 +- dinky-web/src/pages/Metrics/index.tsx | 8 +- .../components/ResourceOverView/index.tsx | 1 - .../SettingOverView/ResourcesConfig/index.tsx | 1 - 34 files changed, 419 insertions(+), 237 deletions(-) diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx index d841eb45b9..ba8998dbd5 100644 --- a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx +++ b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx @@ -164,6 +164,7 @@ const CodeEdit = (props: CodeEditFormProps & connect) => { readOnly, // 是否只读 glyphMargin: true, // 字形边缘 formatOnType: true, // 代码格式化 + // columnSelection: true, // 列选择 wrappingIndent: language === 'yaml' || language === 'yml' || language === 'json' ? 'indent' : 'none', inlineSuggest: { diff --git a/dinky-web/src/components/LineageGraph/index.tsx b/dinky-web/src/components/LineageGraph/index.tsx index bdaa3533bb..273b0dc627 100644 --- a/dinky-web/src/components/LineageGraph/index.tsx +++ b/dinky-web/src/components/LineageGraph/index.tsx @@ -19,6 +19,7 @@ import { Badge, Tooltip, Typography } from 'antd'; +import LineageDagExt from '@/components/LineageGraph/lineage-dag-ext'; import { LineageDetailInfo, LineageRelations, @@ -28,19 +29,15 @@ import { import { l } from '@/utils/intl'; import { SuccessNotification, WarningNotification } from '@/utils/messages'; import { + ArrowsAltOutlined, + ColumnHeightOutlined, CompassOutlined, - ExpandAltOutlined, - FullscreenExitOutlined, InsertRowAboveOutlined, - PlusCircleOutlined, - ReloadOutlined + ReloadOutlined, + ShrinkOutlined } from '@ant-design/icons'; -import _ from 'lodash'; import React, { useEffect } from 'react'; import 'react-lineage-dag/dist/index.css'; -// import LineageDag from "react-lineage-dag"; -import LineageDagExt from '@/components/LineageGraph/lineage-dag-ext'; -// import LineageDagExt from "@/components/LineageGraph/lineage-dag-ext"; interface LineageState { lineageData: LineageDetailInfo; @@ -50,7 +47,7 @@ interface LineageState { relations: LineageRelations[]; columns: any[]; operator: any[]; - centerId: string; + centerId?: string; showMinimap: boolean; refresh: boolean; expandField: boolean; @@ -69,7 +66,7 @@ type JobLineageProps = { type ITable = { id: string; name: string; - isCollapse: boolean; + isCollapse?: boolean; fields: LineageTableColumn[]; }; @@ -188,10 +185,10 @@ const LineageGraph: React.FC = (props) => { - + ), - onClick: (nodeData: any) => handleExpandField(nodeData, _.clone(data)) + onClick: (nodeData: any) => handleExpandField(nodeData, data) }, { id: 'expandDownstream', @@ -206,7 +203,7 @@ const LineageGraph: React.FC = (props) => { : l('lineage.collapseDownstream') } > - + ), onClick: (nodeData: { id: string }) => { @@ -235,7 +232,7 @@ const LineageGraph: React.FC = (props) => { : l('lineage.collapseUpstream') } > - + ), onClick: (nodeData: { id: string }) => { @@ -327,11 +324,9 @@ const LineageGraph: React.FC = (props) => { isAdsorb: true, theme: { shapeType: 'line', - gap: 20, - lineWidth: 1, - lineColor: '#e8e8e8', - circleRadiu: 5, - circleColor: '#e8e8e8' + gap: 30, + lineWidth: 0.2, + circleRadiu: 5 } } }} diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts index 8f74552047..2132dfbf93 100644 --- a/dinky-web/src/locales/en-US/pages.ts +++ b/dinky-web/src/locales/en-US/pages.ts @@ -48,7 +48,7 @@ export default { * * */ - 'button.push': 'submit', + 'button.push': 'Push', /** * * catalog @@ -1123,12 +1123,12 @@ export default { 'user.usernamePlaceholder': 'Please enter user name', 'lineage.getError': 'Cannot Get Lineage', - 'lineage.expandField': 'Expand Field', - 'lineage.collapseField': 'Collapse Field', - 'lineage.expandDownstream': 'Expand Downstream', - 'lineage.collapseDownstream': 'Collapse Downstream', - 'lineage.expandUpstream': 'Expand Upstream', - 'lineage.collapseUpstream': 'Collapse Upstream', + 'lineage.expandField': 'Expand Field(UnSupported)', + 'lineage.collapseField': 'Collapse Field(UnSupported)', + 'lineage.expandDownstream': 'Expand Downstream(UnSupported)', + 'lineage.collapseDownstream': 'Collapse Downstream(UnSupported)', + 'lineage.expandUpstream': 'Expand Upstream(UnSupported)', + 'lineage.collapseUpstream': 'Collapse Upstream(UnSupported)', 'lineage.showMap': 'Show Map', 'lineage.hideMap': 'Hide Map', 'lineage.refresh': 'Refresh' diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts index 969d4f8264..96a5a95f45 100644 --- a/dinky-web/src/locales/zh-CN/pages.ts +++ b/dinky-web/src/locales/zh-CN/pages.ts @@ -45,7 +45,7 @@ export default { * * */ - 'button.push': '提交', + 'button.push': '推送', /** * * catalog @@ -1083,12 +1083,12 @@ export default { 'user.usernamePlaceholder': '请输入用户名', 'lineage.getError': '无法获取血缘', - 'lineage.expandField': '展开字段', - 'lineage.collapseField': '收缩字段', - 'lineage.expandDownstream': '展开下游', - 'lineage.collapseDownstream': '收起下游', - 'lineage.expandUpstream': '展开上游', - 'lineage.collapseUpstream': '收起上游', + 'lineage.expandField': '展开字段(暂未实现)', + 'lineage.collapseField': '收起字段(暂未实现)', + 'lineage.expandDownstream': '展开下游(暂未实现)', + 'lineage.collapseDownstream': '收起下游(暂未实现)', + 'lineage.expandUpstream': '展开上游(暂未实现)', + 'lineage.collapseUpstream': '收起上游(暂未实现)', 'lineage.showMap': '显示小地图', 'lineage.hideMap': '隐藏小地图', 'lineage.refresh': '刷新血缘' diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/JobExecHistory/components/JobDetailInfoModel/StatementInfo.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/JobExecHistory/components/JobDetailInfoModel/StatementInfo.tsx index ac4beabc55..5bdddf4e1f 100644 --- a/dinky-web/src/pages/DataStudio/BottomContainer/JobExecHistory/components/JobDetailInfoModel/StatementInfo.tsx +++ b/dinky-web/src/pages/DataStudio/BottomContainer/JobExecHistory/components/JobDetailInfoModel/StatementInfo.tsx @@ -33,8 +33,6 @@ type StatementInfoProps = { export const StatementInfo: React.FC = (props) => { const { row } = props; - console.log(row?.statement); - return ( <> = (props) => { }; }; - console.log(currentTab); - return ( <> {tabs.panes.length === 0 ? ( diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx index a274a86e0e..ac36344c20 100644 --- a/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx +++ b/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx @@ -132,7 +132,7 @@ const Result = (props: any) => { } else { if (isSql(current.dialect)) { // common sql - const res = await handleGetOption('api/studio/getCommonSqlData', 'Get Data', { + const res = await handleGetOption('api/studio/getCommonSqlData', l('global.getdata.tips'), { taskId: params.taskId }); if (res.data) { @@ -149,9 +149,13 @@ const Result = (props: any) => { const historyData = res.data; if (historyData && '2' == historyData.status) { const historyId = historyData.id; - const tableData = await handleGetOption('api/studio/getJobData', 'Get Data', { - jobId: historyId - }); + const tableData = await handleGetOption( + 'api/studio/getJobData', + l('global.getdata.tips'), + { + jobId: historyId + } + ); const data = tableData.data; if (data.success) { consoleData.result = data; diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx index aaaebf8b93..0dbec16305 100644 --- a/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx +++ b/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx @@ -21,7 +21,13 @@ import { CircleBtn } from '@/components/CallBackButton/CircleBtn'; import Title from '@/components/Front/Title'; import ContentScroll from '@/components/Scroll/ContentScroll'; import MovableSidebar from '@/components/Sidebar/MovableSidebar'; -import { StateType, STUDIO_MODEL, VIEW } from '@/pages/DataStudio/model'; +import { + StateType, + STUDIO_MODEL, + TabsItemType, + TabsPageType, + VIEW +} from '@/pages/DataStudio/model'; import { LeftBottomMoreTabs, LeftBottomSide } from '@/pages/DataStudio/route'; import { l } from '@/utils/intl'; import { connect } from '@@/exports'; @@ -34,7 +40,13 @@ export type BottomContainerProps = { height: number | string; }; const BottomContainer: React.FC = (props: any) => { - const { dispatch, size, bottomContainer, height } = props; + const { + dispatch, + size, + bottomContainer, + height, + tabs: { activeKey, panes } + } = props; const width = document.documentElement.clientWidth - VIEW.sideWidth * 2; /** @@ -76,6 +88,13 @@ const BottomContainer: React.FC = (props: any) => { }); }; + const updateSelectBottomKey = (key: string) => { + dispatch({ + type: STUDIO_MODEL.updateSelectBottomKey, + payload: key + }); + }; + /** * 更新工具栏内容高度 * @param {number} height @@ -159,7 +178,32 @@ const BottomContainer: React.FC = (props: any) => { }; const renderItems = () => { return [ - ...LeftBottomSide.map((x) => { + ...LeftBottomSide.filter((tab) => { + if (!tab.isShow) { + return true; + } + if (parseInt(activeKey) < 0) { + return TabsPageType.None; + } + const currentTab = (panes as TabsItemType[]).find((item) => item.key === activeKey); + const show = tab.isShow(currentTab?.type ?? TabsPageType.None, currentTab?.subType); + // 如果当前打开的菜单等于 状态存的菜单 且 菜单不显示状态下，先切换到项目key(因为项目key 不可能不显示) 在关闭这个 + // if current open menu equal status menu and menu is not show status, first switch to project key(because project key is not show) and close this + // if (tab.key === bottomContainer.selectKey && !show) { + // updateSelectBottomKey( + // currentTab?.subType?.toLowerCase() === DIALECT.FLINKSQLENV + // || currentTab?.subType?.toLowerCase() === DIALECT.SCALA + // || currentTab?.subType?.toLowerCase() === DIALECT.JAVA + // || currentTab?.subType?.toLowerCase() === DIALECT.PYTHON_LONG + // ? LeftBottomKey.TOOLS_KEY // 如果当前打开的是flinksql环境，scala，java，python，切换到工具栏 + // : currentTab?.subType?.toLowerCase() === DIALECT.FLINK_SQL + // || currentTab?.subType?.toLowerCase() === DIALECT.FLINKJAR + // || isSql(currentTab?.subType ?? '') + // ? LeftBottomKey.CONSOLE_KEY : LeftBottomKey.TOOLS_KEY // 如果当前打开的是flinksql，flinkjar，切换到控制台 + // ); + // } + return show; + }).map((x) => { return { ...x, key: x.key + '/' }; }), ...getSubTabs() @@ -233,5 +277,6 @@ const BottomContainer: React.FC = (props: any) => { }; export default connect(({ Studio }: { Studio: StateType }) => ({ - bottomContainer: Studio.bottomContainer + bottomContainer: Studio.bottomContainer, + tabs: Studio.tabs }))(BottomContainer); diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx index 52e327b794..523eb808e3 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx +++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx @@ -17,6 +17,8 @@ * */ +import { LeftBottomKey, RightMenuKey } from '@/pages/DataStudio/data.d'; +import { isSql } from '@/pages/DataStudio/HeaderContainer/service'; import { getTabIcon } from '@/pages/DataStudio/MiddleContainer/function'; import { DIALECT } from '@/services/constants'; import { Catalogue } from '@/types/Studio/data.d'; @@ -185,5 +187,29 @@ export const buildProjectTree = ( : []; export const isUDF = (jobType: string): boolean => { - return jobType === 'Scala' || jobType === 'Python' || jobType === 'Java'; + return ( + jobType.toLowerCase() === DIALECT.SCALA || + jobType.toLowerCase() === DIALECT.PYTHON_LONG || + jobType.toLowerCase() === DIALECT.JAVA + ); }; + +export const isFlinkJob = (jobType: string): boolean => { + return jobType.toLowerCase() === DIALECT.FLINK_SQL || jobType.toLowerCase() === DIALECT.FLINKJAR; +}; + +export function getRightSelectKeyFromNodeClickJobType(jobType: string): string { + return isFlinkJob(jobType) + ? RightMenuKey.JOB_CONFIG_KEY + : isSql(jobType) + ? RightMenuKey.PREVIEW_CONFIG_KEY + : RightMenuKey.JOB_INFO_KEY; +} + +export function getBottomSelectKeyFromNodeClickJobType(jobType: string): string { + return isFlinkJob(jobType) || isSql(jobType) + ? LeftBottomKey.CONSOLE_KEY + : isUDF(jobType) || jobType.toLowerCase() === DIALECT.FLINKSQLENV + ? LeftBottomKey.TOOLS_KEY + : LeftBottomKey.TOOLS_KEY; +} diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx index 69ff7ba395..a93686ae4b 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx +++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx @@ -18,12 +18,17 @@ */ import RightContextMenu from '@/components/RightContextMenu'; +import { LeftBottomKey } from '@/pages/DataStudio/data.d'; import { getTabByTaskId } from '@/pages/DataStudio/function'; import { FOLDER_RIGHT_MENU, JOB_RIGHT_MENU } from '@/pages/DataStudio/LeftContainer/Project/constants'; import FolderModal from '@/pages/DataStudio/LeftContainer/Project/FolderModal'; +import { + getBottomSelectKeyFromNodeClickJobType, + getRightSelectKeyFromNodeClickJobType +} from '@/pages/DataStudio/LeftContainer/Project/function'; import JobModal from '@/pages/DataStudio/LeftContainer/Project/JobModal'; import JobTree from '@/pages/DataStudio/LeftContainer/Project/JobTree'; import { @@ -32,6 +37,7 @@ import { STUDIO_MODEL, STUDIO_MODEL_ASYNC } from '@/pages/DataStudio/model'; +import { LeftBottomMoreTabs } from '@/pages/DataStudio/route'; import { handleAddOrUpdate, handleOption, @@ -126,6 +132,22 @@ const Project: React.FC = (props: connect) => { if (!isLeaf) { dispatch({ type: STUDIO_MODEL.updateProjectExpandKey, payload: [...expandKeys, key] }); return; + } else { + dispatch({ + type: STUDIO_MODEL.updateSelectRightKey, + payload: getRightSelectKeyFromNodeClickJobType(type) + }); + const bottomKey = getBottomSelectKeyFromNodeClickJobType(type); + dispatch({ + type: STUDIO_MODEL.updateSelectBottomKey, + payload: bottomKey + }); + if (bottomKey === LeftBottomKey.TOOLS_KEY) { + dispatch({ + type: STUDIO_MODEL.updateSelectBottomSubKey, + payload: LeftBottomMoreTabs[bottomKey][0].key + }); + } } path.pop(); diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx index 82efe4fbc3..655d384c07 100644 --- a/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx +++ b/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx @@ -17,6 +17,7 @@ * */ +import RightContextMenu from '@/components/RightContextMenu'; import ContentScroll from '@/components/Scroll/ContentScroll'; import { useEditor } from '@/hooks/useEditor'; import useThemeValue from '@/hooks/useThemeValue'; @@ -26,6 +27,10 @@ import { isDataStudioTabsItemType, isMetadataTabsItemType } from '@/pages/DataStudio/function'; +import { + getBottomSelectKeyFromNodeClickJobType, + getRightSelectKeyFromNodeClickJobType +} from '@/pages/DataStudio/LeftContainer/Project/function'; import { getTabIcon } from '@/pages/DataStudio/MiddleContainer/function'; import KeyBoard from '@/pages/DataStudio/MiddleContainer/KeyBoard'; import QuickGuide from '@/pages/DataStudio/MiddleContainer/QuickGuide'; @@ -33,10 +38,11 @@ import StudioEditor from '@/pages/DataStudio/MiddleContainer/StudioEditor'; import { StateType, STUDIO_MODEL, TabsItemType, TabsPageType } from '@/pages/DataStudio/model'; import { RightSide } from '@/pages/DataStudio/route'; import RightTagsRouter from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter'; +import { ContextMenuPosition, InitContextMenuPosition } from '@/types/Public/state.d'; import { l } from '@/utils/intl'; import { connect } from '@@/exports'; import { ExclamationCircleFilled } from '@ant-design/icons'; -import { ConfigProvider, Divider, Dropdown, Modal, Space, Tabs, Typography } from 'antd'; +import { ConfigProvider, Divider, Modal, Space, Tabs, Typography } from 'antd'; import { MenuInfo } from 'rc-menu/es/interface'; import React, { memo, useState } from 'react'; @@ -55,7 +61,8 @@ const MiddleContainer = (props: any) => { const { fullscreen } = useEditor(); - const [contextMenuPosition, setContextMenuPosition] = useState({}); + const [contextMenuPosition, setContextMenuPosition] = + useState(InitContextMenuPosition); const [contextMenuVisible, setContextMenuVisible] = useState(false); const [includeTab, setIncludeTab] = useState({}); @@ -109,7 +116,7 @@ const MiddleContainer = (props: any) => { }; const updateActiveKey = (item: TabsItemType) => { - const { key, label } = item; + const { key, label, subType } = item; if (key === activeKey) { return; } @@ -117,11 +124,24 @@ const MiddleContainer = (props: any) => { setContextMenuVisible(false); updateRightKey(key); + // 更新当前选中的 tab key dispatch({ type: STUDIO_MODEL.updateTabsActiveKey, payload: key }); + // 根据 作业类型渲染 右侧选中菜单 key + dispatch({ + type: STUDIO_MODEL.updateSelectRightKey, + payload: getRightSelectKeyFromNodeClickJobType(subType ?? '') + }); + + // 根据 作业类型渲染 左下角选中菜单 key + dispatch({ + type: STUDIO_MODEL.updateSelectBottomKey, + payload: getBottomSelectKeyFromNodeClickJobType(subType ?? '') + }); + // 这里如果加此项功能和定位功能重复 , 暂时注释 // if (item.type === TabsPageType.project) { // 更新左侧树选中的 key @@ -177,14 +197,12 @@ const MiddleContainer = (props: any) => { // 设置选中的值 setIncludeTab(item); setContextMenuVisible(true); - setContextMenuPosition({ - position: 'fixed', - cursor: 'context-menu', + setContextMenuPosition((prevState) => ({ + ...prevState, width: '10vw', - zIndex: 999, - left: info.clientX + 10, // + 10 是为了让鼠标不至于在选中的节点上 && 不遮住当前鼠标位置 - top: info.clientY + 10 // + 10 是为了让鼠标不至于在选中的节点上 && 不遮住当前鼠标位置 - }); + left: info.clientX + 10, + top: info.clientY + 10 + })); }; /** @@ -204,28 +222,6 @@ const MiddleContainer = (props: any) => { } }; - /** - * 右键菜单 - */ - const renderRightClickMenu = () => { - return ( - - {/*占位*/} -
- - ); - }; - /** * render tabs */ @@ -365,7 +361,13 @@ const MiddleContainer = (props: any) => { onEdit={closeTab} items={tabItems} /> - {renderRightClickMenu()} + setContextMenuVisible(false)} + /> ); }; diff --git a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx index c3835725c1..b936ba17a8 100644 --- a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx +++ b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx @@ -118,7 +118,7 @@ export const buildClusterConfigOptions = (current: any, clusterConfiguration: Cl /** * build env options */ -export const buildEnvOptions = (env: any[], isDisabled: boolean) => { +export const buildEnvOptions = (env: any[]) => { const envList: DefaultOptionType[] = [ { label: l('button.disable'), @@ -140,7 +140,7 @@ export const buildEnvOptions = (env: any[], isDisabled: boolean) => { label: tag, value: item.id, key: item.id, - disabled: !item.enabled || !isDisabled + disabled: !item.enabled }); } return envList; @@ -179,7 +179,7 @@ export const buildAlertGroupOptions = (alertGroups: Alert.AlertGroup[]) => { /** * 计算右侧 proform list 组件宽度 - * @returns {number} + * @param width */ export const calculatorWidth = (width: number) => { const resultWidth = width - 50; // 50 为右侧 proform list 组件的 删除按钮宽度 diff --git a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx index 169fa3299b..1f65778a25 100644 --- a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx +++ b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx @@ -210,17 +210,19 @@ const JobConfig = (props: any) => { /> )} - + {current?.dialect?.toLowerCase() === DIALECT.FLINK_SQL && ( + + )} { const { - tabs: { panes, activeKey, activeBreadcrumbTitle } + tabs: { panes, activeKey } } = props; - const [currentInfo, setCurrentInfo] = useState>( - getCurrentData(panes, activeKey) ?? {} - ); - useEffect(() => { - setCurrentInfo({ ...getCurrentData(panes, activeKey) }); - }, [activeKey, activeBreadcrumbTitle]); + const currentInfo = getCurrentData(panes, activeKey); return (
@@ -52,13 +46,6 @@ const JobInfo = (props: any) => { {currentInfo?.versionId} - - {currentInfo?.createTime} - - - {currentInfo?.updateTime} - - {currentInfo?.note}
diff --git a/dinky-web/src/pages/DataStudio/data.d.tsx b/dinky-web/src/pages/DataStudio/data.d.tsx index 6af7f86fb3..0bfa32f3f1 100644 --- a/dinky-web/src/pages/DataStudio/data.d.tsx +++ b/dinky-web/src/pages/DataStudio/data.d.tsx @@ -31,3 +31,26 @@ export type StudioParam = { checkPoint?: number; savePointPath?: string; }; + +export enum LeftMenuKey { + PROJECT_KEY = 'menu.datastudio.project', + CATALOG_KEY = 'menu.datastudio.catalog', + DATASOURCE_KEY = 'menu.datastudio.datasource', + FRAGMENT_KEY = 'menu.registration.fragment' +} +export enum RightMenuKey { + JOB_CONFIG_KEY = 'menu.datastudio.jobConfig', + PREVIEW_CONFIG_KEY = 'menu.datastudio.previewConfig', + SAVEPOINT_KEY = 'menu.datastudio.savePoint', + HISTORY_VISION_KEY = 'menu.datastudio.historyVision', + JOB_INFO_KEY = 'menu.datastudio.jobInfo' +} + +export enum LeftBottomKey { + CONSOLE_KEY = 'menu.datastudio.console', + RESULT_KEY = 'menu.datastudio.result', + LINEAGE_KEY = 'menu.datastudio.lineage', + HISTORY_KEY = 'menu.datastudio.history', + TABLE_DATA_KEY = 'menu.datastudio.table-data', + TOOLS_KEY = 'menu.datastudio.tool' +} diff --git a/dinky-web/src/pages/DataStudio/function.ts b/dinky-web/src/pages/DataStudio/function.ts index 7771fb68c2..bd267ab532 100644 --- a/dinky-web/src/pages/DataStudio/function.ts +++ b/dinky-web/src/pages/DataStudio/function.ts @@ -29,6 +29,7 @@ import { TaskDataType } from '@/pages/DataStudio/model'; import { CONFIG_MODEL_ASYNC } from '@/pages/SettingCenter/GlobalSetting/model'; +import { DIALECT } from '@/services/constants'; import { Cluster, DataSources } from '@/types/RegCenter/data'; import { Dispatch } from '@@/plugin-dva/types'; @@ -162,6 +163,15 @@ export function isProjectTabs(panes: TabsItemType[], activeKey: string): boolean } } +export function isShowRightTabsJobConfig(dialect: string): boolean { + return ( + dialect.toLowerCase() === DIALECT.JAVA || + dialect.toLowerCase() === DIALECT.PYTHON_LONG || + dialect.toLowerCase() === DIALECT.SCALA || + dialect.toLowerCase() === DIALECT.FLINKSQLENV + ); +} + export function getTabByTaskId( panes: TabsItemType[], id: number diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx index 13c677c8f3..05cb29fc54 100644 --- a/dinky-web/src/pages/DataStudio/index.tsx +++ b/dinky-web/src/pages/DataStudio/index.tsx @@ -21,6 +21,7 @@ import { AuthorizedObject, useAccess } from '@/hooks/useAccess'; import { useEditor } from '@/hooks/useEditor'; import useThemeValue from '@/hooks/useThemeValue'; import BottomContainer from '@/pages/DataStudio/BottomContainer'; +import { LeftMenuKey } from '@/pages/DataStudio/data.d'; import FooterContainer from '@/pages/DataStudio/FooterContainer'; import { isProjectTabs, mapDispatchToProps } from '@/pages/DataStudio/function'; import SecondHeaderContainer from '@/pages/DataStudio/HeaderContainer'; @@ -28,7 +29,13 @@ import LeftContainer from '@/pages/DataStudio/LeftContainer'; import { getDataSourceList } from '@/pages/DataStudio/LeftContainer/DataSource/service'; import { getTaskData } from '@/pages/DataStudio/LeftContainer/Project/service'; import MiddleContainer from '@/pages/DataStudio/MiddleContainer'; -import { StateType, TabsItemType, TabsPageType, VIEW } from '@/pages/DataStudio/model'; +import { + StateType, + TabsItemType, + TabsPageSubType, + TabsPageType, + VIEW +} from '@/pages/DataStudio/model'; import RightContainer from '@/pages/DataStudio/RightContainer'; import { getClusterConfigurationData, @@ -140,14 +147,33 @@ const DataStudio = (props: any) => { const LeftTopMenu = ( AuthorizedObject({ path: x.auth, children: x, access })).map( - (x) => ({ + items={LeftSide.filter((tab) => AuthorizedObject({ path: tab.auth, children: tab, access })) + .filter((tab) => { + if (!tab.isShow) { + return true; + } + if (parseInt(activeKey) < 0) { + return TabsPageType.None; + } + const currentTab = (panes as TabsItemType[]).find((item) => item.key === activeKey); + const show = tab.isShow( + currentTab?.type ?? TabsPageType.None, + currentTab?.subType ?? TabsPageSubType.None + ); + // 如果当前打开的菜单等于 状态存的菜单 且 菜单不显示状态下，先切换到项目key(因为项目key 不可能不显示) 在关闭这个 + // if current open menu equal status menu and menu is not show status, first switch to project key(because project key is not show) and close this + if (tab.key === leftContainer.selectKey && !show && panes.length > 0) { + updateSelectLeftKey(LeftMenuKey.PROJECT_KEY); + } + return show; + }) + .map((x) => ({ key: x.key, label: x.label, icon: x.icon - }) - )} + }))} style={{ flexGrow: 1, borderBlockStart: `1px solid ${themeValue.borderColor}`, @@ -161,13 +187,23 @@ const DataStudio = (props: any) => { - AuthorizedObject({ path: x.auth, children: x, access }) - ).map((x) => ({ - key: x.key, - label: x.label, - icon: x.icon - }))} + activeKey={bottomContainer.selectKey} + items={LeftBottomSide.filter((x) => AuthorizedObject({ path: x.auth, children: x, access })) + .filter((tab) => { + if (!tab.isShow) { + return true; + } + if (parseInt(activeKey) < 0) { + return TabsPageType.None; + } + const currentTab = (panes as TabsItemType[]).find((item) => item.key === activeKey); + return tab.isShow(currentTab?.type ?? TabsPageType.None, currentTab?.subType); + }) + .map((x) => ({ + key: x.key, + label: x.label, + icon: x.icon + }))} style={{ display: 'flex', flexDirection: 'column', @@ -196,16 +232,17 @@ const DataStudio = (props: any) => { borderInlineStart: `1px solid ${themeValue.borderColor}`, borderBlockStart: `1px solid ${themeValue.borderColor}` }} - items={RightSide.filter((x) => AuthorizedObject({ path: x.auth, children: x, access })) - .filter((x) => { - if (!x.isShow) { + activeKey={rightContainer.selectKey} + items={RightSide.filter((tab) => AuthorizedObject({ path: tab.auth, children: tab, access })) + .filter((tab) => { + if (!tab.isShow) { return true; } if (parseInt(activeKey) < 0) { return TabsPageType.None; } - const v = (panes as TabsItemType[]).find((item) => item.key === activeKey); - return x.isShow(v?.type ?? TabsPageType.None, v?.subType); + const currentTab = (panes as TabsItemType[]).find((item) => item.key === activeKey); + return tab.isShow(currentTab?.type ?? TabsPageType.None, currentTab?.subType); }) .map((x) => { return { key: x.key, label: x.label, icon: x.icon }; diff --git a/dinky-web/src/pages/DataStudio/model.ts b/dinky-web/src/pages/DataStudio/model.ts index 1c2dc2d1c4..6bdd2472c2 100644 --- a/dinky-web/src/pages/DataStudio/model.ts +++ b/dinky-web/src/pages/DataStudio/model.ts @@ -147,7 +147,8 @@ export enum TabsPageType { export enum TabsPageSubType { flinkSql = 'FlinkSql', - flinkJar = 'FlinkJar' + flinkJar = 'FlinkJar', + None = '' } export interface TabsItemType { diff --git a/dinky-web/src/pages/DataStudio/route.tsx b/dinky-web/src/pages/DataStudio/route.tsx index 2805b2488a..7a7d4eccc2 100644 --- a/dinky-web/src/pages/DataStudio/route.tsx +++ b/dinky-web/src/pages/DataStudio/route.tsx @@ -25,6 +25,7 @@ import Result from '@/pages/DataStudio/BottomContainer/Result'; import TableData from '@/pages/DataStudio/BottomContainer/TableData'; import JsonToSql from '@/pages/DataStudio/BottomContainer/Tools/JsonToSql'; import TextComparison from '@/pages/DataStudio/BottomContainer/Tools/TextComparison'; +import { LeftBottomKey, LeftMenuKey, RightMenuKey } from '@/pages/DataStudio/data.d'; import { isSql } from '@/pages/DataStudio/HeaderContainer/service'; import Catalog from '@/pages/DataStudio/LeftContainer/Catalog'; import DataSource from '@/pages/DataStudio/LeftContainer/DataSource'; @@ -36,6 +37,7 @@ import JobConfig from '@/pages/DataStudio/RightContainer/JobConfig'; import JobInfo from '@/pages/DataStudio/RightContainer/JobInfo'; import PreViewConfig from '@/pages/DataStudio/RightContainer/PreViewConfig'; import SavePoints from '@/pages/DataStudio/RightContainer/SavePoints'; +import { DIALECT } from '@/services/constants'; import { l } from '@/utils/intl'; import { ApartmentOutlined, @@ -61,43 +63,57 @@ import { } from '@ant-design/icons'; import { ReactNode } from 'react'; -export const LeftSide = [ +export const LeftSide: TabProp[] = [ { auth: '/datastudio/left/project', - key: 'menu.datastudio.project', + key: LeftMenuKey.PROJECT_KEY, icon: , - label: l('menu.datastudio.project'), + label: l(LeftMenuKey.PROJECT_KEY), children: }, { auth: '/datastudio/left/catalog', - key: 'menu.datastudio.catalog', + key: LeftMenuKey.CATALOG_KEY, icon: , - label: l('menu.datastudio.catalog'), - children: + label: l(LeftMenuKey.CATALOG_KEY), + children: , + isShow: (type, subType) => + (type === TabsPageType.project || type === TabsPageType.metadata) && + subType?.toLowerCase() !== DIALECT.FLINKJAR && + subType?.toLowerCase() !== DIALECT.FLINKSQLENV && + subType?.toLowerCase() !== DIALECT.SCALA && + subType?.toLowerCase() !== DIALECT.PYTHON_LONG && + subType?.toLowerCase() !== DIALECT.JAVA && + subType?.toLowerCase() !== DIALECT.FLINKSQLENV }, { auth: '/datastudio/left/datasource', - key: 'menu.datastudio.datasource', + key: LeftMenuKey.DATASOURCE_KEY, icon: , - label: l('menu.datastudio.datasource'), + label: l(LeftMenuKey.DATASOURCE_KEY), children: }, { auth: '/datastudio/left/globalVariable', - key: 'menu.registration.fragment', + key: LeftMenuKey.FRAGMENT_KEY, icon: , - label: l('menu.registration.fragment'), - children: + label: l(LeftMenuKey.FRAGMENT_KEY), + children: , + isShow: (type, subType) => + type === TabsPageType.project && + !isSql(subType ?? '') && + subType?.toLowerCase() !== DIALECT.SCALA && + subType?.toLowerCase() !== DIALECT.PYTHON_LONG && + subType?.toLowerCase() !== DIALECT.JAVA } ]; export const RightSide: TabProp[] = [ { auth: '/datastudio/right/jobConfig', - key: 'menu.datastudio.jobConfig', + key: RightMenuKey.JOB_CONFIG_KEY, icon: , - label: l('menu.datastudio.jobConfig'), + label: l(RightMenuKey.JOB_CONFIG_KEY), children: , isShow: (type, subType) => type === TabsPageType.project && @@ -105,9 +121,9 @@ export const RightSide: TabProp[] = [ }, { auth: '/datastudio/right/previewConfig', - key: 'menu.datastudio.previewConfig', + key: RightMenuKey.PREVIEW_CONFIG_KEY, icon: , - label: l('menu.datastudio.previewConfig'), + label: l(RightMenuKey.PREVIEW_CONFIG_KEY), children: , isShow: (type, subType) => (type === TabsPageType.project && TabsPageSubType.flinkSql === subType) || @@ -115,71 +131,102 @@ export const RightSide: TabProp[] = [ }, { auth: '/datastudio/right/savePoint', - key: 'menu.datastudio.savePoint', + key: RightMenuKey.SAVEPOINT_KEY, icon: , - label: l('menu.datastudio.savePoint'), + label: l(RightMenuKey.SAVEPOINT_KEY), children: , isShow: (type, subType) => type === TabsPageType.project && TabsPageSubType.flinkSql === subType }, { auth: '/datastudio/right/historyVision', - key: 'menu.datastudio.historyVision', + key: RightMenuKey.HISTORY_VISION_KEY, icon: , - label: l('menu.datastudio.historyVision'), + label: l(RightMenuKey.HISTORY_VISION_KEY), children: , isShow: (type, subType) => type === TabsPageType.project && TabsPageSubType.flinkSql === subType }, { auth: '/datastudio/right/jobInfo', - key: 'menu.datastudio.jobInfo', + key: RightMenuKey.JOB_INFO_KEY, icon: , - label: l('menu.datastudio.jobInfo'), + label: l(RightMenuKey.JOB_INFO_KEY), children: , isShow: (type) => type === TabsPageType.project } ]; -export const LeftBottomSide = [ +export const LeftBottomSide: TabProp[] = [ { auth: '/datastudio/bottom/console', - key: 'menu.datastudio.console', + key: LeftBottomKey.CONSOLE_KEY, icon: , - label: l('menu.datastudio.console'), - children: + label: l(LeftBottomKey.CONSOLE_KEY), + children: , + isShow: (type, subType) => + type === TabsPageType.project && + subType?.toLowerCase() !== DIALECT.FLINKSQLENV && + subType?.toLowerCase() !== DIALECT.SCALA && + subType?.toLowerCase() !== DIALECT.PYTHON_LONG && + subType?.toLowerCase() !== DIALECT.JAVA }, { auth: '/datastudio/bottom/result', - key: 'menu.datastudio.result', + key: LeftBottomKey.RESULT_KEY, icon: , - label: l('menu.datastudio.result'), - children: + label: l(LeftBottomKey.RESULT_KEY), + children: , + isShow: (type, subType) => + type === TabsPageType.project && + subType?.toLowerCase() !== DIALECT.FLINKSQLENV && + subType?.toLowerCase() !== DIALECT.FLINKJAR && + subType?.toLowerCase() !== DIALECT.SCALA && + subType?.toLowerCase() !== DIALECT.PYTHON_LONG && + subType?.toLowerCase() !== DIALECT.JAVA }, { auth: '/datastudio/bottom/lineage', - key: 'menu.datastudio.lineage', + key: LeftBottomKey.LINEAGE_KEY, icon: , - label: l('menu.datastudio.lineage'), - children: + label: l(LeftBottomKey.LINEAGE_KEY), + children: , + isShow: (type, subType) => + type === TabsPageType.project && + subType?.toLowerCase() !== DIALECT.FLINKSQLENV && + subType?.toLowerCase() !== DIALECT.FLINKJAR && + subType?.toLowerCase() !== DIALECT.SCALA && + subType?.toLowerCase() !== DIALECT.PYTHON_LONG && + subType?.toLowerCase() !== DIALECT.JAVA }, { auth: '/datastudio/bottom/history', - key: 'menu.datastudio.history', + key: LeftBottomKey.HISTORY_KEY, icon: , - label: l('menu.datastudio.history'), - children: + label: l(LeftBottomKey.HISTORY_KEY), + children: , + isShow: (type, subType) => + type === TabsPageType.project && + !isSql(subType ?? '') && + subType?.toLowerCase() !== DIALECT.FLINKSQLENV && + subType?.toLowerCase() !== DIALECT.FLINKJAR && + subType?.toLowerCase() !== DIALECT.SCALA && + subType?.toLowerCase() !== DIALECT.PYTHON_LONG && + subType?.toLowerCase() !== DIALECT.JAVA }, { auth: '/datastudio/bottom/table-data', - key: 'menu.datastudio.table-data', + key: LeftBottomKey.TABLE_DATA_KEY, icon: , - label: l('menu.datastudio.table-data'), - children: + label: l(LeftBottomKey.TABLE_DATA_KEY), + children: , + isShow: (type, subType) => + type === TabsPageType.project && subType?.toLowerCase() === DIALECT.FLINK_SQL }, { auth: '/datastudio/bottom/tool', - key: 'menu.datastudio.tool', + key: LeftBottomKey.TOOLS_KEY, icon: , - label: l('menu.datastudio.tool') + label: l(LeftBottomKey.TOOLS_KEY), + children: <> } ]; diff --git a/dinky-web/src/pages/DevOps/JobDetail/AlertHistory/components/AlertHistoryList/index.tsx b/dinky-web/src/pages/DevOps/JobDetail/AlertHistory/components/AlertHistoryList/index.tsx index 44fd5ea655..60db0d63c8 100644 --- a/dinky-web/src/pages/DevOps/JobDetail/AlertHistory/components/AlertHistoryList/index.tsx +++ b/dinky-web/src/pages/DevOps/JobDetail/AlertHistory/components/AlertHistoryList/index.tsx @@ -142,6 +142,7 @@ const AlertHistoryList = (props: JobProps) => { <> rowKey={'id'} + style={{ height: 'calc(100vh - 240px)' }} dataSource={alertHistory.alertHistory} loading={alertHistory.loading} pagination={{ diff --git a/dinky-web/src/pages/DevOps/JobDetail/AlertHistory/index.tsx b/dinky-web/src/pages/DevOps/JobDetail/AlertHistory/index.tsx index a171e52593..3462ad786a 100644 --- a/dinky-web/src/pages/DevOps/JobDetail/AlertHistory/index.tsx +++ b/dinky-web/src/pages/DevOps/JobDetail/AlertHistory/index.tsx @@ -28,7 +28,6 @@ export default (props: JobProps) => { return ( - {' '} diff --git a/dinky-web/src/pages/DevOps/JobDetail/CheckPointsTab/components/CheckpointTable.tsx b/dinky-web/src/pages/DevOps/JobDetail/CheckPointsTab/components/CheckpointTable.tsx index fca3a332b2..be3d0e34ea 100644 --- a/dinky-web/src/pages/DevOps/JobDetail/CheckPointsTab/components/CheckpointTable.tsx +++ b/dinky-web/src/pages/DevOps/JobDetail/CheckPointsTab/components/CheckpointTable.tsx @@ -70,7 +70,7 @@ const CheckpointTable = (props: JobProps) => { onOk: async () => { const param = { id: jobDetail?.instance?.taskId, - isOnLine: jobDetail?.instance?.step == JOB_LIFE_CYCLE.ONLINE, + isOnLine: jobDetail?.instance?.step == JOB_LIFE_CYCLE.PUBLISH, savePointPath: row.external_path }; const result = await getData(API_CONSTANTS.RESTART_TASK_FROM_CHECKPOINT, param); @@ -176,7 +176,7 @@ const CheckpointTable = (props: JobProps) => { return ( columns={columns} - style={{ width: '100%' }} + style={{ width: '100%', height: 'calc(100vh - 450px)' }} dataSource={checkpoints?.history} onDataSourceChange={() => actionRef.current?.reload()} actionRef={actionRef} diff --git a/dinky-web/src/pages/DevOps/JobDetail/CheckPointsTab/components/SavePointTable.tsx b/dinky-web/src/pages/DevOps/JobDetail/CheckPointsTab/components/SavePointTable.tsx index 318bd2c518..1f81d00995 100644 --- a/dinky-web/src/pages/DevOps/JobDetail/CheckPointsTab/components/SavePointTable.tsx +++ b/dinky-web/src/pages/DevOps/JobDetail/CheckPointsTab/components/SavePointTable.tsx @@ -70,7 +70,7 @@ const SavepointTable = (props: JobProps) => { return ( columns={columns} - style={{ width: '100%' }} + style={{ width: '100%', height: 'calc(100vh - 450px)' }} request={(params, sorter, filter) => queryList(API_CONSTANTS.GET_SAVEPOINTS, { ...params, diff --git a/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/ExceptionTab.tsx b/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/ExceptionTab.tsx index 11f1342630..ca878dda83 100644 --- a/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/ExceptionTab.tsx +++ b/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/ExceptionTab.tsx @@ -84,7 +84,7 @@ const ExceptionTab = (props: JobProps) => { @@ -93,11 +93,7 @@ const ExceptionTab = (props: JobProps) => { ); }; - return ( - - {renderLogTab()} - - ); + return {renderLogTab()}; }; export default ExceptionTab; diff --git a/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/JobManagerLogsTab.tsx b/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/JobManagerLogsTab.tsx index f7850d148e..502f5b981c 100644 --- a/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/JobManagerLogsTab.tsx +++ b/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/JobManagerLogsTab.tsx @@ -76,7 +76,7 @@ const JobManagerLogsTab = (props: JobProps) => { showFloatButton language={language} code={buildDumpLog(ur) ?? 'No Log'} - height={parent.innerHeight - 300} + height={'calc(100vh - 250px)'} /> ); diff --git a/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/TaskManagerLogsTab.tsx b/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/TaskManagerLogsTab.tsx index d678ab524d..8cd246096a 100644 --- a/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/TaskManagerLogsTab.tsx +++ b/dinky-web/src/pages/DevOps/JobDetail/JobLogs/components/TaskManagerLogsTab.tsx @@ -95,7 +95,7 @@ const TaskManagerLogsTab = (props: JobProps) => { showFloatButton code={tmLog.data} language={'javalog'} - height={parent.innerHeight - 300} + height={'calc(100vh - 340px)'} /> diff --git a/dinky-web/src/pages/DevOps/JobDetail/JobMetrics/JobChart/JobChart.tsx b/dinky-web/src/pages/DevOps/JobDetail/JobMetrics/JobChart/JobChart.tsx index 7e48eb9655..370157fe1f 100644 --- a/dinky-web/src/pages/DevOps/JobDetail/JobMetrics/JobChart/JobChart.tsx +++ b/dinky-web/src/pages/DevOps/JobDetail/JobMetrics/JobChart/JobChart.tsx @@ -98,7 +98,7 @@ const JobChart = (props: JobChartProps) => { ); }); } - return ; + return ; }; return ( diff --git a/dinky-web/src/pages/DevOps/JobList/index.tsx b/dinky-web/src/pages/DevOps/JobList/index.tsx index 1abb5b6beb..2e47170cd6 100644 --- a/dinky-web/src/pages/DevOps/JobList/index.tsx +++ b/dinky-web/src/pages/DevOps/JobList/index.tsx @@ -107,7 +107,7 @@ const JobList = () => { }, []); return ( - + {...PROTABLE_OPTIONS_PUBLIC} search={false} diff --git a/dinky-web/src/pages/Home/DevOverView/index.tsx b/dinky-web/src/pages/Home/DevOverView/index.tsx index 430650698f..33a5ac4140 100644 --- a/dinky-web/src/pages/Home/DevOverView/index.tsx +++ b/dinky-web/src/pages/Home/DevOverView/index.tsx @@ -24,63 +24,53 @@ import TaskDialectRadar from '@/pages/Home/DevOverView/TaskDialectRadar'; import { l } from '@/utils/intl'; import { ProCard } from '@ant-design/pro-components'; import { Badge } from 'antd'; -import RcResizeObserver from 'rc-resize-observer'; -import React, { useState } from 'react'; +import React from 'react'; const noPadding = { paddingInline: '0', paddingBlock: '0', - height: parent.innerHeight / 2 + height: '100%' }; const DevOverView: React.FC = () => { - const [split, setSplit] = useState<'vertical' | 'horizontal' | undefined>('vertical'); - return ( - { - setSplit(offset.width < 596 ? 'horizontal' : 'vertical'); - }} + + + {l('home.develop')} + + } + headerBordered + bordered + size='small' + split={'vertical'} + bodyStyle={noPadding} > - - - {l('home.develop')} - - } - headerBordered - bordered - size='small' - split={split} - bodyStyle={noPadding} - > - - - - - - - - - - - - + + + + - - + + + + + + + + + - + ); }; diff --git a/dinky-web/src/pages/Home/index.tsx b/dinky-web/src/pages/Home/index.tsx index e3c5da6b7a..976dc8a9f8 100644 --- a/dinky-web/src/pages/Home/index.tsx +++ b/dinky-web/src/pages/Home/index.tsx @@ -25,20 +25,16 @@ import { Col, Row } from 'antd'; export default () => { return ( - + - + - + diff --git a/dinky-web/src/pages/Metrics/Job/index.tsx b/dinky-web/src/pages/Metrics/Job/index.tsx index 9d0a5cd015..c0a8f71085 100644 --- a/dinky-web/src/pages/Metrics/Job/index.tsx +++ b/dinky-web/src/pages/Metrics/Job/index.tsx @@ -240,7 +240,7 @@ const Job = () => { } extra={