dynamic dashboard ui based on rbac rules

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
lensapp · May 11, 2020 · 5f09c02 · 5f09c02
1 parent e21e0b5
commit 5f09c02
Show file tree

Hide file tree

Showing 16 changed files with 193 additions and 90 deletions.
diff --git a/dashboard/client/api/json-api.ts b/dashboard/client/api/json-api.ts
@@ -105,8 +105,9 @@ export class JsonApi<D = JsonApiData, P extends JsonApiParams = JsonApiParams> {
         this.onData.emit(data, res);
         this.writeLog({ ...log, data });
         return data;
-      }
-      else {
+      } else if (log.method === "GET" && res.status === 403) {
+        this.writeLog({ ...log, data });
+      } else {
         const error = new JsonApiErrorParsed(data, this.parseError(data, res));
         this.onError.emit(error, res);
         this.writeLog({ ...log, error })

diff --git a/dashboard/client/api/kube-watch-api.ts b/dashboard/client/api/kube-watch-api.ts
@@ -107,8 +107,12 @@ export class KubeWatchApi {
       const { apiBase, namespace } = KubeApi.parseApi(url);
       const api = apiManager.getApi(apiBase);
       if (api) {
-        await api.refreshResourceVersion({ namespace });
-        this.reconnect();
+        try {
+          await api.refreshResourceVersion({ namespace });
+          this.reconnect();
+        } catch(error) {
+          console.debug("failed to refresh resource version", error)
+        }
       }
     }
   }

diff --git a/dashboard/client/api/rbac.ts b/dashboard/client/api/rbac.ts
@@ -0,0 +1,6 @@
+import { configStore } from "../config.store";
+
+export function isAllowedResource(resource: string) {
+  const { allowedResources } = configStore;
+  return allowedResources.includes(resource)
+}
diff --git a/dashboard/client/components/+cluster/cluster.tsx b/dashboard/client/components/+cluster/cluster.tsx
@@ -13,6 +13,7 @@ import { nodesStore } from "../+nodes/nodes.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { clusterStore } from "./cluster.store";
 import { eventStore } from "../+events/event.store";
