💾 add component for PersistentVolumeClaim (cyclops-ui#320)

* feat(ui): add component for PersistentVolumeClaim

* fix: remove comments about moving function to useEffect

Author: doncicuto

cyclops-ui/src/components/k8s-resources/PersistentVolumeClaim.tsx

@@ -0,0 +1,90 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { mapResponseError } from "../../utils/api/errors";
+import { Alert, Descriptions, Divider } from "antd";
+
+interface Props {
+  name: string;
+  namespace: string;
+}
+
+interface pvc {
+  size: string;
+  accessModes: string;
+}
+
+const PersistentVolumeClaim = ({ name, namespace }: Props) => {
+  const [pvc, setPvc] = useState<pvc>({
+    size: "",
+    accessModes: "",
+  });
+  const [error, setError] = useState({
+    message: "",
+    description: "",
+  });
+
+  useEffect(() => {
+    function fetchPersistentVolumeClaim() {
+      axios
+        .get(`/api/resources`, {
+          params: {
+            group: ``,
+            version: `v1`,
+            kind: `PersistentVolumeClaim`,
+            name: name,
+            namespace: namespace,
+          },
+        })
+        .then((res) => {
+          setPvc({
+            size: res.data.size,
+            accessModes: res.data.accessmodes.join(","),
+          });
+        })
+        .catch((error) => {
+          setError(mapResponseError(error));
+        });
+    }
+
+    fetchPersistentVolumeClaim();
+    const interval = setInterval(() => fetchPersistentVolumeClaim(), 15000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [name, namespace]);
+
+  return (
+    <div>
+      {error.message.length !== 0 && (
+        <Alert
+          message={error.message}
+          description={error.description}
+          type="error"
+          closable
+          afterClose={() => {
+            setError({
+              message: "",
+              description: "",
+            });
+          }}
+          style={{ marginBottom: "20px" }}
+        />
+      )}
+      <Divider />
+      <Descriptions style={{ width: "100%" }} bordered>
+        {Object.entries(pvc).map(([key, dataValue]) => (
+          <Descriptions.Item
+            key={key}
+            labelStyle={{ width: "20%" }}
+            label={key}
+            span={24}
+          >
+            {dataValue}
+          </Descriptions.Item>
+        ))}
+      </Descriptions>
+    </div>
+  );
+};
+
+export default PersistentVolumeClaim;

cyclops-ui/src/components/pages/ModuleDetails.tsx

@@ -21,7 +21,6 @@ import {
   CaretRightOutlined,
   CheckCircleTwoTone,
   CloseSquareTwoTone,
-  LinkOutlined,
   SearchOutlined,
   WarningTwoTone,
 } from "@ant-design/icons";
@@ -34,6 +33,8 @@ import StatefulSet from "../k8s-resources/StatefulSet";
 import Pod from "../k8s-resources/Pod";
 import Service from "../k8s-resources/Service";
 import ConfigMap from "../k8s-resources/ConfigMap";
+import PersistentVolumeClaim from "../k8s-resources/PersistentVolumeClaim";
+
 import {
   moduleTemplateReferenceView,
   templateRef,
@@ -395,6 +396,14 @@ const ModuleDetails = () => {
           <ConfigMap name={resource.name} namespace={resource.namespace} />
         );
         break;
+      case "PersistentVolumeClaim":
+        resourceDetails = (
+          <PersistentVolumeClaim
+            name={resource.name}
+            namespace={resource.namespace}
+          />
+        );
+        break;
     }
 
     let deletedWarning = <p />;