Skip to content

Commit 35cf717

Browse files
TianWuwtTianWuwt
authored
Add parameter card and edit modal UI (#601)
1 parent d280b4d commit 35cf717

File tree

7 files changed

+713
-75
lines changed

7 files changed

+713
-75
lines changed

‎ui/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"prettier-plugin-organize-imports": "^3.2.2",
4646
"prettier-plugin-packagejson": "^2.4.3",
4747
"typescript": "^5.0.3",
48-
"typescript-eslint": "^7.6.0"
48+
"typescript-eslint": "^7.6.0",
49+
"@openapitools/openapi-generator-cli": "^2.13.5"
4950
}
5051
}

‎ui/src/constants/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -410,7 +410,7 @@ export const STATUS_LIST = [
410410

411411
{
412412
label: intl.formatMessage({
413-
id: 'osrc.constants.Recovering',
413+
id: 'src.constants.Recovering',
414414
defaultMessage: '运维中',
415415
}),
416416
value: 'operating',

‎ui/src/i18n/strings/zh-CN.json‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1155,12 +1155,34 @@
11551155
"src.components.customModal.2389B108": "权限不能为空！",
11561156
"src.components.TopoComponent.04F971F3": "无限制",
11571157
"src.components.TopoComponent.BA2B454B": "无限制",
1158-
"src.constants.NormalOperation":"正常运行",
1159-
"src.constants.Creating":"创建中",
1160-
"src.constants.Deleting":"删除中",
1161-
"src.constants.Unavailable":"不可用",
1162-
"src.constants.Recovering":"运维中",
1163-
"src.constants.Pending":"等待中",
1164-
"src.constants.Warning":"警告"
1165-
1158+
"src.constants.NormalOperation": "正常运行",
1159+
"src.constants.Creating": "创建中",
1160+
"src.constants.Deleting": "删除中",
1161+
"src.constants.Unavailable": "不可用",
1162+
"src.constants.Recovering": "运维中",
1163+
"src.constants.Pending": "等待中",
1164+
"src.constants.Warning": "警告",
1165+
"src.pages.Tenant.Detail.Overview.967A8F23": "无限制",
1166+
"src.pages.Cluster.Detail.Overview.A7E3374D": "参数设置",
1167+
"src.pages.Cluster.Detail.Overview.367D804E": "参数设置",
1168+
"src.pages.Cluster.Detail.Overview.E908AA54": "编辑参数已成功",
1169+
"src.pages.Cluster.Detail.Overview.21655C90": "参数编辑",
1170+
"src.components.TopoComponent.E78C380D": "无限制",
1171+
"src.components.TopoComponent.523CABA3": "无限制",
1172+
"src.pages.Cluster.Detail.Overview.9F880AEF": "参数设置",
1173+
"src.pages.Cluster.Detail.Overview.533B34EA": "编辑",
1174+
"src.pages.Cluster.Detail.Overview.7F3B8DF8": "集群参数",
1175+
"src.pages.Cluster.Detail.Overview.849E8956": "参数编辑",
1176+
"src.pages.Cluster.Detail.Overview.0F9AD89D": "参数名",
1177+
"src.pages.Cluster.Detail.Overview.F0473B44": "请输入参数名",
1178+
"src.pages.Cluster.Detail.Overview.C118F812": "请输入",
1179+
"src.pages.Cluster.Detail.Overview.4E02366B": "参数值",
1180+
"src.pages.Cluster.Detail.Overview.5DA70D14": "请输入参数值",
1181+
"src.pages.Cluster.Detail.Overview.E26B7DFD": "请输入",
1182+
"src.pages.Cluster.Detail.Overview.C52AC4A3": "操作",
1183+
"src.pages.Cluster.Detail.Overview.8B44D940": "确定要删除该参数吗？",
1184+
"src.pages.Cluster.Detail.Overview.3D14CA3E": "删除",
1185+
"src.pages.Cluster.Detail.Overview.476938E4": "取消",
1186+
"src.pages.Cluster.Detail.Overview.86ECCAB9": "删除",
1187+
"src.pages.Cluster.Detail.Overview.23FEC744": "添加参数"
11661188
}

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export default function BasicInfo({
1919
storage,
2020
backupVolume,
2121
monitor,
22-
parameters,
2322
clusterName,
2423
extra = true,
2524
style,
@@ -216,20 +215,6 @@ export default function BasicInfo({
216215
</Descriptions.Item>
217216
))}
218217
</Descriptions>
219-
{parameters && (
220-
<Descriptions
221-
title={intl.formatMessage({
222-
id: 'Dashboard.Detail.Overview.BasicInfo.ClusterParameters',
223-
defaultMessage: '集群参数',
224-
})}
225-
>
226-
{parameters.map((parameter, index) => (
227-
<Descriptions.Item label={parameter.key} key={index}>
228-
{parameter.value}
229-
</Descriptions.Item>
230-
))}
231-
</Descriptions>
232-
)}
233218

234219
{monitor && (
235220
<Descriptions

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

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
import { obproxy } from '@/api';
2+
import { intl } from '@/utils/intl';
3+
import { PlusOutlined } from '@ant-design/icons';
4+
import { useRequest } from 'ahooks';
5+
import {
6+
Button,
7+
Col,
8+
Drawer,
9+
Form,
10+
Input,
11+
Popconfirm,
12+
Row,
13+
Space,
14+
message,
15+
} from 'antd';
16+
import React from 'react';
17+
18+
export interface ParametersModalProps {
19+
visible: boolean;
20+
onCancel: () => void;
21+
onSuccess: () => void;
22+
initialValues: any[];
23+
}
24+
25+
const ParametersDrawer: React.FC<ParametersModalProps> = ({
26+
visible,
27+
onCancel,
28+
initialValues,
29+
onSuccess,
30+
}) => {
31+
const [form] = Form.useForm<API.CreateClusterData>();
32+
const { validateFields } = form;
33+
34+
const { runAsync: updateParameters, loading } = useRequest(
35+
obproxy.patchOBProxy,
36+
{
37+
manual: true,
38+
onSuccess: (res) => {
39+
if (res.successful) {
40+
message.success(
41+
intl.formatMessage({
42+
id: 'src.pages.Cluster.Detail.Overview.E908AA54',
43+
defaultMessage: '编辑参数已成功',
44+
}),
45+
);
46+
onSuccess();
47+
}
48+
},
49+
},
50+
);
51+
52+
return (
53+
<Drawer
54+
title={intl.formatMessage({
55+
id: 'src.pages.Cluster.Detail.Overview.849E8956',
56+
defaultMessage: '参数编辑',
57+
})}
58+
open={visible}
59+
destroyOnClose
60+
onClose={() => onCancel()}
61+
width={520}
62+
footer={
63+
<Space>
64+
<Button onClick={onCancel}>取消</Button>
65+
<Button
66+
type="primary"
67+
loading={loading}
68+
onClick={() => {
69+
validateFields().then((values) => {
70+
const { parameters } = values;
71+
updateParameters({
72+
parameters,
73+
});
74+
});
75+
}}
76+
>
77+
确定
78+
</Button>
79+
</Space>
80+
}
81+
>
82+
<Form form={form} layout="vertical" style={{ marginBottom: 56 }}>
83+
<Form.List name="parameters" initialValue={initialValues}>
84+
{(fields, { add, remove }) => (
85+
<>
86+
{fields.map(({ key, name }, index) => (
87+
<div key={key}>
88+
<Row gutter={8}>
89+
<Col span={10}>
90+
<Form.Item
91+
label={
92+
index === 0 &&
93+
intl.formatMessage({
94+
id: 'src.pages.Cluster.Detail.Overview.0F9AD89D',
95+
defaultMessage: '参数名',
96+
})
97+
}
98+
name={[name, 'key']}
99+
rules={[
100+
{
101+
required: true,
102+
message: intl.formatMessage({
103+
id: 'src.pages.Cluster.Detail.Overview.F0473B44',
104+
defaultMessage: '请输入参数名',
105+
}),
106+
},
107+
]}
108+
>
109+
<Input
110+
placeholder={intl.formatMessage({
111+
id: 'src.pages.Cluster.Detail.Overview.C118F812',
112+
defaultMessage: '请输入',
113+
})}
114+
/>
115+
</Form.Item>
116+
</Col>
117+
<Col span={10}>
118+
<Form.Item
119+
label={
120+
index === 0 &&
121+
intl.formatMessage({
122+
id: 'src.pages.Cluster.Detail.Overview.4E02366B',
123+
defaultMessage: '参数值',
124+
})
125+
}
126+
name={[name, 'value']}
127+
rules={[
128+
{
129+
required: true,
130+
message: intl.formatMessage({
131+
id: 'src.pages.Cluster.Detail.Overview.5DA70D14',
132+
defaultMessage: '请输入参数值',
133+
}),
134+
},
135+
]}
136+
>
137+
<Input
138+
placeholder={intl.formatMessage({
139+
id: 'src.pages.Cluster.Detail.Overview.E26B7DFD',
140+
defaultMessage: '请输入',
141+
})}
142+
/>
143+
</Form.Item>
144+
</Col>
145+
<Col>
146+
<Form.Item
147+
label={
148+
index === 0 &&
149+
intl.formatMessage({
150+
id: 'src.pages.Cluster.Detail.Overview.C52AC4A3',
151+
defaultMessage: '操作',
152+
})
153+
}
154+
>
155+
<Popconfirm
156+
placement="left"
157+
title={intl.formatMessage({
158+
id: 'src.pages.Cluster.Detail.Overview.8B44D940',
159+
defaultMessage: '确定要删除该参数吗？',
160+
})}
161+
onConfirm={() => {
162+
remove(index);
163+
}}
164+
okText={intl.formatMessage({
165+
id: 'src.pages.Cluster.Detail.Overview.3D14CA3E',
166+
defaultMessage: '删除',
167+
})}
168+
cancelText={intl.formatMessage({
169+
id: 'src.pages.Cluster.Detail.Overview.476938E4',
170+
defaultMessage: '取消',
171+
})}
172+
okButtonProps={{
173+
danger: true,
174+
ghost: true,
175+
}}
176+
>
177+
<a style={{ color: 'red' }}>
178+
{intl.formatMessage({
179+
id: 'src.pages.Cluster.Detail.Overview.86ECCAB9',
180+
defaultMessage: '删除',
181+
})}
182+
</a>
183+
</Popconfirm>
184+
</Form.Item>
185+
</Col>
186+
</Row>
187+
</div>
188+
))}
189+
<Col span={20}>
190+
<Form.Item>
191+
<Button
192+
type="dashed"
193+
onClick={() => add()}
194+
block
195+
icon={<PlusOutlined />}
196+
>
197+
{intl.formatMessage({
198+
id: 'src.pages.Cluster.Detail.Overview.23FEC744',
199+
defaultMessage: '添加参数',
200+
})}
201+
</Button>
202+
</Form.Item>
203+
</Col>
204+
</>
205+
)}
206+
</Form.List>
207+
</Form>
208+
</Drawer>
209+
);
210+
};
211+
212+
export default ParametersDrawer;

0 commit comments

Comments
 (0)