| <!-- |
| Licensed to the Apache Software |
| Foundation (ASF) under one or more contributor license agreements. See the |
| NOTICE file distributed with this work for additional information regarding |
| copyright ownership. The ASF licenses this file to You under the Apache License, |
| Version 2.0 (the "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| http://www.apache.org/licenses/LICENSE-2.0 |
| Unless required by applicable law or agreed to in writing, software distributed |
| under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES |
| OR CONDITIONS OF ANY KIND, either express or implied. See the License for |
| the specific language governing permissions and limitations under the License. |
| --> |
| <div role="tablist" class="tree-wrapper" aria-multiselectable="true"> |
| <div class="card" *ngFor="let group of topGroups; let i = index;" [attr.data-name]="group.key"> |
| <div class="card-header" role="tab" [attr.id]="'title-' + i"> |
| <div class="hexagon" appAlertSeverityHexagon [severity]="group.score"> |
| <span *ngIf="group.score < 1000" class="dash-score">{{ group.score }}</span> |
| <span *ngIf="group.score >= 1000" class="dash-score">999<sup>+</sup></span> |
| </div> |
| <div class="mrow top-group" (click)="toggleTopLevelGroup(group)"> |
| <div class="col-5 text-light severity-padding"> <span class="title"> {{ group.key | centerEllipses:45 }} </span> </div> |
| <div class="col-5 text-light two-line"> <span class=""> ALERTS </span> <br> <span class="title"> {{ group.total | number }} </span> </div> |
| <div class="col-1 text-right pr-4"> |
| <i class="fa fa-link top-group-link" aria-hidden="true" (click)="createMetaAlert($event, group, i)" data-animation="false" data-toggle="tooltip" data-placement="left" title="Merge Alerts"></i> |
| </div> |
| <div class="col-1 text-right pr-4"> |
| <i class="down-arrow" data-animation="false" data-toggle="tooltip" data-placement="left" title="Open Group" |
| aria-expanded="false" [attr.href]="'#body-' + i" [attr.aria-controls]="'body-' + i"> </i> |
| </div> |
| </div> |
| </div> |
| <div class="collapse" role="tabpanel" [ngClass]="{'show': group.expand}"> |
| <div class="card-body"> |
| <div class="table-wrapper"> |
| <table class="table table-sm" metron-config-table [data]="alerts" [cellSelectable]="true" (onSort)="sortTreeSubGroup($event, group)" style="white-space: nowrap;" (window:resize)="resize()" #table> |
| <thead> |
| <tr> |
| <th> </th> |
| <th class="table-score-col"> |
| <metron-config-sorter [type]="'number'" [sortBy]="threatScoreFieldName()" [sortOnCol]="group.sortEvent.sortBy" [sortOrder]="group.sortEvent.sortOrder"> Score </metron-config-sorter> |
| </th> |
| <th *ngFor="let column of alertsColumnsToDisplay" [id]="column.name"> |
| <metron-config-sorter [type]="column.type" [sortBy]="column.name" title="{{column.name}}" [sortOnCol]="group.sortEvent.sortBy" [sortOrder]="group.sortEvent.sortOrder"> {{ column.name | columnNameTranslate | centerEllipses:15 }}</metron-config-sorter> |
| </th> |
| <th style="width: 15px"></th> |
| <th style="width:15px"><input id="select-deselect-all-{{ group.key }}" class="fontawesome-checkbox" type="checkbox" (click)="selectAllGroupRows($event, group)"> |
| <label for="select-deselect-all-{{ group.key }}"></label> |
| </th> |
| </tr> |
| </thead> |
| <tbody> |
| <ng-container> |
| <tr *ngFor="let alert of group.response.results" [ngClass]="{'selected' : selectedAlerts.indexOf(alert) != -1, 'd-none': !group.expand || !group.show}" (click)="showDetails($event, alert)"> |
| <td [attr.colspan]="2" (click)="addFilter(threatScoreFieldName(), getScore(alert.source))"> |
| <div appAlertSeverity [severity]="getScore(alert.source)"> |
| <a> {{ hasScore(alert.source) ? getScore(alert.source) : '-' }}</a> |
| </div> |
| </td> |
| <td #cell *ngFor="let column of alertsColumnsToDisplay" [attr.data-name]="column.name"> |
| <a title="{{getValue(alert, column, true)}}" style="color:#689AA9" (click)="addFilter(column.name, getValue(alert, column, false))">{{ getValue(alert, column, true) | centerEllipses:20:cell }}</a> |
| </td> |
| <td> <i class="fa fa-comments-o" aria-hidden="true" *ngIf="alert.source.comments && alert.source.comments.length > 0"></i> </td> |
| <td> |
| <input id="{{ alert.id }}" class="fontawesome-checkbox" type="checkbox" name="{{alert.id}}" (click)="selectRow($event, alert)" [checked]="selectedAlerts.indexOf(alert) != -1"> |
| <label attr.for="{{ alert.id }}"></label> |
| </td> |
| </tr> |
| |
| <tr *ngIf="group.response.results.length > 0" class="no-hover" [ngClass]="{'d-none': !group.expand || !group.show}"> |
| <td [attr.colspan]="alertsColumnsToDisplay.length + 3" class="text-right"> |
| <metron-table-pagination [(pagination)]="group.pagingData" (pageChange)="groupPageChange(group)"> </metron-table-pagination> |
| </td> |
| </tr> |
| </ng-container> |
| <ng-container *ngFor="let subGroup of group.treeSubGroups;let i = index"> |
| |
| <tr class="table-group-row" [ngClass]="{'d-none': !subGroup.show}" (click)="toggleSubGroups(group, subGroup, i)" [attr.data-name]="subGroup.key"> |
| <td [attr.colspan]="alertsColumnsToDisplay.length + 2" [ngStyle]="{'padding-left.px': (16 * (subGroup.level -1))}"> |
| <span class="table-group-icon-col" data-animation="false" data-toggle="tooltip" data-placement="bottom" title="Open Group"> |
| <i class="fa" aria-hidden="true" [ngClass]="{'fa-caret-down': subGroup.expand, 'fa-caret-right': !subGroup.expand}"></i> |
| </span> |
| <span class="score" appAlertSeverity [severity]="subGroup.score"> {{ subGroup.score }} </span> |
| <span class="group-value"> <span class="text-light">{{ subGroup.key }}</span> ({{ subGroup.total }})</span> |
| </td> |
| <td> |
| <i style="color: #32ABDF;" class="fa fa-link" aria-hidden="true" (click)="createMetaAlert($event, subGroup, i)" data-animation="false" data-toggle="tooltip" data-placement="left" title="Merge Alerts"></i> |
| </td> |
| <td> </td> |
| </tr> |
| |
| <tr *ngFor="let alert of subGroup.response.results" [ngClass]="{'selected' : selectedAlerts.indexOf(alert) != -1, 'd-none': !subGroup.expand || !subGroup.show}" (click)="showDetails($event, alert)"> |
| <td [attr.colspan]="2" [ngStyle]="{'padding-left.px': (16 * (subGroup.level -1)) + 23}" (click)="addFilter(threatScoreFieldName(), getScore(alert.source))"> |
| <div appAlertSeverity [severity]="getScore(alert.source)"> |
| <a> {{ hasScore(alert.source) ? getScore(alert.source) : '-' }}</a> |
| </div> |
| </td> |
| <td #cell *ngFor="let column of alertsColumnsToDisplay" [attr.data-name]="column.name"> |
| <a (click)="addFilter(column.name, getValue(alert, column, false))" title="{{getValue(alert, column, true)}}" style="color:#689AA9" (click)="addFilter(column.name, getValue(alert, column, false))">{{ getValue(alert, column, true) | centerEllipses:20:cell }}</a> |
| </td> |
| <td> <i class="fa fa-comments-o" aria-hidden="true" *ngIf="alert.source.comments && alert.source.comments.length > 0"></i> </td> |
| <td> |
| <input id="{{ alert.id }}" class="fontawesome-checkbox" type="checkbox" name="{{alert.id}}" (click)="selectRow($event, alert)" [checked]="selectedAlerts.indexOf(alert) != -1"> |
| <label attr.for="{{ alert.id }}"></label> |
| </td> |
| </tr> |
| |
| <tr *ngIf="subGroup.response.results.length > 0" class="no-hover" [ngClass]="{'d-none': !subGroup.expand || !subGroup.show}"> |
| <td [attr.colspan]="alertsColumnsToDisplay.length + 3" class="text-right"> |
| <metron-table-pagination [(pagination)]="subGroup.pagingData" (pageChange)="groupPageChange(subGroup)"> </metron-table-pagination> |
| </td> |
| </tr> |
| |
| </ng-container> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |