Commit f416b8f4 authored by MAGHOUZ's avatar MAGHOUZ
Browse files

Getting list of events related to a monitored item.

parent e04e7b6a
......@@ -9138,6 +9138,21 @@
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
"dev": true
},
"ngx-json-viewer": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/ngx-json-viewer/-/ngx-json-viewer-3.0.2.tgz",
"integrity": "sha512-XBj0DgUDIBOeJuAczlFQIIMCaELJGoEbvjBWIXHIh2QebiB5lY6itslRkbE5TAgFn1bYK+2ToxqwspLgP4DDJg==",
"requires": {
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
}
}
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
......
......@@ -22,21 +22,28 @@ import { AgGridModule } from 'ag-grid-angular';
import {Monitored_items_listComponent} from '../../monitored_items/monitored_items_list.component';
import {ActionsCellRenderer} from '../../monitored_items/actions-cell-renderer/actions-cell-renderer.component';
import {TicketsCellRenderer} from '../../monitored_items/tickets-cell-renderer/tickets-cell-renderer.component';
import {ElementCellRenderer} from '../../monitored_items/element-cell-renderer/element-cell-renderer.component';
import {Monitored_events_listComponent} from '../../monitored_events/monitored_events_list.component';
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';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(AdminLayoutRoutes),
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatRippleModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatTooltipModule,
AgGridModule.withComponents([ActionsCellRenderer]),
],
imports: [
CommonModule,
RouterModule.forChild(AdminLayoutRoutes),
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatRippleModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatTooltipModule,
AgGridModule.withComponents([ActionsCellRenderer]),
NgxJsonViewerModule,
MatListModule,
],
declarations: [
DashboardComponent,
UserProfileComponent,
......@@ -48,8 +55,11 @@ import {TicketsCellRenderer} from '../../monitored_items/tickets-cell-renderer/t
UpgradeComponent,
MessageListComponent,
Monitored_items_listComponent,
Monitored_events_listComponent,
Monitored_Item_Details_Component,
ActionsCellRenderer,
TicketsCellRenderer
TicketsCellRenderer,
ElementCellRenderer
]
})
......
......@@ -10,6 +10,7 @@ import { NotificationsComponent } from '../../notifications/notifications.compon
import { UpgradeComponent } from '../../upgrade/upgrade.component';
import {MessageListComponent} from '../../messages/message-list.component';
import {Monitored_items_listComponent} from '../../monitored_items/monitored_items_list.component';
import {Monitored_events_listComponent} from '../../monitored_events/monitored_events_list.component';
export const AdminLayoutRoutes: Routes = [
// {
......@@ -65,5 +66,6 @@ export const AdminLayoutRoutes: Routes = [
//{ path: 'upgrade', component: UpgradeComponent },
{ path: 'cops/items_xml', component: MessageListComponent },
{ path: 'cops/items', component: Monitored_items_listComponent },
{ path: 'cops/monitored_item/:monitored_item_id', component: Monitored_events_listComponent },
];
export class MonitoredEvent {
id: string;
creationDate: Date;
eventDate: Date;
levelFk: string;
subject: string;
message: string;
monitoredItemFk: string;
constructor(id, creationDate, eventDate, levelFk, subject, message, monitoredItemFk) {
this.id = id;
this.creationDate = creationDate;
this.eventDate = eventDate;
this.levelFk = levelFk;
this.subject = subject;
this.message = message;
this.monitoredItemFk = monitoredItemFk;
}
}
import { TestBed } from '@angular/core/testing';
import { Monitored_eventsService } from './monitored_events.service';
describe('ReportService', () => {
let service: Monitored_eventsService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(Monitored_eventsService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable, of, Subject} from 'rxjs';
import {catchError, map} from 'rxjs/operators';
import {MonitoredEvent} from './monitored_event.model';
import {Apollo, gql} from 'apollo-angular';
import {MonitoredItem} from '../monitored_items/monitored_item.model';
@Injectable({
providedIn: 'root'
})
export class Monitored_eventsService {
private serverUrl = 'http://localhost/graphql'
// Observable string sources
private monitoredEventsSource = new Subject<MonitoredEvent>();
// Observable string streams
monitoredEvents$ = this.monitoredEventsSource.asObservable();
constructor(private apollo: Apollo) { }
searchEvents(monitored_item_id) {
console.log("searchEvents(monitored_item_id)",monitored_item_id)
this.apollo
.query({
query: gql`
query eventsByMonitoredItemId($monitored_item_id: String!)
{
eventsByMonitoredItemId(q: $monitored_item_id){
id
creationDate
eventDate
levelFk
subject
message
monitoredItemFk
}
}
`,
variables:{monitored_item_id:monitored_item_id},
})
.subscribe((result: any) => {
console.log("searchEvents(monitored_item_id) result",result)
for (var i = 0; i<this.result2ME(result?.data.eventsByMonitoredItemId).length; i++){
this.monitoredEventsSource.next(this.result2ME(result?.data.eventsByMonitoredItemId)[i])
}
})
;
}
result2ME(monitoredEventsList: Array<any>): MonitoredEvent[] {
let resultMonitoredEventsList: MonitoredEvent[] = [];
for(let i = 0; i<monitoredEventsList.length; i++) {
let monitoredEvent: MonitoredEvent;
monitoredEvent = new MonitoredEvent(
monitoredEventsList[i].id,
monitoredEventsList[i].creationDate,
monitoredEventsList[i].eventDate,
monitoredEventsList[i].levelFk,
monitoredEventsList[i].subject,
monitoredEventsList[i].message,
monitoredEventsList[i].monitoredItemFk,
);
resultMonitoredEventsList.push(monitoredEvent);
};
return resultMonitoredEventsList;
}
}
<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">
<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>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Monitored_events_listComponent } from './monitored_events_list.component';
describe('ReportsComponent', () => {
let component: Monitored_events_listComponent;
let fixture: ComponentFixture<Monitored_events_listComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ Monitored_events_listComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(Monitored_events_listComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import {Component, OnInit, ViewChild} from '@angular/core';
import {AgGridAngular} from 'ag-grid-angular';
import {Monitored_eventsService} from './monitored_events.service';
import {MonitoredEvent} from './monitored_event.model';
import {MatDialog} from '@angular/material/dialog';
import {Subscription} from 'rxjs/Subscription';
import {ActivatedRoute, Router} from '@angular/router';
import {MonitoredItem} from '../monitored_items/monitored_item.model';
@Component({
selector: 'monitored-events-list',
templateUrl: './monitored_events_list.component.html',
styleUrls: ['./monitored_events_list.component.css'],
providers: [Monitored_eventsService]
})
export class Monitored_events_listComponent implements OnInit {
@ViewChild('agGrid') agGrid: AgGridAngular;
public monitored_eventsService: Monitored_eventsService;
private gridApi;
private gridColumnApi;
columnDefs = [
{
field: 'eventDate',
headerName: 'Event date',
sortable: true,
filter: 'agDateColumnFilter',
maxWidth: 200,
sort: 'desc'
},
{
field: 'levelFk',
headerName: 'Level',
sortable: true,
filter: 'agTextColumnFilter',
maxWidth: 200
},
{
field: 'subject',
headerName: 'Subject',
sortable: true,
filter: 'agTextColumnFilter',
},
];
defaultColDef = {
flex: 1,
minWidth: 250,
sortable: true,
filter: true,
resizable: true
};
rowData: MonitoredEvent[] = [];
rowSelection='single'
messageType = '1';
selectedRows: string[];
getRowNodeId = function(data) {
return data.id;
};
selectAllSubscription: Subscription;
MonitoredItemSubscription: Subscription;
sub: any;
mi_id: string
private selectedEventMessage: any;
constructor(private route: ActivatedRoute, public monitoredeventsService: Monitored_eventsService,public dialog: MatDialog) {
this.monitored_eventsService = monitoredeventsService;
}
ngOnInit(): void {
this.sub = this.route.params.subscribe(params => {
this.mi_id = params.monitored_item_id;
});
this.selectAllSubscription = this.monitored_eventsService.monitoredEvents$.subscribe(
monitored_event => {
this.rowData.push(monitored_event)
//this.gridApi.applyTransactionAsync({ add: [monitored_event] })
}
);
this.monitored_eventsService.searchEvents(this.mi_id);
}
onFirstDataRendered(params) {
this.gridColumnApi.sizeColumnsToFit();
this.gridApi.getDisplayedRowAtIndex(0).setSelected(true);
}
onGridReady(params) {
console.log("onGridReady")
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.sizeToFit()
//this.autoSizeAll(true)
}
onSelectionChanged($event: any) {
var selectedRows = this.gridApi.getSelectedRows();
this.selectedEventMessage = selectedRows.length === 1 ? JSON.parse(selectedRows[0].message) : '';
}
autoSizeAll(skipHeader) {
var allColumnIds = [];
this.gridColumnApi.getAllColumns().forEach(function (column) {
allColumnIds.push(column.colId);
});
this.gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
}
sizeToFit() {
this.gridApi.sizeColumnsToFit();
}
ngOnDestroy() {
this.selectAllSubscription.unsubscribe();
}
}
/*.card{*/
/* width: 20%;*/
/*}*/
.mat-list-item{
word-break: break-all;
}
\ No newline at end of file
<div class="card">
<div class="card-header card-header-warning">
<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>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Monitored_Item_Details_Component } from './monitored_item_details.component';
describe('ReportsComponent', () => {
let component: Monitored_Item_Details_Component;
let fixture: ComponentFixture<Monitored_Item_Details_Component>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ Monitored_Item_Details_Component ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(Monitored_Item_Details_Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import {AgGridAngular} from 'ag-grid-angular';
import {MatDialog} from '@angular/material/dialog';
import {Subscription} from 'rxjs/Subscription';
import {MonitoredItem} from '../../monitored_items/monitored_item.model';
import {Monitored_itemsService} from '../../monitored_items/monitored_items.service';
@Component({
selector: 'monitored-item-details',
templateUrl: './monitored_item_details.component.html',
styleUrls: ['./monitored_item_details.component.css']
})
export class Monitored_Item_Details_Component implements OnInit {
monitored_itemService: Monitored_itemsService
monitoredItemDetailsSubscription: Subscription;
@Input() monitored_item_id: string
monitored_item: MonitoredItem
showFiller = false;
constructor(public monitoredItemsService: Monitored_itemsService) {
this.monitored_itemService = monitoredItemsService;
}
ngOnInit(): void {
this.monitoredItemDetailsSubscription = this.monitored_itemService.monitoredItemDetails$.subscribe(
monitored_item => {
this.monitored_item = monitored_item
}
);
this.monitored_itemService.getMonitoredItemData(this.monitored_item_id);
}
ngOnDestroy() {
this.monitoredItemDetailsSubscription.unsubscribe();
}
}
<a [routerLink]="" (click)="goToLink(monitored_item_id)">
{{element}}&nbsp;&nbsp;
</a>
import { Component } from "@angular/core";
import {ICellRendererParams} from 'ag-grid-community';
import {AgRendererComponent} from 'ag-grid-angular';
import {Router} from '@angular/router';
@Component({
selector: 'element-cell-renderer',
templateUrl: './element-cell-renderer.component.html'
})
export class ElementCellRenderer implements AgRendererComponent {
private params: any;
element: string;
monitored_item_id: any;
constructor(private router: Router) { }
refresh(params: ICellRendererParams): boolean {
this.params = params;
return true;
}
agInit(params: ICellRendererParams): void {
this.params = params;
this.element = params.data.logicalPath;
this.monitored_item_id = params.data.id;
}
ngOnDestroy() {
// no need to remove the button click handler
// https://stackoverflow.com/questions/49083993/does-angular-automatically-remove-template-event-listeners
}
goToLink(url: any) {
this.router.navigate(['cops/monitored_item', url]);
}
}
\ No newline at end of file
......@@ -10,7 +10,7 @@
<mat-form-field>
<mat-label>Tickets</mat-label>
<input matInput [(ngModel)]="tickets_to_add">
<button mat-button *ngIf="tickets_to_add.length > 0" matSuffix mat-icon-button aria-label="Clear" (click)="tickets_to_add=[]">
<button mat-button *ngIf="tickets_to_add.length > 0" matSuffix mat-icon-button aria-label="Clear" (click)="tickets_to_add=''">
<i class="material-icons">clear</i>
</button>
</mat-form-field>
......
......@@ -9,7 +9,6 @@ import {Apollo, gql} from 'apollo-angular';
providedIn: 'root'
})
export class Monitored_itemsService {
private serverUrl = 'http://localhost/graphql'
// Observable string sources
private monitoredItemsSource = new Subject<MonitoredItem>();
......@@ -26,9 +25,16 @@ export class Monitored_itemsService {
// Observable string streams
deletedMonitoredItems = this.deletedMonitoredItemsSource.asObservable();
// Observable string sources
private monitoredItemDetailsSource = new Subject<MonitoredItem>();
// Observable string streams
monitoredItemDetails$ = this.monitoredItemDetailsSource.asObservable();
constructor(private http: HttpClient, private apollo: Apollo) { }
searchMessages(type: string) {
console.log("searchMessages")