ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts

   1 import { Component, Inject, OnInit, TemplateRef, ViewChild } from '@angular/core';
   2
   3 import { PrometheusService } from '~/app/shared/api/prometheus.service';
   4 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
   5 import { Icons } from '~/app/shared/enum/icons.enum';
   6 import { CdTableAction } from '~/app/shared/models/cd-table-action';
   7 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
   8 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
   9 import { Permission } from '~/app/shared/models/permissions';
  10 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  11 import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
  12 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
  13 import { PrometheusListHelper } from '../prometheus-list-helper';
  14
  15 const BASE_URL = 'silences'; // as only silence actions can be used
  16
  17 @Component({
  18   selector: 'cd-active-alert-list',
  19   providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }],
  20   templateUrl: './active-alert-list.component.html',
  21   styleUrls: ['./active-alert-list.component.scss']
  22 })
  23 export class ActiveAlertListComponent extends PrometheusListHelper implements OnInit {
  24   @ViewChild('externalLinkTpl', { static: true })
  25   externalLinkTpl: TemplateRef<any>;
  26   columns: CdTableColumn[];
  27   tableActions: CdTableAction[];
  28   permission: Permission;
  29   selection = new CdTableSelection();
  30   icons = Icons;
  31
  32   constructor(
  33     // NotificationsComponent will refresh all alerts every 5s (No need to do it here as well)
  34     private authStorageService: AuthStorageService,
  35     public prometheusAlertService: PrometheusAlertService,
  36     private urlBuilder: URLBuilderService,
  37     @Inject(PrometheusService) prometheusService: PrometheusService
  38   ) {
  39     super(prometheusService);
  40     this.permission = this.authStorageService.getPermissions().prometheus;
  41     this.tableActions = [
  42       {
  43         permission: 'create',
  44         canBePrimary: (selection: CdTableSelection) => selection.hasSingleSelection,
  45         disable: (selection: CdTableSelection) =>
  46           !selection.hasSingleSelection || selection.first().cdExecuting,
  47         icon: Icons.add,
  48         routerLink: () =>
  49           '/monitoring' + this.urlBuilder.getCreateFrom(this.selection.first().fingerprint),
  50         name: $localize`Create Silence`
  51       }
  52     ];
  53   }
  54
  55   ngOnInit() {
  56     super.ngOnInit();
  57     this.columns = [
  58       {
  59         name: $localize`Name`,
  60         prop: 'labels.alertname',
  61         cellClass: 'font-weight-bold',
  62         flexGrow: 2
  63       },
  64       {
  65         name: $localize`Summary`,
  66         prop: 'annotations.summary',
  67         flexGrow: 3
  68       },
  69       {
  70         name: $localize`Severity`,
  71         prop: 'labels.severity',
  72         flexGrow: 1,
  73         cellTransformation: CellTemplate.badge,
  74         customTemplateConfig: {
  75           map: {
  76             critical: { class: 'badge-danger' },
  77             warning: { class: 'badge-warning' }
  78           }
  79         }
  80       },
  81       {
  82         name: $localize`State`,
  83         prop: 'status.state',
  84         flexGrow: 1,
  85         cellTransformation: CellTemplate.badge,
  86         customTemplateConfig: {
  87           map: {
  88             active: { class: 'badge-info' },
  89             unprocessed: { class: 'badge-warning' },
  90             suppressed: { class: 'badge-dark' }
  91           }
  92         }
  93       },
  94       {
  95         name: $localize`Started`,
  96         prop: 'startsAt',
  97         cellTransformation: CellTemplate.timeAgo,
  98         flexGrow: 1
  99       },
 100       {
 101         name: $localize`URL`,
 102         prop: 'generatorURL',
 103         flexGrow: 1,
 104         sortable: false,
 105         cellTemplate: this.externalLinkTpl
 106       }
 107     ];
 108   }
 109
 110   updateSelection(selection: CdTableSelection) {
 111     this.selection = selection;
 112   }
 113 }