| <!-- |
| 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 class="metron-slider-pane-details d-flex load-right-to-left dialog1x" [ngClass]="{'is-meta-alert': isMetaAlert}"> |
| |
| <div data-qe-id="preloader" class="d-flex flex-column w-100 h-100 justify-content-center align-items-center" *ngIf="!alertSources.length"> |
| <div class="spinner-border text-info" role="status"></div> |
| <div class="pt-2"><small>Loading...</small></div> |
| </div> |
| |
| <div class="container-fluid pl-0 pr-0 h-100" *ngIf="alertSources.length"> |
| <div class="h-100 d-flex"> |
| <div class="nav-container" *ngIf="!isMetaAlert"> |
| <ul class="nav flex-column"> |
| <li class="nav-item"> |
| <a |
| class="nav-link" |
| [ngClass]="{'active': activeTab === tabs.DETAILS}" |
| (click)="activeTab=tabs.DETAILS" |
| data-qe-id="details" |
| > |
| <i class="fa fa-info-circle" aria-hidden="true"></i> |
| </a> |
| </li> |
| <li class="nav-item"> |
| <a |
| class="nav-link" |
| [ngClass]="{'active': activeTab === tabs.COMMENTS}" |
| (click)="activeTab=tabs.COMMENTS" |
| data-qe-id="comments" |
| > |
| <i class="fa fa-comment" aria-hidden="true"></i> |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div class="details-container"> |
| <div class="d-flex flex-column h-100"> |
| <div class="title-container d-flex flex-row"> |
| <div class="col-md-10 px-0"> |
| <div class="form-title row mx-3"> |
| <div class="pr-3"> |
| <span appAlertSeverity [severity]="getScore(alertSource)"> </span> |
| <span> {{ getScore(alertSource) }} </span> |
| </div> |
| <div class="px-0"> |
| <span [ngClass]="{'editable-text': alertSources.length > 1}" *ngIf="!showEditor" (click)="toggleNameEditor()"> {{ (alertSource.name && alertSource.name.length > 0)? alertSource.name : alertId | centerEllipses:20 }} </span> |
| <div class="input-group" *ngIf="showEditor"> |
| <input |
| #metaAlertNameInput |
| type="text" |
| class="form-control" |
| [value]="alertSource.name" |
| [(ngModel)]="alertName" |
| (keyup)="onSaveNameInputKeyPress($event)" |
| > |
| <span |
| class="input-group-addon" |
| [ngClass]="{ disabled: isSaveNameButtonDisabled() }" |
| (click)="saveName()" |
| > |
| <i class="fa fa-check" aria-hidden="true"></i> |
| </span> |
| <span class="input-group-addon" (click)="onSaveNameInputCancel()"> |
| <i class="fa fa-times" aria-hidden="true"></i> |
| </span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="close-button-wrapper"> |
| <div class="col-md-2 pr-3"> |
| <i class="fa fa-times pull-right close-button" aria-hidden="true" (click)="goBack()"></i> |
| </div> |
| </div> |
| </div> |
| <div class="px-3 py-4 actions"> |
| <table class="w-100"> |
| <tr> |
| <td class="title"> Status</td> |
| <td [ngClass]="{'primary': selectedAlertState === alertState.ESCALATE, 'secondary': selectedAlertState !== alertState.ESCALATE}" data-name="escalate" (click)="processEscalate()">ESCALATE</td> |
| <td></td> |
| </tr> |
| <tr> |
| <td [ngClass]="{'primary': selectedAlertState === alertState.NEW, 'secondary': selectedAlertState !== alertState.NEW}" data-name="new" (click)="processNew()">NEW</td> |
| <td [ngClass]="{'primary': selectedAlertState === alertState.OPEN, 'secondary': selectedAlertState !== alertState.OPEN}" data-name="open" (click)="processOpen()">OPEN</td> |
| <td [ngClass]="{'primary': selectedAlertState === alertState.DISMISS, 'secondary': selectedAlertState !== alertState.DISMISS}" data-name="dismiss" (click)="processDismiss()">DISMISS</td> |
| </tr> |
| <tr> |
| <td></td> |
| <td [ngClass]="{'primary': selectedAlertState === alertState.RESOLVE, 'secondary': selectedAlertState !== alertState.RESOLVE}" data-name="resolve" (click)="processResolve()">RESOLVE</td> |
| <td></td> |
| </tr> |
| </table> |
| </div> |
| |
| <div class="tabContainer"> |
| <div *ngIf="activeTab === tabs.DETAILS" class="mx-3 my-3 form" > |
| <ng-container *ngFor="let alert of alertSources; let i = index;" > |
| <div class="pb-2 alert-details-title"> Alert {{ i + 1 }} of {{ alertSources.length }}</div> |
| <ul> |
| <li *ngFor="let field of alert | alertDetailsKeys"> |
| <div class="key">{{ field }}</div> |
| <div> {{ alert[field] }} </div> |
| </li> |
| </ul> |
| </ng-container> |
| </div> |
| |
| <div *ngIf="activeTab === tabs.COMMENTS" class="mx-3 my-3"> |
| <div> Comments <span *ngIf="alertCommentsWrapper.length > 0"> ({{alertCommentsWrapper.length}}) </span></div> |
| <textarea class="form-control" [(ngModel)]="alertCommentStr"> </textarea> |
| <button class="btn btn-mine_shaft_2" [disabled]="alertCommentStr.trim().length === 0" (click)="onAddComment()">ADD COMMENT</button> |
| <ng-container *ngFor="let alertCommentWrapper of alertCommentsWrapper; let i = index"> |
| <div class="comment-container" data-qe-id="comment"> |
| <i |
| class="fa fa-trash-o" |
| aria-hidden="true" |
| (click)="onDeleteComment(i)" |
| data-qe-id="delete-comment" |
| > |
| </i> |
| <div class="comment"> {{ alertCommentWrapper.alertComment.comment }} </div> |
| <div class="font-italic username-timestamp"> - {{ alertCommentWrapper.alertComment.username }} - {{alertCommentWrapper.displayTime}}</div> |
| </div> |
| </ng-container> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |