feat(indicator): add indicator theme 'recovered'

dynatrace-oss · Nov 19, 2020 · 9b3e989 · 9b3e989
1 parent 4e10e4a
commit 9b3e989
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 17 deletions.
diff --git a/apps/dev/src/indicator/indicator-demo.component.ts b/apps/dev/src/indicator/indicator-demo.component.ts
@@ -40,7 +40,7 @@ const TESTDATA: ThreadNode[] = [
         threadlevel: 'S1',
         totalTimeConsumption: 150,
         waiting: 123,
-        running: 20,
+        running: 30,
         blocked: 0,
       },
       {
@@ -139,7 +139,12 @@ const TESTDATA: ThreadNode[] = [
         <dt-tree-table-header-cell *dtHeaderCellDef>
           Running
         </dt-tree-table-header-cell>
-        <dt-cell *dtCellDef="let row">{{ row.running }}ms</dt-cell>
+        <dt-cell
+          *dtCellDef="let row"
+          [dtIndicator]="row.running > 20"
+          dtIndicatorColor="recovered"
+          >{{ row.running }}ms</dt-cell
+        >
       </ng-container>
 
       <ng-container dtColumnDef="waiting">

diff --git a/libs/barista-components/indicator/README.md b/libs/barista-components/indicator/README.md
@@ -4,7 +4,8 @@ The `dtIndicator` directive adds the capability to add styling to indicate a
 warning or an error.
 
 This directive was introduced to add indicators in the `<dt-table>`, but can be
-used in other components as well to handle error or warning indications.
+used in other components as well to handle error, warning or recovered
+indications.
 
 <ba-live-example name="DtExampleIndicatorDefault" fullwidth></ba-live-example>
 
@@ -30,7 +31,7 @@ component or HTML element.
 
 ## Inputs
 
-| Name               | Type                  | Default | Description                      |
-| ------------------ | --------------------- | ------- | -------------------------------- |
-| `dtIndicator`      | `boolean`             | `true`  | Whether the indicator is active. |
-| `dtIndicatorColor` | `'error' | 'warning'` | `error` | Sets the color.                  |
+| Name               | Type      | Default   | Description                      |
+| ------------------ | --------- | --------- | -------------------------------- |
+| `dtIndicator`      | `boolean` | `true`    | Whether the indicator is active. |
+| `dtIndicatorColor` | `'error'  | 'warning' | 'recovered'`                     | `error` | Sets the color. |
diff --git a/libs/barista-components/indicator/src/indicator.scss b/libs/barista-components/indicator/src/indicator.scss
@@ -4,6 +4,9 @@
 .dt-indicator-active.dt-color-warning {
   --dt-indicator-color: var(--dt-warning-default-color);
 }
+.dt-indicator-active.dt-color-recovered {
+  --dt-indicator-color: var(--dt-recovered-default-color);
+}
 
 .dt-indicator-active {
   color: var(--dt-indicator-color);

diff --git a/libs/barista-components/indicator/src/indicator.spec.ts b/libs/barista-components/indicator/src/indicator.spec.ts
@@ -35,6 +35,7 @@ describe('DtIndicator without table', () => {
         DtIndicatorWithActive,
         DtIndicatorColor,
         DtIndicatorWarning,
+        DtIndicatorRecovered,
       ],
     });
 
@@ -80,6 +81,18 @@ describe('DtIndicator without table', () => {
     expect(indicator.classList.contains('dt-color-warning')).toBe(true);
   });
 
+  it('should set the color to recovered', () => {
+    const fixture = TestBed.createComponent(DtIndicatorRecovered);
+    fixture.detectChanges();
+
+    const indicator: HTMLSpanElement = fixture.debugElement.query(
+      By.css('.dt-indicator'),
+    ).nativeElement;
+
+    expect(indicator.classList.contains('dt-indicator-active')).toBe(true);
+    expect(indicator.classList.contains('dt-color-recovered')).toBe(true);
+  });
+
   it('should set the color on a binding', () => {
     const fixture = TestBed.createComponent(DtIndicatorColor);
     fixture.detectChanges();
@@ -142,3 +155,9 @@ class DtIndicatorWarning {}
 class DtIndicatorColor {
   color = 'warning';
 }
+@Component({
+  template: ` <span dtIndicator [dtIndicatorColor]="color"></span> `,
+})
+class DtIndicatorRecovered {
+  color = 'recovered';
+}
diff --git a/libs/barista-components/indicator/src/indicator.ts b/libs/barista-components/indicator/src/indicator.ts
@@ -30,7 +30,11 @@ import {
   mixinColor,
 } from '@dynatrace/barista-components/core';
 
-export type DtIndicatorThemePalette = 'error' | 'warning' | undefined;
+export type DtIndicatorThemePalette =
+  | 'error'
+  | 'warning'
+  | 'recovered'
+  | undefined;
 
 // Boilerplate for applying mixins to DtIndicator.
 export class DtIndicatorBase {
@@ -51,7 +55,8 @@ export const _DtIndicatorMixinBase = mixinColor<
     '[class.dt-indicator-active]': 'active',
   },
 })
-export class DtIndicator extends _DtIndicatorMixinBase
+export class DtIndicator
+  extends _DtIndicatorMixinBase
   implements CanColor<DtIndicatorThemePalette>, OnDestroy, OnChanges {
   /**
    * @internal

diff --git a/libs/barista-components/table/src/_row-theme.scss b/libs/barista-components/table/src/_row-theme.scss
@@ -1,7 +1,7 @@
 @import '../../core/src/theming/theming';
 
 @mixin dt-theme-row($theme) {
-  $palette-names: 'error', 'warning';
+  $palette-names: 'error', 'warning', 'recovered';
 
   @each $name in $palette-names {
     $palette: dt-get-theme-palette($theme, $name);

diff --git a/libs/barista-components/table/src/cell.ts b/libs/barista-components/table/src/cell.ts
@@ -109,7 +109,7 @@ export class DtColumnDef extends CdkColumnDef implements OnChanges {
   }
 }
 
-type IndicatorType = 'error' | 'warning';
+type IndicatorType = 'error' | 'warning' | 'recovered';
 
 /** Cell template container that adds the right classes and role. */
 @Component({
@@ -140,6 +140,11 @@ export class DtCell implements AfterContentInit, OnDestroy {
     return this._hasIndicator('warning');
   }
 
+  /** Whether the cell has recovered */
+  get hasRecovered(): boolean {
+    return this._hasIndicator('recovered');
+  }
+
   /**
    * @internal
    * Emits whenever the indicators change or one of the inputs on the indicators changes

diff --git a/libs/barista-components/table/src/row.ts b/libs/barista-components/table/src/row.ts
@@ -176,14 +176,26 @@ export class DtRow extends CdkRow implements OnDestroy {
   private _applyCssClasses(cells: DtCell[]): void {
     const hasError = !!cells.find((cell) => cell.hasError);
     const hasWarning = !!cells.find((cell) => cell.hasWarning);
-    const hasIndicator = hasError || hasWarning;
+    const hasRecovered = !!cells.find((cell) => cell.hasRecovered);
+    const hasIndicator = hasError || hasWarning || hasRecovered;
     const orderCell = this._getChangedOrderCell();
     if (hasIndicator) {
       _addCssClass(this._elementRef.nativeElement, 'dt-table-row-indicator');
     } else {
       _removeCssClass(this._elementRef.nativeElement, 'dt-table-row-indicator');
     }
 
+    if (hasRecovered) {
+      _removeCssClass(this._elementRef.nativeElement, 'dt-color-error');
+      _replaceCssClass(
+        this._elementRef.nativeElement,
+        'dt-color-warning',
+        'dt-color-recovered',
+      );
+    } else {
+      _removeCssClass(this._elementRef.nativeElement, 'dt-color-recovered');
+    }
+
     if (hasWarning) {
       _replaceCssClass(
         this._elementRef.nativeElement,

diff --git a/libs/barista-components/tree-table/src/_tree-table-row-theme.scss b/libs/barista-components/tree-table/src/_tree-table-row-theme.scss
@@ -1,7 +1,7 @@
 @import '../../core/src/theming/theming';
 
 @mixin dt-theme-tree-table-row($theme) {
-  $palette-names: 'error', 'warning';
+  $palette-names: 'error', 'warning', 'recovered';
 
   @each $name in $palette-names {
     $palette: dt-get-theme-palette($theme, $name);

diff --git a/libs/examples/src/indicator/indicator-default-example/indicator-default-example.html b/libs/examples/src/indicator/indicator-default-example/indicator-default-example.html
@@ -1,6 +1,9 @@
 Indicator: <span [dtIndicator]="shown" [dtIndicatorColor]="color">Color</span>
 <br /><br />
-<button dt-button (click)="color = color === 'warning' ? 'error' : 'warning'">
+<button
+  dt-button
+  (click)="color = { 'recovered': 'warning', 'warning': 'error', 'error': 'recovered' }[color]"
+>
   Toggle color
 </button>
 <button dt-button (click)="shown = !shown">Toggle indicator</button>
diff --git a/libs/examples/src/indicator/indicator-default-example/indicator-default-example.ts b/libs/examples/src/indicator/indicator-default-example/indicator-default-example.ts
@@ -23,5 +23,5 @@ import { Component } from '@angular/core';
 export class DtExampleIndicatorDefault {
   shown: boolean = true;
 
-  color: 'warning' | 'error' = 'error';
+  color: 'warning' | 'error' | 'recovered' = 'error';
 }
diff --git a/libs/examples/src/table/table-problem-example/table-problem-example.ts b/libs/examples/src/table/table-problem-example/table-problem-example.ts
@@ -24,6 +24,7 @@ export interface TableData {
   traffic: number;
   errors?: string[];
   warnings?: string[];
+  recovered?: string[];
 }
 
 @Component({
@@ -63,24 +64,28 @@ export class DtExampleTableProblem {
       memoryPerc: 7.86,
       memoryTotal: 16000000000,
       traffic: 987000000,
+      recovered: ['cpuUsage'],
     },
   ];
 
   metricHasProblem(rowData: TableData, metricName: string): boolean {
     return (
       this._metricHasError(rowData, metricName) ||
-      this._metricHasWarning(rowData, metricName)
+      this._metricHasWarning(rowData, metricName) ||
+      this._metricHasRecovered(rowData, metricName)
     );
   }
 
   metricIndicatorColor(
     rowData: TableData,
     metricName: string,
-  ): 'error' | 'warning' | null {
+  ): 'error' | 'warning' | 'recovered' | null {
     return this._metricHasError(rowData, metricName)
       ? 'error'
       : this._metricHasWarning(rowData, metricName)
       ? 'warning'
+      : this._metricHasRecovered(rowData, metricName)
+      ? 'recovered'
       : null;
   }
 
@@ -94,6 +99,12 @@ export class DtExampleTableProblem {
     );
   }
 
+  private _metricHasRecovered(rowData: TableData, metricName: string): boolean {
+    return (
+      rowData.recovered !== undefined && rowData.recovered.includes(metricName)
+    );
+  }
+
   _toggleProblem(): void {
     if (this._dataSource[0].errors) {
       delete this._dataSource[0].errors;