Skip to content

Commit 3e12c8f

Browse files
KaradzaJurajKaradzaJuraj
authored
[UI] module name validation
[UI] module name validation
2 parents cd6f298 + 1692b4c commit 3e12c8f

37 files changed

+5173
-4054
lines changed

‎cyclops-ui/src/App.test.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react';
2-
import { render, screen } from '@testing-library/react';
3-
import App from './App';
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import App from "./App";
44

5-
test('renders learn react link', () => {
5+
test("renders learn react link", () => {
66
render(<App />);
77
const linkElement = screen.getByText(/learn react/i);
88
expect(linkElement).toBeInTheDocument();

‎cyclops-ui/src/App.tsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
1-
import {
2-
createBrowserRouter,
3-
RouterProvider,
4-
} from "react-router-dom"
5-
import routes from "./routes"
6-
import Page404 from "./components/pages/Page404"
1+
import { createBrowserRouter, RouterProvider } from "react-router-dom";
2+
import routes from "./routes";
3+
import Page404 from "./components/pages/Page404";
74
import AppLayout from "./components/layouts/AppLayout";
85

96
export default function App() {
107
const router = createBrowserRouter([
118
{
129
element: <AppLayout />,
1310
errorElement: <Page404 />,
14-
children: routes
11+
children: routes,
1512
},
16-
])
13+
]);
1714

18-
return (
19-
<RouterProvider router={router} />
20-
)
21-
}
15+
return <RouterProvider router={router} />;
16+
}

‎cyclops-ui/src/components/k8s-resources/ConfigMap.tsx

Lines changed: 123 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,142 @@
1-
import React, {useEffect, useState} from 'react';
2-
import {Divider, Row, Alert, Descriptions} from 'antd';
3-
import axios from 'axios';
1+
import React, { useEffect, useState } from "react";
2+
import { Divider, Row, Alert, Descriptions } from "antd";
3+
import axios from "axios";
44
import ReactAce from "react-ace";
55

66
interface Props {
7-
name: string;
8-
namespace: string;
7+
name: string;
8+
namespace: string;
99
}
1010

11-
const ConfigMap = ({name, namespace}: Props) => {
12-
const [configMap, setConfigMap] = useState({});
13-
const [error, setError] = useState({
14-
message: "",
15-
description: "",
16-
});
11+
const ConfigMap = ({ name, namespace }: Props) => {
12+
const [configMap, setConfigMap] = useState({});
13+
const [error, setError] = useState({
14+
message: "",
15+
description: "",
16+
});
1717

18-
function fetchConfigMap() {
19-
axios.get(`/api/resources`,{
20-
params: {
21-
group: ``,
22-
version: `v1`,
23-
kind: `ConfigMap`,
24-
name: name,
25-
namespace: namespace
26-
}
27-
}).then(res => {
28-
setConfigMap(res.data)
29-
}).catch(error => {
30-
console.log(error)
31-
if (error.response === undefined) {
32-
setError({
33-
message: String(error),
34-
description: "Check if Cyclops backend is available on: " + window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST
35-
})
36-
} else {
37-
setError(error.response.data);
38-
}
39-
})
40-
}
41-
42-
useEffect(() => {
43-
fetchConfigMap()
44-
const interval = setInterval(() => fetchConfigMap(), )
45-
return () => {
46-
clearInterval(interval);
18+
function fetchConfigMap() {
19+
axios
20+
.get(`/api/resources`, {
21+
params: {
22+
group: ``,
23+
version: `v1`,
24+
kind: `ConfigMap`,
25+
name: name,
26+
namespace: namespace,
27+
},
28+
})
29+
.then((res) => {
30+
setConfigMap(res.data);
31+
})
32+
.catch((error) => {
33+
console.log(error);
34+
if (error.response === undefined) {
35+
setError({
36+
message: String(error),
37+
description:
38+
"Check if Cyclops backend is available on: " +
39+
window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST,
40+
});
41+
} else {
42+
setError(error.response.data);
4743
}
48-
}, []);
44+
});
45+
}
4946

47+
useEffect(() => {
48+
fetchConfigMap();
49+
const interval = setInterval(() => fetchConfigMap());
50+
return () => {
51+
clearInterval(interval);
52+
};
53+
}, []);
5054

51-
const configMapData = (configMap: any) => {
52-
if (configMap.data) {
53-
return <Descriptions style={{width: "100%"}} bordered>
54-
{Object.entries<string>(configMap.data).map(([key, dataValue]) => (
55-
<Descriptions.Item key={key} labelStyle={{width: "20%"}} label={key} span={24} >
56-
{configMapDataValues(key, dataValue)}
57-
</Descriptions.Item>
58-
))}
59-
</Descriptions>
60-
}
55+
const configMapData = (configMap: any) => {
56+
if (configMap.data) {
57+
return (
58+
<Descriptions style={{ width: "100%" }} bordered>
59+
{Object.entries<string>(configMap.data).map(([key, dataValue]) => (
60+
<Descriptions.Item
61+
key={key}
62+
labelStyle={{ width: "20%" }}
63+
label={key}
64+
span={24}
65+
>
66+
{configMapDataValues(key, dataValue)}
67+
</Descriptions.Item>
68+
))}
69+
</Descriptions>
70+
);
6171
}
72+
};
6273

63-
const configMapDataValues = (key: string, data: string) => {
64-
const lines = data.split('\n').length;
74+
const configMapDataValues = (key: string, data: string) => {
75+
const lines = data.split("\n").length;
6576

66-
if (lines > 1) {
67-
return <ReactAce
68-
setOptions={{ useWorker: false }}
69-
value={data}
70-
readOnly={true}
71-
width="100%"
72-
mode={configMapDataExtension(key)}
73-
height={calculateEditorHeight(lines)}
74-
/>
75-
} else {
76-
return data
77-
}
77+
if (lines > 1) {
78+
return (
79+
<ReactAce
80+
setOptions={{ useWorker: false }}
81+
value={data}
82+
readOnly={true}
83+
width="100%"
84+
mode={configMapDataExtension(key)}
85+
height={calculateEditorHeight(lines)}
86+
/>
87+
);
88+
} else {
89+
return data;
7890
}
91+
};
7992

80-
const calculateEditorHeight = (lines: number) => {
81-
if (lines > 20) {
82-
return '320px'
83-
} else {
84-
return `${lines * 16}px`
85-
}
86-
};
93+
const calculateEditorHeight = (lines: number) => {
94+
if (lines > 20) {
95+
return "320px";
96+
} else {
97+
return `${lines * 16}px`;
98+
}
99+
};
87100

88-
const configMapDataExtension = (filename: string) => {
89-
const ext = filename.split('.').pop();
90-
switch (ext) {
91-
case "json":
92-
return "json"
93-
default:
94-
return "json"
95-
}
101+
const configMapDataExtension = (filename: string) => {
102+
const ext = filename.split(".").pop();
103+
switch (ext) {
104+
case "json":
105+
return "json";
106+
default:
107+
return "json";
96108
}
109+
};
97110

98-
return (
99-
<div>
100-
{
101-
error.message.length !== 0 && <Alert
102-
message={error.message}
103-
description={error.description}
104-
type="error"
105-
closable
106-
afterClose={() => {setError({
107-
message: "",
108-
description: "",
109-
})}}
110-
style={{marginBottom: '20px'}}
111-
/>
112-
}
113-
<Row>
114-
<Divider style={{fontSize: '120%'}} orientationMargin="0" orientation={"left"}>Data:</Divider>
115-
{configMapData(configMap)}
116-
</Row>
117-
</div>
118-
);
119-
}
111+
return (
112+
<div>
113+
{error.message.length !== 0 && (
114+
<Alert
115+
message={error.message}
116+
description={error.description}
117+
type="error"
118+
closable
119+
afterClose={() => {
120+
setError({
121+
message: "",
122+
description: "",
123+
});
124+
}}
125+
style={{ marginBottom: "20px" }}
126+
/>
127+
)}
128+
<Row>
129+
<Divider
130+
style={{ fontSize: "120%" }}
131+
orientationMargin="0"
132+
orientation={"left"}
133+
>
134+
Data:
135+
</Divider>
136+
{configMapData(configMap)}
137+
</Row>
138+
</div>
139+
);
140+
};
120141

121142
export default ConfigMap;

0 commit comments

Comments
 (0)