Improve resource status display (#5867)

* Use dot instead of icons to display resource statuses

* Add tooltips to some of the resources

* Add tooltips to some of the resources

* Add tooltips to the rest of the resources

* Change cursor
Change pending color to orange

* Add terminating state for pods

* Improve unknown status logic

* Improve unknown status logic

* Export statuses to enum

* Format files

* Format files

* Format files

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

@@ -45,9 +45,9 @@ export class CRDListComponent extends ResourceListWithStatuses<CRDList, CRD> {
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.help, 'kd-muted', this.isInUnknownState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => r.established === 'True', 'Established');
+    this.registerBinding('kd-muted', r => r.established === 'Unknown', 'Unknown');
+    this.registerBinding('kd-error', r => r.established === 'False', 'Not established');
   }
 
   isNamespaced(crd: CRD): string {
@@ -62,18 +62,6 @@ export class CRDListComponent extends ResourceListWithStatuses<CRDList, CRD> {
     return crdList.items;
   }
 
-  isInErrorState(resource: CRD): boolean {
-    return resource.established === 'False';
-  }
-
-  isInUnknownState(resource: CRD): boolean {
-    return resource.established === 'Unknown';
-  }
-
-  isInSuccessState(resource: CRD): boolean {
-    return resource.established === 'True';
-  }
-
   getDisplayName(name: string): string {
     return name.replace(/([A-Z]+)/g, ' $1').replace(/([A-Z][a-z])/g, ' $1');
   }

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

@@ -39,7 +39,8 @@ limitations under the License.
       <ng-container [matColumnDef]="getColumns()[0]">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let crd">
-          <mat-icon [ngClass]="getStatus(crd).iconClass">
+          <mat-icon [ngClass]="getStatus(crd).iconClass"
+                    [matTooltip]="getStatus(crd).iconTooltip">
             {{getStatus(crd).iconName}}
           </mat-icon>
         </mat-cell>

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

@@ -22,6 +22,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-cron-job-list',
@@ -43,8 +44,8 @@ export class CronJobListComponent extends ResourceListWithStatuses<CronJobList,
     this.groupId = ListGroupIdentifier.workloads;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => !r.suspend, Status.Running);
+    this.registerBinding('kd-muted', r => r.suspend, Status.Suspended);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -62,14 +63,6 @@ export class CronJobListComponent extends ResourceListWithStatuses<CronJobList,
     return cronJobList.items;
   }
 
-  isInErrorState(resource: CronJob): boolean {
-    return resource.suspend;
-  }
-
-  isInSuccessState(resource: CronJob): boolean {
-    return !resource.suspend;
-  }
-
   getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'labels', 'schedule', 'suspend', 'active', 'lastschedule', 'created'];
   }

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

@@ -42,7 +42,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let cronJob">
-          <mat-icon [ngClass]="getStatus(cronJob).iconClass">
+          <mat-icon [ngClass]="getStatus(cronJob).iconClass"
+                    [matTooltip]="getStatus(cronJob).iconTooltip">
             {{getStatus(cronJob).iconName}}
           </mat-icon>
         </mat-cell>

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

@@ -23,6 +23,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-daemon-set-list',
@@ -44,9 +45,9 @@ export class DaemonSetListComponent extends ResourceListWithStatuses<DaemonSetLi
     this.groupId = ListGroupIdentifier.workloads;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => r.podInfo.warnings.length === 0 && r.podInfo.pending === 0, Status.Running);
+    this.registerBinding('kd-warning', r => r.podInfo.warnings.length === 0 && r.podInfo.pending > 0, Status.Pending);
+    this.registerBinding('kd-error', r => r.podInfo.warnings.length > 0, Status.Error);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -64,18 +65,6 @@ export class DaemonSetListComponent extends ResourceListWithStatuses<DaemonSetLi
     return daemonSetList.daemonSets;
   }
 
-  isInErrorState(resource: DaemonSet): boolean {
-    return resource.podInfo.warnings.length > 0;
-  }
-
-  isInPendingState(resource: DaemonSet): boolean {
-    return resource.podInfo.warnings.length === 0 && resource.podInfo.pending > 0;
-  }
-
-  isInSuccessState(resource: DaemonSet): boolean {
-    return resource.podInfo.warnings.length === 0 && resource.podInfo.pending === 0;
-  }
-
   hasErrors(daemonSet: DaemonSet): boolean {
     return daemonSet.podInfo.warnings.length > 0;
   }

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

