[Optimization-3689][web] Optimize the worker's place page display (#3699

) Co-authored-by: suxinshuo <[email protected]> Co-authored-by: suxinshuo <[email protected]>
DataLinkDC · Aug 12, 2024 · 39a2168 · 39a2168
1 parent 2aaa1e0
commit 39a2168
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/dinky-web/src/pages/Home/components/OSMetrics/OSMetrics.tsx b/dinky-web/src/pages/Home/components/OSMetrics/OSMetrics.tsx
@@ -48,7 +48,7 @@ const OSMetrics = () => {
     return (
       <Progress
         percent={precent}
-        size={type === 'dashboard' ? 100 : [200, 15]}
+        size={type === 'dashboard' ? 50 : [-1, 15]}
         percentPosition={{ align: 'center', type: 'inner' }}
         format={() => `${used}${unit}`}
         strokeColor={twoColors}

diff --git a/dinky-web/src/pages/Home/index.tsx b/dinky-web/src/pages/Home/index.tsx
@@ -17,7 +17,7 @@
  *
  */
 
-import { PageContainer, ProCard } from '@ant-design/pro-components';
+import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
 import { Card, Col, Row } from 'antd';
 import React, { FC } from 'react';
 import useHookRequest from '@/hooks/useHookRequest';
@@ -40,22 +40,35 @@ const Workplace: FC = () => {
 
   const ExtraContent: FC<Record<string, any>> = () => {
     return (
-      <ProCard layout='center' ghost>
-        <StatisticsCard
-          title={l('devops.joblist.status.running')}
-          value={statusCount?.running}
-          icon={<RunningIcons size={50} />}
-        />
-        <StatisticsCard
-          title={l('devops.joblist.status.failed')}
-          value={statusCount?.failed}
-          icon={<ErrorIcons size={50} />}
-        />
-        <StatisticsCard
-          title={l('devops.joblist.status.unknown')}
-          value={statusCount?.unknown}
-          icon={<UnknownIcons size={50} />}
-        />
+      <ProCard split={'vertical'} ghost>
+        <StatisticCard.Group bodyStyle={{ alignContent: 'center' }} ghost>
+          <StatisticCard
+            hoverable={true}
+            statistic={{
+              title: l('devops.joblist.status.running'),
+              value: statusCount?.running,
+              icon: <RunningIcons size={50} />
+            }}
+          />
+          <StatisticCard.Divider />
+          <StatisticCard
+            hoverable={true}
+            statistic={{
+              title: l('devops.joblist.status.failed'),
+              value: statusCount?.failed,
+              icon: <ErrorIcons size={50} />
+            }}
+          />
+          <StatisticCard.Divider />
+          <StatisticCard
+            hoverable={true}
+            statistic={{
+              title: l('devops.joblist.status.unknown'),
+              value: statusCount?.unknown,
+              icon: <UnknownIcons size={50} />
+            }}
+          />
+        </StatisticCard.Group>
       </ProCard>
     );
   };