From d58561103b4e96efa2c78c43740ce46b71956529 Mon Sep 17 00:00:00 2001
From: ajatprabha <ajat.prabha.leo@gmail.com>
Date: Fri, 8 Mar 2019 06:07:57 +0530
Subject: [PATCH] add StatusRatioBarComponent

---
 src/app/frontend/_variables.scss              |   3 +
 .../common/components/card/template.html      |   1 +
 src/app/frontend/common/components/module.ts  |   3 +
 .../resourcelist/cronjob/component.ts         |  18 +++
 .../resourcelist/cronjob/template.html        |   6 +
 .../resourcelist/daemonset/component.ts       |  24 +++-
 .../resourcelist/daemonset/template.html      |   6 +
 .../resourcelist/deployment/component.ts      |  23 +++
 .../resourcelist/deployment/template.html     |   6 +
 .../components/resourcelist/job/component.ts  |  29 +++-
 .../components/resourcelist/job/template.html |   6 +
 .../components/resourcelist/pod/component.ts  |  28 ++++
 .../components/resourcelist/pod/template.html |   6 +
 .../resourcelist/replicaset/component.ts      |  24 +++-
 .../resourcelist/replicaset/template.html     |   6 +
 .../replicationcontroller/component.ts        |  24 +++-
 .../replicationcontroller/template.html       |   6 +
 .../resourcelist/statefulset/component.ts     |  23 +++
 .../resourcelist/statefulset/template.html    |   6 +
 .../components/statusratiobar/component.ts    |  28 ++++
 .../components/statusratiobar/style.scss      |  25 ++++
 .../components/statusratiobar/template.html   |  24 ++++
 src/app/frontend/common/resources/list.ts     |   2 +
 src/app/frontend/overview/template.html       |   2 -
 .../overview/workloadstatus/component.ts      |  90 +-----------
 .../overview/workloadstatus/template.html     | 134 +-----------------
 26 files changed, 329 insertions(+), 224 deletions(-)
 create mode 100644 src/app/frontend/common/components/statusratiobar/component.ts
 create mode 100644 src/app/frontend/common/components/statusratiobar/style.scss
 create mode 100644 src/app/frontend/common/components/statusratiobar/template.html

diff --git a/src/app/frontend/_variables.scss b/src/app/frontend/_variables.scss
index d0c7136e56e9..95f864771572 100644
--- 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
index cff39734ab14..ae8905e2e823 100644
--- 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
index 8a1a9a349bc6..853c7a732e8c 100644
--- 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
index f34694103c99..9ed77b95bf81 100644
--- a/src/app/frontend/common/components/resourcelist/cronjob/component.ts
+++ b/src/app/frontend/common/components/resourcelist/cronjob/component.ts
@@ -17,6 +17,7 @@ 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';
@@ -24,6 +25,7 @@ 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
index f8be584b8502..cd3615ba7eb8 100644
--- 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
index 1b5cf0622d9a..5cc2235a8754 100644
--- 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
index c34eaf3dcfab..a8e4ea17eb40 100644
--- 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
index 5c23092c0255..8ab6df8d6dd4 100644
--- a/src/app/frontend/common/components/resourcelist/deployment/component.ts
+++ b/src/app/frontend/common/components/resourcelist/deployment/component.ts
@@ -17,6 +17,7 @@ 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';
@@ -24,6 +25,7 @@ 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
index cd3accb0e03b..e7ce86cd9b4f 100644
--- 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
index 5b6e7ee50ea9..b4b5f0425b7c 100644
--- 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
index 4a98f3fb33fa..2d66988d919d 100644
--- 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
index 56063e0f202f..d7ab737017dc 100644
--- a/src/app/frontend/common/components/resourcelist/pod/component.ts
+++ b/src/app/frontend/common/components/resourcelist/pod/component.ts
@@ -17,6 +17,7 @@ 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';
@@ -24,6 +25,7 @@ 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
index 1c1d329cae06..7e29471934f7 100644
--- 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
index 80958204352a..9c57c6cac733 100644
--- 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
index f9e4c59ea3e7..3c9cedb0f660 100644
--- 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>
diff --git a/src/app/frontend/common/components/resourcelist/replicationcontroller/component.ts b/src/app/frontend/common/components/resourcelist/replicationcontroller/component.ts
index 28f0f760d7bb..f0f67a53312a 100644
--- a/src/app/frontend/common/components/resourcelist/replicationcontroller/component.ts
+++ b/src/app/frontend/common/components/resourcelist/replicationcontroller/component.ts
@@ -17,14 +17,15 @@ import {Component, ComponentFactoryResolver, Input} from '@angular/core';
 import {Event, ReplicationController, ReplicationControllerList} from '@api/backendapi';
 import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
-import {replicationControllerState} from '../../../../resource/workloads/replicationcontroller/state';
 
+import {replicationControllerState} from '../../../../resource/workloads/replicationcontroller/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({
@@ -64,6 +65,27 @@ export class ReplicationControllerListComponent extends
     return rcList.replicationControllers;
   }
 
+  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: ReplicationController): boolean {
     return resource.pods.warnings.length > 0;
   }
diff --git a/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html b/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html
index 7b6357e36ba5..e3edd7a9dc0d 100644
--- a/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html
+++ b/src/app/frontend/common/components/resourcelist/replicationcontroller/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">Replications Controllers</div>
   <div description><span class="kd-muted-light">Items:&nbsp;</span>{{totalItems}}</div>
diff --git a/src/app/frontend/common/components/resourcelist/statefulset/component.ts b/src/app/frontend/common/components/resourcelist/statefulset/component.ts
index db0b87cfed43..53f2c7dc42ee 100644
--- a/src/app/frontend/common/components/resourcelist/statefulset/component.ts
+++ b/src/app/frontend/common/components/resourcelist/statefulset/component.ts
@@ -17,6 +17,7 @@ import {Component, ComponentFactoryResolver, Input} from '@angular/core';
 import {Event, StatefulSet, StatefulSetList} from '@api/backendapi';
 import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
+
 import {statefulSetState} from '../../../../resource/workloads/statefulset/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NamespaceService} from '../../../services/global/namespace';
@@ -24,6 +25,7 @@ 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 +65,27 @@ export class StatefulSetListComponent extends
     return statefulSetList.statefulSets;
   }
 
+  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: StatefulSet): boolean {
     return resource.pods.warnings.length > 0;
   }
diff --git a/src/app/frontend/common/components/resourcelist/statefulset/template.html b/src/app/frontend/common/components/resourcelist/statefulset/template.html
index 68806a5946ae..f87a37576a8c 100644
--- a/src/app/frontend/common/components/resourcelist/statefulset/template.html
+++ b/src/app/frontend/common/components/resourcelist/statefulset/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">Stateful Sets</div>
   <div description><span class="kd-muted-light">Items:&nbsp;</span>{{totalItems}}</div>