@@ -43,7 +43,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let daemonSet; let index=index">
-          <mat-icon [ngClass]="getStatus(daemonSet).iconClass">
+          <mat-icon [ngClass]="getStatus(daemonSet).iconClass"
+                    [matTooltip]="getStatus(daemonSet).iconTooltip">
             <ng-container *ngIf="showHoverIcon(index, daemonSet); else showStatus">
               remove_red_eye
             </ng-container>

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

@@ -22,6 +22,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-deployment-list',
@@ -43,9 +44,17 @@ export class DeploymentListComponent extends ResourceListWithStatuses<Deployment
     this.groupId = ListGroupIdentifier.workloads;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding(
+      'kd-success',
+      r => r.pods.warnings.length === 0 && r.pods.pending === 0 && r.pods.running === r.pods.desired,
+      Status.Running
+    );
+    this.registerBinding(
+      'kd-muted',
+      r => r.pods.warnings.length === 0 && (r.pods.pending > 0 || r.pods.running !== r.pods.desired),
+      Status.Pending
+    );
+    this.registerBinding('kd-error', r => r.pods.warnings.length > 0, Status.Error);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -63,25 +72,6 @@ export class DeploymentListComponent extends ResourceListWithStatuses<Deployment
     return deploymentList.deployments;
   }
 
-  isInErrorState(resource: Deployment): boolean {
-    return resource.pods.warnings.length > 0;
-  }
-
-  isInPendingState(resource: Deployment): boolean {
-    return (
-      resource.pods.warnings.length === 0 &&
-      (resource.pods.pending > 0 || resource.pods.running !== resource.pods.desired)
-    );
-  }
-
-  isInSuccessState(resource: Deployment): boolean {
-    return (
-      resource.pods.warnings.length === 0 &&
-      resource.pods.pending === 0 &&
-      resource.pods.running === resource.pods.desired
-    );
-  }
-
   getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'labels', 'pods', 'created', 'images'];
   }

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

@@ -43,7 +43,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let deployment; let index=index">
-          <mat-icon [ngClass]="getStatus(deployment).iconClass">
+          <mat-icon [ngClass]="getStatus(deployment).iconClass"
+                    [matTooltip]="getStatus(deployment).iconTooltip">
             <ng-container *ngIf="showHoverIcon(index, deployment); else showStatus">
               remove_red_eye
             </ng-container>

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

@@ -21,6 +21,7 @@ import {ResourceListWithStatuses} from '../../../resources/list';
 import {NotificationsService} from '../../../services/global/notifications';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 const EVENT_TYPE_WARNING = 'Warning';
 
@@ -42,8 +43,8 @@ export class EventListComponent extends ResourceListWithStatuses<EventList, Even
     this.groupId = ListGroupIdentifier.none;
 
     // Register status icon handler
-    this.registerBinding(this.icon.warning, 'kd-warning', this.isWarning);
-    this.registerBinding(this.icon.none, '', this.isNormal.bind(this));
+    this.registerBinding('kd-warning', e => e.type === EVENT_TYPE_WARNING, Status.Warning);
+    this.registerBinding('kd-hidden', e => e.type !== EVENT_TYPE_WARNING, Status.Normal);
   }
 
   ngOnInit(): void {
@@ -54,14 +55,6 @@ export class EventListComponent extends ResourceListWithStatuses<EventList, Even
     super.ngOnInit();
   }
 
-  isWarning(event: Event): boolean {
-    return event.type === EVENT_TYPE_WARNING;
-  }
-
-  isNormal(event: Event): boolean {
-    return !this.isWarning(event);
-  }
-
   getResourceObservable(params?: HttpParams): Observable<EventList> {
     return this.eventList.get(this.endpoint, undefined, undefined, params);
   }

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

@@ -32,7 +32,8 @@ limitations under the License.
       <ng-container [matColumnDef]="getDisplayColumns()[0]">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let event">
-          <mat-icon [ngClass]="getStatus(event).iconClass">
+          <mat-icon [ngClass]="getStatus(event).iconClass"
+                    [matTooltip]="getStatus(event).iconTooltip">
             {{getStatus(event).iconName}}
           </mat-icon>
         </mat-cell>

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

