Commit dcaf452d authored by MAGHOUZ's avatar MAGHOUZ
Browse files

Monitored item details is added to events page as a side nav.

parent f416b8f4
......@@ -27,6 +27,8 @@ import {Monitored_events_listComponent} from '../../monitored_events/monitored_e
import {Monitored_Item_Details_Component} from '../../monitored_events/monitored_item_details/monitored_item_details.component';
import {NgxJsonViewerModule} from 'ngx-json-viewer';
import {MatListModule} from '@angular/material/list';
import {MatSidenavModule} from '@angular/material/sidenav';
@NgModule({
imports: [
......@@ -43,6 +45,7 @@ import {MatListModule} from '@angular/material/list';
AgGridModule.withComponents([ActionsCellRenderer]),
NgxJsonViewerModule,
MatListModule,
MatSidenavModule
],
declarations: [
DashboardComponent,
......
.d-container {
background-color: #eee;
}
mat-drawer-content {
padding: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.drawer-container {
width: 33vw;
background-color: #eee;
}
.mat-drawer.mat-drawer-end {
background-color: #eee;
}
.mat-drawer-side {
border: none;
}
.slide-button {
width: 100%;
text-align: end;
}
.events {
max-height: 33vh;
}
\ No newline at end of file
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<ag-grid-angular
#agGrid
class="ag-theme-material"
domLayout='autoHeight'
rowHeight="40"
headerHeight="50"
[rowData]="rowData"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowSelection]="rowSelection"
(firstDataRendered)="onFirstDataRendered($event)"
(gridReady)="onGridReady($event)"
[getRowNodeId]="getRowNodeId"
(selectionChanged)="onSelectionChanged($event)"
></ag-grid-angular>
</div>
</div>
</div>
<div class="col-md-4">
<mat-drawer-container class="d-container" hasBackdrop="false">
<mat-drawer #drawer mode="side" position="end">
<div class="drawer-container">
<monitored-item-details [monitored_item_id]="mi_id"></monitored-item-details>
</div>
</div>
<!-- <div class="row">-->
<!-- <div class="col-md-12">-->
<!-- <monitored-item-details [monitored_item_id]="mi_id"></monitored-item-details>-->
<!-- </div>-->
<!-- </div>-->
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<ngx-json-viewer [json]="selectedEventMessage"></ngx-json-viewer>
</div>
</mat-drawer>
<mat-drawer-content>
<div class="slide-button">
<button mat-raised-button (click)="drawer.toggle()">
<span class="material-icons">
menu
</span>
</button>
</div>
<!-- List of events -->
<div class="card">
<div class="card-body">
<ag-grid-angular style="height: 40vh;"
#agGrid
class="ag-theme-material"
domLayout='normal'
rowHeight="40"
headerHeight="50"
[rowData]="rowData"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowSelection]="rowSelection"
(firstDataRendered)="onFirstDataRendered($event)"
(gridReady)="onGridReady($event)"
[getRowNodeId]="getRowNodeId"
(selectionChanged)="onSelectionChanged($event)"
></ag-grid-angular>
</div>
</div>
<!-- Message -->
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title">Message: </h4>
<p class="card-category">{{selectedEventSubject}}</p>
<!-- <p class="card-category">sub title</p>-->
</div>
<div class="card-body">
<ngx-json-viewer [json]="selectedEventMessage"></ngx-json-viewer>
</div>
</div>
</div>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>
\ No newline at end of file
......@@ -69,6 +69,7 @@ export class Monitored_events_listComponent implements OnInit {
mi_id: string
private selectedEventMessage: any;
private selectedEventSubject: any;
constructor(private route: ActivatedRoute, public monitoredeventsService: Monitored_eventsService,public dialog: MatDialog) {
this.monitored_eventsService = monitoredeventsService;
......@@ -103,6 +104,7 @@ export class Monitored_events_listComponent implements OnInit {
onSelectionChanged($event: any) {
var selectedRows = this.gridApi.getSelectedRows();
this.selectedEventMessage = selectedRows.length === 1 ? JSON.parse(selectedRows[0].message) : '';
this.selectedEventSubject = selectedRows.length === 1 ? selectedRows[0].subject : '';
}
autoSizeAll(skipHeader) {
......@@ -120,5 +122,4 @@ export class Monitored_events_listComponent implements OnInit {
ngOnDestroy() {
this.selectAllSubscription.unsubscribe();
}
}
<div class="card">
<div class="card-header card-header-warning">
<div class="card-header card-header-primary">
<h4 class="card-title">Monitored item Details</h4>
<!-- <p class="card-category">sub title</p>-->
</div>
<div class="card-body">
<mat-list>
<mat-list-item>Monitored item:</mat-list-item>
<mat-list-item> {{monitored_item.logicalPath}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Type:</mat-list-item>
<mat-list-item> {{monitored_item.type}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Group:</mat-list-item>
<mat-list-item> {{monitored_item.logicalGroup}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Update date:</mat-list-item>
<mat-list-item> {{monitored_item.updateDate}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Creation date:</mat-list-item>
<mat-list-item> {{monitored_item.creationDate}}</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<!-- <div *ngIf="monitored_item != undefined">-->
<div class="card-body">
<mat-list>
<mat-list-item>Monitored item:</mat-list-item>
<mat-list-item> {{monitored_item.logicalPath}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Type:</mat-list-item>
<mat-list-item> {{monitored_item.type}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Status:</mat-list-item>
<mat-list-item> {{monitored_item.statusFk}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Group:</mat-list-item>
<mat-list-item> {{monitored_item.logicalGroup}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Update date:</mat-list-item>
<mat-list-item> {{monitored_item.updateDate}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Creation date:</mat-list-item>
<mat-list-item> {{monitored_item.creationDate}}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Associated tickets:</mat-list-item>
<mat-list-item> {{monitored_item.tickets}}</mat-list-item>
</mat-list>
</div>
</div>
<!-- </div>-->
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment