Dynamic dashboard UI based on RBAC rules (#366)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

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 })

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) {
+        try {
           await api.refreshResourceVersion({ namespace });
           this.reconnect();
+        } catch(error) {
+          console.debug("failed to refresh resource version", error)
+        }
       }
     }
   }

dashboard/client/api/rbac.ts

@@ -0,0 +1,15 @@
+import { configStore } from "../config.store";
+import { isArray } from "util";
+
+export function isAllowedResource(resources: string|string[]) {
+  if (!isArray(resources)) {
+    resources = [resources];
+  }
+  const { allowedResources } = configStore;
+  for (const resource of resources) {
+    if (!allowedResources.includes(resource)) {
+      return false;
+    }
+  }
+  return true;
+}

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([

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() {

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();
   }
 

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() {

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;
 

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>
     )

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"
-        />
+        /> }
       </>
     )
   }

dashboard/client/components/+workloads/workloads.tsx

@@ -15,6 +15,7 @@ import { DaemonSets } from "../+workloads-daemonsets";
 import { StatefulSets } from "../+workloads-statefulsets";
 import { Jobs } from "../+workloads-jobs";
 import { CronJobs } from "../+workloads-cronjobs";
+import { isAllowedResource } from "../../api/rbac"
 
 interface Props extends RouteComponentProps {
 }
