#2139 Improve coloring coding for problem event (#2230)

* Mark warning with $warning-color (also in event stream) * Mark resolved problems in root list with green indicator and remove red title * Successful remediation should mark problem event as resolved * Apply base-href only if 'bridge/' is used in path * Faulty evaluation resets successful flag (e.g. approval)
keptn · Aug 26, 2020 · 39a22ab · 39a22ab
1 parent 799b721
commit 39a22ab
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 48 deletions.
diff --git a/bridge/client/app/_components/ktb-approval-item/ktb-approval-item.component.scss b/bridge/client/app/_components/ktb-approval-item/ktb-approval-item.component.scss
@@ -11,7 +11,7 @@
     color: $white;
   }
   &.warning {
-    background-color: $orange-400;
+    background-color: $warning-color;
     color: $white;
   }
   &.success {

diff --git a/bridge/client/app/_components/ktb-evaluation-details/ktb-evaluation-details.component.ts b/bridge/client/app/_components/ktb-evaluation-details/ktb-evaluation-details.component.ts
@@ -38,7 +38,7 @@ export class KtbEvaluationDetailsComponent implements OnInit, OnDestroy {
 
   public _evaluationColor = {
     'pass': '#7dc540',
-    'warning': '#fd8232',
+    'warning': '#e6be00',
     'fail': '#dc172a',
     'failed': '#dc172a',
     'info': '#f8f8f8'

diff --git a/bridge/client/app/_components/ktb-event-item/ktb-event-item.component.html b/bridge/client/app/_components/ktb-event-item/ktb-event-item.component.html
@@ -1,4 +1,4 @@
-<ktb-selectable-tile [error]="_event.isFaulty()" [success]="_event.isSuccessful()" [highlight]="_event.isApproval()" *ngIf="_event && (project$ | async) as project">
+<ktb-selectable-tile [error]="_event.isFaulty()" [warning]="_event.isWarning()" [success]="_event.isSuccessful()" [highlight]="_event.isApproval()" *ngIf="_event && (project$ | async) as project">
   <div fxLayout="row">
     <div fxFlex>
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">

diff --git a/bridge/client/app/_components/ktb-root-events-list/ktb-root-events-list.component.html b/bridge/client/app/_components/ktb-root-events-list/ktb-root-events-list.component.html
@@ -1,11 +1,11 @@
 <div fxLayout="column" fxLayoutGap="5px">
   <div *ngFor="let event of _events;trackBy: identifyEvent">
-    <ktb-selectable-tile (click)="selectEvent(event)" [error]="event.isFaulty()" [selected]="_selectedEvent == event" *ngIf="event">
+    <ktb-selectable-tile (click)="selectEvent(event)" [error]="event.isFaulty() && (!event.isProblem() || event.isFaulty() != event.isSuccessful())" [success]="event.isProblem() && event.isSuccessful()" [selected]="_selectedEvent == event" *ngIf="event">
       <div fxLayout="row">
         <div fxFlex>
           <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
-            <dt-icon class="event-icon" [class.error]="event.isProblem()" [name]="event.getIcon()"></dt-icon>
-            <h4 class="m-0 mt-1 mb-1" [class.error]="event.isProblem()" [textContent]="event.getLabel()"></h4>
+            <dt-icon class="event-icon" [class.error]="event.isProblem() && event.isFaulty() && !event.isSuccessful()" [name]="event.getIcon()"></dt-icon>
+            <h4 class="m-0 mt-1 mb-1" [class.error]="event.isProblem() && event.isFaulty() && !event.isSuccessful()" [textContent]="event.getLabel()"></h4>
           </div>
           <p class="m-0" *ngIf="event.getShortImageName()"><span class="m-0" [textContent]="event.getShortImageName()"></span></p>
           <p class="m-0" *ngIf="event.data.ProblemTitle" [textContent]="event.data.ProblemTitle"></p>
@@ -14,7 +14,7 @@ <h4 class="m-0 mt-1 mb-1" [class.error]="event.isProblem()" [textContent]="event
           <p class="m-0 mr-2 mt-1" [textContent]="event.time | amCalendar:getCalendarFormats()"></p>
           <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
             <dt-tag-list aria-label="stages">
-              <dt-tag *ngFor="let stage of event.getStages()" [textContent]="stage" [class.error]="stage == event.isFaulty()" [class.warning]="stage == event.isWarning()" [class.highlight]="stage == event.isApproval()" (click)="$event.stopPropagation();selectEvent(event, stage)"></dt-tag>
+              <dt-tag *ngFor="let stage of event.getStages()" [textContent]="stage" [class.error]="stage == event.isFaulty() && stage != event.isSuccessful()" [class.warning]="stage == event.isWarning()" [class.highlight]="stage == event.isApproval()" (click)="$event.stopPropagation();selectEvent(event, stage)"></dt-tag>
             </dt-tag-list>
           </div>
         </div>

diff --git a/bridge/client/app/_components/ktb-root-events-list/ktb-root-events-list.component.scss b/bridge/client/app/_components/ktb-root-events-list/ktb-root-events-list.component.scss
@@ -9,16 +9,42 @@
       color: $white;
     }
     &.warning {
-      border-color: $orange-400;
+      background-color: $warning-color;
+      color: $white;
     }
     &.highlight {
       border-color: $blue-400;
     }
   }
 
-  .ktb-selectable-tile.ktb-tile-error .ktb-selectable-tile-container {
-    border: 1px solid $gray-200;
-    border-left: 3px solid $error-color;
+  .ktb-selectable-tile.ktb-tile-error {
+    .ktb-selectable-tile-container {
+      border: 1px solid $gray-200;
+      border-left: 3px solid $error-color;
+    }
+
+    &:hover,
+    &.ktb-tile-selected {
+      .ktb-selectable-tile-container {
+        border: 1px solid $gray-300;
+        border-left: 3px solid $error-color;
+      }
+    }
+  }
+
+  .ktb-selectable-tile.ktb-tile-success {
+    .ktb-selectable-tile-container {
+      border: 1px solid $gray-200;
+      border-left: 3px solid $cta-color;
+    }
+
+    &:hover,
+    &.ktb-tile-selected {
+      .ktb-selectable-tile-container {
+        border: 1px solid $gray-300;
+        border-left: 3px solid $cta-color;
+      }
+    }
   }
 
   .ktb-selectable-tile:hover.ktb-tile-error .ktb-selectable-tile-container,

diff --git a/bridge/client/app/_components/ktb-selectable-tile/ktb-selectable-tile.component.scss b/bridge/client/app/_components/ktb-selectable-tile/ktb-selectable-tile.component.scss
@@ -23,6 +23,9 @@
   &.ktb-tile-error .ktb-selectable-tile-container {
     border-color: $error-color;
   }
+  &.ktb-tile-warning .ktb-selectable-tile-container {
+    border-color: $warning-color;
+  }
   &.ktb-tile-success .ktb-selectable-tile-container {
     border-color: $cta-color;
   }

diff --git a/bridge/client/app/_components/ktb-selectable-tile/ktb-selectable-tile.component.ts b/bridge/client/app/_components/ktb-selectable-tile/ktb-selectable-tile.component.ts
@@ -12,6 +12,8 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, Vi
     '[class.ktb-tile-disabled]': 'disabled',
     '[attr.aria-error]': 'error',
     '[class.ktb-tile-error]': 'error',
+    '[attr.aria-warning]': 'warning',
+    '[class.ktb-tile-warning]': 'warning',
     '[attr.aria-success]': 'success',
     '[class.ktb-tile-success]': 'success',
     '[attr.aria-highlight]': 'highlight',
@@ -26,6 +28,7 @@ export class KtbSelectableTileComponent implements OnInit {
   private _selected = false;
   private _disabled = false;
   private _error = false;
+  private _warning = false;
   private _success = false;
   private _highlight = false;
 
@@ -64,6 +67,17 @@ export class KtbSelectableTileComponent implements OnInit {
     }
   }
 
+  @Input()
+  get warning(): boolean {
+    return this._warning;
+  }
+  set warning(value: boolean) {
+    if (this._warning !== value) {
+      this._warning = value;
+      this._changeDetectorRef.markForCheck();
+    }
+  }
+
   @Input()
   get success(): boolean {
     return this._success;

diff --git a/bridge/client/app/_models/root.ts b/bridge/client/app/_models/root.ts
@@ -1,36 +1,27 @@
 import {Trace} from "./trace";
-import {EventTypes} from "./event-types";
 
 export class Root extends Trace {
   traces: Trace[];
 
   isFaulty(): string {
-    let result: string = null;
-    if(this.traces) {
-      this.traces.forEach((trace) => {
-        if(trace.isFaulty()) {
-          result = trace.data.stage;
-        }
-      });
-    }
-    return result;
+    return this.traces.reduce((result: string, trace: Trace) => trace.isFaulty() ? trace.data.stage : result, null);
+  }
+
+  isProblem(): boolean {
+    return this.traces.reduce((result: boolean, trace: Trace) => trace.isProblem() && !trace.isProblemResolvedOrClosed() ? true : result, false);
   }
 
   isWarning(): string {
-    let result: string = null;
-    if(this.traces) {
-      this.traces.forEach((trace) => {
-        if(trace.isWarning()) {
-          result = trace.data.stage;
-        }
-      });
-    }
-    return result;
+    return this.traces.reduce((result: string, trace: Trace) => trace.isWarning() ? trace.data.stage : result, null);
   }
 
-  isSuccessful(): boolean {
-    let result: boolean = false;
-    return !this.isFaulty() && result;
+  isSuccessful(): string {
+    return this.traces.reduce((result: string, trace: Trace) => {
+      if(result)
+        return trace.isFaulty() ? null : result;
+      else
+        return trace.isSuccessful() ? trace.data.stage : result
+    }, null);
   }
 
   isApproval(): string {

diff --git a/bridge/client/app/_models/trace.spec.ts b/bridge/client/app/_models/trace.spec.ts
@@ -15,7 +15,7 @@ describe('Trace', () => {
     expect(rootTraces[0].getIcon()).toBe('information', 'Icon for trace "sh.keptn.internal.event.service.create" should be "information"');
     expect(rootTraces[0].isFaulty()).toBe(null);
     expect(rootTraces[0].isWarning()).toBe(null);
-    expect(rootTraces[0].isSuccessful()).toBe(false);
+    expect(rootTraces[0].isSuccessful()).toBe(null);
     expect(rootTraces[0].getProject()).toBe('sockshop');
     expect(rootTraces[0].getService()).toBe('carts');
 
@@ -25,7 +25,7 @@ describe('Trace', () => {
     expect(rootTraces[1].getIcon()).toBe('duplicate', 'Icon for trace "sh.keptn.event.configuration.change" should be "duplicate"');
     expect(rootTraces[1].isFaulty()).toBe(null);
     expect(rootTraces[1].isWarning()).toBe(null);
-    expect(rootTraces[1].isSuccessful()).toBe(false);
+    expect(rootTraces[1].isSuccessful()).toBe(null);
     expect(rootTraces[1].getProject()).toBe('sockshop');
     expect(rootTraces[1].getService()).toBe('carts');
 
@@ -35,7 +35,7 @@ describe('Trace', () => {
     expect(rootTraces[2].getIcon()).toBe('duplicate', 'Icon for trace "sh.keptn.event.configuration.change" should be "duplicate"');
     expect(rootTraces[2].isFaulty()).toBe(null);
     expect(rootTraces[2].isWarning()).toBe(null);
-    expect(rootTraces[2].isSuccessful()).toBe(false);
+    expect(rootTraces[2].isSuccessful()).toBe(null);
     expect(rootTraces[2].getProject()).toBe('sockshop');
     expect(rootTraces[2].getService()).toBe('carts');
 
@@ -44,7 +44,7 @@ describe('Trace', () => {
     expect(evaluationTraces[0].getIcon()).toBe('traffic-light', 'Icon for trace "sh.keptn.events.evaluation-done" should be "traffic-light"');
     expect(evaluationTraces[0].isFaulty()).toBe(null);
     expect(evaluationTraces[0].isWarning()).toBe(null);
-    expect(evaluationTraces[0].isSuccessful()).toBe(true, 'Successful evaluation should return true');
+    expect(evaluationTraces[0].isSuccessful()).toBe(evaluationTraces[0].data.stage, 'Successful evaluation should return true');
     expect(evaluationTraces[0].getProject()).toBe('sockshop');
     expect(evaluationTraces[0].getService()).toBe('carts');
   }));

diff --git a/bridge/client/app/_models/trace.ts b/bridge/client/app/_models/trace.ts
@@ -98,28 +98,32 @@ class Trace {
     return result;
   }
 
-  isSuccessful(): boolean {
-    let result: boolean = false;
+  isSuccessful(): string {
+    let result: string = null;
     if(this.data) {
-      if(this.data.result == ResultTypes.PASSED || this.isApprovalFinished() && this.isApproved() || this.isProblem() && this.isProblemResolvedOrClosed()) {
-        result = true;
+      if(this.data.result == ResultTypes.PASSED || this.isApprovalFinished() && this.isApproved() || this.isProblem() && this.isProblemResolvedOrClosed() || this.isSuccessfulRemediation()) {
+        result = this.data.stage;
       }
     }
-    return !this.isFaulty() && result;
+    return !this.isFaulty() && result ? result : null;
   }
 
-  private isFailed(): boolean {
+  public isFailed(): boolean {
     return this.data.result == ResultTypes.FAILED || this.isApprovalFinished() && this.isDeclined();
   }
 
-  private isProblem(): boolean {
+  public isProblem(): boolean {
     return this.type === EventTypes.PROBLEM_DETECTED || this.type === EventTypes.PROBLEM_OPEN;
   }
 
-  private isProblemResolvedOrClosed(): boolean {
+  public isProblemResolvedOrClosed(): boolean {
     return this.data.State === ProblemStates.RESOLVED || this.data.State === ProblemStates.CLOSED;
   }
 
+  public isSuccessfulRemediation(): boolean {
+    return this.type === EventTypes.REMEDIATION_FINISHED && this.data.result == ResultTypes.PASSED;
+  }
+
   public isApproval(): string {
     return this.type === EventTypes.APPROVAL_TRIGGERED ? this.data.stage : null;
   }
@@ -129,11 +133,11 @@ class Trace {
   }
 
   private isApproved(): boolean {
-    return this.data.approval.result == ApprovalStates.APPROVED;
+    return this.data.approval?.result == ApprovalStates.APPROVED;
   }
 
   private isDeclined(): boolean {
-    return this.data.approval.result == ApprovalStates.DECLINED;
+    return this.data.approval?.result == ApprovalStates.DECLINED;
   }
 
   hasLabels(): boolean {

diff --git a/bridge/client/index.html b/bridge/client/index.html
@@ -5,7 +5,7 @@
   <title>keptn</title>
   <base id="base-href" href="/">
   <script>
-    if(window.location.hostname != "localhost")
+    if(window.location.hostname != "localhost" && window.location.pathname.indexOf('bridge/') != -1)
       document.getElementById("base-href").href = window.location.pathname.substring(0, window.location.pathname.indexOf('bridge/')) + 'bridge/';
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">