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

service-web/client/package.json

@@ -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",

service-web/client/pnpm-lock.yaml

@@ -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)

service-web/client/src/components/Flow.tsx

@@ -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)

service-web/client/src/components/Registry.ts

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

service-web/client/src/index.tsx

@@ -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)}/>,
 )

service-web/client/src/pages/Ai.tsx

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

service-web/client/src/pages/App.tsx

@@ -28,19 +28,13 @@ const App: React.FC = () => {
       route={menus}
       location={{pathname: location.pathname}}
       menu={{type: 'sub'}}
-      menuItemRender={(item, dom) => (
+      menuItemRender={(item, dom) => {
-        <div
+        return <div onClick={() => navigate(item.path || '/')}>{dom}</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/>

service-web/client/src/pages/ai/Conversation.tsx

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

service-web/client/src/pages/ai/Inspection.tsx

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

service-web/client/src/pages/overview/Cloud.tsx

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

service-web/client/src/pages/overview/Overview.tsx

@@ -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,34 +169,38 @@ const tableDetailDialog = (variable: string, targetList: any) => {
 
 const overviewYarnJob = (cluster: string, search: string, queue: string | undefined, yarnQueue: string) => {
   return {
-    className: 'font-mono',
+    className: 'text-base leading-none',
-    type: 'service',
+    type: 'table-view',
-    api: `${commonInfo.baseUrl}/overview/yarn-job?cluster=${cluster}&search=${search}`,
+    border: false,
-    interval: 10000,
+    padding: '0 10px 0 15px',
-    silentPolling: true,
+    trs: [
-    body: [
       {
-        type: 'tpl',
+        tds: [
-        className: 'mr-1 font-bold',
+          {
-        tpl: `\${PADSTART('${cluster}', 3)}`,
+            body: `${cluster}`,
           },
-      queue === undefined ? {} : {
+          {
+            padding: '0px',
+            body: queue === undefined ? {} : {
               type: 'service',
-        className: 'inline ml-2',
+              api: `${commonInfo.baseUrl}/overview/queue?queue=${queue}`,
-        api: `${commonInfo.baseUrl}/overview/queue?queue=compaction-queue-${cluster}`,
               interval: 10000,
               silentPolling: true,
               body: [
                 {
                   type: 'tpl',
-            tpl: '${PADSTART(size, 2)}',
+                  tpl: '${size}',
                 },
               ],
             },
-      ' ',
+            width: 100,
+            align: 'center',
+          },
           {
+            padding: '0px',
+            width: 200,
+            body: {
               type: 'service',
-        className: 'inline',
               api: {
                 method: 'get',
                 url: `${commonInfo.baseUrl}/overview/yarn-cluster`,
@@ -222,38 +226,85 @@ const overviewYarnJob = (cluster: string, search: string, queue: string | undefi
               },
               interval: 10000,
               silentPolling: true,
-        body: [
+              body: {
-          '(',
+                type: 'table-view',
+                border: false,
+                trs: [
                   {
-            type: 'tpl',
+                    tds: [
-            tpl: '<span class="font-bold ${rootUsedColor}">${PADSTART(ROUND(rootUsed), 3)}%</span>',
-          },
-          ',',
                       {
+                        body: {
                           type: 'tpl',
-            tpl: '<span class="font-bold ${targetUsedColor}">${PADSTART(ROUND(targetUsed), 3)}%</span>',
+                          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',
                       },
-          ')',
                     ],
                   },
-      '(',
+                ],
-      {
-        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>',
             },
-      ')',
+          },
+          {
+            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',
+                      },
+                    ],
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
     ],
   }
 }
 
 const Overview: React.FC = () => {
   return (
-    <div className="hudi-overview bg-white">
+    <div className="hudi-overview">
       {amisRender(
         {
           type: 'wrapper',
@@ -346,12 +397,67 @@ const Overview: React.FC = () => {
                 },
               ],
             },
-            {type: 'divider'},
+            {
-            '<span class="italic text-gray-500 my-2">集群 (集群总资源使用,队列资源使用)(调度中任务数,运行中任务数)</span>',
+              className: 'pl-2 my-5',
+              type: 'wrapper',
+              size: 'none',
+              body: {
+                type: 'tpl',
+                tpl: '同步集群资源用量情况',
+              },
+            },
+            {
+              type: 'table-view',
+              border: false,
+              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',
+                    },
+                  ],
+                },
+              ],
+            },
             overviewYarnJob(commonInfo.clusters.sync_names(), 'Sync', undefined, 'default'),
             {type: 'divider'},
             {
-              className: 'my-2',
+              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,
@@ -363,7 +469,54 @@ const Overview: React.FC = () => {
                     },
                   ],
                 },
-            '<span class="italic text-gray-500 my-2">集群 压缩队列任务数(集群总资源使用,队列资源使用)(调度中任务数,运行中任务数)</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',
+                    },
+                  ],
+                },
+              ],
+            },
             // @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: [
                     {

service-web/client/src/pages/overview/Queue.tsx

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

service-web/client/src/pages/overview/Table.tsx

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

service-web/client/src/pages/overview/Task.tsx

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

service-web/client/src/pages/overview/Tool.tsx

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

service-web/client/src/pages/overview/Yarn.tsx

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

service-web/client/src/pages/overview/YarnCluster.tsx

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

service-web/client/src/route.tsx

@@ -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 {Navigate, type RouteObject} from 'react-router'
-import type {RouteObject} from 'react-router'
+import Conversation from './pages/ai/Conversation.tsx'
-import Ai from './pages/Ai.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'
@@ -28,11 +30,13 @@ export const routes: RouteObject[] = [
   {
     path: '/',
     Component: App,
-    children: [
-      {
     children: [
       {
         index: true,
+        element: <Navigate to="/overview" replace/>,
+      },
+      {
+        path: 'overview',
         Component: Overview,
       },
       {
@@ -67,17 +71,28 @@ export const routes: RouteObject[] = [
         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/>,
+        },
+      ],
+    },
   ],
 }