ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-17 06:18:09 +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

2
src/app/app-routing.module.ts
View File

@ -60,6 +60,7 @@ import { TracengTemplateDetailsComponent } from './components/preferences/tracen
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
import { DirectLinkComponent } from './components/direct-link/direct-link.component';
import { SystemStatusComponent } from './components/system-status/system-status.component';
const routes: Routes = [
{
@ -74,6 +75,7 @@ const routes: Routes = [
{ path: 'settings', component: SettingsComponent },
{ path: 'settings/console', component: ConsoleComponent },
{ path: 'installed-software', component: InstalledSoftwareComponent },
{ path: 'server/:server_id/systemstatus', component: SystemStatusComponent },
{ path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent},
{ path: 'server/:server_id/project/:project_id/snapshots', component: ListOfSnapshotsComponent },

12
src/app/app.module.ts
View File

@ -260,6 +260,10 @@ import { ConfigureGns3VMDialogComponent } from './components/servers/configure-g
import { ImportApplianceComponent } from './components/project-map/import-appliance/import-appliance.component';
import { GoogleAnalyticsService } from './services/google-analytics.service';
import { DirectLinkComponent } from './components/direct-link/direct-link.component';
import { SystemStatusComponent } from './components/system-status/system-status.component';
import { StatusInfoComponent } from './components/system-status/status-info/status-info.component';
import { StatusChartComponent } from './components/system-status/status-chart/status-chart.component';
import { NgCircleProgressModule } from 'ng-circle-progress';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -437,7 +441,10 @@ if (environment.production) {
Gns3vmComponent,
ConfigureGns3VMDialogComponent,
ImportApplianceComponent,
DirectLinkComponent
DirectLinkComponent,
SystemStatusComponent,
StatusInfoComponent,
StatusChartComponent
],
imports: [
BrowserModule,
@ -457,7 +464,8 @@ if (environment.production) {
DragAndDropModule,
DragDropModule,
MATERIAL_IMPORTS,
DeviceDetectorModule.forRoot()
DeviceDetectorModule.forRoot(),
NgCircleProgressModule.forRoot()
],
providers: [
SettingsService,

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");
}
}

19
src/app/models/computeStatistics.ts Normal file
View File

@ -0,0 +1,19 @@
export interface Statistics {
cpu_usage_percent: number;
disk_usage_percent: number;
load_average_percent: number[];
memory_free: number;
memory_total: number;
memory_usage_percent: number;
memory_used: number;
swap_free: number;
swap_total: number;
swap_usage_percent: number;
swap_used: number;
}
export interface ComputeStatistics {
compute_id: string;
compute_name: string;
statistics: Statistics;
}

5
src/app/services/compute.service.ts
View File

@ -3,6 +3,7 @@ import { HttpServer } from './http-server.service';
import { Server } from '../models/server';
import { Compute } from '../models/compute';
import { Observable } from 'rxjs';
import { ComputeStatistics } from '../models/computeStatistics';
@Injectable()
export class ComputeService {
@ -15,4 +16,8 @@ export class ComputeService {
getUploadPath(server: Server, emulator: string, filename: string) {
return `http://${server.host}:${server.port}/v2/${emulator}/images/${filename}`;
}
getStatistics(server: Server): Observable<ComputeStatistics[]> {
return this.httpServer.get(server, `/statistics`)
}
}