ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-19 23:33:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Circle progress added

Browse Source
This commit is contained in:
piotrpekala7
2020-01-20 16:43:29 +01:00
parent 46f3b9f1f0
commit 9835c5b4cc
19 changed files with 274 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/project-map/project-map.component.html
View File

@ -147,6 +147,12 @@
<mat-icon>center_focus_strong</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly">
<button matTooltip="Go to system status" mat-icon-button routerLink="/server/{{server.id}}/systemstatus">
<mat-icon>info</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
</div>

131
src/app/components/system-status/status-chart/status-chart.component.html Normal file
View File

@ -0,0 +1,131 @@
<mat-card>
<div class="wrapper">
<circle-progress
[percent]="computeStatistics.statistics.cpu_usage_percent"
[radius]="100"
[outerStrokeWidth]="8"
[innerStrokeWidth]="6"
[outerStrokeColor]="'#0097a7'"
[innerStrokeColor]="'#007380'"
[animation]="true"
[animationDuration]="300"
[unitsColor]="'#C0C0C0'"
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="'CPU usage percent'"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
<circle-progress
[percent]="computeStatistics.statistics.disk_usage_percent"
[radius]="100"
[outerStrokeWidth]="8"
[innerStrokeWidth]="6"
[outerStrokeColor]="'#0097a7'"
[innerStrokeColor]="'#007380'"
[animation]="true"
[animationDuration]="300"
[unitsColor]="'#C0C0C0'"
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="'Disk usage percent'"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
<circle-progress
[percent]="computeStatistics.statistics.memory_usage_percent"
[radius]="100"
[outerStrokeWidth]="8"
[innerStrokeWidth]="6"
[outerStrokeColor]="'#0097a7'"
[innerStrokeColor]="'#007380'"
[animation]="true"
[animationDuration]="300"
[unitsColor]="'#C0C0C0'"
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="'Memory usage percent'"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
<circle-progress
[percent]="computeStatistics.statistics.swap_usage_percent"
[radius]="100"
[outerStrokeWidth]="8"
[innerStrokeWidth]="6"
[outerStrokeColor]="'#0097a7'"
[innerStrokeColor]="'#007380'"
[animation]="true"
[animationDuration]="300"
[unitsColor]="'#C0C0C0'"
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="'SWAP usage percent'"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
</div>
<div class="wrapper">
<circle-progress
[percent]="computeStatistics.statistics.load_average_percent[0]"
[radius]="100"
[outerStrokeWidth]="8"
[innerStrokeWidth]="6"
[outerStrokeColor]="'#0097a7'"
[innerStrokeColor]="'#007380'"
[animation]="true"
[animationDuration]="300"
[unitsColor]="'#C0C0C0'"
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="['Load average percent', '(last 1 minute)']"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
<circle-progress
[percent]="computeStatistics.statistics.load_average_percent[1]"
[radius]="100"
[outerStrokeWidth]="8"
[innerStrokeWidth]="6"
[outerStrokeColor]="'#0097a7'"
[innerStrokeColor]="'#007380'"
[animation]="true"
[animationDuration]="300"
[unitsColor]="'#C0C0C0'"
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="['Load average percent', '(last 5 minutes)']"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
<circle-progress
[percent]="computeStatistics.statistics.load_average_percent[2]"
[radius]="100"
[outerStrokeWidth]="8"
[innerStrokeWidth]="6"
[outerStrokeColor]="'#0097a7'"
[innerStrokeColor]="'#007380'"
[animation]="true"
[animationDuration]="300"
[unitsColor]="'#C0C0C0'"
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="['Load average percent', '(last 15 minutes)']"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
</div>
</mat-card>

5
src/app/components/system-status/status-chart/status-chart.component.scss Normal file
View File

@ -0,0 +1,5 @@
.wrapper {
width: 100%;
display: flex;
justify-content: space-between;
}

0
src/app/components/system-status/status-chart/status-chart.component.spec.ts Normal file
View File

16
src/app/components/system-status/status-chart/status-chart.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component, OnInit, Input } from "@angular/core";
import { ComputeStatistics } from '../../../models/computeStatistics';
@Component({
selector: 'app-status-chart',
templateUrl: './status-chart.component.html',
styleUrls: ['./status-chart.component.scss']
})
export class StatusChartComponent implements OnInit {
@Input() computeStatistics: ComputeStatistics;
constructor() {}
ngOnInit() {}
}

4
src/app/components/system-status/status-info/status-info.component.html Normal file
View File

@ -0,0 +1,4 @@
<div *ngFor='let statistics of computeStatistics'>
{{statistics.compute_name}}
<app-status-chart [computeStatistics]="statistics"></app-status-chart>
</div>

0
src/app/components/system-status/status-info/status-info.component.scss Normal file
View File

0
src/app/components/system-status/status-info/status-info.component.spec.ts Normal file
View File

32
src/app/components/system-status/status-info/status-info.component.ts Normal file
View File

@ -0,0 +1,32 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from '@angular/router';
import { ComputeService } from '../../../services/compute.service';
import { ComputeStatistics } from '../../../models/computeStatistics';
import { ServerService } from '../../../services/server.service';
import { Server } from '../../../models/server';
@Component({
selector: 'app-status-info',
templateUrl: './status-info.component.html',
styleUrls: ['./status-info.component.scss']
})
export class StatusInfoComponent implements OnInit {
public serverId: string = "";
public computeStatistics: ComputeStatistics[] = [];
constructor(
private route: ActivatedRoute,
private computeService: ComputeService,
private serverService: ServerService
) {}
ngOnInit() {
this.serverId = this.route.snapshot.paramMap.get("server_id");
this.serverService.get(Number(this.serverId)).then((server: Server) => {
this.computeService.getStatistics(server).subscribe((statistics: ComputeStatistics[]) => {
this.computeStatistics = statistics;
});
});
}
}

10
src/app/components/system-status/system-status.component.html Normal file
View File

@ -0,0 +1,10 @@
<div class="content">
<div class="default-header">
<div class="row">
<h1 class="col">System status</h1>
</div>
</div>
<div class="default-content">
<app-status-info></app-status-info>
</div>
</div>

0
src/app/components/system-status/system-status.component.scss Normal file
View File

0
src/app/components/system-status/system-status.component.spec.ts Normal file
View File

20
src/app/components/system-status/system-status.component.ts Normal file
View File

@ -0,0 +1,20 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-system-status',
templateUrl: './system-status.component.html',
styleUrls: ['./system-status.component.scss']
})
export class SystemStatusComponent implements OnInit {
public serverId: string = "";
constructor(
private route: ActivatedRoute
) {}
ngOnInit() {
this.serverId = this.route.snapshot.paramMap.get("server_id");
}
}