From c1a02472312a622972371388b8295c51360d660f Mon Sep 17 00:00:00 2001 From: renyongdong Date: Fri, 8 Nov 2024 15:23:19 +0800 Subject: [PATCH 1/3] feat: update job,extension --- .../studio-components/src/Icons/Filter.tsx | 20 ++++ .../studio-components/src/Icons/index.tsx | 1 + .../src/components/table-parcel/index.tsx | 32 +++++ .../src/pages/extension/create-plugins.tsx | 81 ++++++++----- .../src/pages/extension/left-side.tsx | 5 +- .../src/pages/extension/plugins.tsx | 33 +++-- .../src/pages/extension/right-side.tsx | 6 +- .../src/pages/job/job-detail.tsx | 113 +++++++++++++++--- .../studio-website/src/pages/job/job-list.tsx | 68 +++++++---- 9 files changed, 275 insertions(+), 84 deletions(-) create mode 100644 packages/studio-components/src/Icons/Filter.tsx create mode 100644 packages/studio-website/src/components/table-parcel/index.tsx diff --git a/packages/studio-components/src/Icons/Filter.tsx b/packages/studio-components/src/Icons/Filter.tsx new file mode 100644 index 000000000..a2c8995f8 --- /dev/null +++ b/packages/studio-components/src/Icons/Filter.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; + +interface IFilterProps { + style?: React.CSSProperties; +} + +const Filter: React.FC = ({ style = {} }) => { + const { color = '#212121', fontSize = '16px' } = style; + + return ( + + + + ); +}; + +export default Filter; diff --git a/packages/studio-components/src/Icons/index.tsx b/packages/studio-components/src/Icons/index.tsx index cb37bee9b..4f1c8f1c3 100644 --- a/packages/studio-components/src/Icons/index.tsx +++ b/packages/studio-components/src/Icons/index.tsx @@ -15,3 +15,4 @@ export { default as Lasso } from './Lasso'; export { default as File } from './File'; export { default as Arrow } from './Arrow'; export { default as Punctuation } from './Punctuation'; +export { default as Filter } from './Filter'; diff --git a/packages/studio-website/src/components/table-parcel/index.tsx b/packages/studio-website/src/components/table-parcel/index.tsx new file mode 100644 index 000000000..797cfa4d0 --- /dev/null +++ b/packages/studio-website/src/components/table-parcel/index.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { ConfigProvider } from 'antd'; +import { useStudioProvier } from '@graphscope/studio-components'; +type ITableParcelProps = { + children: React.ReactNode; +}; +const TableParcel: React.FC = ({ children }) => { + const { isLight } = useStudioProvier(); + return ( + +
+ {children} +
+ + ); +}; + +export default TableParcel; diff --git a/packages/studio-website/src/pages/extension/create-plugins.tsx b/packages/studio-website/src/pages/extension/create-plugins.tsx index cd4027716..6c843e6f8 100644 --- a/packages/studio-website/src/pages/extension/create-plugins.tsx +++ b/packages/studio-website/src/pages/extension/create-plugins.tsx @@ -1,8 +1,7 @@ import React, { useEffect, useState, useCallback } from 'react'; -import { Form, Button, Divider } from 'antd'; -import { useNavigate } from 'react-router-dom'; +import { Form, Button, Flex, Divider } from 'antd'; import { FormattedMessage } from 'react-intl'; -import { Utils, SplitSection } from '@graphscope/studio-components'; +import { Utils, SplitSection, useStudioProvier } from '@graphscope/studio-components'; import Section from '../../components/section'; import LeftSide from './left-side'; import RightSide from './right-side'; @@ -12,7 +11,7 @@ import { createProcedure, updateProcedure, listGraphs, getProcedure } from './se import { useHistory } from '../../hooks/'; const { getUrlParams } = Utils; const CreatePlugins: React.FC = () => { - console.log(getUrlParams()); + const { isLight } = useStudioProvier(); const { graph_id, procedure_id } = getUrlParams(); const [form] = Form.useForm(); const history = useHistory(); @@ -116,33 +115,55 @@ const CreatePlugins: React.FC = () => { ]} desc="Expand its functionality or offer solutions that are finely tuned to specific needs." > - - - + + - } - rightSide={} - /> -
- -
+ {/* */} + + + + + {/* + } + rightSide={} + /> */} + + + + + ); }; diff --git a/packages/studio-website/src/pages/extension/left-side.tsx b/packages/studio-website/src/pages/extension/left-side.tsx index 0c412fa2f..9a314506c 100644 --- a/packages/studio-website/src/pages/extension/left-side.tsx +++ b/packages/studio-website/src/pages/extension/left-side.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Card } from 'antd'; import CodeMirror from '@uiw/react-codemirror'; import { useCustomToken } from '@graphscope/studio-components'; import { useEditorTheme } from '../../pages/utils'; @@ -14,7 +15,7 @@ const LeftSide: React.FC = props => { const { editCode, isEdit, onCodeMirrorChange, onChange } = props; const { codeMirrorBorder } = useCustomToken(); return ( - <> +
= props => { readOnly={isEdit} />
- +
); }; diff --git a/packages/studio-website/src/pages/extension/plugins.tsx b/packages/studio-website/src/pages/extension/plugins.tsx index ef5b5c4f2..10d1d7436 100644 --- a/packages/studio-website/src/pages/extension/plugins.tsx +++ b/packages/studio-website/src/pages/extension/plugins.tsx @@ -1,14 +1,16 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { Table, Button, Space, Skeleton, Popconfirm, message } from 'antd'; +import { Table, Button, Space, Skeleton, Popconfirm, message, ConfigProvider } from 'antd'; import { FormattedMessage } from 'react-intl'; import { listProcedures, deleteProcedure } from './service'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTrashCan, faPenToSquare } from '@fortawesome/free-regular-svg-icons'; +import TableParcel from '../../components/table-parcel'; import { useHistory } from '../../hooks'; export interface Item { key: string; + id: string; name: string; type: string; bound_graph: string; @@ -22,20 +24,29 @@ const Plugins: React.FC = () => { /** 控制骨架屏 */ isReady: boolean; open: boolean; + isLoading: boolean; }>({ pluginList: [], isReady: true, open: false, + isLoading: false, }); - const { isReady, pluginList } = state; + const { isReady, pluginList, isLoading } = state; /** 获取插件列表数据 */ const getPlugins = useCallback(async () => { + updateState(preset => { + return { + ...preset, + isLoading: true, + }; + }); const res = await listProcedures(); //@ts-ignore updateState(preset => { return { ...preset, pluginList: res || [], + isLoading: false, }; }); }, []); @@ -73,7 +84,6 @@ const Plugins: React.FC = () => { key: 'actions', width: 60, render: (_: any, all: Item) => { - //@ts-ignore const { bound_graph, id } = all; return ( @@ -109,7 +119,7 @@ const Plugins: React.FC = () => { return ( <>