🌐 support networking policies in ui (#765)

* support networking policies in ui

* add deps

cyclops-ctrl/pkg/cluster/k8sclient/modules.go

@@ -817,6 +817,7 @@ func (k *KubernetesClient) getPodsForNetworkPolicy(policy networkingv1.NetworkPo
 
 		out = append(out, dto.Pod{
 			Name:       item.Name,
+			Namespace:  item.Namespace,
 			Containers: containers,
 			Node:       item.Spec.NodeName,
 			PodPhase:   string(item.Status.Phase),

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

@@ -0,0 +1,142 @@
+import { Divider, Alert, Table, Spin } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { mapResponseError } from "../../utils/api/errors";
+import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
+import ReactAce from "react-ace";
+import YAML from "yaml";
+
+interface Props {
+  namespace: string;
+  name: string;
+}
+
+interface NetworkPolicyData {
+  pods: [];
+  ingress: {};
+  egress: {};
+}
+
+const NetworkPolicy = ({ namespace, name }: Props) => {
+  const [loading, setLoading] = useState(true);
+  const { fetchResource } = useResourceListActions();
+
+  const [networkPolicy, setNetworkPolicy] = useState<NetworkPolicyData>({
+    pods: [],
+    ingress: {},
+    egress: {},
+  });
+
+  const [error, setError] = useState({
+    message: "",
+    description: "",
+  });
+
+  const fetchNetworkPolicy = useCallback(() => {
+    fetchResource("networking.k8s.io", "v1", "NetworkPolicy", namespace, name)()
+      .then((res) => {
+        setNetworkPolicy(res);
+        setLoading(false);
+      })
+      .catch((error) => {
+        setError(mapResponseError(error));
+        setLoading(false);
+      });
+  }, [name, namespace, fetchResource]);
+
+  useEffect(() => {
+    fetchNetworkPolicy();
+
+    const interval = setInterval(() => fetchNetworkPolicy(), 15000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [fetchNetworkPolicy]);
+
+  const editorHeight = (lines: number) => {
+    if (lines > 20) {
+      return "320px";
+    } else {
+      return `${lines * 16}px`;
+    }
+  };
+
+  const stringifyRulesToYaml = (obj: any) => {
+    try {
+      return YAML.stringify(obj);
+    } catch (error) {
+      console.error("YAML stringify error:", error);
+      return `YAML stringify error: ${error}`;
+    }
+  };
+
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
+  return (
+    <div>
+      {error.message.length !== 0 && (
+        <Alert
+          message={error.message}
+          description={error.description}
+          type="error"
+          closable
+          afterClose={() => {
+            setError({
+              message: "",
+              description: "",
+            });
+          }}
+          style={{ marginBottom: "20px" }}
+        />
+      )}
+      <Divider
+        style={{ fontSize: "120%" }}
+        orientationMargin="0"
+        orientation={"left"}
+      >
+        Ingress
+      </Divider>
+      <ReactAce
+        style={{
+          width: "100%",
+          height: editorHeight(
+            stringifyRulesToYaml(networkPolicy.ingress).split("\n").length,
+          ),
+        }}
+        mode={"sass"}
+        value={stringifyRulesToYaml(networkPolicy.ingress)}
+        readOnly={true}
+      />
+      <Divider
+        style={{ fontSize: "120%" }}
+        orientationMargin="0"
+        orientation={"left"}
+      >
+        Egress
+      </Divider>
+      <ReactAce
+        style={{
+          width: "100%",
+          height: editorHeight(
+            stringifyRulesToYaml(networkPolicy.egress).split("\n").length,
+          ),
+        }}
+        mode={"sass"}
+        value={stringifyRulesToYaml(networkPolicy.egress)}
+        readOnly={true}
+      />
+      <Divider
+        style={{ fontSize: "120%" }}
+        orientationMargin="0"
+        orientation={"left"}
+      >
+        Target pods
+      </Divider>
+      <Table dataSource={networkPolicy.pods}>
+        <Table.Column title={"Name"} dataIndex="name" />
+        <Table.Column title={"Namespace"} dataIndex="namespace" />
+      </Table>
+    </div>
+  );
+};
+
+export default NetworkPolicy;

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

@@ -47,6 +47,7 @@ import { mapResponseError } from "../../../utils/api/errors";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
 import { Workload } from "../../../utils/k8s/workload";
 import { useResourceListActions } from "./ResourceListActionsContext";
+import NetworkPolicy from "../NetworkPolicy";
 
 interface Props {
   loadResources: boolean;
@@ -340,6 +341,11 @@ const ResourceList = ({
       case "ClusterRole":
         resourceDetails = <ClusterRole name={resource.name} />;
         break;
+      case "NetworkPolicy":
+        resourceDetails = (
+          <NetworkPolicy namespace={resource.namespace} name={resource.name} />
+        );
+        break;
     }
 
     let deletedWarning = <p />;