diff --git a/src/components/echarts/mix-line-bar.tsx b/src/components/echarts/mix-line-bar.tsx new file mode 100644 index 00000000..831eaa5f --- /dev/null +++ b/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 ? ( + + ) : ( + + )} + + ); +}; + +export default memo(MixLineBarChart); diff --git a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx index 55c23a78..61264d97 100644 --- a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx +++ b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx @@ -27,6 +27,8 @@ const RequestTokenInner: React.FC = (props) => { const { requestData, tokenData, xAxisData } = props; const intl = useIntl(); + console.log('usage===========', requestData, tokenData, xAxisData); + return ( @@ -49,6 +51,17 @@ const RequestTokenInner: React.FC = (props) => { > + {/* */} ); }; diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index d00cdf82..0b7fd829 100644 --- a/src/pages/dashboard/index.tsx +++ b/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; diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 8c081c3e..34db0ed7 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/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 = ({ handleCategoryChange, handleOnToggleExpandAll, onStop, + onStart, modelFileOptions, deleteIds, dataSource, @@ -262,7 +264,6 @@ const Models: React.FC = ({ 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 = ({ 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 = ({ name: row.name, async onOk() { await handleStopModel(row); + onStop?.([row.id]); } }); } @@ -560,6 +563,7 @@ const Models: React.FC = ({ async onOk() { await handleBatchRequest(rowSelection.selectedRows, handleStartModel); rowSelection.clearSelections(); + onStart?.(); } }); }; diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index 84a4fec0..803c031e 100644 --- a/src/pages/llmodels/index.tsx +++ b/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}