diff --git a/src/pages/cluster-management/components/cluster-form.tsx b/src/pages/cluster-management/components/cluster-form.tsx
index e84682ec..a8122891 100644
--- a/src/pages/cluster-management/components/cluster-form.tsx
+++ b/src/pages/cluster-management/components/cluster-form.tsx
@@ -14,6 +14,7 @@ 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;
@@ -60,7 +61,17 @@ const ClusterForm: React.FC
= forwardRef(
useEffect(() => {
if (currentData) {
- form.setFieldsValue(currentData);
+ const volumeMounts = currentData?.k8s_volume_mounts || [];
+ const realVolumeList = (volumeMounts || []).map(
+ (item: any, index: number) => ({
+ ...item,
+ sourceType: Object.keys(item.volumeSource || {})[0] || 'hostPath'
+ })
+ );
+ form.setFieldsValue({
+ ...currentData,
+ k8s_volume_mounts: realVolumeList
+ });
}
}, [currentData]);
@@ -151,6 +162,7 @@ const ClusterForm: React.FC = forwardRef(
credentialList={credentialList}
>
)}
+
name="description"
rules={[{ required: false }]}
@@ -161,6 +173,12 @@ const ClusterForm: React.FC = forwardRef(
label={intl.formatMessage({ id: 'common.table.description' })}
>
+ {provider === ProviderValueMap.Kubernetes && (
+
+ )}
= ({ action }) => {
+ const form = Form.useFormInstance();
+ const intl = useIntl();
+ const { getRuleMessage } = useAppUtils();
+
+ const [collapseKey, setCollapseKey] = useState>(
+ new Set([0])
+ );
+
+ const volumeList = [
+ {
+ name: 'volume-1',
+ mountPath: '',
+ readOnly: false,
+ sourceType: 'hostPath',
+ volumeSource: {
+ hostPath: {
+ path: '',
+ type: 'DirectoryOrCreate'
+ }
+ }
+ }
+ ];
+
+ useEffect(() => {
+ if (action === PageAction.CREATE) {
+ form.setFieldValue('k8s_volume_mounts', volumeList);
+ }
+ }, [action]);
+
+ const onToggle = (open: boolean, key: number) => {
+ setCollapseKey(open ? new Set([key]) : new Set());
+ };
+
+ const handleAdd = async () => {
+ try {
+ await form.validateFields(['k8s_volume_mounts'], {
+ recursive: true
+ });
+
+ const list = form.getFieldValue('k8s_volume_mounts') || [];
+
+ form.setFieldValue('k8s_volume_mounts', [
+ ...list,
+ {
+ name: `volume-${list.length + 1}`,
+ mountPath: '',
+ readOnly: false,
+ sourceType: 'hostPath',
+ volumeSource: {
+ hostPath: {
+ path: '',
+ type: 'DirectoryOrCreate'
+ }
+ }
+ }
+ ]);
+
+ setTimeout(() => {
+ setCollapseKey(new Set([list.length]));
+ }, 100);
+ } catch (e: any) {
+ const errorIndex = e?.errorFields?.[0]?.name?.[1];
+ if (typeof errorIndex === 'number') {
+ setCollapseKey(new Set([errorIndex]));
+ }
+ }
+ };
+
+ const handleSourceChange = (value: string, index: number) => {
+ const list = form.getFieldValue('k8s_volume_mounts') || [];
+
+ const updated = list.map((item: any, i: number) => {
+ if (i !== index) return item;
+
+ let volumeSource: any = {};
+
+ if (value === 'hostPath') {
+ volumeSource = {
+ hostPath: { path: '', type: 'DirectoryOrCreate' }
+ };
+ } else if (value === 'pvc') {
+ volumeSource = {
+ persistentVolumeClaim: { claimName: '', readOnly: false }
+ };
+ } else if (value === 'configMap') {
+ volumeSource = {
+ configMap: { name: '', optional: false }
+ };
+ }
+
+ return {
+ ...item,
+ sourceType: value,
+ volumeSource
+ };
+ });
+
+ form.setFieldValue('k8s_volume_mounts', updated);
+ };
+
+ return (
+ <>
+
+ <div className="flex-center gap-8">
+ <span>{intl.formatMessage({ id: 'clusters.volume.title' })}</span>
+ <Button type="link" onClick={handleAdd}>
+ <PlusOutlined /> {intl.formatMessage({ id: 'clusters.volume.add' })}
+ </Button>
+ </div>
+
+
+
+ {(fields, { remove }) => {
+ const list = form.getFieldValue('k8s_volume_mounts') || [];
+
+ return fields.map(({ name }) => {
+ const item = list[name] || {};
+
+ return (
+
+
onToggle(open, name)}
+ styles={{
+ body: collapseKey.has(name) ? { padding: 16 } : {},
+ content: { paddingTop: 0 },
+ header: {
+ backgroundColor: 'unset'
+ }
+ }}
+ title={
+
+ }
+ right={
+
+ }
+ >
+
+
+
+
+ {/* Mount Path */}
+
+
+
+
+
+
+ {/* ReadOnly */}
+
+
+
+
+
+ {/* Source Type */}
+
+ handleSourceChange(value, name)}
+ options={sourceTypeOptions}
+ value={item.sourceType}
+ >
+
+
+ {/* Dynamic Source Form */}
+ {item.sourceType === 'hostPath' && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {item.sourceType === 'pvc' && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {item.sourceType === 'configMap' && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
- {/*
- {intl.formatMessage({ id: 'clusters.create.configBasic' })}
-
- }
- marginTop={0}
- > */}
-
-