feat(cluster): drop detail page; host Cluster Access drawer
Remove the cluster-detail route and the name-link navigation; the cluster name is now plain text. Mount the plugin-provided clusterDetail.AccessDrawer so the enterprise row action can open it.
This commit is contained in:
+1
-11
@@ -273,7 +273,7 @@ const baseRoutes = [
|
|||||||
selectedIcon: 'icon-cluster2-filled',
|
selectedIcon: 'icon-cluster2-filled',
|
||||||
defaultIcon: 'icon-cluster2-outline',
|
defaultIcon: 'icon-cluster2-outline',
|
||||||
component: './cluster-management/clusters',
|
component: './cluster-management/clusters',
|
||||||
subMenu: ['/resources/clusters/detail', '/resources/clusters/create']
|
subMenu: ['/resources/clusters/create']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'workers',
|
name: 'workers',
|
||||||
@@ -301,16 +301,6 @@ const baseRoutes = [
|
|||||||
selectedIcon: 'icon-credential-filled',
|
selectedIcon: 'icon-credential-filled',
|
||||||
defaultIcon: 'icon-credential-outline',
|
defaultIcon: 'icon-credential-outline',
|
||||||
component: './cluster-management/credentials'
|
component: './cluster-management/credentials'
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'clusterDetail',
|
|
||||||
path: '/resources/clusters/detail',
|
|
||||||
key: 'clusterDetail',
|
|
||||||
icon: 'icon-cluster2-outline',
|
|
||||||
selectedIcon: 'icon-cluster2-filled',
|
|
||||||
defaultIcon: 'icon-cluster2-outline',
|
|
||||||
hideInMenu: true,
|
|
||||||
component: './cluster-management/cluster-detail'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import type { PageActionType } from '@/config/types';
|
|||||||
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
|
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
|
||||||
import useTableFetch from '@/hooks/use-table-fetch';
|
import useTableFetch from '@/hooks/use-table-fetch';
|
||||||
import useWatchList from '@/hooks/use-watch-list';
|
import useWatchList from '@/hooks/use-watch-list';
|
||||||
|
import { getGPUStackPlugin } from '@/plugins';
|
||||||
import {
|
import {
|
||||||
DeleteModal,
|
DeleteModal,
|
||||||
FilterBar,
|
FilterBar,
|
||||||
@@ -14,7 +15,7 @@ import {
|
|||||||
TableOrder,
|
TableOrder,
|
||||||
TableProvider
|
TableProvider
|
||||||
} from '@gpustack/core-ui';
|
} from '@gpustack/core-ui';
|
||||||
import { useIntl, useNavigate } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { useMemoizedFn } from 'ahooks';
|
import { useMemoizedFn } from 'ahooks';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import { useAtom } from 'jotai';
|
import { useAtom } from 'jotai';
|
||||||
@@ -82,10 +83,13 @@ const Clusters: React.FC = () => {
|
|||||||
mine: true
|
mine: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const navigate = useNavigate();
|
|
||||||
const { goToGrafana, ActionButton } = useGranfanaLink({
|
const { goToGrafana, ActionButton } = useGranfanaLink({
|
||||||
type: 'cluster'
|
type: 'cluster'
|
||||||
});
|
});
|
||||||
|
// Cluster Access lives in the enterprise plugin: it contributes the
|
||||||
|
// row action and this self-controlled drawer, owning its own
|
||||||
|
// open/close state. OSS just mounts it (nothing without a plugin).
|
||||||
|
const AccessDrawer = getGPUStackPlugin()?.clusterDetail?.AccessDrawer;
|
||||||
const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
|
const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
|
||||||
const [expandAtom] = useAtom(expandKeysAtom);
|
const [expandAtom] = useAtom(expandKeysAtom);
|
||||||
const [clusterSession, setClusterSession] = useAtom(clusterSessionAtom);
|
const [clusterSession, setClusterSession] = useAtom(clusterSessionAtom);
|
||||||
@@ -272,14 +276,6 @@ const Clusters: React.FC = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOnCell = useMemoizedFn((record: ClusterListItem, dataIndex) => {
|
|
||||||
if (dataIndex === 'name') {
|
|
||||||
navigate(
|
|
||||||
`/resources/clusters/detail?id=${record.id}&name=${record.name}&page=clusters`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchCredentialList = async () => {
|
const fetchCredentialList = async () => {
|
||||||
const data = await queryCredentialList({ page: -1 });
|
const data = await queryCredentialList({ page: -1 });
|
||||||
@@ -366,7 +362,7 @@ const Clusters: React.FC = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const columns = useClusterColumns(handleSelect, handleOnCell);
|
const columns = useClusterColumns(handleSelect);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -482,6 +478,7 @@ const Clusters: React.FC = () => {
|
|||||||
onClose={handleClusterModalClose}
|
onClose={handleClusterModalClose}
|
||||||
></ClusterModal>
|
></ClusterModal>
|
||||||
{AddWorkerModal}
|
{AddWorkerModal}
|
||||||
|
{AccessDrawer && <AccessDrawer />}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import {
|
|||||||
type TableColumnProps as SealColumnProps
|
type TableColumnProps as SealColumnProps
|
||||||
} from '@gpustack/core-ui';
|
} from '@gpustack/core-ui';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Tooltip, Typography } from 'antd';
|
import { Tooltip } from 'antd';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
@@ -85,21 +85,15 @@ const clusterActionList = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const useClusterColumns = (
|
const useClusterColumns = (
|
||||||
handleSelect: (val: string, record: ClusterListItem, item?: any) => void,
|
handleSelect: (val: string, record: ClusterListItem, item?: any) => void
|
||||||
onCellClick?: (record: ClusterListItem, dataIndex: string) => void
|
|
||||||
): SealColumnProps[] => {
|
): SealColumnProps[] => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const systemConfig = useAtomValue(systemConfigAtom);
|
const systemConfig = useAtomValue(systemConfigAtom);
|
||||||
const pluginCols = usePluginListColumns('clusters');
|
const pluginCols = usePluginListColumns('clusters');
|
||||||
// The cluster-detail page is shipped in OSS source, but OSS keeps
|
// The cluster name is plain text: there is no cluster-detail page
|
||||||
// it unreachable from the cluster list — the link is only
|
// to route into. A plugin may still contribute extra row actions
|
||||||
// surfaced when a plugin opts in via
|
// (topology, Cluster Access) via `clusterDetail.useGenerateActions`.
|
||||||
// `clusterDetail.linkableName`. Without a plugin we render the
|
const { useGenerateActions } = getGPUStackPlugin()?.clusterDetail || {};
|
||||||
// name as plain text (matches the pre-restore behaviour); with one
|
|
||||||
// we use Typography.Link wired to the parent's `onCellClick`.
|
|
||||||
|
|
||||||
const { linkableName: nameLinkable, useGenerateActions } =
|
|
||||||
getGPUStackPlugin()?.clusterDetail || {};
|
|
||||||
|
|
||||||
const actionList =
|
const actionList =
|
||||||
useGenerateActions?.({ actions: clusterActionList }) || clusterActionList;
|
useGenerateActions?.({ actions: clusterActionList }) || clusterActionList;
|
||||||
@@ -160,13 +154,7 @@ const useClusterColumns = (
|
|||||||
render: (text: string, record: ClusterListItem) => (
|
render: (text: string, record: ClusterListItem) => (
|
||||||
<>
|
<>
|
||||||
<AutoTooltip ghost title={text}>
|
<AutoTooltip ghost title={text}>
|
||||||
{nameLinkable ? (
|
<span className="text-primary">{record.name}</span>
|
||||||
<Typography.Link onClick={() => onCellClick?.(record, 'name')}>
|
|
||||||
{record.name}
|
|
||||||
</Typography.Link>
|
|
||||||
) : (
|
|
||||||
<span className="text-primary">{record.name}</span>
|
|
||||||
)}
|
|
||||||
</AutoTooltip>
|
</AutoTooltip>
|
||||||
{record.is_default && (
|
{record.is_default && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
@@ -258,7 +246,7 @@ const useClusterColumns = (
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
}, [handleSelect, onCellClick, intl, pluginCols]);
|
}, [handleSelect, intl, pluginCols]);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default useClusterColumns;
|
export default useClusterColumns;
|
||||||
|
|||||||
Reference in New Issue
Block a user