refactor: resource table columns

src/pages/dashboard/components/system-load.tsx

@@ -1,24 +1,20 @@
 import CardWrapper from '@/components/card-wrapper';
 import GaugeChart from '@/components/echarts/gauge';
 import PageTools from '@/components/page-tools';
-import breakpoints from '@/config/breakpoints';
-import useWindowResize from '@/hooks/use-window-resize';
 import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import _ from 'lodash';
-import { memo, useContext, useEffect, useMemo, useState } from 'react';
+import { memo, useContext, useMemo } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
+const smallChartHeight = 190;
+const largeChartHeight = 400;
+const resourceChartHeight = 400;
+
 const SystemLoad = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.current || {};
-  const { size } = useWindowResize();
-  const [paddingRight, setPaddingRight] = useState<string>('20px');
-  const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
-  const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
-
-  const height = 400;
 
   const chartData = useMemo(() => {
     return {
@@ -37,16 +33,6 @@ const SystemLoad = () => {
     };
   }, [data]);
 
-  console.log('SystemLoad data:', chartData);
-
-  useEffect(() => {
-    if (size.width < breakpoints.xl) {
-      setPaddingRight('0');
-    } else {
-      setPaddingRight('20px');
-    }
-  }, [size.width]);
-
   return (
     <div>
       <div className="system-load">
@@ -58,22 +44,15 @@ const SystemLoad = () => {
             </span>
           }
         />
-        <Row style={{ width: '100%' }} gutter={[0, 20]}>
-          <Col
-            xs={24}
-            sm={24}
-            md={24}
-            lg={24}
-            xl={16}
-            style={{ paddingRight: paddingRight }}
-          >
-            <CardWrapper style={{ height: height, width: '100%' }}>
+        <Row gutter={[20, 20]}>
+          <Col xs={24} sm={24} md={24} lg={24} xl={16}>
+            <CardWrapper style={{ height: resourceChartHeight }}>
               <ResourceUtilization />
             </CardWrapper>
           </Col>
           <Col xs={24} sm={24} md={24} lg={24} xl={8}>
-            <CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
-              <Row style={{ height: largeChartHeight, width: '100%' }}>
+            <CardWrapper style={{ height: largeChartHeight }}>
+              <Row style={{ height: largeChartHeight }}>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <GaugeChart
                     height={smallChartHeight}

src/pages/dashboard/components/usage-inner/index.tsx

@@ -91,20 +91,8 @@ const UsageInner: FC<{ maxWidth: number }> = ({ maxWidth }) => {
 
   return (
     <div>
-      <Row
-        style={{ width: '100%' }}
-        gutter={maxWidth < breakpoints.xl ? [0, 0] : [0, 20]}
-      >
-        <Col
-          xs={24}
-          sm={24}
-          md={24}
-          lg={24}
-          xl={16}
-          style={{
-            paddingRight: maxWidth < breakpoints.xl ? 0 : 20
-          }}
-        >
+      <Row gutter={maxWidth < breakpoints.xl ? [0, 0] : [20, 20]}>
+        <Col xs={24} sm={24} md={24} lg={24} xl={16}>
           <div
             style={{
               display: 'flex',