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

fix: k8s volume config

Browse Source
This commit is contained in:
jialin
2026-04-14 20:42:01 +08:00
committed by jialin
parent 46b9855c87
commit 41c9b86fd9
6 changed files with 66 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/seal-form/seal-switch.tsx
+1
View File
@@ -53,6 +53,7 @@ const SealSlider: React.FC<SealSwitchProps> = (props) => {
required={required}
status={checkStatus || status}
className="no-focus"
disabled={props.disabled}
>
<Inner>
<LabelInfo label={label} description={description}></LabelInfo>
src/pages/api-keys/hooks/use-keys-columns.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ const useModelsColumns = ({
key: 'masked_value',
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text}
{text || '-'}
</AutoTooltip>
)
},
src/pages/cluster-management/components/cluster-form.tsx
+18 -4
View File
@@ -14,7 +14,6 @@ import {
} from '../config/types';
import AdvanceConfig from '../step-forms/advance-config';
import CloudProvider from './cloud-provider-form';
import K8SVolumeMount from './k8s-volume-mount';
type AddModalProps = {
action: PageActionType;
@@ -72,6 +71,23 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
...currentData,
k8s_volume_mounts: realVolumeList
});
} else {
form.setFieldsValue({
k8s_volume_mounts: [
{
name: 'gpustack-data-dir',
mountPath: '/var/lib/gpustack',
readOnly: false,
sourceType: 'hostPath',
volumeSource: {
hostPath: {
path: '/var/lib/gpustack',
type: 'DirectoryOrCreate'
}
}
}
]
});
}
}, [currentData]);
@@ -173,9 +189,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
label={intl.formatMessage({ id: 'common.table.description' })}
></SealTextArea>
</Form.Item>
{provider === ProviderValueMap.Kubernetes && (
<K8SVolumeMount action={action}></K8SVolumeMount>
)}
<CollapsePanel
accordion={false}
activeKey={activeKey}
src/pages/cluster-management/components/k8s-volume-mount.tsx
+20 -30
View File
@@ -21,15 +21,13 @@ const Label = styled.span`
`;
const Title = styled.div`
position: sticky;
top: -16px;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--ant-color-bg-container);
font-weight: 600;
padding-top: 8px;
font-weight: 500;
font-size: 14px;
padding-top: 0px;
padding-bottom: 8px;
`;
@@ -141,7 +139,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
display: 'flex',
flexDirection: 'column',
gap: '16px',
marginBottom: '24px'
marginBottom: '8px'
}}
>
<Form.List name="k8s_volume_mounts">
@@ -180,13 +178,17 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
</Label>
}
right={
<Button
size="small"
shape="circle"
onClick={() => remove(name)}
>
<MinusOutlined />
</Button>
<>
{name > 0 && (
<Button
size="small"
shape="circle"
onClick={() => remove(name)}
>
<MinusOutlined />
</Button>
)}
</>
}
>
<Form.Item
@@ -202,6 +204,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
]}
>
<SealInput.Input
disabled={name === 0}
label={intl.formatMessage({
id: 'clusters.volume.name'
})}
@@ -231,6 +234,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
>
<SealInput.Input
required
disabled={name === 0}
placeholder={intl.formatMessage({
id: 'clusters.volume.mountPath.format'
})}
@@ -248,6 +252,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
valuePropName="checked"
>
<SealSwitch
disabled={name === 0}
label={intl.formatMessage({
id: 'clusters.volume.readOnly'
})}
@@ -270,6 +275,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
>
<SealSelect
required
disabled={name === 0}
label={intl.formatMessage({
id: 'clusters.volume.sourceType'
})}
@@ -328,6 +334,7 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
>
<SealSelect
required
disabled={name === 0}
options={hostTypeOptions}
label={intl.formatMessage({
id: 'clusters.volume.hostPath.type'
@@ -365,23 +372,6 @@ const VolumeMountsForm: React.FC<{ action: PageActionType }> = ({ action }) => {
/>
</Form.Item>
</div>
<Form.Item
style={{ width: 240 }}
name={[
name,
'volumeSource',
'persistentVolumeClaim',
'readOnly'
]}
valuePropName="checked"
>
<SealSwitch
label={intl.formatMessage({
id: 'clusters.volume.pvc.readOnly'
})}
/>
</Form.Item>
</Flex>
)}
src/pages/cluster-management/config/index.ts
+5 -5
View File
@@ -146,10 +146,10 @@ export const sourceTypeOptions = [
label: 'clusters.volume.sourceType.pvc',
locale: true,
value: 'persistentVolumeClaim'
},
{
label: 'clusters.volume.sourceType.configMap',
locale: true,
value: 'configMap'
}
// {
// label: 'clusters.volume.sourceType.configMap',
// locale: true,
// value: 'configMap'
// }
];
src/pages/cluster-management/step-forms/advance-config.tsx
+21 -1
View File
@@ -6,11 +6,25 @@ import YamlEditor from '@/pages/_components/yaml-editor';
import { useIntl } from '@umijs/max';
import { Button, Form } from 'antd';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import styled from 'styled-components';
import K8SVolumeMount from '../components/k8s-volume-mount';
import { ProviderType, ProviderValueMap } from '../config';
import { ClusterFormData as FormData } from '../config/types';
import schema from '../config/worker-config.json';
import { dockerConfig, kubernetesConfig } from '../config/yaml-template';
const Title = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--ant-color-bg-container);
font-weight: 500;
font-size: 14px;
padding-top: 0px;
height: 56px;
padding-bottom: 8px;
`;
const ClusterAdvanceConfig: React.FC<{
action: PageActionType;
provider: ProviderType;
@@ -59,11 +73,17 @@ const ClusterAdvanceConfig: React.FC<{
>
<SealInput.TextArea required={false} trim={false}></SealInput.TextArea>
</Form.Item>
{provider === ProviderValueMap.Kubernetes && (
<K8SVolumeMount action={action}></K8SVolumeMount>
)}
<Title>
{intl.formatMessage({ id: 'clusters.create.workerConfig' })}
</Title>
<YamlEditor
ref={editorRef}
title={
<span className="flex-center">
<span>{`${intl.formatMessage({ id: 'clusters.create.workerConfig' })} (YAML)`}</span>
<span>{`YAML`}</span>
<Button
size="small"
type="link"