@@ -23,6 +23,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-job-list',
@@ -45,9 +46,9 @@ export class JobListComponent extends ResourceListWithStatuses<JobList, Job> {
     this.groupId = ListGroupIdentifier.workloads;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => r.podInfo.warnings.length === 0 && r.podInfo.pending === 0, Status.Running);
+    this.registerBinding('kd-warning', r => r.podInfo.warnings.length === 0 && r.podInfo.pending > 0, Status.Pending);
+    this.registerBinding('kd-error', r => r.podInfo.warnings.length > 0, Status.Error);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -65,18 +66,6 @@ export class JobListComponent extends ResourceListWithStatuses<JobList, Job> {
     return jobList.jobs;
   }
 
-  isInErrorState(resource: Job): boolean {
-    return resource.podInfo.warnings.length > 0;
-  }
-
-  isInPendingState(resource: Job): boolean {
-    return resource.podInfo.warnings.length === 0 && resource.podInfo.pending > 0;
-  }
-
-  isInSuccessState(resource: Job): boolean {
-    return resource.podInfo.warnings.length === 0 && resource.podInfo.pending === 0;
-  }
-
   getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'labels', 'pods', 'created', 'images'];
   }

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

@@ -46,7 +46,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let job; let index=index">
-          <mat-icon [ngClass]="getStatus(job).iconClass">
+          <mat-icon [ngClass]="getStatus(job).iconClass"
+                    [matTooltip]="getStatus(job).iconTooltip">
             <ng-container *ngIf="showHoverIcon(index, job); else showStatus">
               remove_red_eye
             </ng-container>

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

@@ -23,6 +23,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {ResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-namespace-list',
@@ -42,8 +43,8 @@ export class NamespaceListComponent extends ResourceListWithStatuses<NamespaceLi
     this.groupId = ListGroupIdentifier.cluster;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => r.phase === Status.Active, Status.Active);
+    this.registerBinding('kd-error', r => r.phase === Status.Terminating, Status.Terminating);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -57,14 +58,6 @@ export class NamespaceListComponent extends ResourceListWithStatuses<NamespaceLi
     return namespaceList.namespaces;
   }
 
-  isInErrorState(resource: Namespace): boolean {
-    return resource.phase === 'Terminating';
-  }
-
-  isInSuccessState(resource: Namespace): boolean {
-    return resource.phase === 'Active';
-  }
-
   getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'labels', 'phase', 'created'];
   }

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

@@ -39,7 +39,8 @@ limitations under the License.
       <ng-container [matColumnDef]="getColumns()[0]">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let namespace">
-          <mat-icon [ngClass]="getStatus(namespace).iconClass">
+          <mat-icon [ngClass]="getStatus(namespace).iconClass"
+                    [matTooltip]="getStatus(namespace).iconTooltip">
             {{getStatus(namespace).iconName}}
           </mat-icon>
         </mat-cell>

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

@@ -22,6 +22,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {ResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-node-list',
@@ -46,9 +47,9 @@ export class NodeListComponent extends ResourceListWithStatuses<NodeList, Node>
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.help, 'kd-muted', this.isInUnknownState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => r.ready === 'True', Status.Ready);
+    this.registerBinding('kd-muted', r => r.ready === 'True', Status.Unknown);
+    this.registerBinding('kd-error', r => r.ready === 'False', Status.NotReady);
   }
 
   getResourceObservable(params?: HttpParams): Observable<NodeList> {
@@ -60,18 +61,6 @@ export class NodeListComponent extends ResourceListWithStatuses<NodeList, Node>
     return nodeList.nodes;
   }
 
-  isInErrorState(resource: Node): boolean {
-    return resource.ready === 'False';
-  }
-
-  isInUnknownState(resource: Node): boolean {
-    return resource.ready === 'Unknown';
-  }
-
-  isInSuccessState(resource: Node): boolean {
-    return resource.ready === 'True';
-  }
-
   getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'labels', 'ready', 'cpureq', 'cpulim', 'memreq', 'memlim', 'pods', 'created'];
   }

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

@@ -42,7 +42,8 @@ limitations under the License.
       <ng-container [matColumnDef]="getColumns()[0]">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let node">
-          <mat-icon [ngClass]="getStatus(node).iconClass">
+          <mat-icon [ngClass]="getStatus(node).iconClass"
+                    [matTooltip]="getStatus(node).iconTooltip">
             {{getStatus(node).iconName}}
           </mat-icon>
         </mat-cell>

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

