Skip to content

refactor(tables): share parent column grid in expandable child rows #1284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hibig merged 1 commit into from
Jul 16, 2026
Merged

refactor(tables): share parent column grid in expandable child rows #1284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/global.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ html {
// ======== container ============
--color-border-container: #ededed;
--color-text-table-header: #71717a;
--seal-table-row-min-height: 68px;
}

html[data-theme='realDark'] {
Expand Down
3 changes: 3 additions & 0 deletions src/pages/cluster-management/clusters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,9 @@ const Clusters: React.FC = () => {
dataList={list}
provider={options.parent?.provider}
clusterId={options.parent?.id}
gridTemplate={options.gridTemplate}
prefixWidth={options.prefixWidth}
columns={options.columns}
/>
);
};
Expand Down
85 changes: 56 additions & 29 deletions src/pages/cluster-management/components/pool-rows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,25 @@ import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import {
CellContent,
type ChildGridOptions,
DeleteModal,
RowChildren,
ExpandedRowGrid,
TableRowProvider
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Col, message, Row } from 'antd';
import { message } from 'antd';
import _ from 'lodash';
import React, { useRef, useState } from 'react';
import { deleteWorkerPool, updateWorkerPool } from '../apis';
import { ProviderType } from '../config';
import { NodePoolFormData, NodePoolListItem } from '../config/types';
import usePoolsColumns from '../hooks/use-pools-columns';
import AddPool from './add-pool';
interface PoolRowsProps {
interface PoolRowsProps extends Pick<
ChildGridOptions,
'gridTemplate' | 'prefixWidth' | 'columns'
> {
dataList: NodePoolListItem[];
provider: ProviderType;
clusterId: number | string;
Expand All @@ -25,9 +29,35 @@ interface PoolRowsProps {
const PoolRows: React.FC<PoolRowsProps> = ({
dataList,
provider,
clusterId
clusterId,
gridTemplate,
prefixWidth = 0,
columns: parentColumns
}) => {
const intl = useIntl();

// The child row shares the parent's column grid; cells flow left-to-right and
// only declare a span, keyed on the pool column's OWN dataIndex — never on a
// parent cluster column key. Parent layout: name (1) | provider…state middle
// region | created_at (1) | operations (1). The three middle pool columns
// cover that region: `replicas`→state (last, 1 track), `image_name`→
// models+workers (2 tracks), `instance_type` absorbs the rest (plugins +
// provider + gpus).
const columnCount = parentColumns?.length ?? 0;
const middleSpan = Math.max(columnCount - 3, 1);
const spanFor = (dataIndex: string): number => {
switch (dataIndex) {
case 'instance_type':
return Math.max(middleSpan - 3, 1);
case 'image_name':
return 2;
case 'replicas':
return 1;
default:
// name / created_at / operations align 1:1 with their parent column.
return 1;
}
};
Comment on lines +48 to +60

@gemini-code-assist gemini-code-assist Bot Jul 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The dataIndex parameter in spanFor is typed as string, but table columns can have an optional dataIndex (which is typed as string | undefined). To prevent potential TypeScript compilation errors when passing col.dataIndex, update the parameter type to string | undefined (or make it optional).

Suggested change
const spanFor = (dataIndex: string): number => {
switch (dataIndex) {
case 'instance_type':
return Math.max(middleSpan - 3, 1);
case 'image_name':
return 2;
case 'replicas':
return 1;
default:
// name / created_at / operations align 1:1 with their parent column.
return 1;
}
};
const spanFor = (dataIndex?: string): number => {
switch (dataIndex) {
case 'instance_type':
return Math.max(middleSpan - 3, 1);
case 'image_name':
return 2;
case 'replicas':
return 1;
default:
// name / created_at / operations align 1:1 with their parent column.
return 1;
}
};

const modalRef = useRef<any>(null);
const [addPoolStatus, setAddPoolStatus] = useState<{
open: boolean;
Expand Down Expand Up @@ -62,8 +92,10 @@ const PoolRows: React.FC<PoolRowsProps> = ({
}
};

const handleOnCell = async (row: NodePoolListItem, dataIndex: string) => {
console.log('handleOncell===', row, dataIndex);
const handleOnCell = async (
row: NodePoolListItem,
_data: { dataIndex: string; newValue: any; oldValue: any }
) => {
try {
await updateWorkerPool({
data: row,
Expand Down Expand Up @@ -118,31 +150,26 @@ const PoolRows: React.FC<PoolRowsProps> = ({
<>
{dataList?.map((data: NodePoolListItem) => {
return (
<div
<TableRowProvider
key={data.id}
style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
value={{ row: data, onCell: handleOnCell }}
>
<TableRowProvider value={{ row: data, onCell: handleOnCell }}>
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
{columns.map((col: Record<string, any>) => {
return (
<Col
key={col.dataIndex || col.key}
span={col.span}
style={{
paddingInline: 0,
...(col.style || {})
}}
>
<CellContent {..._.omit(col, ['key'])}></CellContent>
</Col>
);
})}
</Row>
</RowChildren>
</TableRowProvider>
</div>
<ExpandedRowGrid
gridTemplate={gridTemplate}
prefixWidth={prefixWidth}
>
{columns.map((col: Record<string, any>) => (
<ExpandedRowGrid.Cell
key={col.dataIndex || col.key}
span={spanFor(col.dataIndex)}
>
<CellContent
{..._.omit(col, ['key', 'style', 'span'])}
></CellContent>
</ExpandedRowGrid.Cell>
))}
</ExpandedRowGrid>
</TableRowProvider>
);
})}
<AddPool
Expand Down
18 changes: 0 additions & 18 deletions src/pages/cluster-management/hooks/use-pools-columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,6 @@ const usePoolsColumns = (
showTitle: false
},
span: 3,
style: {
paddingInline: 'var(--ant-table-cell-padding-inline)'
},
render: (text: string) => (
<AutoTooltip title={text} ghost minWidth={20}>
{text}
Expand All @@ -60,9 +57,6 @@ const usePoolsColumns = (
showTitle: false
},
span: 4,
style: {
paddingLeft: 62
},
render: (text: string, record: ListItem) => (
<AutoTooltip
title={
Expand Down Expand Up @@ -98,9 +92,6 @@ const usePoolsColumns = (
ellipsis: {
showTitle: false
},
style: {
paddingLeft: 56
},
render: (text: string) => (
<AutoTooltip
title={
Expand All @@ -125,9 +116,6 @@ const usePoolsColumns = (
dataIndex: 'replicas',
span: 6,
key: 'replicas',
style: {
paddingLeft: 50
},
editable: {
valueType: 'number',
title: intl.formatMessage({ id: 'models.table.replicas.edit' })
Expand Down Expand Up @@ -165,9 +153,6 @@ const usePoolsColumns = (
ellipsis: {
showTitle: false
},
style: {
paddingLeft: 42
},
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
Expand All @@ -179,9 +164,6 @@ const usePoolsColumns = (
key: 'operations',
dataIndex: 'operations',
span: 3,
style: {
paddingLeft: 36
},
render: (text: string, record: ListItem) => (
<DropdownButtons
items={actionItems}
Expand Down
137 changes: 65 additions & 72 deletions src/pages/llmodels/components/instance/instance-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
import { AutoTooltip, RowChildren } from '@gpustack/core-ui';
import { Col, Row } from 'antd';
import { AutoTooltip, ExpandedRowGrid } from '@gpustack/core-ui';
import dayjs from 'dayjs';
import React from 'react';
import { ModelInstanceListItem } from '../../config/types';
Expand All @@ -11,11 +10,17 @@ import DistributeInfoCell from '../instance-cells/distribute-info-cell';
import DownloadingStatusCell from '../instance-cells/downloading-status-cell';
import InstanceStatusCell from '../instance-cells/instance-status-cell';
import NameCell from '../instance-cells/name-cell';

interface InstanceItemProps {
instanceData: ModelInstanceListItem;
workerList: WorkerListItem[];
modelData?: any;
defaultOpenId: string;
// Column grid shared from the parent SealTable so this child row aligns
// its cells to the parent columns instead of guessing paddings.
gridTemplate?: string;
prefixWidth?: number;
columns?: any[];
handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
}

Expand All @@ -24,79 +29,67 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
workerList,
modelData,
defaultOpenId,
gridTemplate,
prefixWidth = 0,
columns,
handleChildSelect
}) => {
// The child row shares the parent's column grid; cells flow left-to-right and
// only declare a span, so there is no dependency on parent column keys.
// Parent layout: name (1) | middle plugin/source region | replicas,
// created_at, operation (last 3). The middle absorbs whatever columns sit
// between name and replicas (cluster_id, source, any plugin column).
const columnCount = columns?.length ?? 0;
const middleSpan = Math.max(columnCount - 4, 1);

return (
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
<RowChildren>
<Row
style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
align="middle"
>
<Col
span={6}
style={{
paddingInline: 'var(--ant-table-cell-padding-inline)'
}}
>
<NameCell
record={instanceData}
modelData={modelData}
defaultOpenId={defaultOpenId}
></NameCell>
</Col>
<Col span={7}>
<span
style={{
paddingLeft: '58px',
flexWrap: 'wrap',
gap: '8px'
}}
className="flex align-center"
>
<CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
<DistributeInfoCell
record={instanceData}
workerList={workerList}
></DistributeInfoCell>
</span>
</Col>
<Col span={4}>
<span
style={{ paddingLeft: '40px', gap: 4 }}
className="flex-center"
>
<InstanceStatusCell
record={instanceData}
onSelect={handleChildSelect}
/>
<DownloadingStatusCell
backend={modelData?.backend}
distributed_servers={instanceData.distributed_servers}
workerList={workerList}
record={instanceData}
></DownloadingStatusCell>
</span>
</Col>
<Col span={4}>
<span style={{ paddingLeft: 43 }} className="flex">
<AutoTooltip ghost>
{dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
</span>
</Col>
<Col span={3}>
<div style={{ paddingLeft: 36 }}>
<ActionsCell
record={instanceData}
modelData={modelData}
onSelect={handleChildSelect}
></ActionsCell>
</div>
</Col>
</Row>
</RowChildren>
</div>
<ExpandedRowGrid
gridTemplate={gridTemplate}
prefixWidth={prefixWidth}
style={{ color: 'var(--ant-color-text-secondary)' }}
>
<ExpandedRowGrid.Cell span={1}>
<NameCell
record={instanceData}
modelData={modelData}
defaultOpenId={defaultOpenId}
></NameCell>
</ExpandedRowGrid.Cell>
<ExpandedRowGrid.Cell
span={middleSpan}
style={{ flexWrap: 'wrap', gap: 8 }}
>
<CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
<DistributeInfoCell
record={instanceData}
workerList={workerList}
></DistributeInfoCell>
</ExpandedRowGrid.Cell>
<ExpandedRowGrid.Cell span={1} style={{ gap: 4 }}>
<InstanceStatusCell
record={instanceData}
onSelect={handleChildSelect}
/>
<DownloadingStatusCell
backend={modelData?.backend}
distributed_servers={instanceData.distributed_servers}
workerList={workerList}
record={instanceData}
></DownloadingStatusCell>
</ExpandedRowGrid.Cell>
<ExpandedRowGrid.Cell span={1}>
<AutoTooltip ghost>
{dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
</ExpandedRowGrid.Cell>
<ExpandedRowGrid.Cell span={1}>
<ActionsCell
record={instanceData}
modelData={modelData}
onSelect={handleChildSelect}
></ActionsCell>
</ExpandedRowGrid.Cell>
</ExpandedRowGrid>
);
};
export default InstanceItem;
Loading
Loading