+import { isAllowedResource } from "../../api/rbac";
 
 @observer
 export class Cluster extends React.Component {
@@ -25,6 +26,9 @@ export class Cluster extends React.Component {
 
   async componentDidMount() {
     const { dependentStores } = this;
+    if (!isAllowedResource("nodes")) {
+      dependentStores.splice(dependentStores.indexOf(nodesStore), 1)
+    }
     this.watchers.forEach(watcher => watcher.start(true));
 
     await Promise.all([

diff --git a/dashboard/client/components/+config/config.tsx b/dashboard/client/components/+config/config.tsx
@@ -9,8 +9,8 @@ import { namespaceStore } from "../+namespaces/namespace.store";
 import { resourceQuotaRoute, ResourceQuotas, resourceQuotaURL } from "../+config-resource-quotas";
 import { configURL } from "./config.route";
 import { HorizontalPodAutoscalers, hpaRoute, hpaURL } from "../+config-autoscalers";
-import { Certificates, ClusterIssuers, Issuers } from "../+custom-resources/certmanager.k8s.io";
 import { buildURL } from "../../navigation";
+import { isAllowedResource } from "../../api/rbac"
 
 export const certificatesURL = buildURL("/certificates");
 export const issuersURL = buildURL("/issuers");
@@ -20,32 +20,40 @@ export const clusterIssuersURL = buildURL("/clusterissuers");
 export class Config extends React.Component {
   static get tabRoutes(): TabRoute[] {
     const query = namespaceStore.getContextParams()
-    return [
-      {
+    const routes: TabRoute[] = []
+    if (isAllowedResource("configmaps")) {
+      routes.push({
         title: <Trans>ConfigMaps</Trans>,
         component: ConfigMaps,
         url: configMapsURL({ query }),
         path: configMapsRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("secrets")) {
+      routes.push({
         title: <Trans>Secrets</Trans>,
         component: Secrets,
         url: secretsURL({ query }),
         path: secretsRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("resourcequotas")) {
+      routes.push({
         title: <Trans>Resource Quotas</Trans>,
         component: ResourceQuotas,
         url: resourceQuotaURL({ query }),
         path: resourceQuotaRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("horizontalpodautoscalers")) {
+      routes.push({
         title: <Trans>HPA</Trans>,
         component: HorizontalPodAutoscalers,
         url: hpaURL({ query }),
         path: hpaRoute.path,
-      },
-    ]
+      })
+    }
+    return routes;
   }
 
   render() {

diff --git a/dashboard/client/components/+namespaces/namespace-select.tsx b/dashboard/client/components/+namespaces/namespace-select.tsx
@@ -11,6 +11,7 @@ import { namespaceStore } from "./namespace.store";
 import { _i18n } from "../../i18n";
 import { FilterIcon } from "../item-object-list/filter-icon";
 import { FilterType } from "../item-object-list/page-filters.store";
+import { isAllowedResource } from "../../api/rbac"
 
 interface Props extends SelectProps {
   showIcons?: boolean;
@@ -33,7 +34,9 @@ export class NamespaceSelect extends React.Component<Props> {
   private unsubscribe = noop;
 
   async componentDidMount() {
-    if (!namespaceStore.isLoaded) await namespaceStore.loadAll();
+    if (isAllowedResource("namespaces") && !namespaceStore.isLoaded) {
+      await namespaceStore.loadAll();
+    }
     this.unsubscribe = namespaceStore.subscribe();
   }
 

diff --git a/dashboard/client/components/+network/network.tsx b/dashboard/client/components/+network/network.tsx
@@ -12,6 +12,7 @@ import { Ingresses, ingressRoute, ingressURL } from "../+network-ingresses";
 import { NetworkPolicies, networkPoliciesRoute, networkPoliciesURL } from "../+network-policies";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { networkURL } from "./network.route";
+import { isAllowedResource } from "../../api/rbac";
 
 interface Props extends RouteComponentProps<{}> {
 }
@@ -20,32 +21,40 @@ interface Props extends RouteComponentProps<{}> {
 export class Network extends React.Component<Props> {
   static get tabRoutes(): TabRoute[] {
     const query = namespaceStore.getContextParams()
-    return [
-      {
+    const routes: TabRoute[] = [];
+    if (isAllowedResource("services")) {
+      routes.push({
         title: <Trans>Services</Trans>,
         component: Services,
         url: servicesURL({ query }),
         path: servicesRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("endpoints")) {
+      routes.push({
         title: <Trans>Endpoints</Trans>,
         component: Endpoints,
         url: endpointURL({ query }),
         path: endpointRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("ingresses")) {
+      routes.push({
         title: <Trans>Ingresses</Trans>,
         component: Ingresses,
         url: ingressURL({ query }),
         path: ingressRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("networkpolicies")) {
+      routes.push({
         title: <Trans>Network Policies</Trans>,
         component: NetworkPolicies,
         url: networkPoliciesURL({ query }),
         path: networkPoliciesRoute.path,
-      },
-    ]
+      })
+    }
+    return routes
   }
 
   render() {
@@ -59,4 +68,4 @@ export class Network extends React.Component<Props> {
       </MainLayout>
     )
   }
-}
+}
diff --git a/dashboard/client/components/+workloads-overview/overview-statuses.scss b/dashboard/client/components/+workloads-overview/overview-statuses.scss
@@ -16,10 +16,11 @@
   .workloads {
     display: grid;
     grid-template-columns: repeat(auto-fit, 155px);
-    justify-content: space-between;
+    justify-content: space-evenly;
     grid-gap: $margin;
     padding: $padding * 2;
 
+
     .workload {
       margin-bottom: $margin * 2;
 
@@ -32,4 +33,4 @@
       }
     }
   }
-}
+}
diff --git a/dashboard/client/components/+workloads-overview/overview-statuses.tsx b/dashboard/client/components/+workloads-overview/overview-statuses.tsx
@@ -15,17 +15,20 @@ import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { PageFiltersList } from "../item-object-list/page-filters-list";
 import { NamespaceSelectFilter } from "../+namespaces/namespace-select";
+import { configStore } from "../../config.store";
+import { isAllowedResource } from "../../api/rbac";
 
 @observer
 export class OverviewStatuses extends React.Component {
   render() {
+    const { allowedResources } = configStore;
     const { contextNs } = namespaceStore;
-    const pods = podsStore.getAllByNs(contextNs);
-    const deployments = deploymentStore.getAllByNs(contextNs);
-    const statefulSets = statefulSetStore.getAllByNs(contextNs);
-    const daemonSets = daemonSetStore.getAllByNs(contextNs);
-    const jobs = jobStore.getAllByNs(contextNs);
-    const cronJobs = cronJobStore.getAllByNs(contextNs);
+    const pods = isAllowedResource("pods") ? podsStore.getAllByNs(contextNs) : [];
+    const deployments = isAllowedResource("deployments") ? deploymentStore.getAllByNs(contextNs) : [];
+    const statefulSets = isAllowedResource("statefulsets") ? statefulSetStore.getAllByNs(contextNs) : [];
+    const daemonSets = isAllowedResource("daemonsets") ? daemonSetStore.getAllByNs(contextNs) : [];
+    const jobs = isAllowedResource("jobs") ? jobStore.getAllByNs(contextNs) : [];
+    const cronJobs = isAllowedResource("cronjobs") ? cronJobStore.getAllByNs(contextNs) : [];
     return (
       <div className="OverviewStatuses">
         <div className="header flex gaps align-center">
@@ -34,30 +37,42 @@ export class OverviewStatuses extends React.Component {
         </div>
         <PageFiltersList/>
         <div className="workloads">
+          { isAllowedResource("pods") &&
           <div className="workload">
             <div className="title"><Link to={podsURL()}><Trans>Pods</Trans> ({pods.length})</Link></div>
             <OverviewWorkloadStatus status={podsStore.getStatuses(pods)}/>
           </div>
+          }
+          { isAllowedResource("deployments") &&
           <div className="workload">
             <div className="title"><Link to={deploymentsURL()}><Trans>Deployments</Trans> ({deployments.length})</Link></div>
             <OverviewWorkloadStatus status={deploymentStore.getStatuses(deployments)}/>
           </div>
+          }
+          { isAllowedResource("statefulsets") &&
           <div className="workload">
             <div className="title"><Link to={statefulSetsURL()}><Trans>StatefulSets</Trans> ({statefulSets.length})</Link></div>
             <OverviewWorkloadStatus status={statefulSetStore.getStatuses(statefulSets)}/>
           </div>
+          }
+          { isAllowedResource("daemonsets") &&
           <div className="workload">
             <div className="title"><Link to={daemonSetsURL()}><Trans>DaemonSets</Trans> ({daemonSets.length})</Link></div>
             <OverviewWorkloadStatus status={daemonSetStore.getStatuses(daemonSets)}/>
           </div>
+          }
+          { isAllowedResource("jobs") &&
           <div className="workload">
             <div className="title"><Link to={jobsURL()}><Trans>Jobs</Trans> ({jobs.length})</Link></div>
             <OverviewWorkloadStatus status={jobStore.getStatuses(jobs)}/>
           </div>
+          }
+          { isAllowedResource("cronjobs") &&
           <div className="workload">
             <div className="title"><Link to={cronJobsURL()}><Trans>CronJobs</Trans> ({cronJobs.length})</Link></div>
             <OverviewWorkloadStatus status={cronJobStore.getStatuses(cronJobs)}/>
           </div>
+          }
         </div>
       </div>
     )

diff --git a/dashboard/client/components/+workloads-overview/overview.tsx b/dashboard/client/components/+workloads-overview/overview.tsx
@@ -16,6 +16,8 @@ import { jobStore } from "../+workloads-jobs/job.store";
 import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
 import { Spinner } from "../spinner";
 import { Events } from "../+events";
+import { KubeObjectStore } from "../../kube-object.store";
+import { isAllowedResource } from "../../api/rbac"
 
 interface Props extends RouteComponentProps<IWorkloadsOverviewRouteParams> {
 }
@@ -26,16 +28,31 @@ export class WorkloadsOverview extends React.Component<Props> {
   @observable isUnmounting = false;
 
   async componentDidMount() {
-    const stores = [
-      podsStore,
-      deploymentStore,
-      daemonSetStore,
-      statefulSetStore,
-      replicaSetStore,
-      jobStore,
-      cronJobStore,
-      eventStore,
-    ];
+    const stores: KubeObjectStore[] = [];
+    if (isAllowedResource("pods")) {
+      stores.push(podsStore);
+    }
+    if (isAllowedResource("deployments")) {
+      stores.push(deploymentStore);
+    }
+    if (isAllowedResource("daemonsets")) {
+      stores.push(daemonSetStore);
+    }
+    if (isAllowedResource("statefulsets")) {
+      stores.push(statefulSetStore);
+    }
+    if (isAllowedResource("replicasets")) {
+      stores.push(replicaSetStore);
+    }
+    if (isAllowedResource("jobs")) {
+      stores.push(jobStore);
+    }
+    if (isAllowedResource("cronjobs")) {
+      stores.push(cronJobStore);
+    }
+    if (isAllowedResource("events")) {
+      stores.push(eventStore);
+    }
     this.isReady = stores.every(store => store.isLoaded);
     await Promise.all(stores.map(store => store.loadAll()));
     this.isReady = true;
@@ -55,11 +72,11 @@ export class WorkloadsOverview extends React.Component<Props> {
     return (
       <>
         <OverviewStatuses/>
-        <Events
+        { isAllowedResource("events") && <Events
           compact
           hideFilters
           className="box grow"
-        />
+        /> }
       </>
     )
   }
@@ -71,4 +88,4 @@ export class WorkloadsOverview extends React.Component<Props> {
       </div>
     )
   }
-}
+}