@@ -23,6 +23,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {ResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-persistent-volume-list',
@@ -45,9 +46,11 @@ export class PersistentVolumeListComponent extends ResourceListWithStatuses<Pers
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.help, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => r.status === Status.Available, Status.Available);
+    this.registerBinding('kd-success', r => r.status === Status.Bound, Status.Bound);
+    this.registerBinding('kd-warning', r => r.status === Status.Pending, Status.Pending);
+    this.registerBinding('kd-muted', r => r.status === Status.Released, Status.Released);
+    this.registerBinding('kd-error', r => r.status === Status.Failed, Status.Failed);
   }
 
   getResourceObservable(params?: HttpParams): Observable<PersistentVolumeList> {
@@ -58,18 +61,6 @@ export class PersistentVolumeListComponent extends ResourceListWithStatuses<Pers
     return persistentVolumeList.items;
   }
 
-  isInErrorState(resource: PersistentVolume): boolean {
-    return resource.status === 'Failed';
-  }
-
-  isInPendingState(resource: PersistentVolume): boolean {
-    return resource.status === 'Pending' || resource.status === 'Released';
-  }
-
-  isInSuccessState(resource: PersistentVolume): boolean {
-    return resource.status === 'Available' || resource.status === 'Bound';
-  }
-
   getClaimHref(claimReference: string): string {
     let href = '';
 

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

@@ -39,7 +39,8 @@ limitations under the License.
       <ng-container [matColumnDef]="getColumns()[0]">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let pv">
-          <mat-icon [ngClass]="getStatus(pv).iconClass">{{getStatus(pv).iconName}}</mat-icon>
+          <mat-icon [ngClass]="getStatus(pv).iconClass"
+                    [matTooltip]="getStatus(pv).iconTooltip">{{getStatus(pv).iconName}}</mat-icon>
         </mat-cell>
       </ng-container>
 

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

@@ -23,6 +23,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-persistent-volume-claim-list',
@@ -45,9 +46,9 @@ export class PersistentVolumeClaimListComponent extends ResourceListWithStatuses
     this.groupId = ListGroupIdentifier.config;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInBoundState);
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInLostState);
+    this.registerBinding('kd-success', r => r.status === Status.Bound, Status.Bound);
+    this.registerBinding('kd-warning', r => r.status === Status.Pending, Status.Pending);
+    this.registerBinding('kd-error', r => r.status === Status.Lost, Status.Lost);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -56,18 +57,6 @@ export class PersistentVolumeClaimListComponent extends ResourceListWithStatuses
     this.registerDynamicColumn('namespace', 'name', this.shouldShowNamespaceColumn_.bind(this));
   }
 
-  isInBoundState(resource: PersistentVolumeClaim): boolean {
-    return resource.status === 'Bound';
-  }
-
-  isInPendingState(resource: PersistentVolumeClaim): boolean {
-    return resource.status === 'Pending';
-  }
-
-  isInLostState(resource: PersistentVolumeClaim): boolean {
-    return resource.status === 'Lost';
-  }
-
   getResourceObservable(params?: HttpParams): Observable<PersistentVolumeClaimList> {
     return this.persistentVolumeClaim_.get(this.endpoint, undefined, undefined, params);
   }

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

@@ -39,7 +39,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let pvc">
-          <mat-icon [ngClass]="getStatus(pvc).iconClass">{{getStatus(pvc).iconName}}</mat-icon>
+          <mat-icon [ngClass]="getStatus(pvc).iconClass"
+                    [matTooltip]="getStatus(pvc).iconTooltip">{{getStatus(pvc).iconName}}</mat-icon>
         </mat-cell>
       </ng-container>
 

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

@@ -22,19 +22,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
-
-enum Status {
-  Pending = 'Pending',
-  ContainerCreating = 'ContainerCreating',
-  Running = 'Running',
-  Succeeded = 'Succeeded',
-  Completed = 'Completed',
-  Failed = 'Failed',
-  Unknown = 'Unknown',
-  NotReady = 'NotReady',
-  Terminating = 'Terminating',
-  Error = 'Error',
-}
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-pod-list',
@@ -56,9 +44,13 @@ export class PodListComponent extends ResourceListWithStatuses<PodList, Pod> {
     this.groupId = ListGroupIdentifier.workloads;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => r.status === Status.Running, Status.Running);
