Add role bindings and cluster role bindings, organize groups and improve the CRD names (#5448)

* Display basics of role bindings

* Improve the CRD display names

* Move storage classes to the correct section

* Display basics of cluster role bindings

* Add role references

* Add subjects

* Fix typo

* Update cluster group view

* Update search view

* Sort sections and update workloads section

* Update menu order

* Fix review findings

src/app/backend/api/types.go

@@ -225,7 +225,9 @@ var KindToAPIMapping = map[string]APIMapping{
 	ResourceKindEndpoint:                 {"endpoints", ClientTypeDefault, true},
 	ResourceKindNetworkPolicy:            {"networkpolicies", ClientTypeNetworkingClient, true},
 	ResourceKindClusterRole:              {"clusterroles", ClientTypeRbacClient, false},
+	ResourceKindClusterRoleBinding:       {"clusterrolebindings", ClientTypeRbacClient, false},
 	ResourceKindRole:                     {"roles", ClientTypeRbacClient, true},
+	ResourceKindRoleBinding:              {"rolebindings", ClientTypeRbacClient, true},
 	ResourceKindPlugin:                   {"plugins", ClientTypePluginsClient, true},
 }
 

src/app/frontend/chrome/nav/pinner/component.ts

@@ -47,4 +47,8 @@ export class PinnerNavComponent {
   unpin(resource: PinnedResource): void {
     this.pinner_.unpinResource(resource);
   }
+
+  getDisplayName(resource: PinnedResource): string {
+    return resource.displayName.replace(/([A-Z]+)/g, ' $1').replace(/([A-Z][a-z])/g, ' $1');
+  }
 }

src/app/frontend/chrome/nav/pinner/template.html

@@ -19,6 +19,6 @@ limitations under the License.
                class="kd-nav-item"
                [state]="getResourceHref(resource)"
                [namespaced]="resource.namespaced"
-               i18n>{{resource.displayName}}
+               i18n>{{getDisplayName(resource)}}
   </kd-nav-item>
 </div>

src/app/frontend/chrome/nav/style.scss

@@ -42,18 +42,6 @@
   }
 }
 
-.kd-nav-group {
-  margin-right: $baseline-grid;
-
-  &:last-child {
-    > .kd-nav-item {
-      &:last-child {
-        padding-bottom: 2 * $baseline-grid;
-      }
-    }
-  }
-}
-
 .kd-nav-group-item {
   margin-left: 1.5 * $baseline-grid;
 }

src/app/frontend/chrome/nav/template.html

@@ -18,182 +18,192 @@ limitations under the License.
                       [ngClass]="isVisible ? 'visible' : 'hidden'">
   <mat-drawer class="kd-nav"
               mode="side">
-    <div class="kd-nav-group">
-      <kd-nav-item class="kd-nav-group-item"
-                   state="/cluster"
-                   id="nav-cluster"
-                   i18n>Cluster
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/clusterrole"
-                   id="nav-clusterrole"
-                   i18n>Cluster Roles
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/namespace"
-                   id="nav-namespace"
-                   i18n>Namespaces
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/networkpolicy"
-                   id="nav-network-policy"
-                   [namespaced]="true"
-                   i18n>Network Policies
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/node"
-                   id="nav-node"
-                   i18n>Nodes
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/persistentvolume"
-                   id="nav-persistentvolume"
-                   i18n>Persistent Volumes
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/role"
-                   id="nav-role"
-                   [namespaced]="true"
-                   i18n>Roles
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/serviceaccount"
-                   id="nav-serviceaccount"
-                   [namespaced]="true"
-                   i18n>Service Accounts
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/storageclass"
-                   id="nav-storageclass"
-                   i18n>Storage Classes
-      </kd-nav-item>
-    </div>
 
-    <div class="kd-nav-group">
-      <kd-nav-item class="kd-nav-group-item"
-                   state="/workloads"
-                   id="nav-workloads"
-                   [namespaced]="true"
-                   i18n>Workloads
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/cronjob"
-                   id="nav-cronjob"
-                   i18n>Cron Jobs
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/daemonset"
-                   id="nav-daemonset"
-                   i18n>Daemon Sets
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/deployment"
-                   id="nav-deployment"
-                   i18n>Deployments
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/job"
-                   id="nav-job"
-                   i18n>Jobs
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/pod"
-                   id="nav-pod"
-                   i18n>Pods
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/replicaset"
-                   id="nav-replicaset"
-                   i18n>Replica Sets
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/replicationcontroller"
-                   id="nav-replicationcontroller"
-                   i18n>Replication Controllers
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/statefulset"
-                   id="nav-statefulset"
-                   i18n>Stateful Sets
-      </kd-nav-item>
+    <!-- Workloads -->
+    <kd-nav-item class="kd-nav-group-item"
+                 state="/workloads"
+                 id="nav-workloads"
+                 [namespaced]="true"
+                 i18n>Workloads
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/cronjob"
+                 id="nav-cronjob"
+                 i18n>Cron Jobs
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/daemonset"
+                 id="nav-daemonset"
+                 i18n>Daemon Sets
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/deployment"
+                 id="nav-deployment"
+                 i18n>Deployments
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/job"
+                 id="nav-job"
+                 i18n>Jobs
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/pod"
+                 id="nav-pod"
+                 i18n>Pods
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/replicaset"
+                 id="nav-replicaset"
+                 i18n>Replica Sets
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/replicationcontroller"
+                 id="nav-replicationcontroller"
+                 i18n>Replication Controllers
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/statefulset"
+                 id="nav-statefulset"
+                 i18n>Stateful Sets
+    </kd-nav-item>
 
