[UI] module name validation

cyclops-ui · Mar 2, 2024 · 3e12c8f · 3e12c8f
2 parents cd6f298 + 1692b4c
commit 3e12c8f
Show file tree

Hide file tree

Showing 37 changed files with 5,173 additions and 4,054 deletions.
diff --git a/cyclops-ui/src/App.test.tsx b/cyclops-ui/src/App.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

diff --git a/cyclops-ui/src/App.tsx b/cyclops-ui/src/App.tsx
@@ -1,21 +1,16 @@
-import {
-  createBrowserRouter,
-  RouterProvider,
-} from "react-router-dom"
-import routes from "./routes"
-import Page404 from "./components/pages/Page404"
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import routes from "./routes";
+import Page404 from "./components/pages/Page404";
 import AppLayout from "./components/layouts/AppLayout";
 
 export default function App() {
   const router = createBrowserRouter([
     {
       element: <AppLayout />,
       errorElement: <Page404 />,
-      children: routes
+      children: routes,
     },
-  ])
+  ]);
 
-  return (
-      <RouterProvider router={router} />
-  )
-}
+  return <RouterProvider router={router} />;
+}
diff --git a/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx b/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx
@@ -1,121 +1,142 @@
-import React, {useEffect, useState} from 'react';
-import {Divider, Row, Alert, Descriptions} from 'antd';
-import axios from 'axios';
+import React, { useEffect, useState } from "react";
+import { Divider, Row, Alert, Descriptions } from "antd";
+import axios from "axios";
 import ReactAce from "react-ace";
 
 interface Props {
-    name: string;
-    namespace: string;
+  name: string;
+  namespace: string;
 }
 
-const ConfigMap = ({name, namespace}: Props) => {
-    const [configMap, setConfigMap] = useState({});
-    const [error, setError] = useState({
-        message: "",
-        description: "",
-    });
+const ConfigMap = ({ name, namespace }: Props) => {
+  const [configMap, setConfigMap] = useState({});
+  const [error, setError] = useState({
+    message: "",
+    description: "",
+  });
 
-    function fetchConfigMap() {
-        axios.get(`/api/resources`,{
-            params: {
-                group: ``,
-                version: `v1`,
-                kind: `ConfigMap`,
-                name: name,
-                namespace: namespace
-            }
-        }).then(res => {
-            setConfigMap(res.data)
-        }).catch(error => {
-            console.log(error)
-            if (error.response === undefined) {
-                setError({
-                    message: String(error),
-                    description: "Check if Cyclops backend is available on: " + window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST
-                })
-            } else {
-                setError(error.response.data);
-            }
-        })
-    }
-
-    useEffect(() => {
-        fetchConfigMap()
-        const interval = setInterval(() => fetchConfigMap(), )
-        return () => {
-            clearInterval(interval);
+  function fetchConfigMap() {
+    axios
+      .get(`/api/resources`, {
+        params: {
+          group: ``,
+          version: `v1`,
+          kind: `ConfigMap`,
+          name: name,
+          namespace: namespace,
+        },
+      })
+      .then((res) => {
+        setConfigMap(res.data);
+      })
+      .catch((error) => {
+        console.log(error);
+        if (error.response === undefined) {
+          setError({
+            message: String(error),
+            description:
+              "Check if Cyclops backend is available on: " +
+              window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST,
+          });
+        } else {
+          setError(error.response.data);
         }
-    }, []);
+      });
+  }
 
+  useEffect(() => {
+    fetchConfigMap();
+    const interval = setInterval(() => fetchConfigMap());
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
 
-    const configMapData = (configMap: any) => {
-        if (configMap.data) {
-            return <Descriptions style={{width: "100%"}} bordered>
-                {Object.entries<string>(configMap.data).map(([key, dataValue]) => (
-                    <Descriptions.Item key={key} labelStyle={{width: "20%"}} label={key} span={24} >
-                        {configMapDataValues(key, dataValue)}
-                    </Descriptions.Item>
-                ))}
-            </Descriptions>
-        }
+  const configMapData = (configMap: any) => {
+    if (configMap.data) {
+      return (
+        <Descriptions style={{ width: "100%" }} bordered>
+          {Object.entries<string>(configMap.data).map(([key, dataValue]) => (
+            <Descriptions.Item
+              key={key}
+              labelStyle={{ width: "20%" }}
+              label={key}
+              span={24}
+            >
+              {configMapDataValues(key, dataValue)}
+            </Descriptions.Item>
+          ))}
+        </Descriptions>
+      );
     }
+  };
 
-    const configMapDataValues = (key: string, data: string) => {
-        const lines = data.split('\n').length;
+  const configMapDataValues = (key: string, data: string) => {
+    const lines = data.split("\n").length;
 
-        if (lines > 1) {
-            return <ReactAce
-                setOptions={{ useWorker: false }}
-                value={data}
-                readOnly={true}
-                width="100%"
-                mode={configMapDataExtension(key)}
-                height={calculateEditorHeight(lines)}
-            />
-        } else {
-            return data
-        }
+    if (lines > 1) {
+      return (
+        <ReactAce
+          setOptions={{ useWorker: false }}
+          value={data}
+          readOnly={true}
+          width="100%"
+          mode={configMapDataExtension(key)}
+          height={calculateEditorHeight(lines)}
+        />
+      );
+    } else {
+      return data;
     }
+  };
 
-    const calculateEditorHeight = (lines: number) => {
-        if (lines > 20) {
-            return '320px'
-        } else {
-            return `${lines * 16}px`
-        }
-    };
+  const calculateEditorHeight = (lines: number) => {
+    if (lines > 20) {
+      return "320px";
+    } else {
+      return `${lines * 16}px`;
+    }
+  };
 
-    const configMapDataExtension = (filename: string) => {
-        const ext = filename.split('.').pop();
-        switch (ext) {
-            case "json":
-                return "json"
-            default:
-                return "json"
-        }
+  const configMapDataExtension = (filename: string) => {
+    const ext = filename.split(".").pop();
+    switch (ext) {
+      case "json":
+        return "json";
+      default:
+        return "json";
     }
+  };
 
-    return (
-        <div>
-            {
-                error.message.length !== 0 && <Alert
-                    message={error.message}
-                    description={error.description}
-                    type="error"
-                    closable
-                    afterClose={() => {setError({
-                        message: "",
-                        description: "",
-                    })}}
-                    style={{marginBottom: '20px'}}
-                />
-            }
-            <Row>
-                <Divider style={{fontSize: '120%'}} orientationMargin="0" orientation={"left"}>Data:</Divider>
-                {configMapData(configMap)}
-            </Row>
-        </div>
-    );
-}
+  return (
+    <div>
+      {error.message.length !== 0 && (
+        <Alert
+          message={error.message}
+          description={error.description}
+          type="error"
+          closable
+          afterClose={() => {
+            setError({
+              message: "",
+              description: "",
+            });
+          }}
+          style={{ marginBottom: "20px" }}
+        />
+      )}
+      <Row>
+        <Divider
+          style={{ fontSize: "120%" }}
+          orientationMargin="0"
+          orientation={"left"}
+        >
+          Data:
+        </Divider>
+        {configMapData(configMap)}
+      </Row>
+    </div>
+  );
+};
 
 export default ConfigMap;