fix: refresh model list manually

src/components/echarts/mix-line-bar.tsx

@@ -0,0 +1,129 @@
+import Chart from '@/components/echarts/chart';
+import useChartConfig from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
+import _ from 'lodash';
+import React, { memo, useMemo } from 'react';
+import { ChartProps } from './types';
+
+const MixLineBarChart: React.FC<
+  ChartProps & {
+    chartData: {
+      line: any[];
+      bar: any[];
+    };
+  }
+> = (props) => {
+  const {
+    seriesData,
+    xAxisData,
+    yAxisName,
+    height,
+    width,
+    labelFormatter,
+    tooltipValueFormatter = null,
+    legendData = [],
+    smooth,
+    title,
+    chartData
+  } = props;
+  const {
+    grid,
+    legend,
+    lineItemConfig,
+    title: titleConfig,
+    tooltip,
+    xAxis,
+    yAxis
+  } = useChartConfig();
+
+  const { line: lineSeriesData, bar: barSeriesData } = chartData;
+
+  const options = {
+    title: {
+      text: ''
+    },
+    grid,
+    tooltip: {
+      ...tooltip,
+      formatter(params: any) {
+        return tooltipValueFormatter
+          ? tooltip.formatter(params, tooltipValueFormatter)
+          : tooltip.formatter(params);
+      }
+    },
+    xAxis: {
+      ...xAxis,
+      axisLabel: {
+        ...xAxis.axisLabel,
+        formatter: labelFormatter
+      }
+    },
+    yAxis,
+    legend: {
+      ...legend,
+      data: legendData.map((item: any) => {
+        return {
+          name: item,
+          icon: 'circle'
+        };
+      })
+    },
+
+    series: []
+  };
+
+  const dataOptions = useMemo((): any => {
+    const data = _.map(seriesData, (item: any) => {
+      return {
+        ...item,
+        ...lineItemConfig,
+        smooth: smooth,
+        itemStyle: {
+          ...lineItemConfig.itemStyle,
+          color: item.color
+        },
+        lineStyle: {
+          ...lineItemConfig.lineStyle,
+          color: item.color
+        }
+      };
+    });
+    return {
+      ...options,
+      animation: false,
+      title: {
+        ...titleConfig,
+        text: title
+      },
+      yAxis: {
+        ...options.yAxis,
+        name: yAxisName,
+        nameTextStyle: {
+          fontSize: 12,
+          align: 'right'
+        }
+      },
+      xAxis: {
+        ...options.xAxis,
+        data: xAxisData
+      },
+      series: data
+    };
+  }, [seriesData, xAxisData, yAxisName, title, smooth, legendData, options]);
+
+  return (
+    <>
+      {!seriesData.length ? (
+        <EmptyData height={height} title={title}></EmptyData>
+      ) : (
+        <Chart
+          height={height}
+          options={dataOptions}
+          width={width || '100%'}
+        ></Chart>
+      )}
+    </>
+  );
+};
+
+export default memo(MixLineBarChart);

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

@@ -27,6 +27,8 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
   const { requestData, tokenData, xAxisData } = props;
   const intl = useIntl();
 
+  console.log('usage===========', requestData, tokenData, xAxisData);
+
   return (
     <CardWrapper style={{ width: '100%' }}>
       <Row style={{ width: '100%' }}>
@@ -49,6 +51,17 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
           ></BarChart>
         </Col>
       </Row>
+      {/* <MixLineBar
+        title={intl.formatMessage({ id: 'dashboard.apirequest' })}
+        chartData={{
+          line: requestData,
+          bar: tokenData
+        }}
+        seriesData={[]}
+        xAxisData={xAxisData}
+        height={360}
+        labelFormatter={labelFormatter}
+      ></MixLineBar> */}
     </CardWrapper>
   );
 };

src/pages/dashboard/index.tsx

@@ -1,6 +1,6 @@
 import { PageContainer } from '@ant-design/pro-components';
 import { Spin } from 'antd';
-import { memo, useState } from 'react';
+import { useState } from 'react';
 import DashboardInner from './components/dahboard-inner';
 
 const Dashboard: React.FC = () => {
@@ -25,4 +25,4 @@ const Dashboard: React.FC = () => {
   );
 };
 
-export default memo(Dashboard);
+export default Dashboard;

src/pages/llmodels/components/table-list.tsx

@@ -84,7 +84,7 @@ import ModelTag from './model-tag';
 import UpdateModel from './update-modal';
 import ViewLogsModal from './view-logs-modal';
 interface ModelsProps {
-  handleSearch: () => void;
+  handleSearch: (params?: any) => void;
   handleNameChange: (e: any) => void;
   handleShowSizeChange?: (page: number, size: number) => void;
   handlePageChange: (page: number, pageSize: number | undefined) => void;
@@ -94,6 +94,7 @@ interface ModelsProps {
   onCancelViewLogs: () => void;
   handleOnToggleExpandAll: () => void;
   onStop?: (ids: number[]) => void;
+  onStart?: () => void;
   queryParams: {
     page: number;
     perPage: number;
@@ -134,6 +135,7 @@ const Models: React.FC<ModelsProps> = ({
   handleCategoryChange,
   handleOnToggleExpandAll,
   onStop,
+  onStart,
   modelFileOptions,
   deleteIds,
   dataSource,
@@ -262,7 +264,6 @@ const Models: React.FC<ModelsProps> = ({
   const handleStopModel = async (row: ListItem) => {
     await updateModel(getFormattedData(row, { replicas: 0 }));
     removeExpandedRowKey([row.id]);
-    onStop?.([row.id]);
   };
 
   const handleModalOk = useCallback(
@@ -478,6 +479,7 @@ const Models: React.FC<ModelsProps> = ({
           await handleStartModel(row);
           message.success(intl.formatMessage({ id: 'common.message.success' }));
           updateExpandedRowKeys([row.id, ...expandedRowKeys]);
+          onStart?.();
         }
 
         if (val === 'api') {
@@ -493,6 +495,7 @@ const Models: React.FC<ModelsProps> = ({
             name: row.name,
             async onOk() {
               await handleStopModel(row);
+              onStop?.([row.id]);
             }
           });
         }
@@ -560,6 +563,7 @@ const Models: React.FC<ModelsProps> = ({
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRows, handleStartModel);
         rowSelection.clearSelections();
+        onStart?.();
       }
     });
   };

src/pages/llmodels/index.tsx

@@ -260,11 +260,23 @@ const Models: React.FC = () => {
       setTimeout(resolve, 300);
     });
     setModelInstances(cacheInsDataListRef.current);
+    fetchData({
+      loadingVal: false
+    });
   }, []);
 
-  const handleSearch = useCallback(async () => {
-    await fetchData();
-  }, [fetchData]);
+  const handleOnStart = useCallback(() => {
+    fetchData({
+      loadingVal: false
+    });
+  }, []);
+
+  const handleSearch = useCallback(
+    async (params?: any) => {
+      await fetchData(params);
+    },
+    [fetchData]
+  );
 
   const debounceUpdateFilter = _.debounce((e: any) => {
     setQueryParams({
@@ -469,6 +481,7 @@ const Models: React.FC = () => {
         onViewLogs={handleOnViewLogs}
         onCancelViewLogs={handleOnCancelViewLogs}
         onStop={handleOnStop}
+        onStart={handleOnStart}
         queryParams={queryParams}
         loading={dataSource.loading}
         loadend={dataSource.loadend}