-      <kd-nav-item class="kd-nav-group-item"
-                   state="/discovery"
-                   id="nav-discovery"
-                   [namespaced]="true"
-                   i18n>Service
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/ingress"
-                   id="nav-ingress"
-                   i18n>Ingresses
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/service"
-                   id="nav-service"
-                   i18n>Services
-      </kd-nav-item>
+    <!-- Service -->
+    <kd-nav-item class="kd-nav-group-item"
+                 state="/discovery"
+                 id="nav-discovery"
+                 [namespaced]="true"
+                 i18n>Service
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/ingress"
+                 id="nav-ingress"
+                 i18n>Ingresses
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/service"
+                 id="nav-service"
+                 i18n>Services
+    </kd-nav-item>
 
-      <kd-nav-item class="kd-nav-group-item"
-                   state="/config"
-                   id="nav-config"
-                   [namespaced]="true"
-                   i18n>Config and Storage
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/configmap"
-                   id="nav-configmap"
-                   i18n>Config Maps
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/persistentvolumeclaim"
-                   id="nav-persistentvolumeclaim"
-                   i18n>Persistent Volume Claims
-      </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/secret"
-                   id="nav-secret"
-                   i18n>Secrets
-      </kd-nav-item>
-    </div>
+    <!-- Config and Storage -->
+    <kd-nav-item class="kd-nav-group-item"
+                 state="/config"
+                 id="nav-config"
+                 i18n>Config and Storage
+    </kd-nav-item>
 
-    <div class="kd-nav-group">
-      <kd-nav-item class="kd-nav-group-item"
-                   state="/customresourcedefinition"
-                   id="nav-customresourcedefinition"
-                   [exact]="true"
-                   i18n>Custom Resource Definitions
-      </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/configmap"
+                 id="nav-configmap"
+                 [namespaced]="true"
+                 i18n>Config Maps
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/persistentvolumeclaim"
+                 id="nav-persistentvolumeclaim"
+                 [namespaced]="true"
+                 i18n>Persistent Volume Claims
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/secret"
+                 id="nav-secret"
+                 [namespaced]="true"
+                 i18n>Secrets
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/storageclass"
+                 id="nav-storageclass"
+                 i18n>Storage Classes
+    </kd-nav-item>
+
+    <!-- Cluster -->
+    <kd-nav-item class="kd-nav-group-item"
+                 state="/cluster"
+                 id="nav-cluster"
+                 i18n>Cluster
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/clusterrolebinding"
+                 id="nav-clusterrolebinding"
+                 i18n>Cluster Role Bindings
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/clusterrole"
+                 id="nav-clusterrole"
+                 i18n>Cluster Roles
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/namespace"
+                 id="nav-namespace"
+                 i18n>Namespaces
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/networkpolicy"
+                 id="nav-network-policy"
+                 [namespaced]="true"
+                 i18n>Network Policies
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/node"
+                 id="nav-node"
+                 i18n>Nodes
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/persistentvolume"
+                 id="nav-persistentvolume"
+                 i18n>Persistent Volumes
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/rolebinding"
+                 id="nav-rolebinding"
+                 [namespaced]="true"
+                 i18n>Role Bindings
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/role"
+                 id="nav-role"
+                 [namespaced]="true"
+                 i18n>Roles
+    </kd-nav-item>
+    <kd-nav-item class="kd-nav-item"
+                 state="/serviceaccount"
+                 id="nav-serviceaccount"
+                 [namespaced]="true"
+                 i18n>Service Accounts
+    </kd-nav-item>
+
+    <!-- Custom Resource Definitions -->
+    <kd-nav-item class="kd-nav-group-item"
+                 state="/customresourcedefinition"
+                 id="nav-customresourcedefinition"
+                 [exact]="true"
+                 i18n>Custom Resource Definitions
+    </kd-nav-item>
 
-      <kd-pinner-nav kind="customresourcedefinition"></kd-pinner-nav>
-    </div>
+    <kd-pinner-nav kind="customresourcedefinition"></kd-pinner-nav>
 
     <ng-container *ngIf="showPlugin()">
       <mat-divider></mat-divider>
 
