Skip to content

fix(FR-2762): reuse list query data for preset detail, add copyable image, show resource slots #7199

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

Closed
agatha197 wants to merge 1 commit into from
+96 −43
Closed

fix(FR-2762): reuse list query data for preset detail, add copyable image, show resource slots #7199

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
90 changes: 68 additions & 22 deletions react/src/components/DeploymentPresetDetailContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
*/
import type { DeploymentPresetDetailContentFragment$key } from '../__generated__/DeploymentPresetDetailContentFragment.graphql';
import { convertToBinaryUnit } from '../helper';
import { ResourceNumbersOfSession } from '../pages/SessionLauncherPage';
import { Descriptions, Typography } from 'antd';
import { BAICard, BAIFlex } from 'backend.ai-ui';
import React from 'react';
Expand All @@ -26,7 +28,6 @@ const DeploymentPresetDetailContent: React.FC<
id
name
description
rank
runtimeVariantId
runtimeVariant {
id
Expand All @@ -51,6 +52,14 @@ const DeploymentPresetDetailContent: React.FC<
value
}
}
resourceSlots {
edges {
node {
slotName
quantity
}
}
}
deploymentDefaults {
openToPublic
replicaCount
Expand Down Expand Up @@ -88,7 +97,13 @@ const DeploymentPresetDetailContent: React.FC<
items={[
{
label: t('adminDeploymentPreset.Image'),
children: preset.execution?.image || '-',
children: preset.execution?.image ? (
<Typography.Text copyable>
{preset.execution.image}
</Typography.Text>
) : (
'-'
),
},
{
label: t('adminDeploymentPreset.Runtime'),
Expand Down Expand Up @@ -122,26 +137,57 @@ const DeploymentPresetDetailContent: React.FC<
title={t('adminDeploymentPreset.SectionResources')}
styles={{ body: { paddingTop: 0 } }}
>
<Descriptions
size="small"
column={2}
items={[
...(shmem
? [
{
label: t('adminDeploymentPreset.Shmem'),
children: `${shmem} GiB`,
},
]
: []),
...(preset.resource?.resourceOpts
?.filter((opt) => opt.name !== 'shmem')
.map((opt) => ({
label: opt.name,
children: opt.value,
})) ?? []),
]}
/>
<BAIFlex direction="column" align="stretch" gap="xs">
<ResourceNumbersOfSession
resource={(() => {
const slots = (preset.resourceSlots?.edges ?? [])
.map((e) => e?.node)
.filter((n) => n != null);
const cpuSlot = slots.find((n) => n!.slotName === 'cpu');
const memSlot = slots.find((n) => n!.slotName === 'mem');
const accelSlot = slots.find(
(n) => n!.slotName !== 'cpu' && n!.slotName !== 'mem',
);
const memBytes = memSlot ? parseFloat(memSlot.quantity) : 0;
const memGiB =
convertToBinaryUnit(memBytes, 'g', 0, true)?.number ?? 0;
return {
cpu: cpuSlot ? parseFloat(cpuSlot.quantity) : 0,
mem: `${memGiB}g`,
...(accelSlot
? {
accelerator: parseFloat(accelSlot.quantity),
acceleratorType: accelSlot.slotName,
}
: {}),
};
})()}
/>
{(shmem ||
(preset.resource?.resourceOpts?.filter((o) => o.name !== 'shmem')
.length ?? 0) > 0) && (
<Descriptions
size="small"
column={2}
items={[
...(shmem
? [
{
label: t('adminDeploymentPreset.Shmem'),
children: `${shmem} GiB`,
},
]
: []),
...(preset.resource?.resourceOpts
?.filter((opt) => opt.name !== 'shmem')
.map((opt) => ({
label: opt.name,
children: opt.value,
})) ?? []),
]}
/>
)}
</BAIFlex>
</BAICard>
<BAICard
size="small"
Expand Down
49 changes: 28 additions & 21 deletions react/src/components/VFolderDeployModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,23 @@
@license
Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
*/
import type { DeploymentPresetDetailContentFragment$key } from '../__generated__/DeploymentPresetDetailContentFragment.graphql';
import { VFolderDeployModalEndpointPollQuery } from '../__generated__/VFolderDeployModalEndpointPollQuery.graphql';
import { VFolderDeployModalMutation } from '../__generated__/VFolderDeployModalMutation.graphql';
import { VFolderDeployModalQuery } from '../__generated__/VFolderDeployModalQuery.graphql';
import { useWebUINavigate } from '../hooks';
import { useSetBAINotification } from '../hooks/useBAINotification';
import { useCurrentProjectValue } from '../hooks/useCurrentProject';
import useDeploymentLauncher from '../hooks/useDeploymentLauncher';
import DeploymentPresetDetailModal from './DeploymentPresetDetailModal';
import DeploymentPresetDetailContent from './DeploymentPresetDetailContent';
import ErrorBoundaryWithNullFallback from './ErrorBoundaryWithNullFallback';
import { EllipsisOutlined, InfoCircleOutlined } from '@ant-design/icons';
import {
App,
Button,
Dropdown,
Form,
Skeleton,
Space,
Tooltip,
Typography,
Expand Down Expand Up @@ -131,6 +134,7 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
description
rank
runtimeVariantId
...DeploymentPresetDetailContentFragment
}
}
}
Expand All @@ -152,17 +156,7 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
return (
deploymentRevisionPresets?.edges
?.map((edge) => edge?.node)
.filter(
(
node,
): node is {
readonly id: string;
readonly name: string;
readonly description: string | null;
readonly rank: number;
readonly runtimeVariantId: string;
} => node != null,
) ?? []
.filter((node): node is NonNullable<typeof node> => node != null) ?? []
);
}, [deploymentRevisionPresets]);

