Commit 465c68da authored by Qianwen's avatar Qianwen
Browse files

refine structure

parent 61a48951
Pipeline #469429 passed with stages
in 3 minutes and 22 seconds
<div class="maincontainer">
<div class="sidebar">
<div class="nav">
<div class="nav-item" *ngFor="let MAS of MASs" routerLinkActive="is-active" [ngClass]="MAS.id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/ams', MAS.id]" >
<p > MAS {{ MAS.id }}</p>
<div class="nav-item" *ngFor="let id of MASID" routerLinkActive="is-active" [ngClass]="id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/ams', id]" >
<p > MAS {{ id }}</p>
</a>
</div>
</div>
</div>
<div class="contentcontainer">
<div *ngIf="selectedMASID === -1">
<div *ngIf="selectedMAS === null">
<h1>No MAS selected, select one...</h1>
</div>
<div *ngIf="selectedMASID !== -1">
<div *ngIf="selectedMAS !== null">
<div class="config">
<div class="config-header d-flex justify-content-between">
<div class="title">Config</div>
......
......@@ -9,28 +9,25 @@ import { ActivatedRoute, Params} from '@angular/router';
})
export class AMSComponent implements OnInit {
MASs;
MASID: number[] = [];
selectedMASID: number = -1;
selectedMAS;
selectedMAS: any = null;
collapsed: boolean = false;
constructor(
private masService: MasService,
private route: ActivatedRoute,
) { }
ngOnInit() {
// get the information for the sidebar
// get the information for the sidebar
this.masService.getMAS().subscribe((MASs: any) => {
if (MASs === null) {
this.MASs = [];
} else {
this.MASs = MASs;
}
});
if (MASs !== null) {
this.MASID = MASs.map( MAS => MAS.id);
console.log(this.MASID);
}
});
// get the concrete content of the selected MAS
this.route.params.subscribe(
......@@ -44,14 +41,10 @@ export class AMSComponent implements OnInit {
console.log("No MASID");
}
});
}
onToggleCollapsed() {
this.collapsed = !this.collapsed;
}
}
<div class="maincontainer">
<!--sidebar-->
<div class="sidebar" *ngIf="MASs !== null">
<div class="sidebar" *ngIf="MASID.length !== 0">
<div class="nav">
<div class="nav-item" *ngFor="let MAS of MASs" routerLinkActive="is-active" [ngClass]="MAS.id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/df', MAS.id]" >
<p > MAS {{ MAS.id }}</p>
<div class="nav-item" *ngFor="let id of MASID" routerLinkActive="is-active" [ngClass]="id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/df', id]" >
<p > MAS {{ id }}</p>
</a>
</div>
</div>
......
......@@ -16,7 +16,7 @@ cytoscape.use( popper);
})
export class DFComponent implements OnInit {
selectedMASID:number = -1;
MASs = null;
MASID: any = [];
alive: boolean = true;
fileToUpload: File = null;
display: string = "";
......@@ -24,7 +24,7 @@ export class DFComponent implements OnInit {
collapsed: boolean[] = [];
searched_results;
curr_state: string = "list";
graph;
graph: any;
constructor(
private dfService: DfService,
private masService: MasService,
......@@ -35,48 +35,43 @@ export class DFComponent implements OnInit {
ngOnInit() {
this.dfService.getAlive().subscribe( (res: any) => {
this.alive = res.df;
},
error => {
}, error => {
console.log(error);
});
// update the sidebar
this.masService.getMAS().subscribe((MASs: any) => {
this.MASs = MASs;
},
err => {
console.log(err)
}
);
this.MASID = MASs.map(MAS => MAS.id);
}, err => {
console.log(err)
});
this.route.params.subscribe(
(params: Params) => {
if (params.masid) {
this.selectedMASID = params.masid;
this.dfService.getAllSvcs(this.selectedMASID.toString()).subscribe( (res:any) => {
this.searched_results = res;
for (let i = 0; i < res.length; i++) {
this.collapsed.push(false);
}
})
} else {
console.log("No masid");
}
this.route.params.subscribe((params: Params) => {
if (params.masid) {
this.selectedMASID = params.masid;
this.dfService.getAllSvcs(this.selectedMASID.toString()).subscribe( (res:any) => {
this.searched_results = res;
for (let i = 0; i < res.length; i++) {
this.collapsed.push(false);
}
});
} else {
console.log("No masid");
}
});
}
getNodeAndEdge(): Observable<any> {
getNodeAndEdge(): Observable<any> {
return new Observable((observer) => {
forkJoin({
reqNode: this.masService.getMASById(this.selectedMASID.toString()),
reqSvc: this.dfService.getAllSvcs(this.selectedMASID.toString())
}).subscribe(({ reqNode, reqSvc } : any ) => {
console.log(reqSvc)
let nodes = reqNode.graph.node.map(node => node.id);
let agents = reqNode.agents.instances.map(agent => agent.id);
let edgeNodes = reqNode.graph.edge;
console.log(reqNode)
const nodes = reqNode.graph.node.map(node => node.id);
const agents = reqNode.agents.instances.map(agent => agent.id);
const edgeNodes = reqNode.graph.edge;
let edgeAgentNode = [];
let svcs: string[] = [];
let edgeSvcAgent = [];
......@@ -109,7 +104,7 @@ export class DFComponent implements OnInit {
}
// functions for update the services
// functions for updating the services
openLg(content) {
this.modalService.open(content, { size: 'lg', centered: true });
}
......
......@@ -352,6 +352,9 @@ ngx-charts-bubble-chart {
margin-left: 500px;
}
::ng-deep .gridline-path-vertical {
display: none;
}
<div class="maincontainer">
<!--sidebar-->
<div class="sidebar" *ngIf="MASs !== null">
<div class="sidebar" >
<div class="nav">
<div class="nav-item" *ngFor="let MAS of MASs" routerLinkActive="is-active" [ngClass]="MAS.id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/logger', MAS.id]" >
<p > MAS {{ MAS.id }}</p>
<div class="nav-item" *ngFor="let id of MASID" routerLinkActive="is-active" [ngClass]="id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/logger', id]" >
<p > MAS {{ id }}</p>
</a>
</div>
</div>
</div>
<!--modal for uploading the log-->
<!--modal for adding agents-->
<ng-template #content let-modal>
<div class="modal-header">
<h2 class="modal-title">Add Agent</h2>
......@@ -38,7 +38,6 @@
<h1>Logger is not alive......</h1>
</div>
<div *ngIf="alive">
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item" >
<a class="nav-link" [class.active]="currState==='log'" (click)="onClickLog()" >log</a>
......@@ -81,9 +80,10 @@
<mat-label>Start time</mat-label>
<input matInput
name="selected_start_time"
format="24"
[(ngModel)]="selectedStartTime"
[ngxMatTimepicker]="pickerA"
placeholder="6:00 AM"
placeholder="00:00"
readonly />
<mat-icon matSuffix (click)="pickerA.open()">
watch_later
......@@ -110,9 +110,10 @@
<mat-label>End time</mat-label>
<input matInput
name="selected_end_time"
format="24"
[(ngModel)]="selectedEndTime"
[ngxMatTimepicker]="pickerB"
placeholder="4:00 PM"
placeholder="23:49"
readonly />
<mat-icon matSuffix
(click)="pickerB.open()">
......@@ -124,7 +125,7 @@
<div *ngIf="currState==='logSeries'">
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<mat-select (change)="updateSelectedName($event.value)">
<mat-select (selectionChange)="updateSelectedName($event.value)">
<mat-option *ngFor="let name of names" [value]="name">
{{name}}
</mat-option>
......
......@@ -18,7 +18,7 @@ export class LoggerComponent implements OnInit {
alive: boolean = true;
selectedMASID: number = -1;
MASs = null;
MASID: number[] = [];
currState: string = "log";
agentID: number[];
......@@ -26,7 +26,6 @@ export class LoggerComponent implements OnInit {
notSelectedID: number[] = [];
isAgentSelected: boolean[] = [];
// parameters and variables for drawing logs
searchStartTime: string = "20210301000000";
searchEndTime: string = "20210331000000"
......@@ -39,26 +38,25 @@ export class LoggerComponent implements OnInit {
logBoxWidth: number = 50;
logBoxHeight: number = 25;
interval: number;
timeline = [];
agentBox = [];
logBoxes = [];
communications = [];
timeline: any = [];
agentBox: any = [];
logBoxes: any = [];
communications: any = [];
texts = [];
popoverContent: string = "This is the content of the popover";
logs: LogMessage[] = [];
range = new FormGroup( {
start: new FormControl(),
end: new FormControl()
});
selectedStartDate: Date;
selectedEndDate: Date;
selectedStartTime: string;
selectedEndTime: string;
selectedStartDate: Date = new Date();
selectedEndDate: Date = new Date();
selectedStartTime: string = "00:00";
selectedEndTime: string = "23:59";
// parameters and variables for drawing log series
selectedName: string = "type1";
names: string[] = []
selectedName: string = "";
names: string[] = [];
logSeries: LogSeries[] = [];
bubbleData: pointSeries[] = [];
view: any[]= [1600, 600];
......@@ -92,8 +90,7 @@ export class LoggerComponent implements OnInit {
private masService: MasService,
private route: ActivatedRoute,
private modalService: NgbModal,
) {
}
) {}
ngOnInit(): void {
......@@ -104,31 +101,26 @@ export class LoggerComponent implements OnInit {
// update the sidebar
this.masService.getMAS().subscribe((MASs: any) => {
this.MASs = MASs;
},
err => {
console.log(err)
if (MASs !== null) {
this.MASID = MASs.map(MAS => MAS.id);
}
}, err => {
console.log(err);
});
// default start time and end time
this.selectedStartDate = new Date();
this.selectedEndDate = new Date();
this.selectedStartTime = "1:00 AM"
this.selectedEndTime = "11:59 PM"
// get the selectedMASid from the current route
this.route.params.subscribe((params: Params) => {
this.selectedMASID = params.masid;
this.masService.getMASById(params.masid).subscribe((res: any) => {
if (res.agents.counter !== 0) {
this.agentID = res.agents.instances.map(item => item.id);
for (let i = 0; i < res.agents.counter; i++) {
this.isAgentSelected.push(false);
}
this.updateSelectedID();
this.selectedMASID = params.masid;
this.masService.getMASById(params.masid).subscribe((res: any) => {
if (res.agents.counter !== 0) {
this.agentID = res.agents.instances.map(item => item.id);
for (let i = 0; i < res.agents.counter; i++) {
this.isAgentSelected.push(false);
}
});
});
this.updateSelectedID();
}
});
});
}
......@@ -137,6 +129,7 @@ export class LoggerComponent implements OnInit {
onDeleteID(i : number) {
this.isAgentSelected[i] = !this.isAgentSelected[i];
this.updateSelectedID();
this.updateNames();
if (this.currState === "log") {
this.drawLogs();
} else {
......@@ -177,7 +170,6 @@ export class LoggerComponent implements OnInit {
}
}
generateScaledDates(dates: Date[]) :number[]{
// find the date differences
let datesInterval: number[] = [0];
......@@ -193,7 +185,7 @@ export class LoggerComponent implements OnInit {
if (datesInterval[i] > maxDiff) {
maxDiff = datesInterval[i];
}
if (datesInterval[i] != 0 && datesInterval[i] < minDiff) {
if (datesInterval[i] !== 0 && datesInterval[i] < minDiff) {
minDiff = datesInterval[i];
}
}
......@@ -203,10 +195,10 @@ export class LoggerComponent implements OnInit {
let curr:number = 0;
if (maxDiff !== minDiff) {
for (let i = 0; i < datesInterval.length; i++) {
if (datesInterval[i] !== 0) {
curr = curr + Math.round(100 * ((5 - 1) * (datesInterval[i] - minDiff)/(maxDiff - minDiff) + 1)) / 100;
}
scaledDates.push(curr);
if (datesInterval[i] !== 0) {
curr = curr + Math.round(100 * ((5 - 1) * (datesInterval[i] - minDiff)/(maxDiff - minDiff) + 1)) / 100;
}
scaledDates.push(curr);
}
} else {
for (let i = 0; i < datesInterval.length; i++) {
......@@ -222,29 +214,13 @@ export class LoggerComponent implements OnInit {
onClickSearchButton() {
const startDate: string = this.convertDate(this.selectedStartDate);
const endDate:string = this.convertDate(this.selectedEndDate);
this.searchStartTime = startDate + this.convertTime(this.selectedStartTime) + "00";
this.searchEndTime = endDate + this.convertTime(this.selectedEndTime)+ "59";
this.searchStartTime = startDate + this.selectedStartTime.replace(":", "") + "00";
this.searchEndTime = endDate + this.selectedEndTime.replace(":", "") + "59";
if (this.currState==="log") {
this.multiLogs().subscribe( logss => {
this.logs = [];
for (let logs of logss) {
if (logs !== null) {
for (let log of logs) {
this.logs.push(log);
}
}
}
this.logs.sort((a, b) => {
let date1 = new Date(a.timestamp);
let date2 = new Date(b.timestamp);
return date2.getTime() - date1.getTime();
} )
this.drawAllElements(this.logs);
})
this.drawLogs();
} else {
this.drawSeries();
}
}
......@@ -256,28 +232,6 @@ export class LoggerComponent implements OnInit {
return res;
}
convertTime(origin: string): string {
if (origin.charAt(1) == ":") {
origin = "0" + origin;
}
let hour: number = +origin.substr(0,2);
let minute: number = +origin.substr(3,2);
if (origin.charAt(6) === "P") {
hour += 12;
}
let res:string = "";
if (hour < 10) {
res += "0"
}
res += hour.toString();
if (minute < 10) {
res += "0"
}
res += minute.toString();
return res;
}
/********************************* functions for drawing logs ************************************/
onClickLog(){
this.currState = "log";
......@@ -291,7 +245,6 @@ export class LoggerComponent implements OnInit {
drawLogs() {
this.logs = [];
this.multiLogs().subscribe( logss => {
this.logs = [];
for (let logs of logss) {
if (logs !== null) {
for (let log of logs) {
......@@ -308,7 +261,6 @@ export class LoggerComponent implements OnInit {
})
}
multiLogs(): Observable<any[]> {
let res = [];
for (let id of this.selectedID) {
......@@ -418,7 +370,7 @@ export class LoggerComponent implements OnInit {
this.drawSeries();
}
updateSelectedName(name: string) {
updateSelectedName(name) {
this.selectedName = name;
}
......@@ -500,7 +452,6 @@ export class LoggerComponent implements OnInit {
series: [point]
})
}
console.log(this.mapAxisDate);
}
......
<!-- Agency Elements -->
<div class="maincontainer">
<!--sidebar-->
<div class="sidebar">
<div class="nav">
<div *ngIf="MASs !== null">
<div class="nav-item" *ngFor="let MAS of MASs" routerLinkActive="is-active">
<a class="list-text" [routerLink]="['/ams', MAS.id]" >
<p >MAS {{ MAS.id }}</p>
<div class="nav-item" *ngFor="let id of MASID" routerLinkActive="is-active">
<a class="list-text" [routerLink]="['/ams', id]" >
<p >MAS {{ id }}</p>
</a>
</div>
</div>
</div>
</div>
<!--modal for uploading the agency-->
<ng-template #content let-modal>
<div class="modal-header">
......@@ -42,14 +38,13 @@
</div>
</ng-template>
<div class="contentcontainer" >
<div *ngIf="MASs !== null && MASs.length !== 0">
<div *ngIf="MASID.length !== 0">
<div class="title">
<div class="title-name" >Overview</div>
<button type='button' class='btn my-btn btn-create' (click)="openLg(content)">+ New MAS</button>
</div>
<!--display the overview of agencies with tables-->
<!--display the overview of agencies with tables-->
<div id="tables">
<div class="row">
<div class="col-md-4 my-row" *ngFor="let MAS of MASsDisplay">
......@@ -95,13 +90,11 @@
</div>
</div>
<div class="overview-empty" *ngIf="MASs === null || MASs.length === 0">
<div class="overview-empty" *ngIf="MASID.length === 0">
<div class="status">{{status}}</div>
<button *ngIf="MASs.length !== null" type='button' class="btn my-btn" (click)="openLg(content)">+ New MAS</button>
<button *ngIf="status==='Currently no MASs, create one......'" type='button' class="btn my-btn" (click)="openLg(content)">+ New MAS</button>
</div>
</div>
</div>
......
......@@ -11,8 +11,8 @@ import { Router, ActivatedRouteSnapshot } from '@angular/router'
export class OverviewComponent implements OnInit {
MASs = null;
MASsDisplay = null;
MASID: number[] = [];
MASsDisplay: any = [];
fileToUpload: File = null;
display: string = "";
filename: string = "Choose a file...";
......@@ -68,19 +68,17 @@ export class OverviewComponent implements OnInit {
updateMAS() {
this.masService.getMAS().subscribe((MASs: any) => {
if (MASs === null) {
if (MASs !== null) {
this.MASID = MASs.map(MAS => MAS.id);
this.MASsDisplay = MASs;
} else {
this.status = "Currently no MASs, create one......";
this.MASs = [];
this.MASsDisplay = [];
console.log(this.MASs);
} else {
this.MASs = MASs;
this.MASsDisplay = MASs;
console.log(this.MASID);
}
},
err => {
this.status = "The CloneMAP platform is not connected"
console.log(err)
}
);
}
......