Merge pull request #387 from SUSE/worklow-summary-fixes

Workload Summary Pod/Container Ring Chart Fixes
SUSE · Jun 16, 2020 · 9661690 · 9661690
2 parents 5972a7a + d835710
commit 9661690
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 16 deletions.
diff --git a/custom-src/frontend/app/custom/kubernetes/services/kubernetes-expanded-state.ts b/custom-src/frontend/app/custom/kubernetes/services/kubernetes-expanded-state.ts
@@ -96,10 +96,9 @@ export class KubernetesPodExpandedStatusHelper {
           reason = state.waiting.reason;
         } else if (!!state.terminated) {
           reason = state.terminated.reason;
-        } else if (!!state.terminated) {
-          if (state.terminated.signal !== 0) {
+          if (!!state.terminated.signal && state.terminated.signal !== 0) {
             reason = `Signal:${state.terminated.signal}`;
-          } else {
+          } else if (!!state.terminated.exitCode && state.terminated.exitCode !== 0) {
             reason = `ExitCode:${state.terminated.exitCode}`;
           }
         } else if (!!container.ready && !!state.running) {

diff --git a/...-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-helper.service.ts b/...-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-helper.service.ts
@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 
 import { kubeEntityCatalog } from '../../../kubernetes-entity-catalog';
-import { KubernetesPod } from '../../../store/kube.types';
+import { ContainerStateCollection, KubernetesPod } from '../../../store/kube.types';
 import { getHelmReleaseDetailsFromGuid } from '../../store/workloads-entity-factory';
 import {
   HelmRelease,
@@ -85,7 +85,7 @@ export class HelmReleaseHelperService {
       this.releaseTitle
     ).currentPage$.pipe(
       filter(pods => !!pods),
-      map(this.mapPods)
+      map(pods => this.mapPods(pods))
     );
   }
 
@@ -110,11 +110,13 @@ export class HelmReleaseHelperService {
       } else {
         podPhases[status]++;
       }
+
       if (pod.status.containerStatuses) {
         pod.status.containerStatuses.forEach(containerStatus => {
-          if (containerStatus.state.running) {
+          const isReady = this.isContainerReady(containerStatus.state);
+          if (isReady === true) {
             containers.ready.value++;
-          } else {
+          } else if (isReady === false) {
             containers.notReady.value++;
           }
         });
@@ -129,4 +131,16 @@ export class HelmReleaseHelperService {
       containersChartData: Object.values(containers)
     };
   }
+
+  private isContainerReady(state: ContainerStateCollection = {}): Boolean {
+    if (state.running) {
+      return true;
+    } else if (!!state.waiting) {
+      return false;
+    } else if (!!state.terminated) {
+      // Assume a failed state is not ready (covers completed init states), discard success state
+      return state.terminated.exitCode === 0 ? null : false
+    }
+    return false;
+  }
 }
diff --git a/...tes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts b/...tes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts
@@ -9,7 +9,7 @@ import { RouterNav } from 'frontend/packages/store/src/actions/router.actions';
 import { HideSnackBar, ShowSnackBar } from 'frontend/packages/store/src/actions/snackBar.actions';
 import { AppState } from 'frontend/packages/store/src/app-state';
 import { combineLatest, Observable, ReplaySubject } from 'rxjs';
-import { filter, first, map, publishReplay, refCount, startWith } from 'rxjs/operators';
+import { distinctUntilChanged, filter, first, map, publishReplay, refCount, startWith } from 'rxjs/operators';
 
 import { endpointsEntityRequestDataSelector } from '../../../../../../../../store/src/selectors/endpoint.selectors';
 import { HelmReleaseChartData, HelmReleaseResource } from '../../../workload.types';
@@ -36,12 +36,17 @@ export class HelmReleaseSummaryTabComponent implements OnDestroy {
   public containersChartData = [];
 
   private successChartColor = '#4DD3A7';
+  private completedChartColour = '#7aa3e5';
 
   public podChartColors = [
     {
       name: 'Running',
       value: this.successChartColor
     },
+    {
+      name: 'Completed',
+      value: this.completedChartColour
+    },
   ];
 
   public containersChartColors = [
@@ -103,7 +108,15 @@ export class HelmReleaseSummaryTabComponent implements OnDestroy {
       startWith(true)
     );
 
-    this.chartData$ = this.helmReleaseHelper.fetchReleaseChartStats();
+    this.chartData$ = this.helmReleaseHelper.fetchReleaseChartStats().pipe(
+      distinctUntilChanged(),
+      map(chartData => ({
+        ...chartData,
+        containersChartData: chartData.containersChartData.sort((a, b) => a.name.localeCompare(b.name)),
+        podsChartData: chartData.podsChartData.sort((a, b) => a.name.localeCompare(b.name))
+      })
+      )
+    );
 
     this.resources$ = this.helmReleaseHelper.fetchReleaseGraph().pipe(
       map((graph: any) => {

diff --git a/src/frontend/packages/core/src/shared/components/ring-chart/ring-chart.component.html b/src/frontend/packages/core/src/shared/components/ring-chart/ring-chart.component.html
@@ -1,15 +1,18 @@
 <div class="app-ring-chart">
   <div class="pie">
-    <ngx-charts-pie-chart [customColors]="customColors" [view]="[120,120]" [animations]="true" [doughnut]="true" [results]="data" [gradient]="false">
+    <ngx-charts-pie-chart [customColors]="customColors" [view]="[120,120]" [animations]="true" [doughnut]="true"
+      [results]="data" [gradient]="false">
     </ngx-charts-pie-chart>
   </div>
   <div class="legend">
     <div class="advanced-pie-legend">
       <div class="total-value" ngx-charts-count-up [countTo]="getTotal()"></div>
       <div class="total-label">{{ label }}</div>
     </div>
-    <ngx-charts-advanced-legend [data]="data" [label]="label" [colors]="colors" [animations]="true" [valueFormatting]="valueFormatting" [labelFormatting]="nameFormatting" [percentageFormatting]="percentageFormatting" (select)="onClick($event)" (activate)="onActivate($event)"
+    <ngx-charts-advanced-legend [data]="data" [label]="label" [colors]="colors" [animations]="true"
+      [valueFormatting]="valueFormatting" [labelFormatting]="nameFormatting"
+      [percentageFormatting]="percentageFormatting" (select)="onClick($event)" (activate)="onActivate($event)"
       (deactivate)="onDeactivate($event)">
     </ngx-charts-advanced-legend>
   </div>
-</div>
+</div>
diff --git a/src/frontend/packages/core/src/shared/components/ring-chart/ring-chart.component.ts b/src/frontend/packages/core/src/shared/components/ring-chart/ring-chart.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 import { ColorHelper } from '@swimlane/ngx-charts';
 
 @Component({
@@ -7,7 +7,7 @@ import { ColorHelper } from '@swimlane/ngx-charts';
   styleUrls: ['./ring-chart.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class RingChartComponent implements OnInit {
+export class RingChartComponent implements OnInit, OnChanges {
 
   domain: any[];
   colors: ColorHelper;
@@ -24,17 +24,26 @@ export class RingChartComponent implements OnInit {
   @Input() nameFormatting: (value: string) => any = label => label;
   @Input() percentageFormatting: (value: number) => any = percentage => percentage;
 
-  constructor() { }
-
   ngOnInit() {
     if (!this.data) {
       this.data = [];
     }
+  }
+
+  ngOnChanges() {
+    this.update();
+  }
+
+  update() {
     this.domain = this.getDomain();
     this.setColors();
   }
 
   setColors(): void {
+    if (!this.domain) {
+      // Not set yet, can't set colour without it
+      return;
+    }
     this.colors = new ColorHelper(this.scheme, 'ordinal', this.domain, this.customColors || []);
   }