fix: dashboard re-render

src/pages/dashboard/components/dahboard-inner.tsx

@@ -0,0 +1,39 @@
+import { memo, useCallback, useEffect, useState } from 'react';
+import { queryDashboardData } from '../apis';
+import DashboardContext from '../config/dashboard-context';
+import { DashboardProps } from '../config/types';
+import ActiveTable from './active-table';
+import Overview from './over-view';
+import SystemLoad from './system-load';
+import Usage from './usage';
+
+const Dashboard: React.FC<{ setLoading: (loading: boolean) => void }> = ({
+  setLoading
+}) => {
+  const [data, setData] = useState<DashboardProps>({} as DashboardProps);
+
+  const getDashboardData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await queryDashboardData();
+      setData(res);
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+      setData({} as DashboardProps);
+    }
+  }, []);
+  useEffect(() => {
+    getDashboardData();
+  }, []);
+  return (
+    <DashboardContext.Provider value={{ ...data, fetchData: getDashboardData }}>
+      <Overview></Overview>
+      <SystemLoad></SystemLoad>
+      <Usage></Usage>
+      <ActiveTable></ActiveTable>
+    </DashboardContext.Provider>
+  );
+};
+
+export default memo(Dashboard);

src/pages/dashboard/components/over-view.tsx

@@ -29,7 +29,7 @@ const renderCardItem = (data: {
 const Overview: React.FC = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext).resource_counts || {};
-
+  console.log('overview===');
   const renderValue = (
     value:
       | number

src/pages/dashboard/components/resource-utilization.tsx

@@ -2,7 +2,7 @@ import Chart from '@/components/echarts/chart';
 import { getLocale, useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useContext } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
 const chartColorMap = {
@@ -110,9 +110,11 @@ const option = {
 };
 
 const UtilizationOvertime: React.FC = () => {
+  console.log('systemload=====================');
   const intl = useIntl();
   const locale = getLocale();
-  const [dataOptions, setDataOptions] = useState<any>(option);
+  let dataOptions: any = {};
+  // const [dataOptions, setDataOptions] = useState<any>(option);
   const data = useContext(DashboardContext)?.system_load?.history || {};
 
   const typeList = ['gpu', 'cpu', 'memory', 'gpu_memory'];
@@ -121,7 +123,7 @@ const UtilizationOvertime: React.FC = () => {
     return `${value}%`;
   };
 
-  const generateData = useCallback(() => {
+  const generateData = () => {
     const legendData: string[] = [];
     const xAxisData: string[] = [];
     let list: { value: number; time: string; type: string }[] = [];
@@ -157,7 +159,7 @@ const UtilizationOvertime: React.FC = () => {
       };
     });
 
-    setDataOptions({
+    dataOptions = {
       ...option,
       legend: {
         ...option.legend,
@@ -168,12 +170,12 @@ const UtilizationOvertime: React.FC = () => {
         data: _.uniq(xAxisData)
       },
       series: list
-    });
-  }, [data, locale]);
-
-  useEffect(() => {
-    generateData();
-  }, [data, locale]);
+    };
+  };
+  generateData();
+  // useEffect(() => {
+  //   generateData();
+  // }, [data, locale]);
 
   return (
     <>

src/pages/dashboard/components/usage-inner/request-token-inner.tsx

@@ -0,0 +1,52 @@
+import CardWrapper from '@/components/card-wrapper';
+import BarChart from '@/components/echarts/bar-chart';
+import LineChart from '@/components/echarts/line-chart';
+import { useIntl } from '@umijs/max';
+import { Col, Row } from 'antd';
+import dayjs from 'dayjs';
+import React from 'react';
+
+interface RequestTokenInnerProps {
+  requestData: {
+    name: string;
+    color: string;
+    areaStyle: any;
+    data: { time: string; value: number }[];
+  }[];
+  tokenData: { time: string; value: number }[];
+  xAxisData: string[];
+}
+const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
+  console.log('request token inner=====================');
+  const { requestData, tokenData, xAxisData } = props;
+  const intl = useIntl();
+  const labelFormatter = (v: any) => {
+    return dayjs(v).format('MM-DD');
+  };
+  return (
+    <CardWrapper style={{ width: '100%' }}>
+      <Row style={{ width: '100%' }}>
+        <Col span={12}>
+          <LineChart
+            title={intl.formatMessage({ id: 'dashboard.apirequest' })}
+            seriesData={requestData}
+            xAxisData={xAxisData}
+            height={360}
+            labelFormatter={labelFormatter}
+          ></LineChart>
+        </Col>
+        <Col span={12}>
+          <BarChart
+            title={intl.formatMessage({ id: 'dashboard.tokens' })}
+            seriesData={tokenData}
+            xAxisData={xAxisData}
+            height={360}
+            labelFormatter={labelFormatter}
+          ></BarChart>
+        </Col>
+      </Row>
+    </CardWrapper>
+  );
+};
+
+export default React.memo(RequestTokenInner);

src/pages/dashboard/components/usage-inner/top-user.tsx

@@ -0,0 +1,27 @@
+import CardWrapper from '@/components/card-wrapper';
+import HBar from '@/components/echarts/h-bar';
+import { useIntl } from '@umijs/max';
+import React from 'react';
+
+interface TopUserProps {
+  userData: { name: string; value: number }[];
+  topUserList: string[];
+}
+const TopUser: React.FC<TopUserProps> = (props) => {
+  console.log('TopUser=====================');
+  const { userData, topUserList } = props;
+  const intl = useIntl();
+
+  return (
+    <CardWrapper>
+      <HBar
+        title={intl.formatMessage({ id: 'dashboard.topusers' })}
+        seriesData={userData}
+        xAxisData={topUserList}
+        height={360}
+      ></HBar>
+    </CardWrapper>
+  );
+};
+
+export default React.memo(TopUser);

src/pages/dashboard/components/usage.tsx

@@ -1,7 +1,3 @@
-import CardWrapper from '@/components/card-wrapper';
-import BarChart from '@/components/echarts/bar-chart';
-import HBar from '@/components/echarts/h-bar';
-import LineChart from '@/components/echarts/line-chart';
 import PageTools from '@/components/page-tools';
 import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
@@ -11,6 +7,8 @@ import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useContext, useEffect, useState } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
+import RequestTokenInner from './usage-inner/request-token-inner';
+import TopUser from './usage-inner/top-user';
 
 const baseColorMap = {
   baseL2: 'rgba(13,171,219,0.8)',
@@ -38,28 +36,27 @@ const Usage = () => {
   const intl = useIntl();
   const { size } = useWindowResize();
   const [paddingRight, setPaddingRight] = useState<string>('20px');
-  const [requestData, setRequestData] = useState<
-    {
-      name: string;
-      color: string;
-      areaStyle: any;
-      data: { time: string; value: number }[];
-    }[]
-  >([]);
 
+  console.log('usage========');
+  const currentDate = dayjs();
   const currentMonthDays = getCurrentMonthDays();
-  const [tokenData, setTokenData] = useState<{ time: string; value: number }[]>(
-    []
-  );
-  const [userData, setUserData] = useState<{ name: string; value: number }[]>(
-    []
-  );
-  const [xAxisData, setXAxisData] = useState<string[]>(currentMonthDays);
-  const [topUserList, setTopUseList] = useState<string[]>([]);
+  let requestData: {
+    name: string;
+    color: string;
+    areaStyle: any;
+    data: { time: string; value: number }[];
+  }[] = [];
+  let tokenData: { time: string; value: number }[] = [];
+  let userData: { name: string; value: number }[] = [];
+  const xAxisData: string[] = currentMonthDays;
+  let topUserList: string[] = [];
 
-  const data = useContext(DashboardContext)?.model_usage || {};
+  const { model_usage, fetchData } = useContext(DashboardContext);
+  const data = model_usage || {};
 
-  const handleSelectDate = (date: any) => {};
+  const handleSelectDate = (date: any) => {
+    // fetchData?.();
+  };
 
   const generateData = () => {
     const requestList: {
@@ -68,30 +65,30 @@ const Usage = () => {
       areaStyle: any;
       data: { time: string; value: number }[];
     } = {
-      name: 'API Request',
+      name: 'API requests',
       areaStyle: {},
       color: baseColorMap.base,
       data: []
     };
 
     const completionData: any = {
-      name: 'completion_token',
+      name: 'Completion tokens',
       color: baseColorMap.base,
       data: []
     };
     const prompData: any = {
-      name: 'prompt_token',
+      name: 'Prompt tokens',
       color: baseColorMap.baseR3,
       data: []
     };
 
     const topUserPrompt: any = {
-      name: 'prompt_token',
+      name: 'Prompt tokens',
       color: baseColorMap.baseR3,
       data: []
     };
     const topUserCompletion: any = {
-      name: 'completion_token',
+      name: 'Completion tokens',
       color: baseColorMap.base,
       data: []
     };
@@ -161,14 +158,10 @@ const Usage = () => {
       });
     });
 
-    setRequestData([requestList]);
-    setUserData([topUserCompletion, topUserPrompt]);
-    setTopUseList(users);
-    setTokenData([completionData, prompData]);
-  };
-
-  const labelFormatter = (v: any) => {
-    return dayjs(v).format('MM-DD');
+    requestData = [requestList];
+    userData = [topUserCompletion, topUserPrompt];
+    topUserList = users;
+    tokenData = [completionData, prompData];
   };
 
   useEffect(() => {
@@ -179,9 +172,7 @@ const Usage = () => {
     }
   }, [size.width]);
 
-  useEffect(() => {
-    generateData();
-  }, [data]);
+  generateData();
 
   return (
     <>
@@ -193,7 +184,7 @@ const Usage = () => {
             onChange={handleSelectDate}
             style={{ width: 300 }}
             picker="month"
-            defaultValue={dayjs()}
+            defaultValue={currentDate}
           />
         }
       />
@@ -206,38 +197,14 @@ const Usage = () => {
           xl={16}
           style={{ paddingRight: paddingRight }}
         >
-          <CardWrapper style={{ width: '100%' }}>
-            <Row style={{ width: '100%' }}>
-              <Col span={12}>
-                <LineChart
-                  title={intl.formatMessage({ id: 'dashboard.apirequest' })}
-                  seriesData={requestData}
-                  xAxisData={xAxisData}
-                  height={360}
-                  labelFormatter={labelFormatter}
-                ></LineChart>
-              </Col>
-              <Col span={12}>
-                <BarChart
-                  title={intl.formatMessage({ id: 'dashboard.tokens' })}
-                  seriesData={tokenData}
-                  xAxisData={xAxisData}
-                  height={360}
-                  labelFormatter={labelFormatter}
-                ></BarChart>
-              </Col>
-            </Row>
-          </CardWrapper>
+          <RequestTokenInner
+            requestData={requestData}
+            xAxisData={xAxisData}
+            tokenData={tokenData}
+          ></RequestTokenInner>
         </Col>
         <Col xs={24} sm={24} md={24} lg={24} xl={8}>
-          <CardWrapper>
-            <HBar
-              title={intl.formatMessage({ id: 'dashboard.topusers' })}
-              seriesData={userData}
-              xAxisData={topUserList}
-              height={360}
-            ></HBar>
-          </CardWrapper>
+          <TopUser userData={userData} topUserList={topUserList}></TopUser>
         </Col>
       </Row>
     </>