🚦 add cluster role view (#668)

* Add cluster role resource

* Fix. Rule values might be undefined

* Add optional "non resource url" column

* remove streaming check

---------

Co-authored-by: petar-cvit <[email protected]>

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

@@ -0,0 +1,156 @@
+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 { isStreamingEnabled } from "../../utils/api/common";
+
+interface Props {
+  name: string;
+}
+
+interface Rule {
+  verbs?: string[];
+  apiGroups?: string[];
+  resources?: string[];
+  nonResourceURLs?: string[];
+}
+
+interface ClusterRoleData {
+  rules: Rule[];
+}
+
+const ClusterRole = ({ name }: Props) => {
+  const [clusterRole, setClusterRole] = useState<ClusterRoleData>({
+    rules: [],
+  });
+
+  const [error, setError] = useState({
+    message: "",
+    description: "",
+  });
+
+  const fetchClusterRole = useCallback(() => {
+    axios
+      .get(`/api/resources`, {
+        params: {
+          group: `rbac.authorization.k8s.io`,
+          version: `v1`,
+          kind: `ClusterRole`,
+          name: name,
+        },
+      })
+      .then((res) => {
+        setClusterRole({
+          rules: res.data.rules || [],
+        });
+      })
+      .catch((error) => {
+        setError(mapResponseError(error));
+      });
+  }, [name]);
+
+  useEffect(() => {
+    fetchClusterRole();
+
+    const interval = setInterval(() => fetchClusterRole(), 15000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [fetchClusterRole]);
+
+  const columns = [
+    {
+      title: "Verbs",
+      dataIndex: "verbs",
+      key: "verbs",
+      render: (verbs?: string[]) => (
+        <>
+          {verbs?.map((verb) => (
+            <Tag key={verb} color="orange">
+              {verb}
+            </Tag>
+          ))}
+        </>
+      ),
+    },
+    {
+      title: "API Groups",
+      dataIndex: "apiGroups",
+      key: "apiGroups",
+      render: (apiGroups?: string[]) => (
+        <>
+          {apiGroups?.map((group) => (
+            <Tag key={group} color="blue">
+              {group || "*"}
+            </Tag>
+          ))}
+        </>
+      ),
+    },
+    {
+      title: "Resources",
+      dataIndex: "resources",
+      key: "resources",
+      render: (resources?: string[]) => (
+        <>
+          {resources?.map((resource) => (
+            <Tag key={resource} color="green">
+              {resource}
+            </Tag>
+          ))}
+        </>
+      ),
+    },
+  ];
+
+  if (clusterRole.rules.some((rule) => rule.nonResourceURLs)) {
+    columns.push({
+      title: "Non resource URLs",
+      dataIndex: "nonResourceURLs",
+      key: "nonResourceURLs",
+      render: (nonResourceURLs?: string[]) => (
+        <>
+          {nonResourceURLs?.map((url) => (
+            <Tag key={url} color="purple">
+              {url}
+            </Tag>
+          ))}
+        </>
+      ),
+    });
+  }
+
+  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"}
+      >
+        Rules
+      </Divider>
+      <Row>
+        <Col span={24} style={{ overflowX: "auto" }}>
+          <Table dataSource={clusterRole.rules} columns={columns} />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default ClusterRole;

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

@@ -27,6 +27,7 @@ import DaemonSet from "../DaemonSet";
 import StatefulSet from "../StatefulSet";
 import Pod from "../Pod";
 import Service from "../Service";
+import ClusterRole from "../ClusterRole";
 import ConfigMap from "../ConfigMap";
 import PersistentVolumeClaim from "../PersistentVolumeClaim";
 import Secret from "../Secret";
@@ -329,6 +330,9 @@ const ResourceList = ({
           <Secret name={resource.name} namespace={resource.namespace} />
         );
         break;
+      case "ClusterRole":
+        resourceDetails = <ClusterRole name={resource.name} />;
+        break;
     }
 
     let deletedWarning = <p />;