-      <div class="kd-nav-group">
-        <kd-nav-item class="kd-nav-group-item"
-                     state="/plugin"
-                     id="nav-plugin"
-                     i18n>Plugins
-        </kd-nav-item>
-      </div>
+      <kd-nav-item class="kd-nav-group-item"
+                   state="/plugin"
+                   id="nav-plugin"
+                   i18n>Plugins
+      </kd-nav-item>
     </ng-container>
 
     <mat-divider></mat-divider>
 
-    <div class="kd-nav-group">
-      <kd-nav-item class="kd-nav-group-item"
-                   state="/settings"
-                   id="nav-settings"
-                   i18n>Settings
-      </kd-nav-item>
+    <kd-nav-item class="kd-nav-group-item"
+                 state="/settings"
+                 id="nav-settings"
+                 i18n>Settings
+    </kd-nav-item>
 
-      <kd-nav-item class="kd-nav-group-item"
-                   state="/about"
-                   id="nav-about"
-                   i18n>About
-      </kd-nav-item>
-    </div>
+    <kd-nav-item class="kd-nav-group-item"
+                 state="/about"
+                 id="nav-about"
+                 i18n>About
+    </kd-nav-item>
   </mat-drawer>
 </mat-drawer-container>

src/app/frontend/chrome/routing.ts

@@ -34,6 +34,10 @@ const routes: Routes = [
         path: 'cluster',
         loadChildren: () => import('resource/cluster/module').then(m => m.ClusterModule),
       },
+      {
+        path: 'clusterrolebinding',
+        loadChildren: () => import('resource/cluster/clusterrolebinding/module').then(m => m.ClusterRoleBindingModule),
+      },
       {
         path: 'clusterrole',
         loadChildren: () => import('resource/cluster/clusterrole/module').then(m => m.ClusterRoleModule),
@@ -58,14 +62,14 @@ const routes: Routes = [
         path: 'serviceaccount',
         loadChildren: () => import('resource/cluster/serviceaccount/module').then(m => m.ServiceAccountModule),
       },
-      {
-        path: 'storageclass',
-        loadChildren: () => import('resource/cluster/storageclass/module').then(m => m.StorageClassModule),
-      },
       {
         path: 'role',
         loadChildren: () => import('resource/cluster/role/module').then(m => m.RoleModule),
       },
+      {
+        path: 'rolebinding',
+        loadChildren: () => import('resource/cluster/rolebinding/module').then(m => m.RoleBingingModule),
+      },
 
       // Overview
       {
@@ -148,6 +152,10 @@ const routes: Routes = [
         path: 'secret',
         loadChildren: () => import('resource/config/secret/module').then(m => m.SecretModule),
       },
+      {
+        path: 'storageclass',
+        loadChildren: () => import('resource/config/storageclass/module').then(m => m.StorageClassModule),
+      },
 
       // Custom resource definitions
       {

src/app/frontend/common/components/module.ts

@@ -97,6 +97,9 @@ import {ZeroStateComponent} from './zerostate/component';
 import {ServiceAccountListComponent} from './resourcelist/serviceaccount/component';
 import {NetworkPolicyListComponent} from './resourcelist/networkpolicy/component';
 import {RoleListComponent} from './resourcelist/role/component';
+import {RoleBindingListComponent} from './resourcelist/rolebinding/component';
+import {ClusterRoleBindingListComponent} from './resourcelist/clusterrolebinding/component';
+import {SubjectListComponent} from './subject/component';
 
 const components = [
   ActionbarDetailActionsComponent,
@@ -114,6 +117,7 @@ const components = [
   ChipsComponent,
   CronJobListComponent,
   ClusterRoleListComponent,
+  ClusterRoleBindingListComponent,
   ConfigMapListComponent,
   PluginListComponent,
   ColumnComponent,
@@ -178,6 +182,8 @@ const components = [
   WorkloadStatusComponent,
   NetworkPolicyListComponent,
   RoleListComponent,
+  RoleBindingListComponent,
+  SubjectListComponent,
 ];
 
 @NgModule({

src/app/frontend/common/components/resourcelist/crd/component.ts

@@ -74,6 +74,10 @@ export class CRDListComponent extends ResourceListWithStatuses<CRDList, CRD> {
     return resource.established === 'True';
   }
 
+  getDisplayName(name: string): string {
+    return name.replace(/([A-Z]+)/g, ' $1').replace(/([A-Z][a-z])/g, ' $1');
+  }
+
   getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'group', 'fullName', 'namespaced', 'created'];
   }

src/app/frontend/common/components/resourcelist/crd/template.html

@@ -52,7 +52,7 @@ limitations under the License.
                          i18n>Name</mat-header-cell>
         <mat-cell *matCellDef="let crd">
           <a [routerLink]="getDetailsHref(crd.objectMeta.name)"
-             queryParamsHandling="preserve">{{crd.names.kind}}</a>
+             queryParamsHandling="preserve">{{getDisplayName(crd.names.kind)}}</a>
         </mat-cell>
       </ng-container>