Skip to content

Commit 8bff302

Browse files
TianWuwtTianWuwt
authored
Fix front-end defect problem (#777)
1 parent 31f6f05 commit 8bff302

File tree

13 files changed

+163
-105
lines changed

13 files changed

+163
-105
lines changed

‎ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"antd": "5.13.0",
3030
"bignumber.js": "^9.1.2",
3131
"copy-to-clipboard": "^3.3.3",
32+
"crypto-js": "^4.2.0",
3233
"i18next": "^23.11.1",
3334
"jsencrypt": "^3.3.2",
3435
"lodash": "^4.17.21",

‎ui/src/components/customModal/ModifyUnitDetailModal.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,15 @@ export default function ModifyUnitDetailModal({
111111
};
112112

113113
const onFinish = async (values: any) => {
114+
if (!newResourcePool) {
115+
values.zoneName = editZone || values.zoneName;
116+
}
117+
114118
const { zoneName, ...reqData } = formatPatchPoolData(
115119
values,
116120
newResourcePool ? 'create' : 'edit',
117121
);
122+
118123
const res = await obtenantPoolReq({
119124
ns: ns!,
120125
name: name!,

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

Lines changed: 22 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import { obcluster } from '@/api';
22
import CustomTooltip from '@/components/CustomTooltip';
33
import IconTip from '@/components/IconTip';
4-
import { getClusterDetailReq } from '@/services';
54
import { getColumnSearchProps } from '@/utils/component';
65
import { intl } from '@/utils/intl';
76
import { PageContainer } from '@ant-design/pro-components';
87
import { useParams } from '@umijs/max';
98
import { useRequest } from 'ahooks';
109
import { Button, Card, Col, message, Row, Space, Table, Tag } from 'antd';
11-
import { isEmpty } from 'lodash';
1210
import { useState } from 'react';
1311
import ParametersModal from './ParametersModal';
1412

@@ -35,43 +33,15 @@ export default function Parameters() {
3533
},
3634
});
3735

38-
const { data: clusterDetail, refresh: clusterDetailRefresh } = useRequest(
39-
getClusterDetailReq,
40-
{},
41-
);
42-
4336
const {
4437
data: listOBClusterParameters,
4538
loading,
4639
refresh,
4740
} = useRequest(obcluster.listOBClusterParameters, {
4841
defaultParams: [ns, name],
49-
refreshDeps: [clusterDetail?.status],
5042
});
5143

52-
const parameters = clusterDetail?.info?.parameters;
53-
const getNewData = (data) => {
54-
const obt = data?.map((element: any) => {
55-
// 在 obcluster 的 parameters 里面的就是托管给 operator
56-
const findName = parameters?.find(
57-
(item: any) => element.name === item.name,
58-
);
59-
60-
if (!isEmpty(findName)) {
61-
return {
62-
...element,
63-
controlParameter: true,
64-
accordance: findName?.value === findName?.specValue,
65-
};
66-
} else if (isEmpty(findName)) {
67-
return { ...element, controlParameter: false, accordance: 'null' };
68-
}
69-
});
70-
71-
return obt;
72-
};
73-
74-
const parametersData = getNewData(listOBClusterParameters?.data);
44+
const parametersData = listOBClusterParameters?.data;
7545
const controlParameters = [
7646
{
7747
label: intl.formatMessage({
@@ -89,7 +59,7 @@ export default function Parameters() {
8959
},
9060
];
9161

92-
const accordanceList = [
62+
const statusList = [
9363
{
9464
label: (
9565
<Tag color={'green'}>
@@ -100,7 +70,7 @@ export default function Parameters() {
10070
</Tag>
10171
),
10272

103-
value: true,
73+
value: 'matched',
10474
},
10575
{
10676
label: (
@@ -112,12 +82,11 @@ export default function Parameters() {
11282
</Tag>
11383
),
11484

115-
value: false,
85+
value: 'notMatched',
11686
},
11787
{
11888
label: '/',
119-
120-
value: 'null',
89+
value: '',
12190
},
12291
];
12392

@@ -145,11 +114,17 @@ export default function Parameters() {
145114
(item) => `${item.value} {${item.metasStr}}`,
146115
);
147116
const content = values?.length !== 1 ? MultipleValue : singleValue;
148-
117+
const tooltip = values?.map((item) => (
118+
<div>{`${item.value} {${item.metasStr}}`}</div>
119+
));
149120
return (
150121
<>
151122
{content?.join('') ? (
152-
<CustomTooltip text={content} width={150} />
123+
<CustomTooltip
124+
text={content}
125+
tooltipTitle={values?.length !== 1 ? tooltip : content}
126+
width={150}
127+
/>
153128
) : (
154129
<span>-</span>
155130
)}
@@ -163,9 +138,9 @@ export default function Parameters() {
163138
defaultMessage: '参数说明',
164139
}),
165140
dataIndex: 'info',
166-
width: 200,
141+
width: 300,
167142
render: (text) => {
168-
return <CustomTooltip text={text} width={190} />;
143+
return <CustomTooltip text={text} width={290} />;
169144
},
170145
},
171146
{
@@ -174,13 +149,13 @@ export default function Parameters() {
174149
defaultMessage: '托管 operator',
175150
}),
176151
width: 140,
177-
dataIndex: 'controlParameter',
152+
dataIndex: 'isManagedByOperator',
178153
filters: controlParameters.map(({ label, value }) => ({
179154
text: label,
180155
value,
181156
})),
182157
onFilter: (value: any, record) => {
183-
return record?.controlParameter === value;
158+
return record?.isManagedByOperator === value;
184159
},
185160
render: (text: boolean) => {
186161
return (
@@ -212,28 +187,19 @@ export default function Parameters() {
212187
/>
213188
),
214189

215-
dataIndex: 'accordance',
190+
dataIndex: 'status',
216191
width: 100,
217-
filters: accordanceList.map(({ label, value }) => ({
192+
filters: statusList.map(({ label, value }) => ({
218193
text: label,
219194
value,
220195
})),
221196
onFilter: (value: any, record) => {
222-
return record?.accordance === value;
197+
return record?.status === value;
223198
},
224199
render: (text) => {
225-
const tagColor = text ? 'green' : 'gold';
226-
const tagContent = text
227-
? intl.formatMessage({
228-
id: 'src.pages.Cluster.Detail.Overview.9A3A4407',
229-
defaultMessage: '已匹配',
230-
})
231-
: intl.formatMessage({
232-
id: 'src.pages.Cluster.Detail.Overview.D6588C55',
233-
defaultMessage: '不匹配',
234-
});
200+
const content = statusList?.find((item) => item.value === text)?.label;
235201

236-
return text === 'null' ? '/' : <Tag color={tagColor}>{tagContent}</Tag>;
202+
return !text ? '/' : <span>{content}</span>;
237203
},
238204
},
239205
{
@@ -252,10 +218,6 @@ export default function Parameters() {
252218
'max_syslog_file_count',
253219
];
254220

255-
const valueContent =
256-
parameters?.find((item) => item.name === record.name)?.value ||
257-
record?.value;
258-
259221
return (
260222
<Space size={1}>
261223
<Button
@@ -264,7 +226,6 @@ export default function Parameters() {
264226
setIsDrawerOpen(true);
265227
setParametersRecord({
266228
...record,
267-
value: valueContent,
268229
});
269230
}}
270231
>
@@ -325,7 +286,6 @@ export default function Parameters() {
325286
onCancel={() => setIsDrawerOpen(false)}
326287
onSuccess={() => {
327288
setIsDrawerOpen(false);
328-
clusterDetailRefresh();
329289
refresh();
330290
}}
331291
initialValues={parametersRecord}

‎ui/src/pages/K8sCluster/Createk8sClusterModal.tsx‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { K8sClusterApi } from '@/api';
2+
import { encryptText, usePublicKey } from '@/hook/usePublicKey';
23
import { useRequest } from 'ahooks';
34
import { Form, Input, Modal, message } from 'antd';
5+
import CryptoJS from 'crypto-js';
46
import { isEmpty } from 'lodash';
57
import { useEffect } from 'react';
68

@@ -51,12 +53,61 @@ export default function Createk8sClusterModal({
5153
},
5254
);
5355

56+
function generateAESKey() {
57+
return CryptoJS.lib.WordArray.random(32).toString(CryptoJS.enc.Hex);
58+
}
59+
// Function to generate a random IV
60+
function generateIV() {
61+
return CryptoJS.lib.WordArray.random(16).toString(CryptoJS.enc.Hex);
62+
}
63+
64+
function hexToString(hexString) {
65+
let fullString = '';
66+
for (let i = 0; i < hexString.length; i += 2) {
67+
const hex = hexString.substr(i, 2);
68+
const decimal = parseInt(hex, 16);
69+
fullString += String.fromCharCode(decimal);
70+
}
71+
return fullString;
72+
}
73+
74+
// Function to encrypt data using AES-256
75+
function encryptAES(data, key, iv) {
76+
const encrypted = CryptoJS.AES.encrypt(data, CryptoJS.enc.Hex.parse(key), {
77+
iv: CryptoJS.enc.Hex.parse(iv),
78+
mode: CryptoJS.mode.CBC,
79+
padding: CryptoJS.pad.Pkcs7,
80+
});
81+
82+
// Concatenate IV and ciphertext, then encode in base64
83+
const ivHex = CryptoJS.enc.Hex.parse(iv);
84+
const ciphertext = ivHex.clone().concat(encrypted.ciphertext);
85+
return ciphertext.toString(CryptoJS.enc.Base64);
86+
}
87+
88+
const publicKey = usePublicKey();
5489
const handleSubmit = () => {
5590
validateFields().then((values) => {
56-
if (isEdit && !isEmpty(editDasta)) {
57-
patchK8sCluster(editData?.name, values);
91+
const key = generateAESKey();
92+
const iv = generateIV();
93+
const encryptedData = encryptAES(values.kubeConfig, key, iv);
94+
95+
values.kubeConfig = encryptedData;
96+
97+
const encryptedKey = encryptText(hexToString(key), publicKey);
98+
99+
if (isEdit && !isEmpty(editData)) {
100+
patchK8sCluster(editData?.name, values, {
101+
headers: {
102+
'X-Encrypted-Key': encryptedKey,
103+
},
104+
});
58105
} else {
59-
createK8sCluster(values);
106+
createK8sCluster(values, {
107+
headers: {
108+
'X-Encrypted-Key': encryptedKey,
109+
},
110+
});
60111
}
61112
});
62113
};

‎ui/src/pages/K8sCluster/K8sClusterList.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,18 @@ export default function K8sClusterList() {
5757
{
5858
title: '操作',
5959
dataIndex: 'operation',
60+
6061
render: (_, record) => {
6162
return (
6263
<Space>
63-
<Button
64+
<a
6465
onClick={() => {
6566
setVisible(true);
6667
setEditData(record);
6768
}}
68-
type="link"
6969
>
7070
编辑
71-
</Button>
71+
</a>
7272
<Button
7373
type="link"
7474
onClick={() =>
@@ -110,7 +110,6 @@ export default function K8sClusterList() {
110110
<Table
111111
columns={columns}
112112
dataSource={K8sClustersList}
113-
scroll={{ x: 1200 }}
114113
pagination={{ simple: true }}
115114
rowKey="name"
116115
bordered

‎ui/src/pages/OBProxy/New/BasicConfig.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import IconTip from '@/components/IconTip';
2+
import PasswordInput from '@/components/PasswordInput';
23
import SelectNSFromItem from '@/components/SelectNSFromItem';
34
import TooltipPretty from '@/components/TooltipPretty';
45
import { resourceNameRule } from '@/constants/rules';
56
import { getSimpleClusterList } from '@/services';
6-
import { passwordRules } from '@/utils';
77
import { intl } from '@/utils/intl';
88
import { useRequest } from 'ahooks';
99
import { Card, Col, Form, Input, Row, Select } from 'antd';
@@ -12,9 +12,15 @@ import { useEffect } from 'react';
1212

1313
interface BasicConfigProps {
1414
form: FormInstance<any>;
15+
passwordVal: string;
16+
setPasswordVal: (val: string) => void;
1517
}
1618

17-
export default function BasicConfig({ form }: BasicConfigProps) {
19+
export default function BasicConfig({
20+
form,
21+
passwordVal,
22+
setPasswordVal,
23+
}: BasicConfigProps) {
1824
const { data: clusterListRes } = useRequest(getSimpleClusterList);
1925
const selectCluster = Form.useWatch('obCluster');
2026
const clisterList = clusterListRes?.data.map((cluster) => ({
@@ -133,10 +139,15 @@ export default function BasicConfig({ form }: BasicConfigProps) {
133139
</Form.Item>
134140
</Col>
135141
<Col span={8}>
136-
<Form.Item
137-
name={'proxySysPassword'}
138-
validateFirst
139-
label={
142+
<SelectNSFromItem form={form} />
143+
</Col>
144+
<Col span={10}>
145+
<PasswordInput
146+
value={passwordVal}
147+
onChange={setPasswordVal}
148+
form={form}
149+
name="proxySysPassword"
150+
title={
140151
<IconTip
141152
content={intl.formatMessage({
142153
id: 'src.pages.OBProxy.New.E711F60D',
@@ -148,18 +159,7 @@ export default function BasicConfig({ form }: BasicConfigProps) {
148159
})}
149160
/>
150161
}
151-
rules={passwordRules}
152-
>
153-
<Input.Password
154-
placeholder={intl.formatMessage({
155-
id: 'src.pages.OBProxy.New.B2851499',
156-
defaultMessage: '请输入',
157-
})}
158-
/>
159-
</Form.Item>
160-
</Col>
161-
<Col span={8}>
162-
<SelectNSFromItem form={form} />
162+
/>
163163
</Col>
164164
</Row>
165165
</Card>

0 commit comments

Comments
 (0)