@@ -23,50 +24,63 @@ interface Props extends RouteComponentProps {
 export class Workloads extends React.Component<Props> {
   static get tabRoutes(): TabRoute[] {
     const query = namespaceStore.getContextParams();
-    return [
+    const routes: TabRoute[] = [
       {
         title: <Trans>Overview</Trans>,
         component: WorkloadsOverview,
         url: overviewURL({ query }),
         path: overviewRoute.path
-      },
-      {
+      }
+    ]
+    if (isAllowedResource("pods")) {
+      routes.push({
         title: <Trans>Pods</Trans>,
         component: Pods,
         url: podsURL({ query }),
         path: podsRoute.path
-      },
-      {
+      })
+    }
+    if (isAllowedResource("deployments")) {
+      routes.push({
         title: <Trans>Deployments</Trans>,
         component: Deployments,
         url: deploymentsURL({ query }),
         path: deploymentsRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("daemonsets")) {
+      routes.push({
         title: <Trans>DaemonSets</Trans>,
         component: DaemonSets,
         url: daemonSetsURL({ query }),
         path: daemonSetsRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("statefulsets")) {
+      routes.push({
         title: <Trans>StatefulSets</Trans>,
         component: StatefulSets,
         url: statefulSetsURL({ query }),
         path: statefulSetsRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("jobs")) {
+      routes.push({
         title: <Trans>Jobs</Trans>,
         component: Jobs,
         url: jobsURL({ query }),
         path: jobsRoute.path,
-      },
-      {
+      })
+    }
+    if (isAllowedResource("cronjobs")) {
+      routes.push({
         title: <Trans>CronJobs</Trans>,
         component: CronJobs,
         url: cronJobsURL({ query }),
         path: cronJobsRoute.path,
-      },
-    ]
+      })
+    }
+    return routes;
   };
 
   render() {

dashboard/client/components/app.tsx

@@ -32,6 +32,7 @@ import { PodLogsDialog } from "./+workloads-pods/pod-logs-dialog";
 import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale-dialog";
 import { CustomResources } from "./+custom-resources/custom-resources";
 import { crdRoute } from "./+custom-resources";
+import { isAllowedResource } from "../api/rbac";
 
 @observer
 class App extends React.Component {
@@ -46,7 +47,7 @@ class App extends React.Component {
   };
 
   render() {
-    const homeUrl = clusterURL();
+    const homeUrl = (isAllowedResource(["events", "nodes", "pods"])) ? clusterURL() : workloadsURL();
     return (
       <I18nProvider i18n={_i18n}>
         <Router history={browserHistory}>

dashboard/client/components/item-object-list/item-list-layout.tsx

@@ -114,10 +114,15 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     const { store, dependentStores, isClusterScoped } = this.props;
     const stores = [store, ...dependentStores];
     if (!isClusterScoped) stores.push(namespaceStore);
+    try {
       await Promise.all(stores.map(store => store.loadAll()));
       const subscriptions = stores.map(store => store.subscribe());
-    await when(() => this.isUnmounting);
+
       subscriptions.forEach(dispose => dispose()); // unsubscribe all
+    } catch(error) {
+      console.log("catched", error)
+    }
+    await when(() => this.isUnmounting);
   }
 
   componentWillUnmount() {

dashboard/client/components/layout/sidebar.tsx

@@ -28,6 +28,7 @@ import { crdStore } from "../+custom-resources/crd.store";
 import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
 import { CustomResources } from "../+custom-resources/custom-resources";
 import { navigation } from "../../navigation";
+import { isAllowedResource } from "../../api/rbac"
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -43,7 +44,7 @@ interface Props {
 @observer
 export class Sidebar extends React.Component<Props> {
   async componentDidMount() {
-    if (!crdStore.isLoaded) crdStore.loadAll()
+    if (!crdStore.isLoaded && isAllowedResource('customresourcedefinitions')) crdStore.loadAll()
   }
 
   renderCustomResources() {
@@ -71,7 +72,7 @@ export class Sidebar extends React.Component<Props> {
 
   render() {
     const { toggle, isPinned, className } = this.props;
-    const { isClusterAdmin, allowedResources } = configStore;
+    const { allowedResources } = configStore;
     const query = namespaceStore.getContextParams();
     return (
       <SidebarContext.Provider value={{ pinned: isPinned }}>
@@ -91,19 +92,21 @@ export class Sidebar extends React.Component<Props> {
           <div className="sidebar-nav flex column box grow-fixed">
             <SidebarNavItem
               id="cluster"
+              isHidden={!isAllowedResource('nodes')}
               url={clusterURL()}
               text={<Trans>Cluster</Trans>}
               icon={<Icon svg="kube"/>}
             />
             <SidebarNavItem
               id="nodes"
-              isHidden={!allowedResources.includes('nodes')}
+              isHidden={!isAllowedResource('nodes')}
               url={nodesURL()}
               text={<Trans>Nodes</Trans>}
               icon={<Icon svg="nodes"/>}
             />
             <SidebarNavItem
               id="workloads"
+              isHidden={Workloads.tabRoutes.length == 0}
               url={workloadsURL({ query })}
               routePath={workloadsRoute.path}
               subMenus={Workloads.tabRoutes}
@@ -112,6 +115,7 @@ export class Sidebar extends React.Component<Props> {
             />
             <SidebarNavItem
               id="config"
+              isHidden={Config.tabRoutes.length == 0}
               url={configURL({ query })}
               routePath={configRoute.path}
               subMenus={Config.tabRoutes}
@@ -120,6 +124,7 @@ export class Sidebar extends React.Component<Props> {
             />
             <SidebarNavItem
               id="networks"
+              isHidden={Network.tabRoutes.length == 0}
               url={networkURL({ query })}
               routePath={networkRoute.path}
               subMenus={Network.tabRoutes}
@@ -128,6 +133,7 @@ export class Sidebar extends React.Component<Props> {
             />
             <SidebarNavItem
               id="storage"
+              isHidden={Storage.tabRoutes.length == 0}
               url={storageURL({ query })}
               routePath={storageRoute.path}
               subMenus={Storage.tabRoutes}
@@ -136,12 +142,14 @@ export class Sidebar extends React.Component<Props> {
             />
             <SidebarNavItem
               id="namespaces"
+              isHidden={!isAllowedResource('namespaces')}
               url={namespacesURL()}
               icon={<Icon material="layers"/>}
               text={<Trans>Namespaces</Trans>}
             />
             <SidebarNavItem
               id="events"
+              isHidden={!isAllowedResource('events')}
               url={eventsURL({ query })}
               routePath={eventRoute.path}
               icon={<Icon material="access_time"/>}
@@ -165,7 +173,7 @@ export class Sidebar extends React.Component<Props> {
             />
             <SidebarNavItem
               id="custom-resources"
-              isHidden={!allowedResources.includes('customresourcedefinitions')}
+              isHidden={!isAllowedResource('customresourcedefinitions')}
               url={crdURL()}
               subMenus={CustomResources.tabRoutes}
               routePath={crdRoute.path}

dashboard/server/common/license.ts

@@ -1,12 +0,0 @@
-export interface ILicense {
-  name?: string;
-  maxNodes?: number;
-  owner?: {
-    company?: string;
-    firstName?: string;
-    lastName?: string;
-    username?: string;
-  };
-  validUntil?: string;
-  recurring?: boolean;
-}

src/main/routes/config.ts

@@ -5,6 +5,31 @@ import { getAppVersion } from "../../common/app-utils"
 import { CoreV1Api, AuthorizationV1Api } from "@kubernetes/client-node"
 import { Cluster } from "../cluster"
 
+// TODO: auto-populate all resources dynamically
+const apiResources = [
+  { resource: "configmaps" },
+  { resource: "cronjobs", group: "batch" },
+  { resource: "customresourcedefinitions", group: "apiextensions.k8s.io" },
+  { resource: "daemonsets", group: "apps" },
+  { resource: "deployments", group: "apps" },
+  { resource: "endpoints" },
+  { resource: "events" },
+  { resource: "horizontalpodautoscalers" },
+  { resource: "ingresses", group: "networking.k8s.io" },
+  { resource: "jobs", group: "batch" },
+  { resource: "namespaces" },
+  { resource: "networkpolicies", group: "networking.k8s.io" },
+  { resource: "nodes" },
+  { resource: "persistentvolumes" },
+  { resource: "pods" },
+  { resource: "podsecuritypolicies" },
+  { resource: "resourcequotas" },
+  { resource: "secrets" },
+  { resource: "services" },
+  { resource: "statefulsets", group: "apps" },
+  { resource: "storageclasses", group: "storage.k8s.io" },
+]
+
 async function getAllowedNamespaces(cluster: Cluster) {
   const api = cluster.contextHandler.kc.makeApiClient(CoreV1Api)
   try {
@@ -30,21 +55,18 @@ async function getAllowedNamespaces(cluster: Cluster) {
   }
 }
 
-async function getAllowedResources(cluster: Cluster) {
-  // TODO: auto-populate all resources dynamically
-  const resources = [
-    "nodes", "persistentvolumes", "storageclasses", "customresourcedefinitions",
-    "podsecuritypolicies"
-  ]
+async function getAllowedResources(cluster: Cluster, namespaces: string[]) {
   try {
     const resourceAccessStatuses = await Promise.all(
-      resources.map(resource => cluster.canI({
-        resource: resource,
-        verb: "list"
+      apiResources.map(apiResource => cluster.canI({
+        resource: apiResource.resource,
+        group: apiResource.group,
+        verb: "list",
+        namespace: namespaces[0]
       }))
     )
-    return resources
-      .filter((resource, i) => resourceAccessStatuses[i])
+    return apiResources
+      .filter((resource, i) => resourceAccessStatuses[i]).map(apiResource => apiResource.resource)
   } catch(error) {
     return []
   }
@@ -55,6 +77,7 @@ class ConfigRoute extends LensApi {
   public async routeConfig(request: LensApiRequest) {
     const { params, response, cluster} = request
 
+    const namespaces = await getAllowedNamespaces(cluster)
     const data = {
       clusterName: cluster.contextName,
       lensVersion: getAppVersion(),
@@ -62,8 +85,8 @@ class ConfigRoute extends LensApi {
       kubeVersion: cluster.version,
       chartsEnabled: true,
       isClusterAdmin: cluster.isAdmin,
-      allowedResources: await getAllowedResources(cluster),
-      allowedNamespaces: await getAllowedNamespaces(cluster)
+      allowedResources: await getAllowedResources(cluster, namespaces),
+      allowedNamespaces: namespaces
     };
 
     this.respondJson(response, data)