Files
gpustack-ui/src/pages/backends/components/version-info-modal.tsx
T

94 lines
2.6 KiB
TypeScript

import ScrollerModal from '@/components/scroller-modal';
import { PlusOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { BackendSourceValueMap } from '../config';
import { VersionListItem } from '../config/types';
import VersionInfo from '../forms/version-info';
interface VersionInfoModalProps {
open?: boolean;
currentData?: any;
addVersion?: () => void;
onClose?: () => void;
}
const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
open,
currentData,
addVersion,
onClose
}) => {
const intl = useIntl();
const [versionConfigs, setVersionConfigs] = useState<VersionListItem[]>([]);
useEffect(() => {
if (open && currentData) {
// add is_built_in field to built_in_version_configs
const builtInVersions = currentData.built_in_version_configs || {};
for (const key in builtInVersions) {
if (builtInVersions?.hasOwnProperty(key)) {
builtInVersions[key].is_built_in =
currentData.backend_source === BackendSourceValueMap.BUILTIN &&
currentData.is_built_in;
}
}
const versions = {
...builtInVersions,
...currentData.version_configs
};
const versionList: VersionListItem[] = Object.entries(versions).map(
([key, value]: [string, any]) => ({
version_no: key,
..._.pick(value, [
'image_name',
'run_command',
'entrypoint',
'env',
'backend_source'
]),
is_default: key === currentData.default_version,
availableFrameworks: [
...(value.built_in_frameworks || []),
...(value.custom_framework ? [value.custom_framework] : [])
],
is_built_in: value.is_built_in || false
})
);
setVersionConfigs(versionList);
}
}, [open, currentData]);
return (
<ScrollerModal
open={open}
title={
<div className="flex-center gap-16">
<span style={{ fontSize: 14 }}>
{intl.formatMessage({ id: 'backend.versions' })}
</span>
<Button onClick={addVersion} type="link" size="small">
<PlusOutlined /> {intl.formatMessage({ id: 'backend.addVersion' })}
</Button>
</div>
}
width={600}
centered
destroyOnHidden
closable={true}
maskClosable={false}
onOk={onClose}
onCancel={onClose}
footer={null}
>
<VersionInfo versionConfigs={versionConfigs} />
</ScrollerModal>
);
};
export default VersionInfoModal;