Commit 17424512 authored by MAGHOUZ's avatar MAGHOUZ
Browse files

Reformating code to fit usage of materail table + pagination done

parent c69fddda
......@@ -29,12 +29,13 @@ import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatTabsModule} from '@angular/material/tabs';
import {updateTicketsDialog} from './monitored_items/monitored-items-dialogs/update-tickets-dialog.component';
import {BrowserModule} from '@angular/platform-browser';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {HttpLink} from 'apollo-angular/http';
import {InMemoryCache} from '@apollo/client/core';
import { CommonModule } from '@angular/common';
import {addTicketsDialog} from './monitored_items/monitored-items-dialogs/add-tickets-dialog.component';
import {deleteTicketsDialog} from './monitored_items/monitored-items-dialogs/delete-tickets-dialog.component';
@NgModule({
imports: [
......@@ -61,7 +62,8 @@ import { CommonModule } from '@angular/common';
declarations: [
AppComponent,
AdminLayoutComponent,
updateTicketsDialog,
addTicketsDialog,
deleteTicketsDialog,
],
providers: [
{
......
......@@ -4,8 +4,8 @@ import 'rxjs/add/operator/filter';
import { NavbarComponent } from '../../components/navbar/navbar.component';
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import PerfectScrollbar from 'perfect-scrollbar';
import * as $ from "jquery";
import PerfectScrollbar from 'perfect-scrollbar';
@Component({
selector: 'app-admin-layout',
......
......@@ -20,7 +20,6 @@ import {MatSelectModule} from '@angular/material/select';
import {MessageListComponent} from '../../messages/message-list.component';
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 {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';
......@@ -31,6 +30,8 @@ import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatChipsModule} from '@angular/material/chips';
import {MatMenuModule} from '@angular/material/menu';
@NgModule({
imports: [
......@@ -44,7 +45,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
MatInputModule,
MatSelectModule,
MatTooltipModule,
AgGridModule.withComponents([ActionsCellRenderer]),
AgGridModule,
NgxJsonViewerModule,
MatListModule,
MatSidenavModule,
......@@ -52,7 +53,9 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
MatSortModule,
MatPaginatorModule,
MatCheckboxModule,
MatProgressSpinnerModule
MatProgressSpinnerModule,
MatChipsModule,
MatMenuModule
],
declarations: [
DashboardComponent,
......
......@@ -10,8 +10,6 @@ import {MonitoredItem} from '../monitored_items/monitored_item.model';
providedIn: 'root'
})
export class Monitored_eventsService {
private serverUrl = 'http://localhost/graphql'
// Observable string sources
private monitoredEventsSource = new Subject<MonitoredEvent>();
// Observable string streams
......@@ -20,47 +18,50 @@ export class Monitored_eventsService {
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
edges {
node {
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])
for (var i = 0; i<this.result2ME(result?.data.eventsByMonitoredItemId.edges).length; i++){
this.monitoredEventsSource.next(this.result2ME(result?.data.eventsByMonitoredItemId.edges)[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,
monitoredEventsList[i].node.id,
monitoredEventsList[i].node.creationDate,
monitoredEventsList[i].node.eventDate,
monitoredEventsList[i].node.levelFk,
monitoredEventsList[i].node.subject,
monitoredEventsList[i].node.message,
monitoredEventsList[i].node.monitoredItemFk,
);
resultMonitoredEventsList.push(monitoredEvent);
};
......
......@@ -81,6 +81,7 @@ export class Monitored_events_listComponent implements OnInit {
});
this.selectAllSubscription = this.monitored_eventsService.monitoredEvents$.subscribe(
monitored_event => {
console.log(monitored_event)
this.rowData.push(monitored_event)
//this.gridApi.applyTransactionAsync({ add: [monitored_event] })
}
......
......@@ -26,6 +26,7 @@ export class Monitored_Item_Details_Component implements OnInit {
ngOnInit(): void {
this.monitoredItemDetailsSubscription = this.monitored_itemService.monitoredItemDetails$.subscribe(
monitored_item => {
console.log(monitored_item)
this.monitored_item = monitored_item
}
);
......
<button
(click)="updateTicketsDialog()"
type="button"
mat-raised-button
class="btn btn-primary btn-link btn-sm btn-just-icon"
matTooltip="Remove tickets"
[matTooltipPosition]="'above'"
>
<i class="material-icons">bug_report</i>
</button>
\ No newline at end of file
import { Component } from "@angular/core";
import {ICellRendererParams} from 'ag-grid-community';
import {AgRendererComponent} from 'ag-grid-angular';
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
import {updateTicketsDialog} from '../monitored-items-dialogs/update-tickets-dialog.component';
import {Monitored_itemsService} from '../monitored_items.service';
@Component({
selector: 'actions-cell-renderer',
templateUrl: './actions-cell-renderer.component.html'
})
export class ActionsCellRenderer implements AgRendererComponent {
private params: any;
public monitoreditemsService: Monitored_itemsService;
constructor(public dialog: MatDialog,public monitored_itemsService: Monitored_itemsService) {
this.monitoreditemsService = monitored_itemsService
}
refresh(params: ICellRendererParams): boolean {
this.params = params;
return true;
}
agInit(params: ICellRendererParams): void {
this.params = params;
this.params.monitoreditemsService = this.monitoreditemsService;
}
updateTicketsDialog(): void {
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
dialogConfig.data = this.params
const dialogRef = this.dialog.open(updateTicketsDialog,dialogConfig);
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed',result);
//this.animal = result;
});
}
ngOnDestroy() {
// no need to remove the button click handler
// https://stackoverflow.com/questions/49083993/does-angular-automatically-remove-template-event-listeners
}
}
\ No newline at end of file
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';
import {MonitoredItem} from '../monitored_item.model';
@Component({
selector: 'add-tickets-dialog',
templateUrl: 'add-tickets-dialog.html',
})
export class addTicketsDialog {
private tickets_to_add : string
constructor(@Inject(MAT_DIALOG_DATA) public params) {
this.tickets_to_add = ""
}
}
\ No newline at end of file
<h1 mat-dialog-title>Add tickets</h1>
<mat-dialog-content>
<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=''"
>
<i class="material-icons">clear</i>
</button>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-raised-button
type="submit"
class="btn btn-primary pull-right"
[mat-dialog-close]="tickets_to_add"
>
<i class="material-icons"> add</i>
Add
</button>
<div class="clearfix"></div>
&nbsp;&nbsp;
<button mat-raised-button
type="submit"
class="btn btn-basic pull-right"
[mat-dialog-close]=""
>
<i class="material-icons">cancel</i>
Cancel
</button>
<div class="clearfix"></div>
</mat-dialog-actions>
\ No newline at end of file
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';
import {MonitoredItem} from '../monitored_item.model';
@Component({
selector: 'delete-tickets-dialog',
templateUrl: 'delete-tickets-dialog.html',
})
export class deleteTicketsDialog {
private tickets : string[]
private tickets_to_delete: string[];
constructor(@Inject(MAT_DIALOG_DATA) public params) {
this.tickets = params == null ? [] : params;
this.tickets_to_delete = []
}
}
\ No newline at end of file
<h1 mat-dialog-title>Add tickets</h1>
<mat-dialog-content>
<mat-selection-list *ngIf="tickets.length != 0" [(ngModel)]="list_tickets">
<mat-selection-list *ngIf="tickets.length != 0" [(ngModel)]="tickets_to_delete">
<mat-list-option *ngFor="let ticket of tickets" [value]="ticket">
{{ticket}}
</mat-list-option>
</mat-selection-list>
<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=''">
<i class="material-icons">clear</i>
</button>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-raised-button
type="submit"
class="btn btn-primary pull-right"
(click)="addTickets()"
mat-dialog-close
class="btn btn-danger pull-right"
[mat-dialog-close]="tickets_to_delete"
>
<i class="material-icons"> add</i>
Add
<i class="material-icons">delete</i>
delete
</button>
<div class="clearfix"></div>
&nbsp;&nbsp;
<button mat-raised-button
type="submit"
class="btn btn-danger pull-right"
(click)="removeTickets()"
mat-dialog-close
class="btn btn-basic pull-right"
[mat-dialog-close]=""
>
<i class="material-icons">delete</i>
delete selected
<i class="material-icons"> cancel</i>
Cancel
</button>
<div class="clearfix"></div>
&nbsp;&nbsp;
</mat-dialog-actions>
\ No newline at end of file
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';
import {MonitoredItem} from '../monitored_item.model';
@Component({
selector: 'update-tickets-dialog',
templateUrl: 'update-tickets-dialog.html',
})
export class updateTicketsDialog {
private monitoredItem: MonitoredItem
private tickets : string[]
private tickets_to_add : string
private tickets_to_delete: string[];
private list_tickets: string[]
constructor(@Inject(MAT_DIALOG_DATA) public params) {
this.monitoredItem = params.data
this.tickets = params.data.tickets == null ? [] : params.data.tickets;
this.tickets_to_add = ""
this.tickets_to_delete = []
this.list_tickets = []
}
addTickets() {
let tickets_to_add = this.tickets_to_add.split(",");
//this.params.monitoreditemsService.addTicketsToMonitoredItem(
// this.monitoredItem.id,tickets_to_add);
this.params.monitoreditemsService.addTicketsToMonitoredItem(
this.monitoredItem.id,tickets_to_add);
}
removeTickets() {
let tickets_to_delete = this.list_tickets;
this.params.monitoreditemsService.deleteTicketsFromMonitoredItem(
this.monitoredItem.id,tickets_to_delete);
}
}
\ No newline at end of file
......@@ -24,69 +24,53 @@ export class Monitored_itemsService {
private monitoredItemDetailsSource = new Subject<MonitoredItem>();
// Observable string streams
monitoredItemDetails$ = this.monitoredItemDetailsSource.asObservable();
constructor(private http: HttpClient, private apollo: Apollo) { }
searchMessages(type: string): Observable<any>{
return this.apollo
.query({
query: gql`
{
allMonitoredItems {
id
type
logicalPath
statusFk
creationDate
updateDate
lastEventDate
logicalGroup
tickets
labels
data
}
}`,
});
}
/**
* Handle Http operation that failed.
* Let the app continue.
* @param operation - name of the operation that failed
* @param result - optional value to return as the observable result
*/
private handleError<T>(operation = 'operation', result?: T): (error: any) => Observable<T> {
console.log("handleError",result)
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
constructor(private apollo: Apollo) { }
searchMessages(sort: string, pageSize: number, after: string = null, before: string): Observable<any>{//sort: string[], pageSize: number, startCursor: string = null
let pageCursorString = ""
if(after !== null){
pageCursorString = "first: $pageSize, after:\""+ after +"\""
}
else if(before !== null){
pageCursorString = "last: $pageSize, before:\"" + before + "\""
}
else{
pageCursorString = "first: $pageSize"
}
const SELECT_ALL_MONITORED_ITEMS = "" +
"query allMonitoredItems($pageSize: Int!){" +
"allMonitoredItems(sort: ["+ sort +"], "+ pageCursorString +") {" +
"pageInfo {" +
"startCursor endCursor hasNextPage hasPreviousPage" +
"} " +
"totalCount " +
"edges {" +
"node {" +
"id type logicalPath statusFk creationDate updateDate " +
"lastEventDate logicalGroup tickets labels data" +
"}" +
"}" +
"}" +
"}"
return this.apollo.query({
query: gql(SELECT_ALL_MONITORED_ITEMS),
variables: {
pageSize:pageSize
},
errorPolicy: 'all'
});
}
addTicketsToMonitoredItem(monitoredItemId, tickets: string[]) {
console.log("addTicketsToMonitoredItem",monitoredItemId,tickets)
const ADD_TICKETS_TO_MONITORED_ITEM_POST = gql`
mutation updateMonitoredItem($id: String!, $tickets: [String!]) {
updateMonitoredItem (id: $id, tickets: $tickets)
{
monitoredItem {
id
type
logicalPath
statusFk
creationDate
updateDate
lastEventDate
logicalGroup
tickets
labels
data
}
}
}
......@@ -97,13 +81,9 @@ export class Monitored_itemsService {
variables: {
id: monitoredItemId,
tickets: tickets
}
}).pipe(
map(
(data: any)=>{
return data.updateMonitoredItem.monitoredItem as MonitoredItem;
}
));
},
errorPolicy: 'all'
});
}
deleteTicketsFromMonitoredItem(monitoredItemId, tickets: string[]) {
......@@ -127,20 +107,13 @@ export class Monitored_itemsService {
}
}
`;
this.apollo.mutate({
console.log("deleteTicketsFromMonitoredItem",monitoredItemId,tickets)
return this.apollo.mutate({
mutation: DELETE_TICKETS_FROM_MONITORED_ITEM_POST,
variables: {
id: monitoredItemId,
tickets: tickets
}
}).subscribe(({ data }) => {
// @ts-ignore
let mi = data.removeTicketsFromMonitoredItem.monitoredItem
this.deletedMonitoredItemsSource.next(mi as MonitoredItem)
},(error) => {
console.log('there was an error sending the query', error);
});
}
......@@ -153,24 +126,29 @@ export class Monitored_itemsService {
query monitoredItemById($monitored_item_id: String!)
{
monitoredItemById(q: $monitored_item_id){
id
type
logicalPath
statusFk
creationDate
updateDate
lastEventDate
logicalGroup
tickets
labels
data
}
edges {
node {
id
type
logicalPath
statusFk
creationDate
updateDate
lastEventDate
logicalGroup
tickets
labels
data
}
}
}
}
`,
variables:{monitored_item_id:monitored_item_id},
})
.subscribe((result: any) => {
let mi = result?.data?.monitoredItemById[0]
console.log(result)
let mi = result?.data?.monitoredItemById.edges[0].node
this.monitoredItemDetailsSource.next(mi as MonitoredItem)
})
;
......