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

   1 import { Component, Inject } from '@angular/core';
   2
   3 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
   4 import { SortDirection, SortPropDir } from '@swimlane/ngx-datatable';
   5 import { Observable, Subscriber } from 'rxjs';
   6
   7 import { PrometheusService } from '~/app/shared/api/prometheus.service';
   8 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
   9 import { ActionLabelsI18n, SucceededActionLabelsI18n } from '~/app/shared/constants/app.constants';
  10 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
  11 import { Icons } from '~/app/shared/enum/icons.enum';
  12 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
  13 import { AlertmanagerSilence } from '~/app/shared/models/alertmanager-silence';
  14 import { CdTableAction } from '~/app/shared/models/cd-table-action';
  15 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
  16 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
  17 import { Permission } from '~/app/shared/models/permissions';
  18 import { CdDatePipe } from '~/app/shared/pipes/cd-date.pipe';
  19 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  20 import { ModalService } from '~/app/shared/services/modal.service';
  21 import { NotificationService } from '~/app/shared/services/notification.service';
  22 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
  23 import { PrometheusListHelper } from '../prometheus-list-helper';
  24
  25 const BASE_URL = 'monitoring/silences';
  26
  27 @Component({
  28   providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }],
  29   selector: 'cd-silences-list',
  30   templateUrl: './silence-list.component.html',
  31   styleUrls: ['./silence-list.component.scss']
  32 })
  33 export class SilenceListComponent extends PrometheusListHelper {
  34   silences: AlertmanagerSilence[] = [];
  35   columns: CdTableColumn[];
  36   tableActions: CdTableAction[];
  37   permission: Permission;
  38   selection = new CdTableSelection();
  39   modalRef: NgbModalRef;
  40   customCss = {
  41     'badge badge-danger': 'active',
  42     'badge badge-warning': 'pending',
  43     'badge badge-default': 'expired'
  44   };
  45   sorts: SortPropDir[] = [{ prop: 'endsAt', dir: SortDirection.desc }];
  46
  47   constructor(
  48     private authStorageService: AuthStorageService,
  49     private cdDatePipe: CdDatePipe,
  50     private modalService: ModalService,
  51     private notificationService: NotificationService,
  52     private urlBuilder: URLBuilderService,
  53     private actionLabels: ActionLabelsI18n,
  54     private succeededLabels: SucceededActionLabelsI18n,
  55     @Inject(PrometheusService) prometheusService: PrometheusService
  56   ) {
  57     super(prometheusService);
  58     this.permission = this.authStorageService.getPermissions().prometheus;
  59     const selectionExpired = (selection: CdTableSelection) =>
  60       selection.first() && selection.first().status && selection.first().status.state === 'expired';
  61     this.tableActions = [
  62       {
  63         permission: 'create',
  64         icon: Icons.add,
  65         routerLink: () => this.urlBuilder.getCreate(),
  66         canBePrimary: (selection: CdTableSelection) => !selection.hasSingleSelection,
  67         name: this.actionLabels.CREATE
  68       },
  69       {
  70         permission: 'create',
  71         canBePrimary: (selection: CdTableSelection) =>
  72           selection.hasSingleSelection && selectionExpired(selection),
  73         disable: (selection: CdTableSelection) =>
  74           !selection.hasSingleSelection ||
  75           selection.first().cdExecuting ||
  76           (selection.first().cdExecuting && selectionExpired(selection)) ||
  77           !selectionExpired(selection),
  78         icon: Icons.copy,
  79         routerLink: () => this.urlBuilder.getRecreate(this.selection.first().id),
  80         name: this.actionLabels.RECREATE
  81       },
  82       {
  83         permission: 'update',
  84         icon: Icons.edit,
  85         canBePrimary: (selection: CdTableSelection) =>
  86           selection.hasSingleSelection && !selectionExpired(selection),
  87         disable: (selection: CdTableSelection) =>
  88           !selection.hasSingleSelection ||
  89           selection.first().cdExecuting ||
  90           (selection.first().cdExecuting && !selectionExpired(selection)) ||
  91           selectionExpired(selection),
  92         routerLink: () => this.urlBuilder.getEdit(this.selection.first().id),
  93         name: this.actionLabels.EDIT
  94       },
  95       {
  96         permission: 'delete',
  97         icon: Icons.trash,
  98         canBePrimary: (selection: CdTableSelection) =>
  99           selection.hasSingleSelection && !selectionExpired(selection),
 100         disable: (selection: CdTableSelection) =>
 101           !selection.hasSingleSelection ||
 102           selection.first().cdExecuting ||
 103           selectionExpired(selection),
 104         click: () => this.expireSilence(),
 105         name: this.actionLabels.EXPIRE
 106       }
 107     ];
 108     this.columns = [
 109       {
 110         name: $localize`ID`,
 111         prop: 'id',
 112         flexGrow: 3
 113       },
 114       {
 115         name: $localize`Created by`,
 116         prop: 'createdBy',
 117         flexGrow: 2
 118       },
 119       {
 120         name: $localize`Started`,
 121         prop: 'startsAt',
 122         pipe: this.cdDatePipe
 123       },
 124       {
 125         name: $localize`Updated`,
 126         prop: 'updatedAt',
 127         pipe: this.cdDatePipe
 128       },
 129       {
 130         name: $localize`Ends`,
 131         prop: 'endsAt',
 132         pipe: this.cdDatePipe
 133       },
 134       {
 135         name: $localize`Status`,
 136         prop: 'status.state',
 137         cellTransformation: CellTemplate.classAdding
 138       }
 139     ];
 140   }
 141
 142   refresh() {
 143     this.prometheusService.ifAlertmanagerConfigured(() => {
 144       this.prometheusService.getSilences().subscribe(
 145         (silences) => {
 146           this.silences = silences;
 147         },
 148         () => {
 149           this.prometheusService.disableAlertmanagerConfig();
 150         }
 151       );
 152     });
 153   }
 154
 155   updateSelection(selection: CdTableSelection) {
 156     this.selection = selection;
 157   }
 158
 159   expireSilence() {
 160     const id = this.selection.first().id;
 161     const i18nSilence = $localize`Silence`;
 162     const applicationName = 'Prometheus';
 163     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
 164       itemDescription: i18nSilence,
 165       itemNames: [id],
 166       actionDescription: this.actionLabels.EXPIRE,
 167       submitActionObservable: () =>
 168         new Observable((observer: Subscriber<any>) => {
 169           this.prometheusService.expireSilence(id).subscribe(
 170             () => {
 171               this.notificationService.show(
 172                 NotificationType.success,
 173                 `${this.succeededLabels.EXPIRED} ${i18nSilence} ${id}`,
 174                 undefined,
 175                 undefined,
 176                 applicationName
 177               );
 178             },
 179             (resp) => {
 180               resp['application'] = applicationName;
 181               observer.error(resp);
 182             },
 183             () => {
 184               observer.complete();
 185               this.refresh();
 186             }
 187           );
 188         })
 189     });
 190   }
 191 }