Module View as reusable component (#703)

* gitignore js map * build config * k8s resource data fetching * pod actions * sidebar variables * refactor module details page * move away from css modules * refactor modules page * felxible api streaming * reusable module view * api layer * webpack config * use state deps * use state deps * update package.json dependencies * use state deps * update package.json dependencies * update package.json dependencies * pod logging handlers * refctor fetch resource callback * rm axios as dep * on edit and rollback handlers * replace name and namespace for consistency * workload streaming disabled based on context * implement module deletion * pod resource log handling * custom stream implementation on tab change * helm shared component (#708) * helm shared component * effect deps * Edit module shared component (#710) * onUninstallReleaseSuccess handler * ignore tsbuildinfo * scope object style to form * load css chunks * edit module api layer * onResource delete helm handler * onResource delete module handler * use shared edit component * extract edit module to a shared component * export Edit module shared component * update ui license and package name * loading resource data state (#704) * loading resource data state * remove axios dep --------- Co-authored-by: petar-cvit <[email protected]> --------- Co-authored-by: KaradzaJuraj <[email protected]>
cyclops-ui · Dec 12, 2024 · 9fc65f5 · 9fc65f5
1 parent 56b33db
commit 9fc65f5
Show file tree

Hide file tree

Showing 52 changed files with 6,479 additions and 4,281 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@
 .DS_Store
 
 dist/
+cyclops-ui/src/**/*.js.map
+cyclops-ui/src/**/*.js
diff --git a/cyclops-ui/.gitignore b/cyclops-ui/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 build
+tsconfig.tsbuildinfo
diff --git a/cyclops-ui/package.json b/cyclops-ui/package.json
@@ -1,7 +1,8 @@
 {
-  "name": "cyclops-ui",
+  "name": "@cyclopsui/cyclops-ui",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
+  "license": "Apache-2.0",
   "dependencies": {
     "@ant-design/charts": "^1.3.5",
     "@ant-design/compatible": "^5.1.1",
@@ -32,12 +33,14 @@
     "react-code-blocks": "^0.1.3",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "^18.0.0",
-    "react-highlight-words": "^0.17.0",
+    "react-highlight-words": "^0.20.0",
     "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",
     "react-terminal": "^1.3.1",
     "runtime-env-cra": "^0.2.4",
-    "typescript": "^4.5.5",
+    "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.7.2",
     "web-vitals": "^2.1.4",
     "xterm": "^5.2.0",
     "xterm-addon-fit": "^0.7.0",
@@ -49,7 +52,9 @@
     "build": "node_modules/.bin/react-scripts build",
     "test": "node_modules/.bin/react-scripts test",
     "eject": "node_modules/.bin/react-scripts eject",
-    "prepare": "cd .. && husky cyclops-ui/.husky"
+    "prepare": "cd .. && husky cyclops-ui/.husky",
+    "build-webpack": "webpack --mode production",
+    "build-lib": "npx tsc --build tsconfig.json; yarn build-webpack; rm -rf node_modules"
   },
   "eslintConfig": {
     "extends": [
@@ -70,13 +75,46 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.16.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@mdx-js/react": "^2.1.2",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.6",
+    "@types/react": "^18.3.12",
     "@types/react-gauge-chart": "^0.4.3",
-    "@types/react-highlight-words": "^0.16.7",
+    "babel-jest": "^27.3.1",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "esbuild": "^0.24.0",
+    "esbuild-loader": "^4.2.2",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^9.0.11",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.3",
     "lint-staged": "^15.2.2",
-    "prettier": "3.2.5"
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.4.49",
+    "postcss-loader": "^8.1.1",
+    "prettier": "3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.2.0",
+    "sass": "^1.43.5",
+    "sass-loader": "^12.3.0",
+    "style-loader": "^3.3.1",
+    "typescript": "^5.7.2",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4"
   },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
   }

diff --git a/cyclops-ui/src/components/form/TemplateFormFields.tsx b/cyclops-ui/src/components/form/TemplateFormFields.tsx
@@ -288,7 +288,7 @@ const TemplateFormFields = ({
   }
 
   return (
-    <div>
+    <div className={"module-form-fields"}>
       {mapFields(
         isModuleEdit,
         fields,

diff --git a/cyclops-ui/src/components/form/custom.css b/cyclops-ui/src/components/form/custom.css
@@ -1,4 +1,4 @@
-.ant-collapse-content-box {
+.module-form-fields .ant-collapse-content-box {
   padding-top: 12px;
   border: 1px solid #d3d3d3;
   border-top: none;

diff --git a/cyclops-ui/src/components/k8s-resources/ClusterRole.tsx b/cyclops-ui/src/components/k8s-resources/ClusterRole.tsx
@@ -1,7 +1,7 @@
+import { Col, Divider, Row, Alert, Table, Tag, Spin } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert, Table, Tag } from "antd";
-import axios from "axios";
 import { mapResponseError } from "../../utils/api/errors";
+import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
 
 interface Props {
   name: string;
@@ -19,6 +19,9 @@ interface ClusterRoleData {
 }
 
 const ClusterRole = ({ name }: Props) => {
+  const [loading, setLoading] = useState(true);
+  const { fetchResource } = useResourceListActions();
+
   const [clusterRole, setClusterRole] = useState<ClusterRoleData>({
     rules: [],
   });
@@ -29,24 +32,18 @@ const ClusterRole = ({ name }: Props) => {
   });
 
   const fetchClusterRole = useCallback(() => {
-    axios
-      .get(`/api/resources`, {
-        params: {
-          group: `rbac.authorization.k8s.io`,
-          version: `v1`,
-          kind: `ClusterRole`,
-          name: name,
-        },
-      })
+    fetchResource("rbac.authorization.k8s.io", "v1", "ClusterRole", "", name)()
       .then((res) => {
         setClusterRole({
-          rules: res.data.rules || [],
+          rules: res.rules || [],
         });
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
-  }, [name]);
+  }, [name, fetchResource]);
 
   useEffect(() => {
     fetchClusterRole();
@@ -119,6 +116,8 @@ const ClusterRole = ({ name }: Props) => {
     });
   }
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

diff --git a/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx b/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx
@@ -1,47 +1,44 @@
-import React, { useEffect, useState } from "react";
-import { Divider, Row, Alert, Descriptions } from "antd";
-import axios from "axios";
+import { Divider, Row, Alert, Descriptions, Spin } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
 import ReactAce from "react-ace";
 import { mapResponseError } from "../../utils/api/errors";
+import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
 
 interface Props {
   name: string;
   namespace: string;
 }
 
 const ConfigMap = ({ name, namespace }: Props) => {
+  const { fetchResource } = useResourceListActions();
+
+  const [loading, setLoading] = useState(true);
+
   const [configMap, setConfigMap] = useState({});
   const [error, setError] = useState({
     message: "",
     description: "",
   });
 
-  useEffect(() => {
-    function fetchConfigMap() {
-      axios
-        .get(`/api/resources`, {
-          params: {
-            group: ``,
-            version: `v1`,
-            kind: `ConfigMap`,
-            name: name,
-            namespace: namespace,
-          },
-        })
-        .then((res) => {
-          setConfigMap(res.data);
-        })
-        .catch((error) => {
-          setError(mapResponseError(error));
-        });
-    }
+  const fetchConfigMap = useCallback(() => {
+    fetchResource("", "v1", "ConfigMap", namespace, name)()
+      .then((res) => {
+        setConfigMap(res);
+        setLoading(false);
+      })
+      .catch((error) => {
+        setError(mapResponseError(error));
+        setLoading(false);
+      });
+  }, [name, namespace, fetchResource]);
 
+  useEffect(() => {
     fetchConfigMap();
     const interval = setInterval(() => fetchConfigMap(), 15000);
     return () => {
       clearInterval(interval);
     };
-  }, [name, namespace]);
+  }, [fetchConfigMap]);
 
   const configMapData = (configMap: any) => {
     if (configMap.data) {
@@ -103,6 +100,8 @@ const ConfigMap = ({ name, namespace }: Props) => {
     }
   };
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

diff --git a/cyclops-ui/src/components/k8s-resources/CronJob.tsx b/cyclops-ui/src/components/k8s-resources/CronJob.tsx
@@ -1,15 +1,19 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert } from "antd";
-import axios from "axios";
+import { Col, Divider, Row, Alert, Spin } from "antd";
 import { mapResponseError } from "../../utils/api/errors";
 import PodTable from "./common/PodTable/PodTable";
+import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
 
 interface Props {
   name: string;
   namespace: string;
 }
 
 const CronJob = ({ name, namespace }: Props) => {
+  const { fetchResource } = useResourceListActions();
+
+  const [loading, setLoading] = useState(true);
+
   const [cronjob, setCronjob] = useState({
     status: "",
     pods: [],
@@ -21,23 +25,16 @@ const CronJob = ({ name, namespace }: Props) => {
   });
 
   const fetchCronJob = useCallback(() => {
-    axios
-      .get(`/api/resources`, {
-        params: {
-          group: `batch`,
-          version: `v1`,
-          kind: `CronJob`,
-          name: name,
-          namespace: namespace,
-        },
-      })
+    fetchResource("batch", "v1", "CronJob", namespace, name)()
       .then((res) => {
-        setCronjob(res.data);
+        setCronjob(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
-  }, [name, namespace]);
+  }, [name, namespace, fetchResource]);
 
   useEffect(() => {
     fetchCronJob();
@@ -47,6 +44,8 @@ const CronJob = ({ name, namespace }: Props) => {
     };
   }, [fetchCronJob]);
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

diff --git a/cyclops-ui/src/components/k8s-resources/DaemonSet.tsx b/cyclops-ui/src/components/k8s-resources/DaemonSet.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert } from "antd";
-import axios from "axios";
+import { Col, Divider, Row, Alert, Spin } from "antd";
 import { mapResponseError } from "../../utils/api/errors";
 import PodTable from "./common/PodTable/PodTable";
 import { isStreamingEnabled } from "../../utils/api/common";
+import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
 
 interface Props {
   name: string;
@@ -12,6 +12,10 @@ interface Props {
 }
 
 const DaemonSet = ({ name, namespace, workload }: Props) => {
+  const { fetchResource, streamingDisabled } = useResourceListActions();
+
+  const [loading, setLoading] = useState(true);
+
   const [daemonSet, setDaemonSet] = useState({
     status: "",
     pods: [],
@@ -23,23 +27,16 @@ const DaemonSet = ({ name, namespace, workload }: Props) => {
   });
 
   const fetchDaemonSet = useCallback(() => {
-    axios
-      .get(`/api/resources`, {
-        params: {
-          group: `apps`,
-          version: `v1`,
-          kind: `DaemonSet`,
-          name: name,
-          namespace: namespace,
-        },
-      })
+    fetchResource("apps", "v1", "DaemonSet", namespace, name)()
       .then((res) => {
-        setDaemonSet(res.data);
+        setDaemonSet(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
-  }, [name, namespace]);
+  }, [name, namespace, fetchResource]);
 
   useEffect(() => {
     fetchDaemonSet();
@@ -55,7 +52,7 @@ const DaemonSet = ({ name, namespace, workload }: Props) => {
   }, [fetchDaemonSet]);
 
   function getPods() {
-    if (workload && isStreamingEnabled()) {
+    if (workload && !streamingDisabled) {
       return workload.pods;
     }
 
@@ -72,6 +69,8 @@ const DaemonSet = ({ name, namespace, workload }: Props) => {
     return 0;
   }
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (