lanyuanxiaoyao/hudi-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 优化页面跳转和菜单展现

Browse Source
This commit is contained in:
v-zhangjc9
2025-05-12 15:59:46 +08:00
parent 1e7b195f9f
commit b0603d10bc
19 changed files with 336 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
service-web/client/package.json
View File

@@ -11,7 +11,6 @@
"dependencies": {
"@ant-design/icons": "^6.0.0",
"@ant-design/pro-components": "^2.8.7",
"@ant-design/pro-layout": "^7.22.4",
"@ant-design/x": "^1.2.0",
"@fortawesome/fontawesome-free": "^6.7.2",
"@tinyflow-ai/react": "^0.1.6",

3
service-web/client/pnpm-lock.yaml generated
View File

@@ -14,9 +14,6 @@ importers:
'@ant-design/pro-components':
specifier: ^2.8.7
version: 2.8.7(antd@5.25.0(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(rc-field-form@2.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@ant-design/pro-layout':
specifier: ^7.22.4
version: 7.22.4(antd@5.25.0(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@ant-design/x':
specifier: ^1.2.0
version: 1.2.0(antd@5.25.0(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)

0
service-web/client/src/components/Flow.scss
View File

25
service-web/client/src/components/Flow.tsx
View File

@@ -1,25 +0,0 @@
import {Tinyflow} from '@tinyflow-ai/react'
import {type FormControlProps, FormItem} from 'amis'
import React from 'react'
import './Flow.scss'
import '@tinyflow-ai/react/dist/index.css'
const Flow: React.FC<FormControlProps> = props => {
const {onChange} = props
return (
<div className="flowable">
<Tinyflow
className="tinyflow-instance"
style={{height: '800px'}}
onDataChange={(value) => {
onChange(value)
}}
/>
</div>
)
}
FormItem({
type: 'flow',
autoVar: true,
})(Flow)

1
service-web/client/src/components/Registry.ts
View File

@@ -1 +0,0 @@
import './Flow.tsx'

4
service-web/client/src/index.tsx
View File

@@ -1,10 +1,10 @@
import {createRoot} from 'react-dom/client'
import {createHashRouter, RouterProvider} from 'react-router'
import {createBrowserRouter, RouterProvider} from 'react-router'
import './components/Registry.ts'
import {routes} from './route.tsx'
createRoot(document.getElementById('root')!).render(
<RouterProvider router={createHashRouter(routes)}/>,
<RouterProvider router={createBrowserRouter(routes)}/>,
)

18
service-web/client/src/pages/Ai.tsx
View File

@@ -1,18 +0,0 @@
import {amisRender} from '../util/amis.ts'
function Ai() {
return (
<div className="ai">
{amisRender(
{
type: 'wrapper',
body: [
'逗你的，什么都没做，哎嘿！',
],
},
)}
</div>
)
}
export default Ai

14
service-web/client/src/pages/App.tsx
View File

@@ -28,19 +28,13 @@ const App: React.FC = () => {
route={menus}
location={{pathname: location.pathname}}
menu={{type: 'sub'}}
menuItemRender={(item, dom) => (
<div
onClick={() => {
navigate(item.path ?? '/')
}}
>
{dom}
</div>
)}
menuItemRender={(item, dom) => {
return <div onClick={() => navigate(item.path || '/')}>{dom}</div>
}}
fixSiderbar={true}
layout="mix"
splitMenus={true}
style={{height: '100vh'}}
style={{minHeight: '100vh'}}
contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
>
<Outlet/>

11
service-web/client/src/pages/ai/Conversation.tsx
View File

@@ -1,16 +1,7 @@
import {amisRender} from '../../util/amis.ts'
function Conversation() {
return (
<div className="conversation">
{amisRender(
{
type: 'wrapper',
body: [
"逗你的，什么都没做，哎嘿！"
],
},
)}
Conversation
</div>
)
}

9
service-web/client/src/pages/ai/Inspection.tsx Normal file
View File

@@ -0,0 +1,9 @@
function Inspection() {
return (
<div className="inspection">
逗你的，什么都没做，哎嘿！
</div>
)
}
export default Inspection

2
service-web/client/src/pages/overview/Cloud.tsx
View File

@@ -79,7 +79,7 @@ const cloudCrud = (title: string, path: string) => {
const Cloud: React.FC = () => {
return (
<div className="hudi-cloud bg-white">
<div className="hudi-cloud">
{amisRender(
{
type: 'wrapper',

321
service-web/client/src/pages/Overview.tsx → service-web/client/src/pages/overview/Overview.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import {amisRender, commonInfo, crudCommonOptions, readOnlyDialogOptions} from '../util/amis.ts'
import {amisRender, commonInfo, crudCommonOptions, readOnlyDialogOptions} from '../../util/amis.ts'
const color = (number: number) => {
let color = 'text-success'
@@ -169,91 +169,142 @@ const tableDetailDialog = (variable: string, targetList: any) => {
const overviewYarnJob = (cluster: string, search: string, queue: string | undefined, yarnQueue: string) => {
return {
className: 'font-mono',
type: 'service',
api: `${commonInfo.baseUrl}/overview/yarn-job?cluster=${cluster}&search=${search}`,
interval: 10000,
silentPolling: true,
body: [
className: 'text-base leading-none',
type: 'table-view',
border: false,
padding: '0 10px 0 15px',
trs: [
{
type: 'tpl',
className: 'mr-1 font-bold',
tpl: `\${PADSTART('${cluster}', 3)}`,
},
queue === undefined ? {} : {
type: 'service',
className: 'inline ml-2',
api: `${commonInfo.baseUrl}/overview/queue?queue=compaction-queue-${cluster}`,
interval: 10000,
silentPolling: true,
body: [
tds: [
{
type: 'tpl',
tpl: '${PADSTART(size, 2)}',
body: `${cluster}`,
},
],
},
' ',
{
type: 'service',
className: 'inline',
api: {
method: 'get',
url: `${commonInfo.baseUrl}/overview/yarn-cluster`,
data: {
cluster: cluster,
queue: yarnQueue,
{
padding: '0px',
body: queue === undefined ? {} : {
type: 'service',
api: `${commonInfo.baseUrl}/overview/queue?queue=${queue}`,
interval: 10000,
silentPolling: true,
body: [
{
type: 'tpl',
tpl: '${size}',
},
],
},
width: 100,
align: 'center',
},
// @ts-ignore
adaptor: function (payload, response) {
let rootUsed = (payload['data']['root']['usedCapacity'] * 100 / payload['data']['root']['capacity'])
let targetUsed = (payload['data']['target']['absoluteUsedCapacity'] * 100 / payload['data']['target']['absoluteMaxCapacity'])
return {
...payload,
data: {
...payload.data,
rootUsed: rootUsed,
rootUsedColor: color(rootUsed),
targetUsed: targetUsed,
targetUsedColor: color(targetUsed),
{
padding: '0px',
width: 200,
body: {
type: 'service',
api: {
method: 'get',
url: `${commonInfo.baseUrl}/overview/yarn-cluster`,
data: {
cluster: cluster,
queue: yarnQueue,
},
// @ts-ignore
adaptor: function (payload, response) {
let rootUsed = (payload['data']['root']['usedCapacity'] * 100 / payload['data']['root']['capacity'])
let targetUsed = (payload['data']['target']['absoluteUsedCapacity'] * 100 / payload['data']['target']['absoluteMaxCapacity'])
return {
...payload,
data: {
...payload.data,
rootUsed: rootUsed,
rootUsedColor: color(rootUsed),
targetUsed: targetUsed,
targetUsedColor: color(targetUsed),
},
}
},
},
}
interval: 10000,
silentPolling: true,
body: {
type: 'table-view',
border: false,
trs: [
{
tds: [
{
body: {
type: 'tpl',
tpl: '<span class="font-bold ${rootUsedColor}">${ROUND(rootUsed, 0)}%</span>',
},
width: 100,
align: 'center',
},
{
body: {
type: 'tpl',
tpl: '<span class="font-bold ${targetUsedColor}">${ROUND(targetUsed, 0)}%</span>',
},
width: 100,
align: 'center',
},
],
},
],
},
},
},
},
interval: 10000,
silentPolling: true,
body: [
'(',
{
type: 'tpl',
tpl: '<span class="font-bold ${rootUsedColor}">${PADSTART(ROUND(rootUsed), 3)}%</span>',
padding: '0px',
width: 200,
body: {
type: 'service',
api: {
url: `${commonInfo.baseUrl}/overview/yarn-job`,
data: {
cluster: cluster,
search: search,
},
},
interval: 10000,
silentPolling: true,
body: {
type: 'table-view',
border: false,
trs: [
{
tds: [
{
body: {
type: 'tpl',
tpl: '<span class=\'font-bold text-cyan-300\'>${scheduling}</span>',
},
width: 100,
align: 'center',
},
{
body: {
type: 'tpl',
tpl: '<span class="font-bold text-success">${running}</span>',
},
width: 100,
align: 'center',
},
],
},
],
},
},
},
',',
{
type: 'tpl',
tpl: '<span class="font-bold ${targetUsedColor}">${PADSTART(ROUND(targetUsed), 3)}%</span>',
},
')',
],
},
'(',
{
type: 'tpl',
tpl: '<span class=\'font-bold text-cyan-300\'>${PADSTART(scheduling, 2)}</span>',
},
',',
{
type: 'tpl',
tpl: '<span class="font-bold text-success">${PADSTART(running, 3)}</span>',
},
')',
],
}
}
const Overview: React.FC = () => {
return (
<div className="hudi-overview bg-white">
<div className="hudi-overview">
{amisRender(
{
type: 'wrapper',
@@ -346,24 +397,126 @@ const Overview: React.FC = () => {
},
],
},
{type: 'divider'},
'<span class="italic text-gray-500 my-2">集群 (集群总资源使用,队列资源使用)(调度中任务数,运行中任务数)</span>',
overviewYarnJob(commonInfo.clusters.sync_names(), 'Sync', undefined, 'default'),
{type: 'divider'},
{
className: 'my-2',
type: 'service',
api: `${commonInfo.baseUrl}/overview/queue?queue=compaction-queue-pre`,
interval: 10000,
silentPolling: true,
body: [
className: 'pl-2 my-5',
type: 'wrapper',
size: 'none',
body: {
type: 'tpl',
tpl: '同步集群资源用量情况',
},
},
{
type: 'table-view',
border: false,
trs: [
{
type: 'tpl',
tpl: '预调度队列：<span class="font-bold">${size}</span>',
background: '#F9F9F9',
tds: [
{
bold: true,
body: '集群',
},
{
bold: true,
body: '集群资源',
width: 100,
align: 'center',
},
{
bold: true,
body: '队列资源',
width: 100,
align: 'center',
},
{
bold: true,
body: '调度中',
width: 100,
align: 'center',
},
{
bold: true,
body: '运行中',
width: 100,
align: 'center',
},
],
},
],
},
overviewYarnJob(commonInfo.clusters.sync_names(), 'Sync', undefined, 'default'),
{type: 'divider'},
{
className: 'pl-2 my-5',
type: 'wrapper',
size: 'none',
body: [
{
type: 'tpl',
tpl: '压缩集群资源用量情况',
},
{
className: 'mt-2',
type: 'service',
api: `${commonInfo.baseUrl}/overview/queue?queue=compaction-queue-pre`,
interval: 10000,
silentPolling: true,
body: [
{
type: 'tpl',
tpl: '预调度队列：<span class="font-bold">${size}</span>',
},
],
},
],
},
{
type: 'table-view',
border: false,
bold: true,
trs: [
{
background: '#F9F9F9',
tds: [
{
bold: true,
body: '集群',
},
{
bold: true,
body: '队列',
width: 100,
align: 'center',
},
{
bold: true,
body: '集群资源',
width: 100,
align: 'center',
},
{
bold: true,
body: '队列资源',
width: 100,
align: 'center',
},
{
bold: true,
body: '调度中',
width: 100,
align: 'center',
},
{
bold: true,
body: '运行中',
width: 100,
align: 'center',
},
],
},
],
},
'<span class="italic text-gray-500 my-2">集群 压缩队列任务数(集群总资源使用,队列资源使用)(调度中任务数,运行中任务数)</span>',
// @ts-ignore
...Object.keys(commonInfo.clusters.compaction).map(name => overviewYarnJob(name, 'Compaction', `compaction-queue-${name}`, commonInfo.clusters.compaction[name])),
{type: 'divider'},
@@ -379,7 +532,7 @@ const Overview: React.FC = () => {
source: '${items}',
...crudCommonOptions(),
headerToolbar: [
'${version}'
'${version}',
],
columns: [
{

4
service-web/client/src/pages/overview/Queue.tsx
View File

@@ -12,7 +12,7 @@ const queueCrud = (name: string) => {
return {
type: 'crud',
title: name,
api: `\${base}/queue/all?name=${name}`,
api: `${commonInfo.baseUrl}/queue/all?name=${name}`,
...crudCommonOptions(),
interval: 10000,
loadDataOnce: true,
@@ -79,7 +79,7 @@ const Queue = () => {
items.push(queueCrud(`compaction-queue-${name}`))
}
return (
<div className="hudi-queue bg-white overflow-y-scroll">
<div className="hudi-queue">
{amisRender(
{
type: 'wrapper',

2
service-web/client/src/pages/overview/Table.tsx
View File

@@ -18,7 +18,7 @@ import {
function Table() {
return (
<div className="hudi-table bg-white">
<div className="hudi-table">
{amisRender(
{
type: 'wrapper',

2
service-web/client/src/pages/overview/Task.tsx
View File

@@ -3,7 +3,7 @@ import {amisRender, commonInfo, paginationCommonOptions, serviceLogByAppName, ya
const Task: React.FC = () => {
return (
<div className="hudi-task bg-white">
<div className="hudi-task">
{amisRender(
{
type: 'wrapper',

2
service-web/client/src/pages/overview/Tool.tsx
View File

@@ -14,7 +14,7 @@ import {
const Tool: React.FC = () => {
return (
<div className="hudi-tool bg-white">
<div className="hudi-tool">
{amisRender(
{
type: 'wrapper',

2
service-web/client/src/pages/overview/Yarn.tsx
View File

@@ -13,7 +13,7 @@ const Yarn: React.FC = () => {
const {clusters, queue, search} = useParams()
const location = useLocation()
return (
<div key={location.key} className="hudi-yarn bg-white">
<div key={location.key} className="hudi-yarn">
{amisRender(
{
type: 'wrapper',

2
service-web/client/src/pages/overview/YarnCluster.tsx
View File

@@ -3,7 +3,7 @@ import {amisRender, commonInfo, yarnQueueCrud} from '../../util/amis.ts'
const YarnCluster: React.FC = () => {
return (
<div className="hudi-yarn-cluster bg-white">
<div className="hudi-yarn-cluster">
{amisRender(
{
type: 'wrapper',

122
service-web/client/src/route.tsx
View File

@@ -4,17 +4,19 @@ import {
ClusterOutlined,
CompressOutlined,
InfoCircleOutlined,
OpenAIOutlined,
QuestionOutlined,
SunOutlined,
SyncOutlined,
TableOutlined,
ToolOutlined,
} from '@ant-design/icons'
import type {Route} from '@ant-design/pro-layout/es/typing'
import type {RouteObject} from 'react-router'
import Ai from './pages/Ai.tsx'
import {Navigate, type RouteObject} from 'react-router'
import Conversation from './pages/ai/Conversation.tsx'
import Inspection from './pages/ai/Inspection.tsx'
import App from './pages/App.tsx'
import Cloud from './pages/overview/Cloud.tsx'
import Overview from './pages/Overview.tsx'
import Overview from './pages/overview/Overview.tsx'
import Queue from './pages/overview/Queue.tsx'
import Table from './pages/overview/Table.tsx'
import Task from './pages/overview/Task.tsx'
@@ -30,54 +32,67 @@ export const routes: RouteObject[] = [
Component: App,
children: [
{
children: [
{
index: true,
Component: Overview,
},
{
path: 'table',
Component: Table,
},
{
path: 'queue',
Component: Queue,
},
{
path: 'version',
Component: Version,
},
{
path: 'yarn/:clusters/:queue/:search?',
Component: Yarn,
},
{
path: 'cloud',
Component: Cloud,
},
{
path: 'yarn_cluster',
Component: YarnCluster,
},
{
path: 'tool',
Component: Tool,
},
{
path: 'task',
Component: Task,
},
],
index: true,
element: <Navigate to="/overview" replace/>,
},
{
path: 'overview',
Component: Overview,
},
{
path: 'table',
Component: Table,
},
{
path: 'queue',
Component: Queue,
},
{
path: 'version',
Component: Version,
},
{
path: 'yarn/:clusters/:queue/:search?',
Component: Yarn,
},
{
path: 'cloud',
Component: Cloud,
},
{
path: 'yarn_cluster',
Component: YarnCluster,
},
{
path: 'tool',
Component: Tool,
},
{
path: 'task',
Component: Task,
},
{
path: 'ai',
Component: Ai,
children: [
{
index: true,
element: <Navigate to="/ai/inspection" replace/>,
},
{
path: 'inspection',
Component: Inspection,
},
{
path: 'conversation',
Component: Conversation,
},
],
},
],
},
]
export const menus: Route = {
export const menus = {
routes: [
{
path: '/',
@@ -85,7 +100,7 @@ export const menus: Route = {
icon: <InfoCircleOutlined/>,
routes: [
{
path: '/',
path: '/overview',
name: '概览',
icon: <InfoCircleOutlined/>,
},
@@ -120,7 +135,7 @@ export const menus: Route = {
icon: <CloudOutlined/>,
},
{
path: '/yarn_cluster',
path: 'a86f7c51-ae60-4ca4-8c4d-40b86b445a04',
name: '集群',
icon: <ClusterOutlined/>,
routes: [
@@ -152,6 +167,19 @@ export const menus: Route = {
{
path: '/ai',
name: 'AI',
}
icon: <OpenAIOutlined/>,
routes: [
{
path: '/ai/inspection',
name: '智能巡检',
icon: <CheckSquareOutlined/>,
},
{
path: '/ai/conversation',
name: '智慧问答',
icon: <QuestionOutlined/>,
},
],
},
],
}