+    this.registerBinding('kd-success', r => r.status === Status.Succeeded, Status.Succeeded);
+    this.registerBinding('kd-success', r => r.status === Status.Completed, Status.Completed);
+    this.registerBinding('kd-warning', r => r.status === Status.Pending, Status.Pending);
+    this.registerBinding('kd-warning', r => r.status === Status.ContainerCreating, Status.ContainerCreating);
+    this.registerBinding('kd-muted', r => r.status === Status.Terminating, Status.Terminating);
+    this.registerBinding('kd-error', this.isInErrorState, 'Error');
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -86,14 +78,6 @@ export class PodListComponent extends ResourceListWithStatuses<PodList, Pod> {
     );
   }
 
-  isInPendingState(resource: Pod): boolean {
-    return [Status.Pending, Status.ContainerCreating].some(s => resource.status === s);
-  }
-
-  isInSuccessState(resource: Pod): boolean {
-    return [Status.Succeeded, Status.Running, Status.Completed].some(s => resource.status === s);
-  }
-
   hasErrors(pod: Pod): boolean {
     return pod.warnings.length > 0;
   }

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

@@ -45,7 +45,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let pod; let index=index">
-          <mat-icon [ngClass]="getStatus(pod).iconClass">
+          <mat-icon [ngClass]="getStatus(pod).iconClass"
+                    [matTooltip]="getStatus(pod).iconTooltip">
             <ng-container *ngIf="showHoverIcon(index, pod); else showStatus">
               remove_red_eye
             </ng-container>

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

@@ -24,6 +24,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-replica-set-list',
@@ -47,9 +48,17 @@ export class ReplicaSetListComponent extends ResourceListWithStatuses<ReplicaSet
     this.groupId = ListGroupIdentifier.workloads;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding(
+      'kd-success',
+      r => r.podInfo.warnings.length === 0 && r.podInfo.pending === 0 && r.podInfo.running === r.podInfo.desired,
+      Status.Running
+    );
+    this.registerBinding(
+      'kd-muted',
+      r => r.podInfo.warnings.length === 0 && (r.podInfo.pending > 0 || r.podInfo.running !== r.podInfo.desired),
+      Status.Pending
+    );
+    this.registerBinding('kd-error', r => r.podInfo.warnings.length > 0, Status.Error);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -67,25 +76,6 @@ export class ReplicaSetListComponent extends ResourceListWithStatuses<ReplicaSet
     return rsList.replicaSets;
   }
 
-  isInErrorState(resource: ReplicaSet): boolean {
-    return resource.podInfo.warnings.length > 0;
-  }
-
-  isInPendingState(resource: ReplicaSet): boolean {
-    return (
-      resource.podInfo.warnings.length === 0 &&
-      (resource.podInfo.pending > 0 || resource.podInfo.running !== resource.podInfo.desired)
-    );
-  }
-
-  isInSuccessState(resource: ReplicaSet): boolean {
-    return (
-      resource.podInfo.warnings.length === 0 &&
-      resource.podInfo.pending === 0 &&
-      resource.podInfo.running === resource.podInfo.desired
-    );
-  }
-
   protected getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'labels', 'pods', 'created', 'images'];
   }

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

@@ -46,7 +46,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let replicaSet; let index=index">
-          <mat-icon [ngClass]="getStatus(replicaSet).iconClass">
+          <mat-icon [ngClass]="getStatus(replicaSet).iconClass"
+                    [matTooltip]="getStatus(replicaSet).iconTooltip">
             <ng-container *ngIf="showHoverIcon(index, replicaSet); else showStatus">
               remove_red_eye
             </ng-container>

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

@@ -23,6 +23,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-replication-controller-list',
@@ -45,9 +46,9 @@ export class ReplicationControllerListComponent extends ResourceListWithStatuses
     this.groupId = ListGroupIdentifier.workloads;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding('kd-success', r => r.podInfo.warnings.length === 0 && r.podInfo.pending === 0, Status.Running);
+    this.registerBinding('kd-warning', r => r.podInfo.warnings.length === 0 && r.podInfo.pending > 0, Status.Pending);
+    this.registerBinding('kd-error', r => r.podInfo.warnings.length > 0, Status.Error);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -64,18 +65,6 @@ export class ReplicationControllerListComponent extends ResourceListWithStatuses
     return rcList.replicationControllers;
   }
 
