pucmnw7fs
/
gpustack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: merge fetch data request

Browse Source
main
jialin 11 months ago
parent e04874d074
commit a7170a4eee
4 changed files with 228 additions and 217 deletions
Show Stats Download Patch File Download Diff File

2
src/components/alert-info/block.less
Unescape View File

@ -32,7 +32,7 @@
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
&.danger {
background-color: var(--ant-color-error-bg-hover);
background-color: var(--ant-color-error-bg-filled-hover);
}
&.warning {

2
src/pages/llmodels/components/deploy-modal.tsx
Unescape View File

@ -232,7 +232,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
)}
<div style={{ display: 'flex', flex: 1, maxWidth: '100%' }}>
<ColumnWrapper
paddingBottom={warningStatus.show ? 125 : 50}
paddingBottom={warningStatus.show ? 140 : 50}
footer={
<>
{warningStatus.show && (

312
src/pages/llmodels/components/instance-item.tsx
Unescape View File

@ -29,7 +29,6 @@ import {
import dayjs from 'dayjs';
import _ from 'lodash';
import React, { useCallback, useEffect, useMemo } from 'react';
import styled from 'styled-components';
import { MODEL_INSTANCE_API } from '../apis';
import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
import { ModelInstanceListItem } from '../config/types';
@ -65,6 +64,52 @@ const WorkerInfo = (props: {
</span>
);
};
const InstanceStatusTag = (
props: Pick<InstanceItemProps, 'instanceData' | 'handleChildSelect'>
) => {
const intl = useIntl();
const { instanceData, handleChildSelect } = props;
if (!instanceData.state) {
return null;
}
return (
<StatusTag
download={
instanceData.state === InstanceStatusMap.Downloading
? { percent: instanceData.download_progress }
: undefined
}
extra={
instanceData.state === InstanceStatusMap.Error &&
instanceData.worker_id ? (
<Button
type="link"
size="small"
style={{ paddingLeft: 0 }}
onClick={() => handleChildSelect('viewlog', instanceData)}
>
{intl.formatMessage({ id: 'models.list.more.logs' })}
</Button>
) : null
}
statusValue={{
status:
instanceData.state === InstanceStatusMap.Downloading &&
instanceData.download_progress === 100
? status[InstanceStatusMap.Running]
: status[instanceData.state],
text: InstanceStatusMapValue[instanceData.state],
message:
instanceData.state === InstanceStatusMap.Downloading &&
instanceData.download_progress === 100
? ''
: instanceData.state_message
}}
/>
);
};
interface InstanceItemProps {
instanceData: ModelInstanceListItem;
workerList: WorkerListItem[];
@ -129,9 +174,6 @@ const distributeCols: ColumnProps[] = [
title: 'models.table.vram.allocated',
locale: true,
key: 'vram',
// rowSpan: ({ row, rowIndex, colIndex, dataIndex, dataList }) => {
// return rowIndex === 0 ? dataList.length : 0;
// },
render: ({ rowIndex, row, dataList }) => {
return convertFileSize(row.vram, 1);
}
@ -153,40 +195,6 @@ const renderMessage = (title: string) => {
);
};
const InfoItem = (props: { label: string; value: any; width?: number }) => {
const { label, value, width } = props;
const Wrapper = styled.div`
.info-item {
width: ${width ? `${width}px` : '100%'};
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px 8px;
background-color: var(--color-gray-fill-3);
border-radius: 4px;
.value {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
color: var(--color-white-quaternary);
.index {
color: var(--ant-color-text-light-solid);
}
}
}
`;
return (
<Wrapper>
<div className="info-item">
<span className="label">{label}</span>
<span className="value">{value}</span>
</div>
</Wrapper>
);
};
const InstanceItem: React.FC<InstanceItemProps> = ({
instanceData,
workerList,
@ -206,7 +214,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
}
return true;
});
}, [instanceData]);
}, [instanceData.state]);
const createFileName = (name: string) => {
const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
@ -239,23 +247,6 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
[]
);
const displayGPUs = (vrams: Record<string, number>) => {
return (
<span className="flex-column">
{Object.keys(vrams)
?.sort?.()
.map((index) => {
return (
<span key={index}>
[{index}] {''}
{convertFileSize(vrams?.[index], 0)}
</span>
);
})}
</span>
);
};
const renderWorkerInfo = useMemo(() => {
let workerIp = '-';
if (instanceData.worker_ip) {
@ -283,85 +274,87 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
</div>
</div>
);
}, [modelData, instanceData, intl]);
}, [
instanceData.worker_name,
instanceData.worker_ip,
instanceData.port,
instanceData.gpu_indexes,
modelData?.backend,
modelData?.backend_version,
intl
]);
const calcTotalVram = (vram: Record<string, number>) => {
return _.sum(_.values(vram));
};
const renderDistributedServer = useCallback(
(severList: any[]) => {
const list = _.map(severList, (item: any) => {
const data = _.find(workerList, { id: item.worker_id });
return {
worker_name: data?.name,
worker_ip: data?.ip,
port: '',
vram: calcTotalVram(item.computed_resource_claim?.vram || {}),
gpu_index: _.keys(item.computed_resource_claim?.vram).join(',')
};
});
const renderDistributedServer = (severList: any[]) => {
const list = _.map(severList, (item: any) => {
const data = _.find(workerList, { id: item.worker_id });
return {
worker_name: data?.name,
worker_ip: data?.ip,
port: '',
vram: calcTotalVram(item.computed_resource_claim?.vram || {}),
gpu_index: _.keys(item.computed_resource_claim?.vram).join(',')
};
});
const mainWorker = [
{
worker_name: `${instanceData.worker_name}`,
worker_ip: `${instanceData.worker_ip}`,
port: '',
vram: calcTotalVram(instanceData.computed_resource_claim?.vram || {}),
gpu_index: `${instanceData.gpu_indexes?.join?.(',')}(main)`
}
];
const mainWorker = [
{
worker_name: `${instanceData.worker_name}`,
worker_ip: `${instanceData.worker_ip}`,
port: '',
vram: calcTotalVram(instanceData.computed_resource_claim?.vram || {}),
gpu_index: `${instanceData.gpu_indexes?.join?.(',')}(main)`
}
];
return (
<div>
<SimpleTabel
columns={distributeCols}
dataSource={[...mainWorker, ...list]}
></SimpleTabel>
</div>
);
},
[workerList, instanceData, intl]
);
return (
<div>
<SimpleTabel
columns={distributeCols}
dataSource={[...mainWorker, ...list]}
></SimpleTabel>
</div>
);
};
const renderDistributionInfo = useCallback(
(severList: any[]) => {
if (!severList.length) {
return null;
}
return (
<Tooltip
overlayInnerStyle={{
width: 'max-content',
maxWidth: '500px',
minWidth: '400px'
const renderDistributionInfo = (severList: any[]) => {
if (!severList.length) {
return null;
}
return (
<Tooltip
overlayInnerStyle={{
width: 'max-content',
maxWidth: '500px',
minWidth: '400px'
}}
title={renderDistributedServer(severList)}
>
<Tag
color="processing"
style={{
display: 'flex',
alignItems: 'center',
maxWidth: '100%',
minWidth: 50,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
opacity: 0.75,
borderRadius: 12
}}
title={renderDistributedServer(severList)}
>
<Tag
color="processing"
style={{
display: 'flex',
alignItems: 'center',
maxWidth: '100%',
minWidth: 50,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
opacity: 0.75,
borderRadius: 12
}}
>
<InfoCircleOutlined className="m-r-5" />
{intl.formatMessage({
id: 'models.table.acrossworker'
})}
</Tag>
</Tooltip>
);
},
[renderDistributedServer]
);
<InfoCircleOutlined className="m-r-5" />
{intl.formatMessage({
id: 'models.table.acrossworker'
})}
</Tag>
</Tooltip>
);
};
const renderOffloadInfo = useMemo(() => {
const total_layers = instanceData.computed_resource_claim?.total_layers;
@ -425,21 +418,17 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
instanceData.computed_resource_claim?.offload_layers
]);
const handleOnSelect = useCallback(
(val: string) => {
console.log('handleOnSelect', val);
if (val === 'download') {
downloadStream({
url: `${MODEL_INSTANCE_API}/${instanceData.id}/logs`,
filename: createFileName(instanceData.name),
downloadNotification
});
} else {
handleChildSelect(val, instanceData);
}
},
[handleChildSelect, instanceData]
);
const handleOnSelect = (val: string) => {
if (val === 'download') {
downloadStream({
url: `${MODEL_INSTANCE_API}/${instanceData.id}/logs`,
filename: createFileName(instanceData.name),
downloadNotification
});
} else {
handleChildSelect(val, instanceData);
}
};
return (
<>
@ -487,45 +476,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
style={{ paddingLeft: '62px' }}
className="flex justify-center"
>
{instanceData.state && (
<StatusTag
download={
instanceData.state === InstanceStatusMap.Downloading
? { percent: instanceData.download_progress }
: undefined
}
extra={
instanceData.state === InstanceStatusMap.Error &&
instanceData.worker_id ? (
<Button
type="link"
size="small"
style={{ paddingLeft: 0 }}
onClick={() =>
handleChildSelect('viewlog', instanceData)
}
>
{intl.formatMessage({
id: 'models.list.more.logs'
})}
</Button>
) : null
}
statusValue={{
status:
instanceData.state === InstanceStatusMap.Downloading &&
instanceData.download_progress === 100
? status[InstanceStatusMap.Running]
: (status[instanceData.state] as any),
text: InstanceStatusMapValue[instanceData.state],
message:
instanceData.state === InstanceStatusMap.Downloading &&
instanceData.download_progress === 100
? ''
: instanceData.state_message
}}
></StatusTag>
)}
<InstanceStatusTag
instanceData={instanceData}
handleChildSelect={handleChildSelect}
/>
</span>
</Col>
<Col span={5}>

129
src/pages/llmodels/index.tsx
Unescape View File

@ -81,16 +81,6 @@ const Models: React.FC = () => {
setDataList: setModelInstances
});
const getWorkerList = async () => {
try {
const data = await queryWorkersList({ page: 1, perPage: 100 });
setWorkerList(data.items || []);
} catch (error) {
// ingore
setWorkerList([]);
}
};
const getAllModelInstances = useCallback(async () => {
try {
instancesToken.current?.cancel?.();
@ -110,7 +100,16 @@ const Models: React.FC = () => {
}, []);
const fetchData = useCallback(
async (loadingVal?: boolean) => {
async (params?: {
loadingVal?: boolean;
query?: {
page: number;
perPage: number;
search: string;
categories: any[];
};
}) => {
const { loadingVal, query } = params || {};
axiosToken?.cancel?.();
axiosToken = createAxiosToken();
setDataSource((pre) => {
@ -119,7 +118,7 @@ const Models: React.FC = () => {
});
try {
const params = {
..._.pickBy(queryParams, (val: any) => !!val)
..._.pickBy(query || queryParams, (val: any) => !!val)
};
const res: any = await queryModelsList(params, {
cancelToken: axiosToken.token
@ -153,6 +152,13 @@ const Models: React.FC = () => {
page: page,
perPage: pageSize || 10
});
fetchData({
query: {
...queryParams,
page: page,
perPage: pageSize || 10
}
});
},
[queryParams]
);
@ -213,7 +219,9 @@ const Models: React.FC = () => {
await getAllModelInstances();
await createModelsInstanceChunkRequest();
await createModelsChunkRequest();
fetchData(false);
fetchData({
loadingVal: false
});
}, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
const handleSearch = useCallback(async () => {
@ -226,29 +234,69 @@ const Models: React.FC = () => {
page: 1,
search: e.target.value
});
fetchData({
query: {
...queryParams,
page: 1,
search: e.target.value
}
});
}, 350);
const handleNameChange = useCallback(debounceUpdateFilter, [queryParams]);
const handleCategoryChange = useCallback(
(value: any) => {
async (value: any) => {
setQueryParams({
...queryParams,
page: 1,
categories: value
});
fetchData({
query: {
...queryParams,
page: 1,
categories: value
}
});
},
[queryParams]
);
useEffect(() => {
fetchData();
return () => {
// fetch data first time
const getTableData = async (loadingVal?: boolean) => {
axiosToken?.cancel?.();
axiosToken = createAxiosToken();
setDataSource((pre) => {
pre.loading = loadingVal ?? true;
return { ...pre };
});
try {
const params = {
..._.pickBy(queryParams, (val: any) => !!val)
};
const res: any = await queryModelsList(params, {
cancelToken: axiosToken.token
});
return res;
} catch (error) {
return {};
}
};
}, [queryParams]);
useEffect(() => {
// get worker list
const getWorkerList = async (): Promise<any> => {
try {
const data = await queryWorkersList({ page: 1, perPage: 100 });
return data;
} catch (error) {
// ingore
return {};
}
};
// get catalog list
const getCataLogList = async () => {
const isFirstLogin = readState(IS_FIRST_LOGIN);
if (!isFirstLogin) {
@ -260,8 +308,7 @@ const Models: React.FC = () => {
page: 1
});
if (!res?.items?.length) {
setCatalogList([]);
return;
return [];
}
const name = _.toLower(res?.items[0]?.name).replace(/\s/g, '-') || '';
const catalogSpecs: any = await queryCatalogItemSpec({
@ -281,24 +328,36 @@ const Models: React.FC = () => {
-1)
);
});
setCatalogList(resultList || []);
return resultList || [];
} catch (error) {
// ignore
setCatalogList([]);
return [];
}
};
getCataLogList();
}, []);
useEffect(() => {
createModelsChunkRequest();
}, [createModelsChunkRequest]);
useEffect(() => {
getWorkerList();
createModelsInstanceChunkRequest();
const init = async () => {
const [modelRes, workerRes, cList] = await Promise.all([
getTableData(),
getWorkerList(),
getCataLogList()
]);
setDataSource({
dataList: modelRes.items || [],
loading: false,
loadend: true,
total: modelRes.pagination?.total || 0,
deletedIds: []
});
setWorkerList(workerRes.items || []);
setCatalogList(cList);
setTimeout(() => {
createModelsInstanceChunkRequest();
}, 500);
};
init();
return () => {
axiosToken?.cancel?.();
chunkRequedtRef.current?.current?.cancel?.();
cacheDataListRef.current = [];
cacheInsDataListRef.current = [];
@ -307,10 +366,6 @@ const Models: React.FC = () => {
};
}, []);
useEffect(() => {
console.log('modelInstances====', modelInstances);
}, [modelInstances]);
useEffect(() => {
const handleVisibilityChange = async () => {
if (document.visibilityState === 'visible') {
@ -318,7 +373,9 @@ const Models: React.FC = () => {
await getAllModelInstances();
await createModelsInstanceChunkRequest();
await createModelsChunkRequest();
fetchData(false);
fetchData({
loadingVal: false
});
} else {
isPageHidden.current = true;
chunkRequedtRef.current?.current?.cancel?.();

Write Preview
Loading…
Cancel
Save