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

fix: remove instance from cache after deleting

Browse Source
This commit is contained in:
jialin
2025-12-22 16:19:47 +08:00
parent d844cdadb5
commit 7e25b64689
14 changed files with 159 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/atoms/models.ts
+2
View File
@@ -35,3 +35,5 @@ export const workerListAtom = atom<
>([]);
export const backendOptionsAtom = atom<BackendOption[]>([]);
export const resourceOverviewAtom = atom<Record<string, any>>({});
src/components/seal-table/components/table-cell.tsx
+2 -2
View File
@@ -29,7 +29,7 @@ const CellWrapper = styled.div`
`;
const TableCell: React.FC<SealColumnProps> = (props) => {
const { dataIndex, render, align, editable } = props;
const { dataIndex, render, align, editable, dataField } = props;
return (
<CellWrapper
@@ -40,7 +40,7 @@ const TableCell: React.FC<SealColumnProps> = (props) => {
})}
>
<CellContent
dataIndex={dataIndex}
dataIndex={dataField || dataIndex}
render={render}
editable={editable}
></CellContent>
src/components/seal-table/types.ts
+2 -1
View File
@@ -25,6 +25,7 @@ export interface SealColumnProps {
render?: (text: any, record: any) => React.ReactNode;
dataIndex: string;
key?: string;
dataField?: string; // Added dataField property, aviods conflict with dataIndex, because dataIndex maybe used in sorting
width?: number;
span: number;
align?: 'left' | 'center' | 'right';
@@ -90,7 +91,7 @@ export interface SealTableProps {
watchChildren?: boolean;
loading?: boolean;
loadend?: boolean;
onCell?: (record: any, dataIndex: string) => void;
onCell?: (record: any, extra: any) => void;
onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
onExpand?: (expanded: boolean, record: any, rowKey: any) => void;
onExpandAll?: (expanded: boolean) => void;
src/layouts/index.tsx
+19
View File
@@ -8,6 +8,7 @@ import routeCachekey from '@/config/route-cachekey';
import { DEFAULT_ENTER_PAGE } from '@/config/settings';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import useUserSettings from '@/hooks/use-user-settings';
import useAddResource from '@/pages/dashboard/hooks/use-add-resource';
import { logout } from '@/pages/login/apis';
import { useAccessMarkedRoutes } from '@@/plugin-access';
import { useModel } from '@@/plugin-model';
@@ -48,6 +49,13 @@ const NO_CONTAINER_PAGES = [
'clusterCreate'
];
const CHECK_RESOURCE_PATH = [
'/resources/workers',
'/cluster-management/clusters/list',
'/cluster-management/credentials',
'/cluster-management/clusters/create'
];
const loginPath = DEFAULT_ENTER_PAGE.login;
// Filter out the routes that need to be displayed, where filterFn indicates the levels that should not be shown
@@ -104,6 +112,12 @@ export default (props: any) => {
const { initialize: initialize } = useOverlayScroller({
defer: false
});
const {
setLoadingStatus,
fetchResourceData,
NoResourceModal,
loadingStatus
} = useAddResource();
const [modal, contextHolder] = Modal.useModal();
const { themeData, setUserSettings, userSettings } = useUserSettings();
const [userInfo] = useAtom(userAtom);
@@ -241,6 +255,10 @@ export default (props: any) => {
const { location } = history;
const { pathname } = location;
if (!CHECK_RESOURCE_PATH.includes(pathname)) {
// fetchResourceData();
}
initRouteCacheValue(pathname);
dropRouteCache(pathname);
@@ -347,6 +365,7 @@ export default (props: any) => {
</PageContainerInner>
)}
</Exception>
{NoResourceModal}
</ProLayout>
{contextHolder}
</ConfigProvider>
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+6 -3
View File
@@ -44,7 +44,7 @@ const useClusterColumns = (
title: intl.formatMessage({ id: 'clusters.table.provider' }),
dataIndex: 'provider',
sorter: tableSorter(2),
span: 4,
span: 3,
render: (value: string) => (
<AutoTooltip ghost minWidth={20}>
{ProviderLabelMap[value]}
@@ -55,17 +55,20 @@ const useClusterColumns = (
title: 'GPUs',
dataIndex: 'gpus',
span: 2,
sorter: tableSorter(3),
render: (value: number) => <span>{value}</span>
},
{
title: intl.formatMessage({ id: 'clusters.table.deployments' }),
dataIndex: 'models',
span: 2,
sorter: tableSorter(4),
span: 3,
render: (value: number) => <span>{value}</span>
},
{
title: intl.formatMessage({ id: 'resources.nodes' }),
dataIndex: 'workers',
sorter: tableSorter(5),
span: 3,
render: (value: number, record: ClusterListItem) => (
<span>
@@ -90,7 +93,7 @@ const useClusterColumns = (
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
defaultSortOrder: 'descend',
sorter: tableSorter(5),
sorter: tableSorter(6),
span: 4,
render: (value: string) => (
<AutoTooltip ghost minWidth={20}>
src/pages/cluster-management/hooks/use-cluster-list.ts
+34 -3
View File
@@ -1,8 +1,13 @@
import { clusterListAtom, workerListAtom } from '@/atoms/models';
import {
clusterListAtom,
resourceOverviewAtom,
workerListAtom
} from '@/atoms/models';
import { queryClusterList } from '@/pages/cluster-management/apis';
import { queryWorkersList } from '@/pages/resources/apis';
import { useAtom } from 'jotai';
import { useState } from 'react';
import { queryDashboardData } from '../../dashboard/apis';
/**
* Currently fetch the cluster list and worker list for checking resource existence.
@@ -32,6 +37,11 @@ export default function useClusterList() {
>([]);
const [clustersAtom, setClusterListAtom] = useAtom(clusterListAtom);
const [workersAtom, setWorkerListAtom] = useAtom(workerListAtom);
const [resourceAtom, setResourceOverview] = useAtom(resourceOverviewAtom);
const [resourceCount, setResourceCount] = useState<Record<string, any>>({
cluster_count: 0,
worker_count: 0
});
const fetchClusterList = async () => {
try {
@@ -67,7 +77,7 @@ export default function useClusterList() {
}
};
const fetchAll = async () => {
const fetchData = async () => {
const [clusters, workers] = await Promise.all([
fetchClusterList(),
fetchWorkerList()
@@ -82,12 +92,33 @@ export default function useClusterList() {
};
};
const fetchResource = async () => {
try {
const res = await queryDashboardData();
setResourceOverview(res.resource_counts);
setResourceCount(res.resource_counts);
return {
hasClusters: res.resource_counts?.cluster_count > 0,
hasWorkers: res.resource_counts?.worker_count > 0
};
} catch (error) {
setResourceOverview({});
setResourceCount({});
return {
hasClusters: false,
hasWorkers: false
};
}
};
return {
clusterList,
workerList,
clustersAtom,
workersAtom,
fetchAll,
resourceAtom,
resourceCount,
fetchResource,
fetchWorkerList,
fetchClusterList
};
src/pages/dashboard/components/system-load.tsx
+21 -1
View File
@@ -2,6 +2,7 @@ import CardWrapper from '@/components/card-wrapper';
import GaugeChart from '@/components/echarts/gauge';
import PageTools from '@/components/page-tools';
import BaseSelect from '@/components/seal-form/base/select';
import { queryClusterList } from '@/pages/cluster-management/apis';
import { useIntl } from '@umijs/max';
import { Col, Row } from 'antd';
import _ from 'lodash';
@@ -15,8 +16,11 @@ const resourceChartHeight = 400;
const SystemLoad = () => {
const intl = useIntl();
const { system_load, fetchData, clusterList } = useContext(DashboardContext);
const { system_load, fetchData } = useContext(DashboardContext);
const [systemLoadData, setSystemLoadData] = useState<any>(system_load || {});
const [clusterList, setClusterList] = useState<Global.BaseOption<number>[]>(
[]
);
const chartData = useMemo(() => {
const data = systemLoadData?.current || {};
@@ -49,6 +53,22 @@ const SystemLoad = () => {
}
};
useEffect(() => {
const fetchClusters = async () => {
try {
const res = await queryClusterList({ page: -1 });
const options = res.items.map((cluster: any) => ({
label: cluster.name,
value: cluster.id
}));
setClusterList(options);
} catch (error) {
setClusterList([]);
}
};
fetchClusters();
}, []);
return (
<div>
<div className="system-load">
src/pages/dashboard/config/dashboard-context.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { DashboardProps } from './types';
export const DashboardContext = createContext<
DashboardProps & {
fetchData: (params?: { [key: string]: any }) => Promise<void>;
clusterList: Global.BaseOption<
clusterList?: Global.BaseOption<
number,
{ provider: string; state: string | number }
>[];
src/pages/dashboard/hooks/use-add-resource.tsx
+21 -12
View File
@@ -58,8 +58,7 @@ export default function useAddResource() {
const navigate = useNavigate();
const [, setClusterSession] = useAtom(clusterSessionAtom);
const { fetchAll, clusterList, workerList, clustersAtom, workersAtom } =
useClusterList();
const { fetchResource, resourceCount, resourceAtom } = useClusterList();
const [hiddenModal, setHiddenModal] = useState(false);
const [loadingStatus, setLoadingStatus] = useState({
@@ -68,12 +67,14 @@ export default function useAddResource() {
});
const isNoResource = useMemo(() => {
const noResource = workerList.length === 0 || clusterList.length === 0;
const noResource =
!resourceAtom?.cluster_count || !resourceAtom?.worker_count;
return noResource && !loadingStatus.loading && loadingStatus.loadend;
}, [workersAtom.length, clustersAtom.length, loadingStatus]);
}, [resourceAtom, loadingStatus]);
const contentInfo = useMemo(() => {
if (clusterList.length === 0) {
console.log('resourceCount=', resourceCount);
if (!resourceCount.cluster_count) {
return {
title: intl.formatMessage({ id: 'noresult.cluster.title' }),
subTitle: intl.formatMessage({ id: 'noresult.resources.cluster' }),
@@ -85,14 +86,14 @@ export default function useAddResource() {
subTitle: intl.formatMessage({ id: 'noresult.resources.worker' }),
btnText: intl.formatMessage({ id: 'noresult.workers.button.add' })
};
}, [clusterList.length, workerList.length, intl]);
}, [resourceCount, intl]);
const open: boolean = useMemo(() => {
return isNoResource && !hiddenModal;
}, [isNoResource, hiddenModal]);
const handleCreate = () => {
if (clusterList.length === 0) {
if (!resourceCount.cluster_count) {
setClusterSession({
firstAddWorker: false,
firstAddCluster: true
@@ -104,7 +105,7 @@ export default function useAddResource() {
return;
}
if (workerList.length === 0) {
if (!resourceCount.worker_count) {
setClusterSession({
firstAddWorker: true,
firstAddCluster: false
@@ -117,12 +118,20 @@ export default function useAddResource() {
setHiddenModal(true);
};
const Modal = (
const fetchResourceData = async () => {
setLoadingStatus({ loading: true, loadend: false });
setHiddenModal(false);
await fetchResource();
setLoadingStatus({ loading: false, loadend: true });
};
const NoResourceModal = (
<ScrollerModal
open={open}
footer={null}
maskClosable={false}
closeIcon={null}
destroyOnHidden={false}
onCancel={handleCancel}
>
<Content>
@@ -149,11 +158,11 @@ export default function useAddResource() {
open,
contentInfo,
loadingStatus,
clusterList,
Modal,
NoResourceModal,
handleCreate,
setLoadingStatus,
handleCancel,
fetchAll
fetchResource,
fetchResourceData
};
}
src/pages/dashboard/index.tsx
+6 -27
View File
@@ -6,57 +6,36 @@ import { queryDashboardData } from './apis';
import DashboardInner from './components/dahboard-inner';
import DashboardContext from './config/dashboard-context';
import { DashboardProps } from './config/types';
import useAddResource from './hooks/use-add-resource';
const Dashboard: React.FC = () => {
const { setLoadingStatus, fetchAll, Modal, loadingStatus, clusterList } =
useAddResource();
const [data, setData] = useState<DashboardProps>({} as DashboardProps);
const [loading, setLoading] = useState(false);
const fetchDashboardData = useMemoizedFn(async () => {
try {
setLoading(true);
const res = await queryDashboardData();
setData(res);
} catch (error) {
setData({} as DashboardProps);
}
});
const initData = useMemoizedFn(async () => {
try {
setLoadingStatus({
loading: true,
loadend: false
});
const { hasClusters, hasWorkers } = await fetchAll();
if (!hasClusters || !hasWorkers) {
return;
}
await fetchDashboardData();
} catch (error) {
// ignore
} finally {
setLoadingStatus({
loading: false,
loadend: true
});
setLoading(false);
}
});
useEffect(() => {
initData();
fetchDashboardData();
}, []);
return (
<DashboardContext.Provider
value={{ ...data, fetchData: fetchDashboardData, clusterList }}
value={{ ...data, fetchData: fetchDashboardData }}
>
<PageBox>
<Spin spinning={loadingStatus.loading} style={{ minHeight: 300 }}>
<Spin spinning={loading} style={{ minHeight: 300 }}>
<DashboardInner />
</Spin>
</PageBox>
{Modal}
</DashboardContext.Provider>
);
};
src/pages/llmodels/components/instance-item.tsx
+2 -2
View File
@@ -693,8 +693,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
</Col>
<Col span={4}>
<span
style={{ paddingLeft: '62px', gap: 4 }}
className="flex-center justify-center"
style={{ paddingLeft: '50px', gap: 4 }}
className="flex-center"
>
<InstanceStatusTag
instanceData={instanceData}
src/pages/llmodels/components/table-list.tsx
+33 -35
View File
@@ -80,6 +80,7 @@ interface ModelsProps {
onStart?: () => void;
onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
onStatusChange: (value?: any) => void;
onDeleteInstanceFromCache?: (instanceId: number) => void;
sortOrder: string[];
queryParams: {
page: number;
@@ -122,6 +123,7 @@ const Models: React.FC<ModelsProps> = ({
onStart,
onTableSort,
onStatusChange,
onDeleteInstanceFromCache,
sortOrder,
deleteIds,
dataSource,
@@ -231,7 +233,7 @@ const Models: React.FC<ModelsProps> = ({
const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {
try {
await updateModel(getFormattedData(record));
await updateModel(getFormattedData(record, { replicas: extra.newValue }));
message.success(intl.formatMessage({ id: 'common.message.success' }));
if (extra.newValue > extra.oldValue) {
updateExpandedRowKeys([record.id, ...expandedRowKeys]);
@@ -367,41 +369,37 @@ const Models: React.FC<ModelsProps> = ({
navigate(`/playground/chat?model=${row.name}`);
};
const handleViewLogs = useCallback(
async (row: any) => {
try {
setCurrentInstance({
url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
status: row.state,
id: row.id,
modelId: row.model_id,
tail: InstanceRealtimeLogStatus.includes(row.state)
? undefined
: PageSize - 1
});
setOpenLogModal(true);
onViewLogs();
saveScrollHeight();
} catch (error) {
console.log('error:', error);
}
},
[onViewLogs]
);
const handleDeleteInstace = useCallback(
(row: any) => {
modalRef.current?.show({
content: 'models.instances',
okText: 'common.button.delrecreate',
operation: 'common.delete.single.confirm',
name: row.name,
async onOk() {
await deleteModelInstance(row.id);
}
const handleViewLogs = async (row: any) => {
try {
setCurrentInstance({
url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
status: row.state,
id: row.id,
modelId: row.model_id,
tail: InstanceRealtimeLogStatus.includes(row.state)
? undefined
: PageSize - 1
});
},
[deleteModelInstance]
);
setOpenLogModal(true);
onViewLogs();
saveScrollHeight();
} catch (error) {
console.log('error:', error);
}
};
const handleDeleteInstace = (row: any) => {
modalRef.current?.show({
content: 'models.instances',
okText: 'common.button.delrecreate',
operation: 'common.delete.single.confirm',
name: row.name,
async onOk() {
await deleteModelInstance(row.id);
onDeleteInstanceFromCache?.(row.id);
}
});
};
const getModelInstances = useCallback(async (row: any, options?: any) => {
try {
src/pages/llmodels/hooks/use-models-columns.tsx
+2 -1
View File
@@ -107,7 +107,8 @@ const useModelsColumns = ({
),
dataIndex: 'ready_replicas',
key: 'ready_replicas',
align: 'center',
dataField: 'replicas',
align: 'left',
sorter: tableSorter(4),
span: 4,
editable: {
src/pages/llmodels/index.tsx
+8
View File
@@ -331,6 +331,13 @@ const Models: React.FC = () => {
});
};
const handleDeleteInstanceFromCache = (id: number) => {
cacheInsDataListRef.current = cacheInsDataListRef.current.filter(
(item) => item.id !== id
);
setModelInstances(cacheInsDataListRef.current);
};
useEffect(() => {
let timer: any = null;
// fetch data first time
@@ -436,6 +443,7 @@ const Models: React.FC = () => {
onStop={handleSearchBySilent}
onStart={handleSearchBySilent}
onTableSort={handleOnSortChange}
onDeleteInstanceFromCache={handleDeleteInstanceFromCache}
sortOrder={sortOrder}
queryParams={queryParams}
loading={dataSource.loading}