Indicator

The dtIndicator directive can be used with any component to indicate a warning or an error.

dev utility

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.

´ Loading interactive demo...
<dt-table [dataSource]="_dataSource"> <ng-container dtColumnDef="host" dtColumnAlign="text"> <dt-header-cell *dtHeaderCellDef>Host</dt-header-cell> <dt-cell *dtCellDef="let row">{{ row.name }}</dt-cell> </ng-container> <ng-container dtColumnDef="cpu" dtColumnAlign="number"> <dt-header-cell *dtHeaderCellDef>CPU</dt-header-cell> <dt-cell [dtIndicator]="metricHasProblem(row, 'cpuUsage')" [dtIndicatorColor]="metricIndicatorColor(row, 'cpuUsage')" *dtCellDef="let row" > {{ row.cpuUsage | dtPercent }} </dt-cell> </ng-container> <ng-container dtColumnDef="memory" dtColumnAlign="number"> <dt-header-cell *dtHeaderCellDef>Memory</dt-header-cell> <dt-cell *dtCellDef="let row"> <span [dtIndicator]="metricHasProblem(row, 'memoryPerc')" [dtIndicatorColor]="metricIndicatorColor(row, 'memoryPerc')" > {{ row.memoryPerc | dtPercent }} </span> &nbsp;of&nbsp; <span [dtIndicator]="metricHasProblem(row, 'memoryTotal')" [dtIndicatorColor]="metricIndicatorColor(row, 'memoryTotal')" > {{ row.memoryTotal | dtBytes }} </span> </dt-cell> </ng-container> <ng-container dtColumnDef="traffic" dtColumnAlign="number"> <dt-header-cell *dtHeaderCellDef>Network traffic</dt-header-cell> <dt-cell *dtCellDef="let row"> {{ row.traffic | dtBits | dtRate: 's' }} </dt-cell> </ng-container> <ng-container dtColumnDef="empty"> <dt-cell *dtCellDef="let row">This is empty</dt-cell> </ng-container> <dt-header-row *dtHeaderRowDef="['host', 'cpu', 'memory', 'traffic']" ></dt-header-row> <dt-row *dtRowDef="let row; columns: ['host', 'cpu', 'memory', 'traffic']" ></dt-row> </dt-table> <button dt-button variant="secondary" (click)="_toggleProblem()"> Toggle problem </button> export class TableProblemExample { _dataSource: TableData[] = [ { name: 'et-demo-2-win4', cpuUsage: 30, memoryPerc: 38, memoryTotal: 5830000000, traffic: 987000000, warnings: ['memoryPerc'], errors: ['cpuUsage'], }, { name: 'et-demo-2-win3', cpuUsage: 26, memoryPerc: 46, memoryTotal: 6000000000, traffic: 6250000000, }, { name: 'docker-host2', cpuUsage: 25.4, memoryPerc: 38, memoryTotal: 5250000000, traffic: 4190000000, warnings: ['cpuUsage'], }, { name: 'et-demo-2-win1', cpuUsage: 23, memoryPerc: 7.86, memoryTotal: 16000000000, traffic: 987000000, }, ]; metricHasProblem(rowData: TableData, metricName: string): boolean { return ( this._metricHasError(rowData, metricName) || this._metricHasWarning(rowData, metricName) ); } metricIndicatorColor( rowData: TableData, metricName: string, ): 'error' | 'warning' | null { return this._metricHasError(rowData, metricName) ? 'error' : this._metricHasWarning(rowData, metricName) ? 'warning' : null; } private _metricHasError(rowData: TableData, metricName: string): boolean { return rowData.errors !== undefined && rowData.errors.includes(metricName); } private _metricHasWarning(rowData: TableData, metricName: string): boolean { return ( rowData.warnings !== undefined && rowData.warnings.includes(metricName) ); } _toggleProblem(): void { if (this._dataSource[0].errors) { delete this._dataSource[0].errors; } else { this._dataSource[0].errors = ['cpuUsage']; } } } <dt-table [dataSource]="_dataSource"> <ng-container dtColumnDef="host" dtColumnAlign="text"> <dt-header-cell *dtHeaderCellDef>Host</dt-header-cell> <dt-cell *dtCellDef="let row">{{ row.name }}</dt-cell> </ng-container> <ng-container dtColumnDef="cpu" dtColumnAlign="number"> <dt-header-cell *dtHeaderCellDef>CPU</dt-header-cell> <dt-cell [dtIndicator]="metricHasProblem(row, 'cpuUsage')" [dtIndicatorColor]="metricIndicatorColor(row, 'cpuUsage')" *dtCellDef="let row" > {{ row.cpuUsage | dtPercent }} </dt-cell> </ng-container> <ng-container dtColumnDef="memory" dtColumnAlign="number"> <dt-header-cell *dtHeaderCellDef>Memory</dt-header-cell> <dt-cell *dtCellDef="let row"> <span [dtIndicator]="metricHasProblem(row, 'memoryPerc')" [dtIndicatorColor]="metricIndicatorColor(row, 'memoryPerc')" > {{ row.memoryPerc | dtPercent }} </span> &nbsp;of&nbsp; <span [dtIndicator]="metricHasProblem(row, 'memoryTotal')" [dtIndicatorColor]="metricIndicatorColor(row, 'memoryTotal')" > {{ row.memoryTotal | dtBytes }} </span> </dt-cell> </ng-container> <ng-container dtColumnDef="traffic" dtColumnAlign="number"> <dt-header-cell *dtHeaderCellDef>Network traffic</dt-header-cell> <dt-cell *dtCellDef="let row"> {{ row.traffic | dtBits | dtRate: 's' }} </dt-cell> </ng-container> <ng-container dtColumnDef="empty"> <dt-cell *dtCellDef="let row">This is empty</dt-cell> </ng-container> <dt-header-row *dtHeaderRowDef="['host', 'cpu', 'memory', 'traffic']" ></dt-header-row> <dt-row *dtRowDef="let row; columns: ['host', 'cpu', 'memory', 'traffic']" ></dt-row> </dt-table> <button dt-button variant="secondary" (click)="_toggleProblem()"> Toggle problem </button> export class TableProblemExample { _dataSource: TableData[] = [ { name: 'et-demo-2-win4', cpuUsage: 30, memoryPerc: 38, memoryTotal: 5830000000, traffic: 987000000, warnings: ['memoryPerc'], errors: ['cpuUsage'], }, { name: 'et-demo-2-win3', cpuUsage: 26, memoryPerc: 46, memoryTotal: 6000000000, traffic: 6250000000, }, { name: 'docker-host2', cpuUsage: 25.4, memoryPerc: 38, memoryTotal: 5250000000, traffic: 4190000000, warnings: ['cpuUsage'], }, { name: 'et-demo-2-win1', cpuUsage: 23, memoryPerc: 7.86, memoryTotal: 16000000000, traffic: 987000000, }, ]; metricHasProblem(rowData: TableData, metricName: string): boolean { return ( this._metricHasError(rowData, metricName) || this._metricHasWarning(rowData, metricName) ); } metricIndicatorColor( rowData: TableData, metricName: string, ): 'error' | 'warning' | null { return this._metricHasError(rowData, metricName) ? 'error' : this._metricHasWarning(rowData, metricName) ? 'warning' : null; } private _metricHasError(rowData: TableData, metricName: string): boolean { return rowData.errors !== undefined && rowData.errors.includes(metricName); } private _metricHasWarning(rowData: TableData, metricName: string): boolean { return ( rowData.warnings !== undefined && rowData.warnings.includes(metricName) ); } _toggleProblem(): void { if (this._dataSource[0].errors) { delete this._dataSource[0].errors; } else { this._dataSource[0].errors = ['cpuUsage']; } } }

Imports

You have to import the DtIndicatorModule when you want to use the dtIndicator directive:

@NgModule({
  imports: [DtIndicatorModule],
})
class MyModule {}

Initialization

To apply the dynatrace indicator, add the dtIndicator directive to any component or HTML element.

Inputs

Name Type Default Description
dtIndicator boolean true Whether the indicator is active.
dtIndicatorColor 'error' | 'warning' error Sets the color.