add StatusRatioBarComponent

kubernetes · Mar 8, 2019 · d585611 · d585611
1 parent 3f1009e
commit d585611
Show file tree

Hide file tree

Showing 26 changed files with 329 additions and 224 deletions.
diff --git a/src/app/frontend/_variables.scss b/src/app/frontend/_variables.scss
@@ -26,6 +26,7 @@ $caption-font-size-base: rem(1.2) !default;
 $toolbar-height-size-base: rem(6.4) !default;
 $toolbar-height-size-base-sm: rem(4.8) !default;
 $footer-font-size-base: rem(1) !default;
+$tooltip-font-size: rem(1.3) !default;
 
 $font-family-monospace: 'Roboto Mono Regular', monospace;
 $font-family-medium-monospace: 'Roboto Mono Medium', monospace;
@@ -45,3 +46,5 @@ $baseline-grid: 8px;
 $nav-width: 30 * $baseline-grid;
 $logo-width: 8 * $baseline-grid;
 $logo-height: 8 * $baseline-grid;
+
+$white: rgb(255, 255, 255);
diff --git a/src/app/frontend/common/components/card/template.html b/src/app/frontend/common/components/card/template.html
@@ -15,6 +15,7 @@
 -->
 
 <mat-card [ngClass]="{'kd-minimized-card': !expanded}">
+  <ng-content select="[status-ratio-bar]"></ng-content>
   <mat-card-title *ngIf="withTitle"
                   (click)="expand()"
                   [ngClass]="getTitleClasses()"

diff --git a/src/app/frontend/common/components/module.ts b/src/app/frontend/common/components/module.ts
@@ -78,6 +78,7 @@ import {ServiceListComponent} from './resourcelist/service/component';
 import {StatefulSetListComponent} from './resourcelist/statefulset/component';
 import {StorageClassListComponent} from './resourcelist/storageclass/component';
 import {SparklineComponent} from './sparkline/component';
+import {StatusRatioBarComponent} from './statusratiobar/component';
 import {TextInputComponent} from './textinput/component';
 import {UploadFileComponent} from './uploadfile/component';
 import {ZeroStateComponent} from './zerostate/component';
@@ -150,6 +151,7 @@ import {ZeroStateComponent} from './zerostate/component';
     LogsScaleDefaultActionbar,
     LogsExecDefaultActionbar,
     SparklineComponent,
+    StatusRatioBarComponent,
     ActionbarDetailTriggerComponent,
     TriggerDefaultActionbar,
   ],
@@ -212,6 +214,7 @@ import {ZeroStateComponent} from './zerostate/component';
     LogsScaleDefaultActionbar,
     LogsExecDefaultActionbar,
     SparklineComponent,
+    StatusRatioBarComponent,
     ActionbarDetailTriggerComponent,
   ],
   entryComponents: [

diff --git a/src/app/frontend/common/components/resourcelist/cronjob/component.ts b/src/app/frontend/common/components/resourcelist/cronjob/component.ts
@@ -17,13 +17,15 @@ import {Component, Input} from '@angular/core';
 import {CronJob, CronJobList} from '@api/backendapi';
 import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
+
 import {cronJobState} from '../../../../resource/workloads/cronjob/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NamespaceService} from '../../../services/global/namespace';
 import {NotificationsService} from '../../../services/global/notifications';
 import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
+import {StatusBarColor, StatusBarItem} from '../../statusratiobar/component';
 import {ListGroupIdentifiers, ListIdentifiers} from '../groupids';
 
 @Component({
@@ -58,6 +60,22 @@ export class CronJobListComponent extends ResourceListWithStatuses<CronJobList,
     return cronJobList.items;
   }
 
+  get resourceRatios(): StatusBarItem[] {
+    const status = this.resourceList_.status;
+    return [
+      {
+        key: `Running: ${status.running}`,
+        color: StatusBarColor.Running,
+        value: status.running / this.totalItems * 100,
+      },
+      {
+        key: `Suspended: ${status.failed}`,
+        color: StatusBarColor.Suspended,
+        value: status.failed / this.totalItems * 100,
+      }
+    ];
+  }
+
   isInErrorState(resource: CronJob): boolean {
     return resource.suspend;
   }

diff --git a/src/app/frontend/common/components/resourcelist/cronjob/template.html b/src/app/frontend/common/components/resourcelist/cronjob/template.html
@@ -16,6 +16,12 @@
 
 <kd-card role="table"
          [hidden]="isHidden()">
+  <div status-ratio-bar
+       fxLayout="row wrap"
+       *ngIf="totalItems">
+    <kd-status-ratio-bar fxFlex
+                         [items]="resourceRatios"></kd-status-ratio-bar>
+  </div>
   <div title
        fxLayout="row">Cron Jobs</div>
   <div description><span class="kd-muted-light">Items:&nbsp;</span>{{totalItems}}</div>

diff --git a/src/app/frontend/common/components/resourcelist/daemonset/component.ts b/src/app/frontend/common/components/resourcelist/daemonset/component.ts
@@ -17,14 +17,15 @@ import {Component, ComponentFactoryResolver, Input} from '@angular/core';
 import {DaemonSet, DaemonSetList, Event} from '@api/backendapi';
 import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
-import {daemonSetState} from '../../../../resource/workloads/daemonset/state';
 
+import {daemonSetState} from '../../../../resource/workloads/daemonset/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NamespaceService} from '../../../services/global/namespace';
 import {NotificationsService} from '../../../services/global/notifications';
 import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
+import {StatusBarColor, StatusBarItem} from '../../statusratiobar/component';
 import {ListGroupIdentifiers, ListIdentifiers} from '../groupids';
 
 @Component({
@@ -62,6 +63,27 @@ export class DaemonSetListComponent extends ResourceListWithStatuses<DaemonSetLi
     return daemonSetList.daemonSets;
   }
 
+  get resourceRatios(): StatusBarItem[] {
+    const status = this.resourceList_.status;
+    return [
+      {
+        key: `Running: ${status.running}`,
+        color: StatusBarColor.Running,
+        value: status.running / this.totalItems * 100,
+      },
+      {
+        key: `Failed: ${status.failed}`,
+        color: StatusBarColor.Failed,
+        value: status.failed / this.totalItems * 100,
+      },
+      {
+        key: `Pending: ${status.pending}`,
+        color: StatusBarColor.Pending,
+        value: status.pending / this.totalItems * 100,
+      }
+    ];
+  }
+
   isInErrorState(resource: DaemonSet): boolean {
     return resource.pods.warnings.length > 0;
   }

diff --git a/src/app/frontend/common/components/resourcelist/daemonset/template.html b/src/app/frontend/common/components/resourcelist/daemonset/template.html
@@ -16,6 +16,12 @@
 
 <kd-card role="table"
          [hidden]="isHidden()">
+  <div status-ratio-bar
+       fxLayout="row wrap"
+       *ngIf="totalItems">
+    <kd-status-ratio-bar fxFlex
+                         [items]="resourceRatios"></kd-status-ratio-bar>
+  </div>
   <div title
        fxLayout="row">Daemon Sets</div>
   <div description><span class="kd-muted-light">Items:&nbsp;</span>{{totalItems}}</div>

diff --git a/src/app/frontend/common/components/resourcelist/deployment/component.ts b/src/app/frontend/common/components/resourcelist/deployment/component.ts
@@ -17,13 +17,15 @@ import {Component, ComponentFactoryResolver, Input} from '@angular/core';
 import {Deployment, DeploymentList, Event} from '@api/backendapi';
 import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
+
 import {deploymentState} from '../../../../resource/workloads/deployment/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NamespaceService} from '../../../services/global/namespace';
 import {NotificationsService} from '../../../services/global/notifications';
 import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
+import {StatusBarColor, StatusBarItem} from '../../statusratiobar/component';
 import {ListGroupIdentifiers, ListIdentifiers} from '../groupids';
 
 @Component({
@@ -61,6 +63,27 @@ export class DeploymentListComponent extends ResourceListWithStatuses<Deployment
     return deploymentList.deployments;
   }
 
+  get resourceRatios(): StatusBarItem[] {
+    const status = this.resourceList_.status;
+    return [
+      {
+        key: `Running: ${status.running}`,
+        color: StatusBarColor.Running,
+        value: status.running / this.totalItems * 100,
+      },
+      {
+        key: `Failed: ${status.failed}`,
+        color: StatusBarColor.Failed,
+        value: status.failed / this.totalItems * 100,
+      },
+      {
+        key: `Pending: ${status.pending}`,
+        color: StatusBarColor.Pending,
+        value: status.pending / this.totalItems * 100,
+      }
+    ];
+  }
+
   isInErrorState(resource: Deployment): boolean {
     return resource.pods.warnings.length > 0;
   }

diff --git a/src/app/frontend/common/components/resourcelist/deployment/template.html b/src/app/frontend/common/components/resourcelist/deployment/template.html
@@ -16,6 +16,12 @@
 
 <kd-card role="table"
          [hidden]="isHidden()">
+  <div status-ratio-bar
+       fxLayout="row wrap"
+       *ngIf="totalItems">
+    <kd-status-ratio-bar fxFlex
+                         [items]="resourceRatios"></kd-status-ratio-bar>
+  </div>
   <div title
        fxLayout="row">Deployments</div>
   <div description><span class="kd-muted-light">Items:&nbsp;</span>{{totalItems}}</div>

diff --git a/src/app/frontend/common/components/resourcelist/job/component.ts b/src/app/frontend/common/components/resourcelist/job/component.ts
@@ -17,14 +17,15 @@ import {Component, ComponentFactoryResolver, Input} from '@angular/core';
 import {Event, Job, JobList} from '@api/backendapi';
 import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
-import {jobState} from '../../../../resource/workloads/job/state';
 
+import {jobState} from '../../../../resource/workloads/job/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NamespaceService} from '../../../services/global/namespace';
 import {NotificationsService} from '../../../services/global/notifications';
 import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
+import {StatusBarColor, StatusBarItem} from '../../statusratiobar/component';
 import {ListGroupIdentifiers, ListIdentifiers} from '../groupids';
 
 @Component({
@@ -63,6 +64,32 @@ export class JobListComponent extends ResourceListWithStatuses<JobList, Job> {
     return jobList.jobs;
   }
 
+  get resourceRatios(): StatusBarItem[] {
+    const status = this.resourceList_.status;
+    return [
+      {
+        key: `Running: ${status.running}`,
+        color: StatusBarColor.Running,
+        value: status.running / this.totalItems * 100,
+      },
+      {
+        key: `Failed: ${status.failed}`,
+        color: StatusBarColor.Failed,
+        value: status.failed / this.totalItems * 100,
+      },
+      {
+        key: `Pending: ${status.pending}`,
+        color: StatusBarColor.Pending,
+        value: status.pending / this.totalItems * 100,
+      },
+      {
+        key: `Succeeded: ${status.succeeded}`,
+        color: StatusBarColor.Succeeded,
+        value: status.succeeded / this.totalItems * 100,
+      }
+    ];
+  }
+
   isInErrorState(resource: Job): boolean {
     return resource.pods.warnings.length > 0;
   }

diff --git a/src/app/frontend/common/components/resourcelist/job/template.html b/src/app/frontend/common/components/resourcelist/job/template.html
@@ -16,6 +16,12 @@
 
 <kd-card role="table"
          [hidden]="isHidden()">
+  <div status-ratio-bar
+       fxLayout="row wrap"
+       *ngIf="totalItems">
+    <kd-status-ratio-bar fxFlex
+                         [items]="resourceRatios"></kd-status-ratio-bar>
+  </div>
   <div title
        fxLayout="row">
     <ng-container *ngIf="title;else defaultTitle">{{title}}</ng-container>

diff --git a/src/app/frontend/common/components/resourcelist/pod/component.ts b/src/app/frontend/common/components/resourcelist/pod/component.ts
@@ -17,13 +17,15 @@ import {Component, ComponentFactoryResolver, Input} from '@angular/core';
 import {Event, Pod, PodList} from '@api/backendapi';
 import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
+
 import {podState} from '../../../../resource/workloads/pod/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NamespaceService} from '../../../services/global/namespace';
 import {NotificationsService} from '../../../services/global/notifications';
 import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
+import {StatusBarColor, StatusBarItem} from '../../statusratiobar/component';
 import {ListGroupIdentifiers, ListIdentifiers} from '../groupids';
 
 @Component({selector: 'kd-pod-list', templateUrl: './template.html'})
@@ -58,6 +60,32 @@ export class PodListComponent extends ResourceListWithStatuses<PodList, Pod> {
     return podList.pods;
   }
 
+  get resourceRatios(): StatusBarItem[] {
+    const status = this.resourceList_.status;
+    return [
+      {
+        key: `Running: ${status.running}`,
+        color: StatusBarColor.Running,
+        value: status.running / this.totalItems * 100,
+      },
+      {
+        key: `Failed: ${status.failed}`,
+        color: StatusBarColor.Failed,
+        value: status.failed / this.totalItems * 100,
+      },
+      {
+        key: `Pending: ${status.pending}`,
+        color: StatusBarColor.Pending,
+        value: status.pending / this.totalItems * 100,
+      },
+      {
+        key: `Succeeded: ${status.succeeded}`,
+        color: StatusBarColor.Succeeded,
+        value: status.succeeded / this.totalItems * 100,
+      }
+    ];
+  }
+
   isInErrorState(resource: Pod): boolean {
     return resource.podStatus.status === 'Failed';
   }

diff --git a/src/app/frontend/common/components/resourcelist/pod/template.html b/src/app/frontend/common/components/resourcelist/pod/template.html
@@ -16,6 +16,12 @@
 
 <kd-card role="table"
          [hidden]="isHidden()">
+  <div status-ratio-bar
+       fxLayout="row wrap"
+       *ngIf="totalItems">
+    <kd-status-ratio-bar fxFlex
+                         [items]="resourceRatios"></kd-status-ratio-bar>
+  </div>
   <div title
        fxLayout="row">Pods</div>
   <div description>

diff --git a/src/app/frontend/common/components/resourcelist/replicaset/component.ts b/src/app/frontend/common/components/resourcelist/replicaset/component.ts
@@ -17,14 +17,15 @@ import {Component, ComponentFactoryResolver, Input} from '@angular/core';
 import {Event, ReplicaSet, ReplicaSetList} from '@api/backendapi';
 import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
-import {replicaSetState} from '../../../../resource/workloads/replicaset/state';
 
+import {replicaSetState} from '../../../../resource/workloads/replicaset/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NamespaceService} from '../../../services/global/namespace';
 import {NotificationsService} from '../../../services/global/notifications';
 import {EndpointManager, Resource} from '../../../services/resource/endpoint';
 import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
+import {StatusBarColor, StatusBarItem} from '../../statusratiobar/component';
 import {ListGroupIdentifiers, ListIdentifiers} from '../groupids';
 
 @Component({
@@ -63,6 +64,27 @@ export class ReplicaSetListComponent extends ResourceListWithStatuses<ReplicaSet
     return rsList.replicaSets;
   }
 
+  get resourceRatios(): StatusBarItem[] {
+    const status = this.resourceList_.status;
+    return [
+      {
+        key: `Running: ${status.running}`,
+        color: StatusBarColor.Running,
+        value: status.running / this.totalItems * 100,
+      },
+      {
+        key: `Failed: ${status.failed}`,
+        color: StatusBarColor.Failed,
+        value: status.failed / this.totalItems * 100,
+      },
+      {
+        key: `Pending: ${status.pending}`,
+        color: StatusBarColor.Pending,
+        value: status.pending / this.totalItems * 100,
+      }
+    ];
+  }
+
   isInErrorState(resource: ReplicaSet): boolean {
     return resource.pods.warnings.length > 0;
   }

diff --git a/src/app/frontend/common/components/resourcelist/replicaset/template.html b/src/app/frontend/common/components/resourcelist/replicaset/template.html
@@ -16,6 +16,12 @@
 
 <kd-card role="table"
          [hidden]="isHidden()">
+  <div status-ratio-bar
+       fxLayout="row wrap"
+       *ngIf="totalItems">
+    <kd-status-ratio-bar fxFlex
+                         [items]="resourceRatios"></kd-status-ratio-bar>
+  </div>
   <div title
        fxLayout="row">
     <ng-container *ngIf="title;else defaultTitle">{{title}}</ng-container>