root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dashboard usage display datas for last 30 days

Browse Source
This commit is contained in:
jialin
2025-04-24 12:43:55 +08:00
parent 7bad6cd20a
commit 559a4969c1
5 changed files with 53 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/markdown-viewer/index.less
+4
View File
@@ -25,6 +25,10 @@
font-weight: var(--font-weight-bold);
}
pre {
white-space: pre-wrap;
}
h1,
h2,
h3,
src/pages/dashboard/components/usage-inner/use-usage-data.ts
+7 -36
View File
@@ -1,5 +1,4 @@
import dayjs from 'dayjs';
import _ from 'lodash';
import { useMemo } from 'react';
const baseColorMap = {
@@ -29,36 +28,15 @@ interface TopUserData {
topUserList: string[];
}
const getAdjustedDateRange = (startDate: number, endDate: number): string[] => {
const start = dayjs(startDate);
const end = dayjs(endDate);
const diff = end.diff(start, 'day') + 1;
const getLast30Days = () => {
const dates: string[] = [];
const targetRange = 30;
const diffDays = targetRange - diff;
let preDays = Math.ceil(diffDays / 2);
let postDays = Math.floor(diffDays / 2);
// if the difference is more than 30 days, adjust the start and end dates
if (diff >= targetRange) {
return Array.from({ length: targetRange }, (_, i) =>
end.subtract(i, 'day').format('YYYY-MM-DD')
).reverse();
for (let i = 29; i >= 0; i--) {
const date = dayjs().subtract(i, 'day').format('YYYY-MM-DD');
dates.push(date);
}
const adjustedStart = start.subtract(preDays, 'day');
const adjustedEnd = end.add(postDays, 'day');
const totalDays = adjustedEnd.diff(adjustedStart, 'day') + 1;
const dateRange: string[] = [];
for (let i = 0; i < totalDays; i++) {
dateRange.push(adjustedStart.add(i, 'day').format('YYYY-MM-DD'));
}
return dateRange;
return dates;
};
const generateValueMap = (list: { timestamp: number; value: number }[]) => {
@@ -85,14 +63,7 @@ export default function useUseageData(data: any) {
requestTokenData: RequestTokenData;
topUserData: TopUserData;
}>(() => {
const startDate = _.get(data?.api_request_history, '0.timestamp', 0);
const endDate = _.get(
data?.api_request_history || [],
data?.api_request_history?.length - 1,
0
).timestamp;
const dateRange = getAdjustedDateRange(startDate * 1000, endDate * 1000);
const dateRange = getLast30Days();
const completionTokenHistory = data.completion_token_history || [];
const promptTokenHistory = data.prompt_token_history || [];
src/pages/llmodels/components/deploy-modal.tsx
+27 -3
View File
@@ -97,6 +97,8 @@ const AddModal: FC<AddModalProps> = (props) => {
const [selectedModel, setSelectedModel] = useState<any>({});
const [collapsed, setCollapsed] = useState<boolean>(false);
const [isGGUF, setIsGGUF] = useState<boolean>(false);
const [isEvaluatModel, setIsEvaluatModel] = useState<boolean>(false);
const [isEvaluatModelFile, setIsEvaluatModelFile] = useState<boolean>(false);
const modelFileRef = useRef<any>(null);
const getDefaultSpec = (item: any) => {
@@ -114,7 +116,7 @@ const AddModal: FC<AddModalProps> = (props) => {
}
return categories || null;
};
const handleSelectModelFile = (item: any) => {
const handleSelectModelFile = (item: any, evaluate?: boolean) => {
form.current?.form?.resetFields(resetFields);
const modelInfo = onSelectModel(selectedModel, props.source);
form.current?.setFieldsValue?.({
@@ -129,7 +131,7 @@ const AddModal: FC<AddModalProps> = (props) => {
}
};
const handleOnSelectModel = (item: any) => {
const handleOnSelectModel = (item: any, evaluate?: boolean) => {
setSelectedModel(item);
if (!item.isGGUF) {
setIsGGUF(false);
@@ -209,7 +211,6 @@ const AddModal: FC<AddModalProps> = (props) => {
}, [onCancel]);
const handleOnOpen = () => {
console.log('handleOnOpen----------', props.source, props.deploymentType);
if (props.deploymentType === 'modelFiles') {
form.current?.form?.setFieldsValue({
...props.initialValues
@@ -233,6 +234,27 @@ const AddModal: FC<AddModalProps> = (props) => {
return warningStatus.show && warningStatus.type !== 'success';
}, [warningStatus.show, warningStatus.type]);
const displayEvaluateStatus = () => {
console.log('displayEvaluateStatus===');
setWarningStatus({
show: true,
title: '',
type: 'transition',
message: intl.formatMessage({ id: 'models.form.evaluating' })
});
};
useEffect(() => {
if (isEvaluatModel || isEvaluatModelFile) {
setWarningStatus({
show: true,
title: '',
type: 'transition',
message: intl.formatMessage({ id: 'models.form.evaluating' })
});
}
}, [isEvaluatModel, isEvaluatModelFile]);
useEffect(() => {
if (open) {
handleOnOpen();
@@ -289,6 +311,7 @@ const AddModal: FC<AddModalProps> = (props) => {
hasLinuxWorker={hasLinuxWorker}
modelSource={props.source}
onSelectModel={handleOnSelectModel}
displayEvaluateStatus={displayEvaluateStatus}
></SearchModel>
</ColumnWrapper>
<Separator></Separator>
@@ -309,6 +332,7 @@ const AddModal: FC<AddModalProps> = (props) => {
modelSource={props.source}
onSelectFile={handleSelectModelFile}
collapsed={collapsed}
displayEvaluateStatus={displayEvaluateStatus}
></HFModelFile>
)}
</ColumnWrapper>
src/pages/llmodels/components/hf-model-file.tsx
+7 -6
View File
@@ -39,7 +39,8 @@ interface HFModelFileProps {
loadingModel?: boolean;
modelSource: string;
ref: any;
onSelectFile?: (file: any) => void;
onSelectFile?: (file: any, evaluate?: boolean) => void;
displayEvaluateStatus?: (show?: boolean) => void;
}
const pattern = /^(.*)-(\d+)-of-(\d+)\.(.*)$/;
@@ -49,7 +50,7 @@ const includeReg = /\.(safetensors|gguf)$/i;
const filterRegGGUF = /\.(gguf)$/i;
const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
const { collapsed, modelSource, isDownload } = props;
const { collapsed, modelSource, isDownload, displayEvaluateStatus } = props;
const intl = useIntl();
const [isEvaluating, setIsEvaluating] = useState(false);
const [dataSource, setDataSource] = useState<any>({
@@ -73,8 +74,8 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
const checkTokenRef = useRef<any>(null);
const timer = useRef<any>(null);
const handleSelectModelFile = (item: any) => {
props.onSelectFile?.(item);
const handleSelectModelFile = (item: any, evaluate?: boolean) => {
props.onSelectFile?.(item, evaluate);
setCurrent(item.path);
currentPathRef.current = item.path;
};
@@ -243,7 +244,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
});
setIsEvaluating(true);
displayEvaluateStatus?.(true);
const evaluationList = await getEvaluateResults(evaluateFileList);
const resultList = _.map(list, (item: any, index: number) => {
@@ -257,7 +258,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
(item: any) => item.path === currentPathRef.current
);
if (currentItem) {
handleSelectModelFile(currentItem);
handleSelectModelFile(currentItem, true);
}
setDataSource({ fileList: resultList, loading: false });
setIsEvaluating(false);
src/pages/llmodels/components/search-model.tsx
+8 -5
View File
@@ -41,7 +41,8 @@ interface SearchInputProps {
isDownload?: boolean;
setLoadingModel?: (flag: boolean) => void;
onSourceChange?: (source: string) => void;
onSelectModel: (model: any) => void;
onSelectModel: (model: any, evaluate?: boolean) => void;
displayEvaluateStatus?: (show?: boolean) => void;
}
const SearchModel: React.FC<SearchInputProps> = (props) => {
@@ -51,7 +52,8 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
isDownload,
hasLinuxWorker,
setLoadingModel,
onSelectModel
onSelectModel,
displayEvaluateStatus
} = props;
const [dataSource, setDataSource] = useState<{
repoOptions: any[];
@@ -108,8 +110,8 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
return isGGUF || isGGUFFromMs;
};
const handleOnSelectModel = (item: any) => {
onSelectModel(item);
const handleOnSelectModel = (item: any, evaluate?: boolean) => {
onSelectModel(item, evaluate);
setCurrent(item.id);
currentRef.current = item.id;
};
@@ -232,6 +234,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
};
});
setIsEvaluating(true);
displayEvaluateStatus?.(true);
const evaluations = await getEvaluateResults(repoList);
const resultList = list.map((item, index) => {
return {
@@ -251,7 +254,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
(item) => item.id === currentRef.current
);
if (currentItem) {
handleOnSelectModel(currentItem);
handleOnSelectModel(currentItem, true);
}
} catch (error) {
setIsEvaluating(false);