UTMStack/frontend/src/app/dashboard/dashboard-overview/dashboard-overview.component.html at 86c2ed023c7b2cdb610d61e3fd49886761832f4e · utmstack/UTMStack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div class="container-fluid dashboard-container px-1 pt-2">
  <div *ngIf="!pdfExport" class="d-flex justify-content-between align-items-center mb-2">
    <h5 class="card-title label-header mb-0 text-uppercase label-header">Overview</h5>
    <div class="header-elements d-flex justify-content-end align-items-center">
      <app-refresh-filter></app-refresh-filter>
      <app-elastic-filter-time [invertContent]="true"
                               [isEmitter]="true"
                               container="body"></app-elastic-filter-time>
      <button (click)="exportToPdf()"
              [disabled]="pdfExport" class="btn utm-button utm-button-primary ml-2">
        <i [ngClass]="pdfExport?'icon-download10':'icon-file-pdf'" class="mr-1"></i>
        {{pdfExport ? 'Generating...' : 'Save to PDF'}}
      </button>
    </div>
  </div>
  <div *ngIf="!preparingPrint" class="report-loading"></div>
  <app-utm-report-header *ngIf="pdfExport" [reportName]="'UTMSTACK Overview'"></app-utm-report-header>
  <div [ngClass]="{'mt-3':pdfExport}" id="utmDashboardAlert">
    <div class="w-100 border-bottom-grey-100 border-bottom-1 mb-3 pb-2">
      <label class="font-weight-bold text-uppercase">Alerts</label>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-12 col-sm-12">
        <app-chart-alert-daily-week (loaded)="onRun()"></app-chart-alert-daily-week>
      </div>
      <div class="col-lg-8 col-md-12 col-sm-12">
        <app-chart-alert-by-status (loaded)="onRun()"></app-chart-alert-by-status>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3 col-md-12 col-sm-12">
        <app-chart-common-pie [colorsMap]="alertSeverityColorMap"
                              [endpoint]="'count-alerts-by-severity'"
                              [header]="'Alerts by severity'"
                              [navigateUrl]="ALERT_ROUTE"
                              [paramClick]="paramAlertSeverityCLick"
                              [params]="paramsAlertSeverity"
                              [type]="RefreshType.CHART_COMMON_PIE_SEVERITY"
                              (loaded)="onRun()">
        </app-chart-common-pie>
      </div>
      <div class="col-lg-5 col-md-12 col-sm-12">
        <app-chart-alert-by-category [refreshInterval]="refreshInterval"
                                     (loaded)="onRun()">
        </app-chart-alert-by-category>
      </div>
      <div class="col-lg-4 col-md-12 col-sm-12">
        <app-chart-common-table [endpoint]="'top-alerts'"
                                [header]="'Top 20 Alerts'"
                                [navigateUrl]="ALERT_ROUTE"
                                [paramClick]="tableTopAlertsParamsClick"
                                [params]="tableTopAlertsParams"
                                [type]="RefreshType.CHART_COMMON_TABLE_TOP_ALERT"
                                (loaded)="onRun()">
        </app-chart-common-table>
      </div>
    </div>


    <!--    EVENTS-->
    <div class="w-100 border-bottom-grey-100 border-bottom-1 mb-3 pb-2">
      <label class="font-weight-bold text-uppercase">Logx</label>
    </div>

    <div class="row">
      <div class="col-lg-3 col-md-12 col-sm-12">
        <app-chart-common-pie [endpoint]="'count-events-by-type'"
                              [header]="'Events by type'"
                              [navigateUrl]="LOG_ANALYZER_ROUTE"
                              [paramClick]="paramEventByTypeCLick"
                              [params]="paramsEventByType"
                              (loaded)="onRun()"
                              [type]="RefreshType.CHART_COMMON_PIE_EVENT"></app-chart-common-pie>
      </div>
      <div class="col-lg-5 col-md-12 col-sm-12">
        <app-chart-event-in-time [type]="RefreshType.CHART_EVENT_IN_TIME"
                                 (loaded)="onRun()"></app-chart-event-in-time>
      </div>
      <div class="col-lg-4 col-md-12 col-sm-12">
        <app-chart-common-table [endpoint]="'top-windows-events'"
                                [header]="'Top 20 windows event'"
                                [navigateUrl]="LOG_ANALYZER_ROUTE"
                                [paramClick]="paramEvenTopCLick"
                                [params]="paramsTopEvent"
                                [type]="RefreshType.CHART_COMMON_TABLE_TOP_EVENT"
                                (loaded)="onRun()">
        </app-chart-common-table>
      </div>
    </div>


  </div>
</div>