diff --git a/src/app/frontend/common/components/statusratiobar/component.ts b/src/app/frontend/common/components/statusratiobar/component.ts
new file mode 100644
index 000000000000..7a53a1ef069e
--- /dev/null
+++ b/src/app/frontend/common/components/statusratiobar/component.ts
@@ -0,0 +1,28 @@
+import {Component, Input} from '@angular/core';
+
+export enum StatusBarColor {
+  Succeeded = '#66bb6a',
+  Running = '#388e3c',
+  Failed = '#e53935',
+  Suspended = '#ffb300',
+  Pending = '#f4511e'
+}
+
+export interface StatusBarItem {
+  key: string;
+  color: string;
+  value: number;
+}
+
+@Component(
+    {selector: 'kd-status-ratio-bar', templateUrl: './template.html', styleUrls: ['./style.scss']})
+export class StatusRatioBarComponent {
+  @Input() items: StatusBarItem[];
+
+  get data() {
+    return this.items.filter(item => item.value !== 0)
+        .map(item => ({...item, value: `${item.value}%`}));
+  }
+
+  trackByFn = (index: number) => index;
+}
diff --git a/src/app/frontend/common/components/statusratiobar/style.scss b/src/app/frontend/common/components/statusratiobar/style.scss
new file mode 100644
index 000000000000..b75993d5c092
--- /dev/null
+++ b/src/app/frontend/common/components/statusratiobar/style.scss
@@ -0,0 +1,25 @@
+@import '../../../variables';
+
+.kd-status-ratio-bar {
+  background-color: $white;
+  border-radius: rem(.4);
+  display: flex;
+  height: rem(.8);
+  margin: rem(.4);
+  overflow: hidden;
+}
+
+.ratio-bar-item {
+  color: $white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: rem(.4);
+  text-align: center;
+  transition: width .6s ease;
+  white-space: nowrap;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
diff --git a/src/app/frontend/common/components/statusratiobar/template.html b/src/app/frontend/common/components/statusratiobar/template.html
new file mode 100644
index 000000000000..6c30a9133466
--- /dev/null
+++ b/src/app/frontend/common/components/statusratiobar/template.html
@@ -0,0 +1,24 @@
+<!--
+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.
+-->
+
+<div class="kd-status-ratio-bar">
+  <div *ngFor="let item of data; trackBy: trackByFn"
+       [matTooltip]="item.key"
+       matTooltipShowDelay="0"
+       class="ratio-bar-item"
+       [ngStyle]="{'background-color': item.color, 'width': item.value}">
+  </div>
+</div>
diff --git a/src/app/frontend/common/resources/list.ts b/src/app/frontend/common/resources/list.ts
index ee1c8d714ea3..4688539ce8f6 100644
--- a/src/app/frontend/common/resources/list.ts
+++ b/src/app/frontend/common/resources/list.ts
@@ -42,6 +42,7 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
   private readonly dynamicColumns_: ColumnWhenCondition[] = [];
   protected readonly kdState_: KdStateService;
   protected readonly settingsService_: GlobalSettingsService;
+  protected resourceList_: T;
 
   isLoading = false;
   totalItems = 0;
@@ -86,6 +87,7 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
                     return this.getResourceObservable(this.getDataSelectParams_());
                   }))
             .subscribe((data: T) => {
+              this.resourceList_ = data;
               this.notifications_.pushErrors(data.errors);
               this.totalItems = data.listMeta.totalItems;
               this.isLoading = false;
diff --git a/src/app/frontend/overview/template.html b/src/app/frontend/overview/template.html
index abffe31da31b..e62bacdbf543 100644
--- a/src/app/frontend/overview/template.html
+++ b/src/app/frontend/overview/template.html
@@ -18,8 +18,6 @@
   <div class="kd-card-group-header kd-muted"
        [hidden]="!hasWorkloads()">Workloads</div>
 
-
-
   <div>
     <kd-cron-job-list (onchange)="onListUpdate($event)"
                       [hideable]="true"></kd-cron-job-list>
diff --git a/src/app/frontend/overview/workloadstatus/component.ts b/src/app/frontend/overview/workloadstatus/component.ts
index 3a245e13524f..fa6db02167a9 100644
--- a/src/app/frontend/overview/workloadstatus/component.ts
+++ b/src/app/frontend/overview/workloadstatus/component.ts
@@ -14,94 +14,6 @@
 
 import {Component} from '@angular/core';
 
-@Component({
-  selector: 'kd-workload-statuses',
-  templateUrl: './template.html',
-})
+@Component({selector: 'kd-workload-statuses', templateUrl: './template.html'})
 export class WorkloadStatusComponent {
-  // @Input() ratio: any;
-  colors: string[] = ['#00c752', '#f00', '#ffad20', '#006028'];
-
-  // /** @export {Array<Object>} */
-  // this.resourcesRatio.cronJobRatio = this.getSuspendableResourceRatio(
-  //   this.overview.cronJobList.status, this.overview.cronJobList.listMeta.totalItems);
-  // /** @export {Array<Object>} */
-  // this.resourcesRatio.daemonSetRatio = this.getDefaultResourceRatio(
-  //   this.overview.daemonSetList.status, this.overview.daemonSetList.listMeta.totalItems);
-  // /** @export {Array<Object>} */
-  // this.resourcesRatio.deploymentRatio = this.getDefaultResourceRatio(
-  //   this.overview.deploymentList.status, this.overview.deploymentList.listMeta.totalItems);
-  // /** @export {Array<Object>} */
-  // this.resourcesRatio.jobRatio = this.getCompletableResourceRatio(
-  //   this.overview.jobList.status, this.overview.jobList.listMeta.totalItems);
-  // /** @export {Array<Object>} */
-  // this.resourcesRatio.podRatio = this.getCompletableResourceRatio(
-  //   this.overview.podList.status, this.overview.podList.listMeta.totalItems);
-  // /** @export {Array<Object>} */
-  // this.resourcesRatio.replicaSetRatio = this.getDefaultResourceRatio(
-  //   this.overview.replicaSetList.status, this.overview.replicaSetList.listMeta.totalItems);
-  // /** @export {Array<Object>} */
-  // this.resourcesRatio.rcRatio = this.getDefaultResourceRatio(
-  //   this.overview.replicationControllerList.status,
-  //   this.overview.replicationControllerList.listMeta.totalItems);
-  // /** @export {Array<Object>} */
-  // this.resourcesRatio.statefulSetRatio = this.getDefaultResourceRatio(
-  //   this.overview.statefulSetList.status, this.overview.statefulSetList.listMeta.totalItems);
-
-  // getSuspendableResourceRatio(status, totalItems) {
-  //   return totalItems > 0 ?
-  //     [
-  //       {
-  //         key: `Running: ${status.running}`,
-  //         value: status.running / totalItems * 100,
-  //       },
-  //       {
-  //         key: `Suspended: ${status.failed}`,
-  //         value: status.failed / totalItems * 100,
-  //       },
-  //     ] :
-  //     [];
-  // }
-  //
-  // getDefaultResourceRatio(status, totalItems) {
-  //   return totalItems > 0 ?
-  //     [
-  //       {
-  //         key: `Running: ${status.running}`,
-  //         value: status.running / totalItems * 100,
-  //       },
-  //       {
-  //         key: `Failed: ${status.failed}`,
-  //         value: status.failed / totalItems * 100,
-  //       },
-  //       {
-  //         key: `Pending: ${status.pending}`,
-  //         value: status.pending / totalItems * 100,
-  //       },
-  //     ] :
-  //     [];
-  // }
-  //
-  // getCompletableResourceRatio(status, totalItems) {
-  //   return totalItems > 0 ?
-  //     [
-  //       {
-  //         key: `Running: ${status.running}`,
-  //         value: status.running / totalItems * 100,
-  //       },
-  //       {
-  //         key: `Failed: ${status.failed}`,
-  //         value: status.failed / totalItems * 100,
-  //       },
-  //       {
-  //         key: `Pending: ${status.pending}`,
-  //         value: status.pending / totalItems * 100,
-  //       },
-  //       {
-  //         key: `Succeeded: ${status.succeeded}`,
-  //         value: status.succeeded / totalItems * 100,
-  //       },
-  //     ] :
-  //     [];
-  // }
 }
diff --git a/src/app/frontend/overview/workloadstatus/template.html b/src/app/frontend/overview/workloadstatus/template.html
index 0a9b8dca6226..3d14c03fb598 100644
--- a/src/app/frontend/overview/workloadstatus/template.html
+++ b/src/app/frontend/overview/workloadstatus/template.html
@@ -14,132 +14,8 @@
 limitations under the License.
 -->
 
-<!--<div fxLayout="row wrap">-->
-<!--<div class="kd-graph-container"-->
-<!--ng-if="::$ctrl.resourcesRatio.cronJobRatio.length">-->
-<!--<div layout="column"-->
-<!--layout-align="center center">-->
-<!--<kd-allocated-resources-chart color-palette="::$ctrl.colorPalette"-->
-<!--data="::$ctrl.resourcesRatio.cronJobRatio"-->
-<!--ratio="0"-->
-<!--enable-tooltips="true"-->
-<!--size="140">-->
-<!--</kd-allocated-resources-chart>-->
-<!--<div class="kd-graph-title">-->
-<!--[[Cron Jobs|Label 'Cron Jobs' for the resource status chart on overview page.]]-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
-
-<!--<div class="kd-graph-container"-->
-<!--ng-if="::$ctrl.resourcesRatio.daemonSetRatio.length">-->
-<!--<div layout="column"-->
-<!--layout-align="center center">-->
-<!--<kd-allocated-resources-chart color-palette="::$ctrl.colorPalette"-->
-<!--data="::$ctrl.resourcesRatio.daemonSetRatio"-->
-<!--ratio="0"-->
-<!--enable-tooltips="true"-->
-<!--size="140">-->
-<!--</kd-allocated-resources-chart>-->
-<!--<div class="kd-graph-title">-->
-<!--[[Daemon Sets|Label 'Daemon Sets' for the resource status chart on overview page.]]-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
-
-<!--<div class="kd-graph-container"-->
-<!--ng-if="::$ctrl.resourcesRatio.deploymentRatio.length">-->
-<!--<div layout="column"-->
-<!--layout-align="center center">-->
-<!--<kd-allocated-resources-chart color-palette="::$ctrl.colorPalette"-->
-<!--data="::$ctrl.resourcesRatio.deploymentRatio"-->
-<!--ratio="0"-->
-<!--enable-tooltips="true"-->
-<!--size="140">-->
-<!--</kd-allocated-resources-chart>-->
-<!--<div class="kd-graph-title">-->
-<!--[[Deployments|Label 'Deployments' for the resource status chart on overview page.]]-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
-
-<!--<div class="kd-graph-container"-->
-<!--ng-if="::$ctrl.resourcesRatio.jobRatio.length">-->
-<!--<div layout="column"-->
-<!--layout-align="center center">-->
-<!--<kd-allocated-resources-chart color-palette="::$ctrl.colorPalette"-->
-<!--data="::$ctrl.resourcesRatio.jobRatio"-->
-<!--ratio="0"-->
-<!--enable-tooltips="true"-->
-<!--size="140">-->
-<!--</kd-allocated-resources-chart>-->
-<!--<div class="kd-graph-title">-->
-<!--[[Jobs|Label 'Jobs' for the resource status chart on overview page.]]-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
-
-<!--<div class="kd-graph-container"-->
-<!--ng-if="::$ctrl.resourcesRatio.podRatio.length">-->
-<!--<div layout="column"-->
-<!--layout-align="center center">-->
-<!--<kd-allocated-resources-chart color-palette="::$ctrl.colorPalette"-->
-<!--data="::$ctrl.resourcesRatio.podRatio"-->
-<!--ratio="0"-->
-<!--enable-tooltips="true"-->
-<!--size="140">-->
-<!--</kd-allocated-resources-chart>-->
-<!--<div class="kd-graph-title">-->
-<!--[[Pods|Label 'Pods' for the resource status chart on overview page.]]-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
-
-<!--<div class="kd-graph-container"-->
-<!--ng-if="::$ctrl.resourcesRatio.replicaSetRatio.length">-->
-<!--<div layout="column"-->
-<!--layout-align="center center">-->
-<!--<kd-allocated-resources-chart color-palette="::$ctrl.colorPalette"-->
-<!--data="::$ctrl.resourcesRatio.replicaSetRatio"-->
-<!--ratio="0"-->
-<!--enable-tooltips="true"-->
-<!--size="140">-->
-<!--</kd-allocated-resources-chart>-->
-<!--<div class="kd-graph-title">-->
-<!--[[Replica Sets|Label 'Replica Sets' for the resource status chart on overview page.]]-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
-
-<!--<div class="kd-graph-container"-->
-<!--ng-if="::$ctrl.resourcesRatio.rcRatio.length">-->
-<!--<div layout="column"-->
-<!--layout-align="center center">-->
-<!--<kd-allocated-resources-chart color-palette="::$ctrl.colorPalette"-->
-<!--data="::$ctrl.resourcesRatio.rcRatio"-->
-<!--ratio="0"-->
-<!--enable-tooltips="true"-->
-<!--size="140">-->
-<!--</kd-allocated-resources-chart>-->
-<!--<div class="kd-graph-title">-->
-<!--[[Replication Controllers|Label 'RCs' for the resource status chart on overview page.]]-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
-
-<!--<div class="kd-graph-container"-->
-<!--ng-if="::$ctrl.resourcesRatio.statefulSetRatio.length">-->
-<!--<div layout="column"-->
-<!--layout-align="center center">-->
-<!--<kd-allocated-resources-chart color-palette="::$ctrl.colorPalette"-->
-<!--data="::$ctrl.resourcesRatio.statefulSetRatio"-->
-<!--ratio="0"-->
-<!--enable-tooltips="true"-->
-<!--size="140">-->
-<!--</kd-allocated-resources-chart>-->
-<!--<div class="kd-graph-title">-->
-<!--[[Stateful Sets|Label 'Stateful Sets' for the resource status chart on overview page.]]-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
-<!--</div>-->
+<kd-card role="status">
+  <div title
+       fxLayout="row">Workloads Statuses
+  </div>
+</kd-card>