-  isInErrorState(resource: ReplicationController): boolean {
-    return resource.podInfo.warnings.length > 0;
-  }
-
-  isInPendingState(resource: ReplicationController): boolean {
-    return resource.podInfo.warnings.length === 0 && resource.podInfo.pending > 0;
-  }
-
-  isInSuccessState(resource: ReplicationController): boolean {
-    return resource.podInfo.warnings.length === 0 && resource.podInfo.pending === 0;
-  }
-
   protected getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'labels', 'pods', 'created', 'images'];
   }

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

@@ -40,7 +40,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let rc; let index=index">
-          <mat-icon [ngClass]="getStatus(rc).iconClass">
+          <mat-icon [ngClass]="getStatus(rc).iconClass"
+                    [matTooltip]="getStatus(rc).iconTooltip">
             <ng-container *ngIf="showHoverIcon(index, rc); else showStatus">
               remove_red_eye
             </ng-container>

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

@@ -23,6 +23,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-service-list',
@@ -42,8 +43,8 @@ export class ServiceListComponent extends ResourceListWithStatuses<ServiceList,
     this.groupId = ListGroupIdentifier.discovery;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState.bind(this));
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState.bind(this));
+    this.registerBinding('kd-success', r => this.isInSuccessState(r), Status.Succees);
+    this.registerBinding('kd-warning', r => !this.isInSuccessState(r), Status.Pending);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -60,10 +61,6 @@ export class ServiceListComponent extends ResourceListWithStatuses<ServiceList,
     return serviceList.services;
   }
 
