From 3486bdb7b692e2b4c0e7f85f66376a54ca11f9eb Mon Sep 17 00:00:00 2001 From: zhu-mingye Date: Fri, 27 Oct 2023 16:59:20 +0000 Subject: [PATCH] Spotless Apply --- dinky-web/config/config.ts | 2 +- .../CustomEditor/CodeShow/index.tsx | 427 +++++++++--------- .../CustomEditor/languages/javalog/index.tsx | 33 +- .../Console/ConsoleContent.tsx | 285 ++++++------ .../BottomContainer/Result/index.tsx | 5 +- .../HeaderContainer/Explain/index.tsx | 47 +- 6 files changed, 411 insertions(+), 388 deletions(-) diff --git a/dinky-web/config/config.ts b/dinky-web/config/config.ts index bf1924c792..347dfaaef7 100644 --- a/dinky-web/config/config.ts +++ b/dinky-web/config/config.ts @@ -193,5 +193,5 @@ export default defineConfig({ strategy: 'normal' }, // requestRecord: {}, - dva: {}, + dva: {} }); diff --git a/dinky-web/src/components/CustomEditor/CodeShow/index.tsx b/dinky-web/src/components/CustomEditor/CodeShow/index.tsx index 097fab03c6..5fdaf87c5d 100644 --- a/dinky-web/src/components/CustomEditor/CodeShow/index.tsx +++ b/dinky-web/src/components/CustomEditor/CodeShow/index.tsx @@ -18,16 +18,15 @@ */ import EditorFloatBtn from '@/components/CustomEditor/EditorFloatBtn'; -import {CODE_EDIT_THEME, MonacoEditorOptions, THEME} from '@/types/Public/data'; -import {convertCodeEditTheme} from '@/utils/function'; -import {Editor, loader} from '@monaco-editor/react'; -import * as monaco from 'monaco-editor'; -import {editor} from 'monaco-editor'; -import {EditorLanguage} from 'monaco-editor/esm/metadata'; -import {useEffect, useState} from 'react'; +import { JavaLog } from '@/components/CustomEditor/languages/javalog'; +import useThemeValue from '@/hooks/useThemeValue'; +import { MonacoEditorOptions } from '@/types/Public/data'; +import { convertCodeEditTheme } from '@/utils/function'; +import { Editor } from '@monaco-editor/react'; +import { editor } from 'monaco-editor'; +import { EditorLanguage } from 'monaco-editor/esm/metadata'; +import { useEffect, useState } from 'react'; import FullscreenBtn from '../FullscreenBtn'; -import useThemeValue from "@/hooks/useThemeValue"; -import {JavaLog} from "@/components/CustomEditor/languages/javalog"; // loader.config({monaco}); /** @@ -38,234 +37,234 @@ import {JavaLog} from "@/components/CustomEditor/languages/javalog"; * 2. Callback for right-clicking to clear logs (optional, not required) */ export type CodeShowFormProps = { - height?: string | number; - width?: string; - language?: EditorLanguage | string; - options?: any; - code: string; - lineNumbers?: string; - autoWrap?: string; - showFloatButton?: boolean; - refreshLogCallback?: () => void; - fullScreenBtn?: boolean; - style?: React.CSSProperties; + height?: string | number; + width?: string; + language?: EditorLanguage | string; + options?: any; + code: string; + lineNumbers?: string; + autoWrap?: string; + showFloatButton?: boolean; + refreshLogCallback?: () => void; + fullScreenBtn?: boolean; + style?: React.CSSProperties; }; const CodeShow = (props: CodeShowFormProps) => { - /** - * 1. height: edit height - * 2. width: edit width - * 3. language: edit language - * 4. options: edit options - * 5. code: content - * 6. readOnly: is readOnly, value: true | false - * 7. lineNumbers: is show lineNumbers, value: on | off | relative | interval - * 8. theme: edit theme , value: vs-dark | vs | hc-black - * 9. autoWrap: is auto wrap, value: on | off | wordWrapColumn | bounded - */ - const { - height = '30vh', // if null or undefined, set default value - width = '100%', // if null or undefined, set default value - language, - options = { - ...MonacoEditorOptions // set default options - }, - code, // content - lineNumbers, // show lineNumbers - autoWrap = 'on', // auto wrap - showFloatButton = false, - refreshLogCallback, - fullScreenBtn = false - } = props; + /** + * 1. height: edit height + * 2. width: edit width + * 3. language: edit language + * 4. options: edit options + * 5. code: content + * 6. readOnly: is readOnly, value: true | false + * 7. lineNumbers: is show lineNumbers, value: on | off | relative | interval + * 8. theme: edit theme , value: vs-dark | vs | hc-black + * 9. autoWrap: is auto wrap, value: on | off | wordWrapColumn | bounded + */ + const { + height = '30vh', // if null or undefined, set default value + width = '100%', // if null or undefined, set default value + language, + options = { + ...MonacoEditorOptions // set default options + }, + code, // content + lineNumbers, // show lineNumbers + autoWrap = 'on', // auto wrap + showFloatButton = false, + refreshLogCallback, + fullScreenBtn = false + } = props; - const {ScrollType} = editor; + const { ScrollType } = editor; - const [scrollBeyondLastLine] = useState(options.scrollBeyondLastLine); + const [scrollBeyondLastLine] = useState(options.scrollBeyondLastLine); - const [loading, setLoading] = useState(false); - const [stopping, setStopping] = useState(false); - const [autoRefresh, setAutoRefresh] = useState(false); - const [fullScreen, setFullScreen] = useState(false); - const [editorRef, setEditorRef] = useState(); - const [timer, setTimer] = useState(); - const themeValue = useThemeValue(); - useEffect(() => { - JavaLog(); - }, []) + const [loading, setLoading] = useState(false); + const [stopping, setStopping] = useState(false); + const [autoRefresh, setAutoRefresh] = useState(false); + const [fullScreen, setFullScreen] = useState(false); + const [editorRef, setEditorRef] = useState(); + const [timer, setTimer] = useState(); + const themeValue = useThemeValue(); + useEffect(() => { + JavaLog(); + }, []); - // // register TypeScript language service, if language is not set default value is typescript! - // monaco.languages.register({ - // id: language || "typescript", - // }); + // // register TypeScript language service, if language is not set default value is typescript! + // monaco.languages.register({ + // id: language || "typescript", + // }); - /** - * handle sync log - * @returns {Promise} - */ - const handleSyncLog = async () => { - setLoading(true); - setInterval(() => { - refreshLogCallback?.(); - setLoading(false); - }, 1000); - }; + /** + * handle sync log + * @returns {Promise} + */ + const handleSyncLog = async () => { + setLoading(true); + setInterval(() => { + refreshLogCallback?.(); + setLoading(false); + }, 1000); + }; - /** - * handle stop auto refresh log - */ - const handleStopAutoRefresh = () => { - setStopping(true); - setInterval(() => { - clearInterval(timer); - setStopping(false); - setAutoRefresh(false); - }, 1000); - }; + /** + * handle stop auto refresh log + */ + const handleStopAutoRefresh = () => { + setStopping(true); + setInterval(() => { + clearInterval(timer); + setStopping(false); + setAutoRefresh(false); + }, 1000); + }; - /** - * handle stop auto refresh log - */ - const handleStartAutoRefresh = async () => { - setAutoRefresh(true); - const timerSync = setInterval(() => { - handleSyncLog(); - }, 5000); - setTimer(timerSync); - }; + /** + * handle stop auto refresh log + */ + const handleStartAutoRefresh = async () => { + setAutoRefresh(true); + const timerSync = setInterval(() => { + handleSyncLog(); + }, 5000); + setTimer(timerSync); + }; - /** - * handle scroll to top - */ - const handleBackTop = () => { - editorRef.revealLine(1); - }; + /** + * handle scroll to top + */ + const handleBackTop = () => { + editorRef.revealLine(1); + }; - /** - * handle scroll to bottom - */ - const handleBackBottom = () => { - editorRef.revealLine(editorRef.getModel().getLineCount()); - }; + /** + * handle scroll to bottom + */ + const handleBackBottom = () => { + editorRef.revealLine(editorRef.getModel().getLineCount()); + }; - /** - * handle scroll to down - */ - const handleDownScroll = () => { - editorRef.setScrollPosition({scrollTop: editorRef.getScrollTop() + 500}, ScrollType.Smooth); - }; + /** + * handle scroll to down + */ + const handleDownScroll = () => { + editorRef.setScrollPosition({ scrollTop: editorRef.getScrollTop() + 500 }, ScrollType.Smooth); + }; - /** - * handle scroll to up - */ - const handleUpScroll = () => { - editorRef?.setScrollPosition({scrollTop: editorRef.getScrollTop() - 500}, ScrollType.Smooth); - }; + /** + * handle scroll to up + */ + const handleUpScroll = () => { + editorRef?.setScrollPosition({ scrollTop: editorRef.getScrollTop() - 500 }, ScrollType.Smooth); + }; - /** - * editorDidMount - * @param {editor.IStandaloneCodeEditor} editor - */ - const editorDidMount = (editor: editor.IStandaloneCodeEditor) => { - setEditorRef(editor); - editor.layout(); - editor.focus(); - if (scrollBeyondLastLine) { - editor.onDidChangeModelContent(() => { - const lineCount = editor.getModel()?.getLineCount() as number; - if (lineCount > 20) { - editor.revealLine(lineCount); - } else { - editor.revealLine(1); - } - }); + /** + * editorDidMount + * @param {editor.IStandaloneCodeEditor} editor + */ + const editorDidMount = (editor: editor.IStandaloneCodeEditor) => { + setEditorRef(editor); + editor.layout(); + editor.focus(); + if (scrollBeyondLastLine) { + editor.onDidChangeModelContent(() => { + const lineCount = editor.getModel()?.getLineCount() as number; + if (lineCount > 20) { + editor.revealLine(lineCount); + } else { + editor.revealLine(1); } - }; + }); + } + }; - const restEditBtnProps = { - refreshLogCallback, - autoRefresh, - stopping, - loading, - handleSyncLog, - handleStopAutoRefresh, - handleStartAutoRefresh, - handleBackTop, - handleBackBottom, - handleUpScroll, - handleDownScroll - }; + const restEditBtnProps = { + refreshLogCallback, + autoRefresh, + stopping, + loading, + handleSyncLog, + handleStopAutoRefresh, + handleStartAutoRefresh, + handleBackTop, + handleBackBottom, + handleUpScroll, + handleDownScroll + }; - /** - * render - */ - return ( -
- {/* fullScreen button */} - {fullScreenBtn && ( - setFullScreen(!fullScreen)} - /> - )} + /** + * render + */ + return ( +
+ {/* fullScreen button */} + {fullScreenBtn && ( + setFullScreen(!fullScreen)} + /> + )} - {/* editor */} - + // Render vertical scrollbar. + // Accepted values: 'auto', 'visible', 'hidden'. + // Defaults to 'auto' + vertical: 'visible', + // Render horizontal scrollbar. + // Accepted values: 'auto', 'visible', 'hidden'. + // Defaults to 'auto' + horizontal: 'visible', + verticalScrollbarSize: 8, + horizontalScrollbarSize: 8, + arrowSize: 30 + } + }} + onMount={editorDidMount} + theme={convertCodeEditTheme()} + /> - {/* float button */} - {showFloatButton && ( -
- -
- )} + {/* float button */} + {showFloatButton && ( +
+
- ); + )} +
+ ); }; export default CodeShow; diff --git a/dinky-web/src/components/CustomEditor/languages/javalog/index.tsx b/dinky-web/src/components/CustomEditor/languages/javalog/index.tsx index 46ea07c63e..8485a8a002 100644 --- a/dinky-web/src/components/CustomEditor/languages/javalog/index.tsx +++ b/dinky-web/src/components/CustomEditor/languages/javalog/index.tsx @@ -1,20 +1,19 @@ -import {editor} from "monaco-editor"; -import {languages} from "monaco-editor"; +import { languages } from 'monaco-editor'; // todo 自定义语言不生效 -export const JavaLog = () => { - // Register a new language - languages.register({ id: "java-log" }); +export const JavaLog = () => { + // Register a new language + languages.register({ id: 'java-log' }); -// Register a tokens provider for the language - languages.setMonarchTokensProvider("java-log", { - tokenizer: { - root: [ - [/\[error.*/, "custom-error"], - [/\[notice.*/, "custom-notice"], - [/.*/, "custom-info"], - [/\[[a-zA-Z 0-9:]+\]/, "custom-date"], - ], - }, - }); -} \ No newline at end of file + // Register a tokens provider for the language + languages.setMonarchTokensProvider('java-log', { + tokenizer: { + root: [ + [/\[error.*/, 'custom-error'], + [/\[notice.*/, 'custom-notice'], + [/.*/, 'custom-info'], + [/\[[a-zA-Z 0-9:]+\]/, 'custom-date'] + ] + } + }); +}; diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/Console/ConsoleContent.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/Console/ConsoleContent.tsx index e9029b3d27..750ec23159 100644 --- a/dinky-web/src/pages/DataStudio/BottomContainer/Console/ConsoleContent.tsx +++ b/dinky-web/src/pages/DataStudio/BottomContainer/Console/ConsoleContent.tsx @@ -19,167 +19,172 @@ import CodeShow from '@/components/CustomEditor/CodeShow'; import MovableSidebar from '@/components/Sidebar/MovableSidebar'; -import {SseData} from '@/models/Sse'; -import {DataStudioTabsItemType, StateType} from '@/pages/DataStudio/model'; -import {SSE_TOPIC} from '@/pages/DevOps/constants'; -import {API_CONSTANTS} from '@/services/endpoints'; -import {parseMilliSecondStr} from '@/utils/function'; -import {connect, useModel, useRequest} from '@@/exports'; -import {CheckOutlined, CloseCircleFilled, LoadingOutlined} from '@ant-design/icons'; -import {Empty, Space, Typography} from 'antd'; -import {DataNode} from 'antd/es/tree'; +import useThemeValue from '@/hooks/useThemeValue'; +import { SseData } from '@/models/Sse'; +import { DataStudioTabsItemType, StateType } from '@/pages/DataStudio/model'; +import { SSE_TOPIC } from '@/pages/DevOps/constants'; +import { API_CONSTANTS } from '@/services/endpoints'; +import { parseMilliSecondStr } from '@/utils/function'; +import { connect, useModel, useRequest } from '@@/exports'; +import { CheckOutlined, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons'; +import { Empty, Space, Typography } from 'antd'; +import { DataNode } from 'antd/es/tree'; import DirectoryTree from 'antd/es/tree/DirectoryTree'; -import {Key, useEffect, useState} from 'react'; -import useThemeValue from "@/hooks/useThemeValue"; +import { Key, useEffect, useState } from 'react'; -const {Text} = Typography; +const { Text } = Typography; export type ConsoleProps = { - tab: DataStudioTabsItemType; - height: number; + tab: DataStudioTabsItemType; + height: number; }; export interface ProcessStep extends DataNode { - status: string; - type: string; - startTime: string; - endTime: string; - time: number; - log: string; - lastUpdateStep: ProcessStep; - children: ProcessStep[]; + status: string; + type: string; + startTime: string; + endTime: string; + time: number; + log: string; + lastUpdateStep: ProcessStep; + children: ProcessStep[]; } const buildExpandKeys = (node: ProcessStep) => { - const keys: Key[] = []; - keys.push(node.key); - if (node.children.length > 0) { - node.children.forEach((item: ProcessStep) => { - keys.push(...buildExpandKeys(item)); - }); - } - return keys; + const keys: Key[] = []; + keys.push(node.key); + if (node.children.length > 0) { + node.children.forEach((item: ProcessStep) => { + keys.push(...buildExpandKeys(item)); + }); + } + return keys; }; const ConsoleContent = (props: ConsoleProps) => { - const {tab} = props; + const { tab } = props; - const [selectNode, setSelectNode] = useState(); - const [processNode, setProcessNode] = useState(); - const [expandedKeys, setExpandedKeys] = useState([]); + const [selectNode, setSelectNode] = useState(); + const [processNode, setProcessNode] = useState(); + const [expandedKeys, setExpandedKeys] = useState([]); - const process = `FlinkSubmit/${tab.params.taskId}`; - const topic = `${SSE_TOPIC.PROCESS_CONSOLE}/${process}`; - const {subscribeTopic} = useModel('Sse', (model: any) => ({ - subscribeTopic: model.subscribeTopic - })); - const themeValue = useThemeValue(); + const process = `FlinkSubmit/${tab.params.taskId}`; + const topic = `${SSE_TOPIC.PROCESS_CONSOLE}/${process}`; + const { subscribeTopic } = useModel('Sse', (model: any) => ({ + subscribeTopic: model.subscribeTopic + })); + const themeValue = useThemeValue(); - const onUpdate = (data: ProcessStep) => { - setProcessNode((prevState: any) => { - //如果key不一致代表重新提交了任务，清空旧状态 - if (prevState && prevState.key != data.key) { - setSelectNode(undefined); - } - return data; - }); - setSelectNode((prevState: any) => { - if (prevState && prevState.key == data.lastUpdateStep.key) { - //更新当前节点 - return data.lastUpdateStep; - } else if (!prevState || prevState.key == data.key) { - //未选择节点状态下选择根节点 - return data; - } - return prevState; - }); - }; + const onUpdate = (data: ProcessStep) => { + setProcessNode((prevState: any) => { + //如果key不一致代表重新提交了任务，清空旧状态 + if (prevState && prevState.key != data.key) { + setSelectNode(undefined); + } + return data; + }); + setSelectNode((prevState: any) => { + if (prevState && prevState.key == data.lastUpdateStep.key) { + //更新当前节点 + return data.lastUpdateStep; + } else if (!prevState || prevState.key == data.key) { + //未选择节点状态下选择根节点 + return data; + } + return prevState; + }); + }; - useRequest( - {url: API_CONSTANTS.PROCESS_LOG, params: {processName: process}}, - {onSuccess: async (res) => onUpdate(res)} - ); - useEffect(() => subscribeTopic([topic], (data: SseData) => onUpdate(data.data)), []); - const onSelect = (_selectedKeys: Key[], info: { - node: ProcessStep - }) => setSelectNode(info.node); + useRequest( + { url: API_CONSTANTS.PROCESS_LOG, params: { processName: process } }, + { onSuccess: async (res) => onUpdate(res) } + ); + useEffect(() => subscribeTopic([topic], (data: SseData) => onUpdate(data.data)), []); + const onSelect = ( + _selectedKeys: Key[], + info: { + node: ProcessStep; + } + ) => setSelectNode(info.node); - const renderTitle = (node: any) => { - const startDate = new Date(node.startTime); - const endDate = new Date(); - const duration = node.time ? node.time : endDate.getTime() - startDate.getTime(); - return ( - - {node.status == 'RUNNING' && } - {node.status == 'FINISHED' && ( - - )} - {node.status == 'FAILED' && ( - - )} - {node.title} - - {parseMilliSecondStr(duration)} - - - ); - }; + const renderTitle = (node: any) => { + const startDate = new Date(node.startTime); + const endDate = new Date(); + const duration = node.time ? node.time : endDate.getTime() - startDate.getTime(); + return ( + + {node.status == 'RUNNING' && } + {node.status == 'FINISHED' && ( + + )} + {node.status == 'FAILED' && ( + + )} + {node.title} + + {parseMilliSecondStr(duration)} + + + ); + }; - useEffect(() => { - if (processNode) { - setExpandedKeys(buildExpandKeys(processNode)); - } - }, [processNode]); + useEffect(() => { + if (processNode) { + setExpandedKeys(buildExpandKeys(processNode)); + } + }, [processNode]); - const handleExpand = (expandedKeys: Key[]) => { - setExpandedKeys(expandedKeys); - }; + const handleExpand = (expandedKeys: Key[]) => { + setExpandedKeys(expandedKeys); + }; - return ( -
- - {processNode ? ( - - ) : ( - - )} - -
- -
-
- ); + return ( +
+ + {processNode ? ( + + ) : ( + + )} + +
+ +
+
+ ); }; -export default connect(({Studio}: { - Studio: StateType -}) => ({ - height: Studio.bottomContainer.height, - console: Studio.bottomContainerContent.console +export default connect(({ Studio }: { Studio: StateType }) => ({ + height: Studio.bottomContainer.height, + console: Studio.bottomContainerContent.console }))(ConsoleContent); diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx index 43021cc098..8eece0b598 100644 --- a/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx +++ b/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx @@ -24,8 +24,7 @@ import { } from '@/pages/DataStudio/function'; import { isSql } from '@/pages/DataStudio/HeaderContainer/service'; import { StateType } from '@/pages/DataStudio/model'; -import { postAll } from '@/services/api'; -import {handleGetOption, handleGetOptionWithoutMsg} from '@/services/BusinessCrud'; +import { handleGetOption, handleGetOptionWithoutMsg } from '@/services/BusinessCrud'; import { API_CONSTANTS } from '@/services/endpoints'; import { transformTableDataToCsv } from '@/utils/function'; import { l } from '@/utils/intl'; @@ -238,7 +237,7 @@ const Result = (props: any) => { {data.columns ? ( { return { ...item, key: index }; })} diff --git a/dinky-web/src/pages/DataStudio/HeaderContainer/Explain/index.tsx b/dinky-web/src/pages/DataStudio/HeaderContainer/Explain/index.tsx index dbb149c421..490b316b12 100644 --- a/dinky-web/src/pages/DataStudio/HeaderContainer/Explain/index.tsx +++ b/dinky-web/src/pages/DataStudio/HeaderContainer/Explain/index.tsx @@ -24,7 +24,7 @@ import { StateType } from '@/pages/DataStudio/model'; import { l } from '@/utils/intl'; import { ConsoleSqlOutlined } from '@ant-design/icons'; import ProList from '@ant-design/pro-list'; -import {Button, Drawer, Space, Tag, Typography} from 'antd'; +import { Drawer, Space, Tag, Typography } from 'antd'; import React, { useEffect, useState } from 'react'; import { connect } from 'umi'; @@ -48,8 +48,8 @@ export type ExplainProps = { const Explain: React.FC = (props: any) => { const [explainData, setExplainData] = useState([]); const [result, setResult] = useState({l('pages.datastudio.explain.validate')}); - const [showModal,setShowModal] = useState(false); - const [explainInfo,setExplainInfo] = useState(""); + const [showModal, setShowModal] = useState(false); + const [explainInfo, setExplainInfo] = useState(''); const { tabs: { panes, activeKey } } = props; @@ -105,9 +105,9 @@ const Explain: React.FC = (props: any) => { } }); }, []); - const showPlanDrawer = (info:string) => { + const showPlanDrawer = (info: string) => { setShowModal(true); - setExplainInfo(info) + setExplainInfo(info); }; const renderContent = () => { return ( @@ -147,18 +147,28 @@ const Explain: React.FC = (props: any) => { return ( <> {row.sql ? ( - <> - - {row.sql} - - + <> + + {row.sql} + + ) : null} {row.error ? ( ) : null} - {row.explain ? showPlanDrawer(row.explain)} style={{float:"right"}} type={"link"}>Show Plan :<>} + {row.explain ? ( + showPlanDrawer(row.explain)} + style={{ float: 'right' }} + type={'link'} + > + Show Plan + + ) : ( + <> + )} ); } @@ -207,8 +217,19 @@ const Explain: React.FC = (props: any) => {
{result}
{renderContent()} - setShowModal(false)} open={showModal}> - + setShowModal(false)} + open={showModal} + > + );