Skip to content

Commit a54e17c

Browse files
TianWuwtTianWuwt
committed
improve: update ResourceDrawer UI
1 parent be4c6b1 commit a54e17c

File tree

2 files changed

+181
-110
lines changed

2 files changed

+181
-110
lines changed

‎ui/src/pages/Cluster/Detail/Overview/ResourceDrawer.tsx‎

Lines changed: 179 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import { obcluster } from '@/api';
2+
import { CustomFormItem } from '@/components/CustomFormItem';
3+
import InputNumber from '@/components/InputNumber';
4+
import SelectWithTooltip from '@/components/SelectWithTooltip';
5+
import { MINIMAL_CONFIG, SUFFIX_UNIT } from '@/constants';
6+
import { getStorageClasses } from '@/services';
27
import { intl } from '@/utils/intl';
38
import { useRequest } from 'ahooks';
4-
import { Button, Col, Drawer, Form, Input, message, Row, Space } from 'antd';
5-
import React from 'react';
9+
import { Button, Col, Drawer, Form, Row, Space, message } from 'antd';
10+
import React, { useEffect } from 'react';
611

712
export interface ParametersModalProps {
813
visible: boolean;
@@ -13,6 +18,46 @@ export interface ParametersModalProps {
1318
namespace: string;
1419
}
1520

21+
export const TooltipItemContent = ({ item }) => {
22+
return (
23+
<ul style={{ margin: 0, padding: '10px' }}>
24+
{item.toolTipData.map((data: any) => {
25+
const key = Object.keys(data)[0];
26+
if (typeof data[key] === 'string') {
27+
return (
28+
<li style={{ listStyle: 'none' }} key={key}>
29+
<div
30+
style={{
31+
display: 'flex',
32+
justifyContent: 'space-between',
33+
}}
34+
>
35+
<p>{key}：</p>
36+
<p>{data[key]}</p>
37+
</div>
38+
</li>
39+
);
40+
} else {
41+
const value = JSON.stringify(data[key]) || String(data[key]);
42+
return (
43+
<li style={{ listStyle: 'none' }} key={key}>
44+
<div
45+
style={{
46+
display: 'flex',
47+
justifyContent: 'space-between',
48+
}}
49+
>
50+
<p>{key}：</p>
51+
<p>{value}</p>
52+
</div>
53+
</li>
54+
);
55+
}
56+
})}
57+
</ul>
58+
);
59+
};
60+
1661
const ResourceDrawer: React.FC<ParametersModalProps> = ({
1762
visible,
1863
onCancel,
@@ -24,6 +69,34 @@ const ResourceDrawer: React.FC<ParametersModalProps> = ({
2469
const [form] = Form.useForm<API.CreateClusterData>();
2570
const { validateFields } = form;
2671

72+
useEffect(() => {
73+
const data = {};
74+
const log = {};
75+
const redoLog = {};
76+
77+
initialValues?.forEach((item) => {
78+
if (item.type === 'data') {
79+
data[item.label] = item.value;
80+
}
81+
if (item.type === 'log') {
82+
log[item.label] = item.value;
83+
}
84+
if (item.type === 'redoLog') {
85+
redoLog[item.label] = item.value;
86+
}
87+
});
88+
89+
form.setFieldValue(['storage'], {
90+
data,
91+
log,
92+
redoLog,
93+
});
94+
}, [initialValues]);
95+
96+
const { data: storageClassesRes } = useRequest(getStorageClasses, {});
97+
98+
const storageClasses = storageClassesRes?.data;
99+
27100
const { runAsync: patchOBCluster, loading } = useRequest(
28101
obcluster.patchOBCluster,
29102
{
@@ -42,6 +115,9 @@ const ResourceDrawer: React.FC<ParametersModalProps> = ({
42115
},
43116
);
44117

118+
const fontStyle: React.CSSProperties = {
119+
fontWeight: 600,
120+
};
45121
return (
46122
<Drawer
47123
title={'存储资源编辑'}
@@ -57,38 +133,7 @@ const ResourceDrawer: React.FC<ParametersModalProps> = ({
57133
loading={loading}
58134
onClick={() => {
59135
validateFields().then((value) => {
60-
const { resource } = value;
61-
62-
const date = resource
63-
?.filter((item) => item.type === 'data')
64-
?.map((item1) =>
65-
item1.label === 'size'
66-
? { size: item1.value }
67-
: { storageClass: item1.value },
68-
);
69-
const log = resource
70-
?.filter((item) => item.type === 'log')
71-
?.map((item1) =>
72-
item1.label === 'size'
73-
? { size: item1.value }
74-
: { storageClass: item1.value },
75-
);
76-
const redoLog = resource
77-
?.filter((item) => item.type === 'redoLog')
78-
?.map((item1) =>
79-
item1.label === 'size'
80-
? { size: item1.value }
81-
: { storageClass: item1.value },
82-
);
83-
84-
const body = {
85-
storage: {
86-
data: date,
87-
log: log,
88-
redoLog: redoLog,
89-
},
90-
};
91-
patchOBCluster(name, namespace, body, `存储资源编辑成功`);
136+
patchOBCluster(name, namespace, value, `存储资源编辑成功`);
92137
});
93138
}}
94139
>
@@ -97,77 +142,106 @@ const ResourceDrawer: React.FC<ParametersModalProps> = ({
97142
</Space>
98143
}
99144
>
100-
<Form form={form} layout="vertical" style={{ marginBottom: 56 }}>
101-
<Form.List name="resource" initialValue={initialValues}>
102-
{(fields) => (
103-
<>
104-
{fields.map(({ key, name }, index) => {
105-
return (
106-
<div key={key}>
107-
<Row gutter={8}>
108-
<Col span={10}>
109-
<Form.Item
110-
label={
111-
index === 0 &&
112-
intl.formatMessage({
113-
id: 'src.pages.Cluster.Detail.Overview.0F9AD89D',
114-
defaultMessage: '参数名',
115-
})
116-
}
117-
name={[name, 'key']}
118-
rules={[
119-
{
120-
required: true,
121-
message: intl.formatMessage({
122-
id: 'src.pages.Cluster.Detail.Overview.F0473B44',
123-
defaultMessage: '请输入参数名',
124-
}),
125-
},
126-
]}
127-
>
128-
<Input
129-
placeholder={intl.formatMessage({
130-
id: 'src.pages.Cluster.Detail.Overview.C118F812',
131-
defaultMessage: '请输入',
132-
})}
133-
/>
134-
</Form.Item>
135-
</Col>
136-
<Col span={10}>
137-
<Form.Item
138-
label={
139-
index === 0 &&
140-
intl.formatMessage({
141-
id: 'src.pages.Cluster.Detail.Overview.4E02366B',
142-
defaultMessage: '参数值',
143-
})
144-
}
145-
name={[name, 'value']}
146-
rules={[
147-
{
148-
required: true,
149-
message: intl.formatMessage({
150-
id: 'src.pages.Cluster.Detail.Overview.5DA70D14',
151-
defaultMessage: '请输入参数值',
152-
}),
153-
},
154-
]}
155-
>
156-
<Input
157-
placeholder={intl.formatMessage({
158-
id: 'src.pages.Cluster.Detail.Overview.E26B7DFD',
159-
defaultMessage: '请输入',
160-
})}
161-
/>
162-
</Form.Item>
163-
</Col>
164-
</Row>
165-
</div>
166-
);
167-
})}
168-
</>
169-
)}
170-
</Form.List>
145+
<Form form={form} layout="vertical">
146+
<Row gutter={16}>
147+
<Col span={24}>
148+
<p style={fontStyle}>数据</p>
149+
<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
150+
<CustomFormItem
151+
style={{ marginRight: '8px' }}
152+
label="size"
153+
name={['storage', 'data', 'size']}
154+
>
155+
<InputNumber
156+
min={MINIMAL_CONFIG.data}
157+
addonAfter={SUFFIX_UNIT}
158+
placeholder={intl.formatMessage({
159+
id: 'OBDashboard.Cluster.New.Observer.PleaseEnter',
160+
defaultMessage: '请输入',
161+
})}
162+
/>
163+
</CustomFormItem>
164+
<CustomFormItem
165+
label="storageClass"
166+
name={['storage', 'data', 'storageClass']}
167+
>
168+
{storageClasses && (
169+
<SelectWithTooltip
170+
name={['storage', 'data', 'storageClass']}
171+
form={form}
172+
selectList={storageClasses}
173+
TooltipItemContent={TooltipItemContent}
174+
/>
175+
)}
176+
</CustomFormItem>
177+
</div>
178+
</Col>
179+
<Col span={24}>
180+
<p style={fontStyle}>日志</p>
181+
<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
182+
<CustomFormItem
183+
style={{ marginRight: '8px' }}
184+
label="size"
185+
name={['storage', 'log', 'size']}
186+
>
187+
<InputNumber
188+
min={MINIMAL_CONFIG.log}
189+
addonAfter={SUFFIX_UNIT}
190+
placeholder={intl.formatMessage({
191+
id: 'OBDashboard.Cluster.New.Observer.PleaseEnter',
192+
defaultMessage: '请输入',
193+
})}
194+
/>
195+
</CustomFormItem>
196+
<CustomFormItem
197+
label="storageClass"
198+
name={['storage', 'log', 'storageClass']}
199+
>
200+
{storageClasses && (
201+
<SelectWithTooltip
202+
form={form}
203+
name={['storage', 'log', 'storageClass']}
204+
selectList={storageClasses}
205+
TooltipItemContent={TooltipItemContent}
206+
/>
207+
)}
208+
</CustomFormItem>
209+
</div>
210+
</Col>
211+
<Col span={24}>
212+
<p style={fontStyle}>redoLog</p>
213+
<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
214+
<CustomFormItem
215+
style={{ marginRight: '8px' }}
216+
label="size"
217+
name={['storage', 'redoLog', 'size']}
218+
>
219+
<InputNumber
220+
min={MINIMAL_CONFIG.redoLog}
221+
addonAfter={SUFFIX_UNIT}
222+
placeholder={intl.formatMessage({
223+
id: 'OBDashboard.Cluster.New.Observer.PleaseEnter',
224+
defaultMessage: '请输入',
225+
})}
226+
/>
227+
</CustomFormItem>
228+
<CustomFormItem
229+
label="storageClass"
230+
validateTrigger="onBlur"
231+
name={['storage', 'redoLog', 'storageClass']}
232+
>
233+
{storageClasses && (
234+
<SelectWithTooltip
235+
form={form}
236+
name={['storage', 'redoLog', 'storageClass']}
237+
selectList={storageClasses}
238+
TooltipItemContent={TooltipItemContent}
239+
/>
240+
)}
241+
</CustomFormItem>
242+
</div>
243+
</Col>
244+
</Row>
171245
</Form>
172246
</Drawer>
173247
);

‎ui/src/pages/Cluster/Detail/Overview/index.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -190,10 +190,7 @@ const ClusterOverview: React.FC = () => {
190190
}),
191191
extra: access.obclusterwrite
192192
? [
193-
<Dropdown
194-
menu={{ items }}
195-
placement="bottomRight"
196-
>
193+
<Dropdown menu={{ items }} placement="bottomRight">
197194
<Button>
198195
集群管理
199196
<DownOutlined />
@@ -242,7 +239,7 @@ const ClusterOverview: React.FC = () => {
242239
defaultMessage: 'RedoLog 存储类',
243240
}),
244241
type: 'redoLog',
245-
label: 'StorageClass',
242+
label: 'storageClass',
246243
value: storage?.redoLogStorage?.storageClass,
247244
},
248245
{

0 commit comments

Comments
 (0)