-  isInPendingState(resource: Service): boolean {
-    return !this.isInSuccessState(resource);
-  }
-
   /**
    * Success state of a Service depends on the type of service
    * https://kubernetes.io/docs/concepts/services-networking/service/#publishing-services-service-types

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

@@ -39,7 +39,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let service">
-          <mat-icon [ngClass]="getStatus(service).iconClass">
+          <mat-icon [ngClass]="getStatus(service).iconClass"
+                    [matTooltip]="getStatus(service).iconTooltip">
             {{getStatus(service).iconName}}
           </mat-icon>
         </mat-cell>

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

@@ -22,6 +22,7 @@ import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
 import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {Status} from '../statuses';
 
 @Component({
   selector: 'kd-stateful-set-list',
@@ -43,9 +44,16 @@ export class StatefulSetListComponent extends ResourceListWithStatuses<StatefulS
     this.groupId = ListGroupIdentifier.workloads;
 
     // Register status icon handlers
-    this.registerBinding(this.icon.checkCircle, 'kd-success', this.isInSuccessState);
-    this.registerBinding(this.icon.timelapse, 'kd-muted', this.isInPendingState);
-    this.registerBinding(this.icon.error, 'kd-error', this.isInErrorState);
+    this.registerBinding(
+      'kd-success',
+      r => r.podInfo.warnings.length === 0 && r.podInfo.pending === 0 && r.podInfo.running === r.podInfo.desired
+    );
+    this.registerBinding(
+      'kd-muted',
+      r => r.podInfo.warnings.length === 0 && (r.podInfo.pending > 0 || r.podInfo.running !== r.podInfo.desired),
+      Status.Pending
+    );
+    this.registerBinding('kd-error', r => r.podInfo.warnings.length > 0, Status.Error);
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
@@ -63,25 +71,6 @@ export class StatefulSetListComponent extends ResourceListWithStatuses<StatefulS
     return statefulSetList.statefulSets;
   }
 
-  isInErrorState(resource: StatefulSet): boolean {
-    return resource.podInfo.warnings.length > 0;
-  }
-
-  isInPendingState(resource: StatefulSet): boolean {
-    return (
-      resource.podInfo.warnings.length === 0 &&
-      (resource.podInfo.pending > 0 || resource.podInfo.running !== resource.podInfo.desired)
-    );
-  }
-
-  isInSuccessState(resource: StatefulSet): boolean {
-    return (
-      resource.podInfo.warnings.length === 0 &&
-      resource.podInfo.pending === 0 &&
-      resource.podInfo.running === resource.podInfo.desired
-    );
-  }
-
   getDisplayColumns(): string[] {
     return ['statusicon', 'name', 'labels', 'pods', 'created', 'images'];
   }

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

@@ -43,7 +43,8 @@ limitations under the License.
       <ng-container matColumnDef="statusicon">
         <mat-header-cell *matHeaderCellDef></mat-header-cell>
         <mat-cell *matCellDef="let ss; let index=index">
-          <mat-icon [ngClass]="getStatus(ss).iconClass">
+          <mat-icon [ngClass]="getStatus(ss).iconClass"
+                    [matTooltip]="getStatus(ss).iconTooltip">
             <ng-container *ngIf="showHoverIcon(index, ss); else showStatus">
               remove_red_eye
             </ng-container>

src/app/frontend/common/components/resourcelist/statuses.ts

+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export enum Status {
+  Active = 'Active',
+  Available = 'Available',
+  Bound = 'Bound',
+  Completed = 'Completed',
+  ContainerCreating = 'ContainerCreating',
+  Error = 'Error',
+  Failed = 'Failed',
+  Lost = 'Lost',
+  Normal = 'Normal',
+  NotReady = 'NotReady',
+  Pending = 'Pending',
+  Ready = 'Ready',
+  Released = 'Released',
+  Running = 'Running',
+  Succeeded = 'Succeeded',
+  Succees = 'Succeeded',
+  Suspended = 'Suspended',
+  Terminating = 'Terminating',
+  Unknown = 'Unknown',
+  Warning = 'Warning',
+}

src/app/frontend/common/resources/list.ts

@@ -359,8 +359,9 @@ export abstract class ResourceListWithStatuses<T extends ResourceList, R extends
   private readonly bindings_: {[hash: number]: StateBinding<R>} = {};
   private lastHash_: number;
   private readonly unknownStatus: StatusIcon = {
-    iconName: 'help',
-    iconClass: {'kd-help': true},
+    iconName: IconName.circle,
+    iconClass: {'kd-muted': true},
+    iconTooltip: 'Unrecognized',
   };
 
   protected icon = IconName;
@@ -444,8 +445,8 @@ export abstract class ResourceListWithStatuses<T extends ResourceList, R extends
     return false;
   }
 
-  protected registerBinding(iconName: IconName, iconClass: string, callbackFunction: StatusCheckCallback<R>): void {
-    const icon = new Icon(String(iconName), iconClass);
+  protected registerBinding(iconClass: string, callbackFunction: StatusCheckCallback<R>, status = ''): void {
+    const icon = new Icon(IconName.circle, iconClass, status);
     this.bindings_[icon.hash()] = {icon, callbackFunction};
   }
 
@@ -453,6 +454,7 @@ export abstract class ResourceListWithStatuses<T extends ResourceList, R extends
     return {
       iconName: stateBinding.icon.name,
       iconClass: {[stateBinding.icon.cssClass]: true},
+      iconTooltip: stateBinding.icon.tooltip,
     };
   }
 }
@@ -460,12 +462,12 @@ export abstract class ResourceListWithStatuses<T extends ResourceList, R extends
 interface StatusIcon {
   iconName: string;
   iconClass: {[className: string]: boolean};
+  iconTooltip: string;
 }
 
 enum IconName {
   error = 'error',
-  timelapse = 'timelapse',
-  checkCircle = 'check_circle',
+  circle = 'fiber_manual_record',
   help = 'help',
   warning = 'warning',
   none = '',
@@ -474,10 +476,12 @@ enum IconName {
 class Icon {
   name: string;
   cssClass: string;
+  tooltip: string;
 
-  constructor(name: string, cssClass: string) {
+  constructor(name: string, cssClass: string, tooltip: string) {
     this.name = name;
     this.cssClass = cssClass;
+    this.tooltip = tooltip;
   }
 
   /**
@@ -485,7 +489,7 @@ class Icon {
    * http://www.cse.yorku.ca/~oz/hash.html
    */
   hash(): number {
-    const value = `${this.name}#${this.cssClass}`;
+    const value = `${this.name}#${this.cssClass}#${this.tooltip}`;
     return value
       .split('')
       .map(str => {

src/app/frontend/index.scss

@@ -139,6 +139,7 @@ code {
   flex: 0 0 ($baseline-grid * 5) !important;
 
   .mat-icon {
+    cursor: default;
     font-size: 2.5 * $baseline-grid;
     margin-top: .66 * $baseline-grid;
   }