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

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',