File

src/app/ceph/cluster/prometheus/prometheus-list/prometheus-list.component.ts

Implements

OnInit

Metadata

selector cd-prometheus-list
styleUrls ./prometheus-list.component.scss
templateUrl ./prometheus-list.component.html

Index

Properties
Methods

Constructor

constructor(prometheusAlertService: PrometheusAlertService, i18n: I18n, cdDatePipe: CdDatePipe)
Parameters :
Name Type Optional
prometheusAlertService PrometheusAlertService No
i18n I18n No
cdDatePipe CdDatePipe No

Methods

ngOnInit
ngOnInit()
Returns : void
updateSelection
updateSelection(selection: CdTableSelection)
Parameters :
Name Type Optional
selection CdTableSelection No
Returns : void

Properties

columns
Type : CdTableColumn[]
customCss
Type : object
Default value : { 'label label-danger': 'active', 'label label-warning': 'unprocessed', 'label label-info': 'suppressed' }
externalLinkTpl
Type : TemplateRef<any>
Decorators :
@ViewChild('externalLinkTpl')
Public prometheusAlertService
Type : PrometheusAlertService
selection
Default value : new CdTableSelection()
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';
import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
import { CdTableColumn } from '../../../../shared/models/cd-table-column';
import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
import { CdDatePipe } from '../../../../shared/pipes/cd-date.pipe';
import { PrometheusAlertService } from '../../../../shared/services/prometheus-alert.service';

@Component({
  selector: 'cd-prometheus-list',
  templateUrl: './prometheus-list.component.html',
  styleUrls: ['./prometheus-list.component.scss']
})
export class PrometheusListComponent implements OnInit {
  @ViewChild('externalLinkTpl')
  externalLinkTpl: TemplateRef<any>;
  columns: CdTableColumn[];
  selection = new CdTableSelection();
  customCss = {
    'label label-danger': 'active',
    'label label-warning': 'unprocessed',
    'label label-info': 'suppressed'
  };

  constructor(
    // NotificationsComponent will refresh all alerts every 5s (No need to do it here as well)
    public prometheusAlertService: PrometheusAlertService,
    private i18n: I18n,
    private cdDatePipe: CdDatePipe
  ) {}

  ngOnInit() {
    this.columns = [
      {
        name: this.i18n('Name'),
        prop: 'labels.alertname',
        flexGrow: 2
      },
      {
        name: this.i18n('Job'),
        prop: 'labels.job',
        flexGrow: 2
      },
      {
        name: this.i18n('Severity'),
        prop: 'labels.severity'
      },
      {
        name: this.i18n('State'),
        prop: 'status.state',
        cellTransformation: CellTemplate.classAdding
      },
      {
        name: this.i18n('Started'),
        prop: 'startsAt',
        pipe: this.cdDatePipe
      },
      {
        name: this.i18n('URL'),
        prop: 'generatorURL',
        sortable: false,
        cellTemplate: this.externalLinkTpl
      }
    ];
  }

  updateSelection(selection: CdTableSelection) {
    this.selection = selection;
  }
}
<cd-table [data]="prometheusAlertService.alerts"
          [columns]="columns"
          identifier="fingerprint"
          [forceIdentifier]="true"
          [customCss]="customCss"
          selectionType="single"
          (updateSelection)="updateSelection($event)">
  <tabset cdTableDetail *ngIf="selection.hasSingleSelection">
    <tab i18n-heading
         heading="Details">
      <cd-table-key-value [renderObjects]="true"
                          [hideEmpty]="true"
                          [appendParentKey]="false"
                          [data]="selection.first()"
                          [customCss]="customCss"
                          [autoReload]="false">
      </cd-table-key-value>
    </tab>
  </tabset>
</cd-table>

<ng-template #externalLinkTpl
             let-row="row"
             let-value="value">
  <a [href]="value" target="_blank"><i class="fa fa-line-chart"></i> Source</a>
</ng-template>

./prometheus-list.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""