Expand Down Expand Up @@ -278,9 +272,8 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
const [userSelectedPresetId, setUserSelectedPresetId] = useState<
string | undefined
>(undefined);
const [presetDetailId, setPresetDetailId] = useState<string | undefined>(
undefined,
);
const [presetDetailFrgmt, setPresetDetailFrgmt] =
useState<DeploymentPresetDetailContentFragment$key | null>(null);
const effectivePresetId =
userSelectedPresetId ??
(availablePresets[0]?.id ? toLocalId(availablePresets[0].id) : undefined);
Expand Down Expand Up @@ -408,7 +401,12 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
<Button
icon={<InfoCircleOutlined />}
disabled={!effectivePresetId}
onClick={() => setPresetDetailId(effectivePresetId)}
onClick={() => {
const node = deploymentRevisionPresets?.edges?.find(
(e) => toLocalId(e?.node?.id ?? '') === effectivePresetId,
)?.node;
if (node) setPresetDetailFrgmt(node);
}}
/>
</Tooltip>
</Space.Compact>
Expand All @@ -427,11 +425,20 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
/>
</Form.Item>
</Form>
<DeploymentPresetDetailModal
open={!!presetDetailId}
presetId={presetDetailId}
onRequestClose={() => setPresetDetailId(undefined)}
/>
<BAIModal
open={!!presetDetailFrgmt}
centered
title={t('modelService.DeploymentPresetDetail')}
onCancel={() => setPresetDetailFrgmt(null)}
destroyOnHidden
footer={null}
>
<ErrorBoundaryWithNullFallback>
<Suspense fallback={<Skeleton active paragraph={{ rows: 6 }} />}>
<DeploymentPresetDetailContent presetFrgmt={presetDetailFrgmt} />
</Suspense>
</ErrorBoundaryWithNullFallback>
</BAIModal>
<BAIFlex justify="end" gap="sm">
<BAIButton onClick={onClose}>{t('button.Cancel')}</BAIButton>
{supportsQuickDeploy && vfolderId ? (
Expand Down
Loading