Commit 4b6d9859 authored by MAGHOUZ's avatar MAGHOUZ
Browse files

Loading and displaying log file content

parent df6fa20c
......@@ -6,8 +6,9 @@ export class MonitoredEvent {
subject: string;
message: string;
monitoredItemFk: string;
logFile: string;
constructor(id, creationDate, eventDate, levelFk, subject, message, monitoredItemFk) {
constructor(id, creationDate, eventDate, levelFk, subject, message, monitoredItemFk,logFile) {
this.id = id;
this.creationDate = creationDate;
this.eventDate = eventDate;
......@@ -15,5 +16,6 @@ export class MonitoredEvent {
this.subject = subject;
this.message = message;
this.monitoredItemFk = monitoredItemFk;
this.logFile = logFile;
}
}
......@@ -39,6 +39,7 @@ export class Monitored_eventsService {
" levelFk"+
" subject"+
" message"+
" logFile"+
" }"+
" }"+
" }"+
......@@ -52,4 +53,20 @@ export class Monitored_eventsService {
errorPolicy: 'all'
});
}
getLogFileContent(event_id: string): Observable<any>{
const GET_LOG_FILE_CONTENT = "" +
"query logFile($event_id: String!)"+
"{"+
" logFile(q:$event_id)" +
"}";
return this.apollo.query({
query: gql(GET_LOG_FILE_CONTENT),
variables: {
event_id:event_id
},
errorPolicy: 'all'
});
}
}
......@@ -31,6 +31,10 @@ th.mat-header-cell{
padding: 0 10px 0 10px;
}
.mat-row:hover {
cursor: pointer;
}
.slide-button {
width: 100%;
text-align: end;
......@@ -38,10 +42,30 @@ th.mat-header-cell{
.events {
overflow: auto;
max-height: 41vh;
min-height: 33vh;
max-height: 29vh;
min-height: 23vh;
}
table {
width: 100%;
}
\ No newline at end of file
}
.log-content {
overflow: auto;
max-height: 39vh;
min-height: 20vh;
}
.message {
overflow: auto;
max-height: 39vh;
min-height: 20vh;
}
/*.spinner-container {*/
/* z-index: 1;*/
/* position: fixed;*/
/* top: 50%;*/
/* left: 50%;*/
/* transform: translate(-50%, -50%);*/
/*}*/
\ No newline at end of file
......@@ -5,7 +5,7 @@
<monitored-item-details [monitored_item_id]="mi_id"></monitored-item-details>
</div>
</mat-drawer>
<mat-drawer-content>
<mat-drawer-content style="overflow: hidden;">
<div class="slide-button">
<button mat-raised-button (click)="drawer.toggle()">
<span class="material-icons">
......@@ -48,7 +48,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
[style.background]="row.node.id==selectedId?'#eee':'inherit'"
[style.background]="row.node.id==selectedEvent?.id ? '#eee':'inherit'"
(click)="$event.stopPropagation();toggleEvent(row.node);"
></tr>
</table>
......@@ -57,18 +57,49 @@
<mat-paginator [length]="dataSource.totalCount" [pageSize]="page_size" ></mat-paginator>
</div>
</div>
<!-- Message -->
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title" *ngIf="selectedEventSubject">Message: </h4>
<h4 style="text-align: center" class="card-title" *ngIf="!selectedEventSubject">Select an event from the table above for more information</h4>
<p class="card-category">{{selectedEventSubject}}</p>
<!-- <p class="card-category">sub title</p>-->
<div class="row" style="margin: 0;width: 100%;">
<div class="col-md-6">
<!-- Message -->
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title" *ngIf="selectedEvent?.subject">Message: </h4>
<h4 style="text-align: center" class="card-title" *ngIf="!selectedEvent?.subject">Select an event from the table above for more information</h4>
<p class="card-category">{{selectedEvent?.subject}}</p>
<!-- <p class="card-category">sub title</p>-->
</div>
<div class="card-body message" *ngIf="selectedEventMessage">
<ngx-json-viewer [json]="selectedEventMessage"></ngx-json-viewer>
</div>
</div>
</div>
<div class="card-body" *ngIf="selectedEventMessage">
<ngx-json-viewer [json]="selectedEventMessage"></ngx-json-viewer>
<div class="col-md-6">
<!-- Log content -->
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title" *ngIf="selectedEvent?.logFile">Log file: </h4>
<h4 style="text-align: center" class="card-title" *ngIf="!selectedEvent?.logFile && selectedEvent?.subject">Log file doesn't exist or couldn't be loaded </h4>
<h4 style="text-align: center" class="card-title" *ngIf="!selectedEvent?.logFile && !selectedEvent?.subject">Select an event from the table above for more information</h4>
<p class="card-category">{{selectedEvent?.logFile}}</p>
<!-- <p class="card-category">sub title</p>-->
</div>
<div class="spinner-container" *ngIf="loadingLogContent">
<mat-spinner></mat-spinner>
</div>
<div class="card-body log-content" *ngIf="logContent && !loadingLogContent">
<!-- <mat-form-field><textarea matInput-->
<!-- cdkTextareaAutosize-->
<!-- matTextareaAutosize-->
<!-- #autosize="cdkTextareaAutosize"-->
<!-- >-->
{{logContent}}
<!-- </textarea>-->
<!-- </mat-form-field>-->
</div>
</div>
</div>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>
\ No newline at end of file
......@@ -6,8 +6,9 @@ import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {SelectionModel} from '@angular/cdk/collections';
import {MonitoredEventsDataSource} from './monitored-events-data-source';
import {merge} from 'rxjs';
import {tap} from 'rxjs/operators';
import {merge, of} from 'rxjs';
import {catchError, finalize, tap} from 'rxjs/operators';
import {CdkTextareaAutosize} from '@angular/cdk/text-field';
@Component({
selector: 'monitored-events-list',
......@@ -18,6 +19,7 @@ import {tap} from 'rxjs/operators';
export class Monitored_events_listComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild('autosize') autosize: CdkTextareaAutosize;
public monitored_eventsService: Monitored_eventsService;
public sort_gql : string = "EVENT_DATE_DESC";
......@@ -32,8 +34,9 @@ export class Monitored_events_listComponent implements OnInit {
mi_id: string
public selectedEventMessage: any;
public selectedEventSubject: any;
selectedId:string
public logContent: any;
selectedEvent:MonitoredEvent
private loadingLogContent: boolean;
constructor(private route: ActivatedRoute, public monitoredeventsService: Monitored_eventsService) {
this.monitored_eventsService = monitoredeventsService;
......@@ -94,13 +97,29 @@ export class Monitored_events_listComponent implements OnInit {
}
toggleEvent(row) {
if(this.selection.selected[0]?.id !== row.id)
this.selectedId = row.id
else
this.selectedId = ""
this.selection.toggle(row)
if(this.selection.selected[0]?.id !== row.id){
this.selectedEvent = row;
this.loadLogContent(row.id)
}
else{
this.selectedEvent = this.logContent = null
this.loadingLogContent = false
}
this.selection.toggle(row)
var selectedRows = this.selection.selected;
this.selectedEventMessage = selectedRows.length === 1 ? JSON.parse(selectedRows[0].message) : '';
this.selectedEventSubject = selectedRows.length === 1 ? selectedRows[0].subject : '';
}
loadLogContent(monitored_item_id: string = ""){
this.loadingLogContent = true;
this.monitored_eventsService.getLogFileContent(monitored_item_id).pipe(
catchError((error,caught) => of()),
finalize(() => this.loadingLogContent = false)
).subscribe(data => {
this.logContent = data?.data?.logFile
});
}
}
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