Add workload statuses to workloads view

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

@@ -83,6 +83,7 @@ import {CpuSparklineComponent} from './sparkline/cpu/component';
 import {MemorySparklineComponent} from './sparkline/memory/component';
 import {TextInputComponent} from './textinput/component';
 import {UploadFileComponent} from './uploadfile/component';
+import {WorkloadStatusComponent} from './workloadstatus/component';
 import {ZeroStateComponent} from './zerostate/component';
 
 const components = [
@@ -171,6 +172,7 @@ const components = [
   UploadFileComponent,
 
   ZeroStateComponent,
+  WorkloadStatusComponent
 ];
 
 @NgModule({

src/app/frontend/overview/workloadstatus/component.spec.ts → src/app/frontend/common/components/workloadstatus/component.spec.ts

@@ -22,9 +22,9 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {AppConfig} from '@api/backendapi';
 import {ResourcesRatio} from '@api/frontendapi';
 
-import {AllocationChartComponent} from '../../common/components/allocationchart/component';
-import {CardComponent} from '../../common/components/card/component';
-import {ConfigService} from '../../common/services/global/config';
+import {ConfigService} from '../../services/global/config';
+import {AllocationChartComponent} from '../allocationchart/component';
+import {CardComponent} from '../card/component';
 
 import {WorkloadStatusComponent} from './component';
 

src/app/frontend/overview/workloadstatus/style.scss → src/app/frontend/common/components/workloadstatus/style.scss

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../variables';
+@import '../../../variables';
 
 .kd-graph-container {
   flex: auto;

src/app/frontend/overview/component.spec.ts

@@ -23,12 +23,12 @@ import {AppConfig, CronJobList, DaemonSetList, PodList,} from '@api/backendapi';
 import {AllocationChartComponent} from '../common/components/allocationchart/component';
 import {CardComponent} from '../common/components/card/component';
 import {ListGroupIdentifiers, ListIdentifiers,} from '../common/components/resourcelist/groupids';
+import {emptyResourcesRatio, WorkloadStatusComponent,} from '../common/components/workloadstatus/component';
 import {ConfigService} from '../common/services/global/config';
 import {NotificationsService} from '../common/services/global/notifications';
 
 import {OverviewComponent} from './component';
 import {Helper, ResourceRatioModes} from './helper';
-import {emptyResourcesRatio, WorkloadStatusComponent,} from './workloadstatus/component';
 
 const mockDaemonSetData: DaemonSetList = {
   listMeta: {totalItems: 1},

src/app/frontend/overview/component.ts

@@ -17,10 +17,10 @@ import {CronJobList, DaemonSetList, DeploymentList, JobList, Metric, PodList, Re
 import {OnListChangeEvent, ResourcesRatio} from '@api/frontendapi';
 
 import {ListGroupIdentifiers, ListIdentifiers,} from '../common/components/resourcelist/groupids';
+import {emptyResourcesRatio} from '../common/components/workloadstatus/component';
 import {GroupedResourceList} from '../common/resources/groupedlist';
 
 import {Helper, ResourceRatioModes} from './helper';
-import {emptyResourcesRatio} from './workloadstatus/component';
 
 @Component({
   selector: 'kd-overview',

src/app/frontend/overview/module.ts

@@ -15,14 +15,15 @@
 import {NgModule} from '@angular/core';
 
 import {ComponentsModule} from '../common/components/module';
+import {WorkloadStatusComponent} from '../common/components/workloadstatus/component';
 import {SharedModule} from '../shared.module';
+
 import {OverviewComponent} from './component';
 import {OverviewRoutingModule} from './routing';
-import {WorkloadStatusComponent} from './workloadstatus/component';
 
 @NgModule({
   imports: [SharedModule, ComponentsModule, OverviewRoutingModule],
-  declarations: [OverviewComponent, WorkloadStatusComponent],
+  declarations: [OverviewComponent],
 })
 export class OverviewModule {
 }

src/app/frontend/resource/workloads/component.ts

@@ -13,13 +13,98 @@
 // limitations under the License.
 
 import {Component} from '@angular/core';
-import {OnListChangeEvent} from '@api/frontendapi';
-import {ListGroupIdentifiers} from '../../common/components/resourcelist/groupids';
+import {CronJobList, DaemonSetList, DeploymentList, JobList, Metric, PodList, ReplicaSetList, ReplicationControllerList, StatefulSetList,} from '@api/backendapi';
+import {OnListChangeEvent, ResourcesRatio} from '@api/frontendapi';
+import {emptyResourcesRatio} from 'common/components/workloadstatus/component';
+import {Helper, ResourceRatioModes} from 'overview/helper';
+
+import {ListGroupIdentifiers, ListIdentifiers} from '../../common/components/resourcelist/groupids';
 import {GroupedResourceList} from '../../common/resources/groupedlist';
 
 @Component({
   selector: 'kd-workloads',
   templateUrl: './template.html',
 })
 export class WorkloadsComponent extends GroupedResourceList {
+  resourcesRatio: ResourcesRatio = emptyResourcesRatio;
+  cumulativeMetrics: Metric[] = [];
+
+  hasWorkloads(): boolean {
+    return this.isGroupVisible(ListGroupIdentifiers.workloads);
+  }
+
+  hasDiscovery(): boolean {
+    return this.isGroupVisible(ListGroupIdentifiers.discovery);
+  }
+
+  hasConfig(): boolean {
+    return this.isGroupVisible(ListGroupIdentifiers.config);
+  }
+
+  updateResourcesRatio(event: OnListChangeEvent) {
+    switch (event.id) {
+      case ListIdentifiers.cronJob: {
+        const cronJobs = event.resourceList as CronJobList;
+        this.resourcesRatio.cronJobRatio = Helper.getResourceRatio(
+            cronJobs.status, cronJobs.listMeta.totalItems, ResourceRatioModes.Suspendable);
+        break;
+      }
+      case ListIdentifiers.daemonSet: {
+        const daemonSets = event.resourceList as DaemonSetList;
+        this.resourcesRatio.daemonSetRatio =
+            Helper.getResourceRatio(daemonSets.status, daemonSets.listMeta.totalItems);
+        break;
+      }
+      case ListIdentifiers.deployment: {
+        const deployments = event.resourceList as DeploymentList;
+        this.resourcesRatio.deploymentRatio =
+            Helper.getResourceRatio(deployments.status, deployments.listMeta.totalItems);
+        break;
+      }
+      case ListIdentifiers.job: {
+        const jobs = event.resourceList as JobList;
+        this.resourcesRatio.jobRatio = Helper.getResourceRatio(
+            jobs.status, jobs.listMeta.totalItems, ResourceRatioModes.Completable);
+        break;
+      }
+      case ListIdentifiers.pod: {
+        const pods = event.resourceList as PodList;
+        this.resourcesRatio.podRatio = Helper.getResourceRatio(
+            pods.status, pods.listMeta.totalItems, ResourceRatioModes.Completable);
+        this.cumulativeMetrics = pods.cumulativeMetrics;
+        break;
+      }
+      case ListIdentifiers.replicaSet: {
+        const replicaSets = event.resourceList as ReplicaSetList;
+        this.resourcesRatio.replicaSetRatio =
+            Helper.getResourceRatio(replicaSets.status, replicaSets.listMeta.totalItems);
+        break;
+      }
+      case ListIdentifiers.replicationController: {
+        const replicationControllers = event.resourceList as ReplicationControllerList;
+        this.resourcesRatio.replicationControllerRatio = Helper.getResourceRatio(
+            replicationControllers.status, replicationControllers.listMeta.totalItems);
+        break;
+      }
+      case ListIdentifiers.statefulSet: {
+        const statefulSets = event.resourceList as StatefulSetList;
+        this.resourcesRatio.statefulSetRatio =
+            Helper.getResourceRatio(statefulSets.status, statefulSets.listMeta.totalItems);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  showWorkloadStatuses(): boolean {
+    return (
+        Object.values(this.resourcesRatio)
+            .reduce((sum, ratioItems) => sum + ratioItems.length, 0) !== 0);
+  }
+
+  showGraphs(): boolean {
+    return this.cumulativeMetrics.every(
+        metrics => metrics.dataPoints && metrics.dataPoints.length > 1);
+  }
 }

src/app/frontend/resource/workloads/template.html

@@ -15,6 +15,8 @@
 -->
 
 <div [hidden]="shouldShowZeroState()">
+  <kd-workload-statuses *ngIf="showWorkloadStatuses()"
+                        [resourcesRatio]="resourcesRatio"></kd-workload-statuses>
   <kd-cron-job-list (onchange)="onListUpdate($event)"
                     [hideable]="true"></kd-cron-job-list>
   <kd-daemon-set-list (onchange)="onListUpdate($event)"