ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-03-21 02:55:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Servers summary added

Browse Source
This commit is contained in:
Piotr Pekala 2019-09-06 05:05:57 -07:00
parent 9344174e89
commit 92d0908327
9 changed files with 142 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -208,6 +208,7 @@ import { ChangeSymbolDialogComponent } from './components/project-map/change-sym
import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component';
import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component';
import { ProjectsFilter } from './filters/projectsFilter.pipe';
import { ComputeService } from './services/compute.service';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -422,7 +423,8 @@ if (environment.production) {
NonNegativeValidator,
RotationValidator,
MapSettingsService,
InfoService
InfoService,
ComputeService
],
entryComponents: [
AddServerDialogComponent,

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

@ -85,7 +85,7 @@
Show console
</mat-checkbox>
<mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
Show topology summary
Show topology/servers summary
</mat-checkbox>
</div>
</mat-menu>

87
src/app/components/topology-summary/topology-summary.component.html
View File

@ -1,43 +1,62 @@
<div class="summaryWrapper" *ngIf="projectsStatistics">
<div class="summaryHeader">
<span class="title">Topology summary ({{projectsStatistics.snapshots}} snapshots)</span>
<button class="titleButton" [ngClass]="{ marked: isTopologyVisible }" (click)="toogleTopologyVisibility(true)" mat-button>Map topology</button>
<button class="titleButton" [ngClass]="{ marked: !isTopologyVisible }" (click)=toogleTopologyVisibility(false) mat-button>Servers</button>
<mat-icon (click)="close()" class="closeButton">close</mat-icon>
</div>
<mat-divider class="divider"></mat-divider>
<div class="summaryFilters">
Filter by status <br/>
<div class="filterBox">
<mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Started</mat-checkbox>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'suspended')">Suspended</mat-checkbox>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'stopped')">Stopped</mat-checkbox>
<div [ngClass]="{ notvisible: !isTopologyVisible }">
<mat-divider class="divider"></mat-divider>
<div class="summaryFilters">
Filter by status <br/>
<div class="filterBox">
<mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Started</mat-checkbox>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'suspended')">Suspended</mat-checkbox>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'stopped')">Stopped</mat-checkbox>
</div>
</div>
<div class="summarySorting">
Sorting <br/>
<div class="radio-group-wrapper">
<mat-radio-group class="radio-group" aria-label="Sorting">
<mat-radio-button value="1" (click)="setSortingOrder('asc')" checked>By name ascending</mat-radio-button>
<mat-radio-button value="2" (click)="setSortingOrder('desc')">By name descending</mat-radio-button>
</mat-radio-group>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="summaryContent">
<div class="nodeRow" *ngFor="let node of filteredNodes">
<div>
<svg *ngIf="node.status==='started'" width="10" height="10">
<rect class="status_started" x="0" y="0" width="10" height="10" fill="green"></rect>
</svg>
<svg *ngIf="node.status==='stopped'" width="10" height="10">
<rect class="status_stopped" x="0" y="0" width="10" height="10" fill="red"></rect>
</svg>
{{node.name}}
</div>
<div *ngIf="node.console!=null && node.console!=undefined && node.console_type!='none'">
{{node.console_type}} {{node.console_host}}:{{node.console}}
</div>
<div *ngIf="node.console===null || node.console===undefined || node.console_type==='none'">
none
</div>
</div>
</div>
</div>
<div class="summarySorting">
Sorting <br/>
<div class="radio-group-wrapper">
<mat-radio-group class="radio-group" aria-label="Sorting">
<mat-radio-button value="1" (click)="setSortingOrder('asc')" checked>By name ascending</mat-radio-button>
<mat-radio-button value="2" (click)="setSortingOrder('desc')">By name descending</mat-radio-button>
</mat-radio-group>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="summaryContent">
<div class="nodeRow" *ngFor="let node of filteredNodes">
<div>
<svg *ngIf="node.status==='started'" width="10" height="10">
<rect class="status_started" x="0" y="0" width="10" height="10" fill="green"></rect>
</svg>
<svg *ngIf="node.status==='stopped'" width="10" height="10">
<rect class="status_stopped" x="0" y="0" width="10" height="10" fill="red"></rect>
</svg>
{{node.name}}
</div>
<div *ngIf="node.console!=null && node.console!=undefined && node.console_type!='none'">
{{node.console_type}} {{node.console_host}}:{{node.console}}
</div>
<div *ngIf="node.console===null || node.console===undefined || node.console_type==='none'">
none
<div [ngClass]="{ notvisible: isTopologyVisible }">
<mat-divider class="divider"></mat-divider>
<div class="summaryContentServers">
<div class="nodeRow" *ngFor="let compute of computes">
<div>
{{compute.name}}
</div>
<div>
{{compute.host}}
</div>
<div>
{{server.location}}
</div>
</div>
</div>
</div>

34
src/app/components/topology-summary/topology-summary.component.scss
View File

@ -17,7 +17,7 @@
.summaryHeader {
width: 100%;
height: 24px;
height: 34px;
display: flex;
justify-content: space-between;
margin-right: 5px;
@ -36,15 +36,29 @@
.summaryContent {
margin-left: 5px;
margin-right: 5px;
max-height: 240px;
max-height: 230px;
overflow: auto;
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
}
.title {
.summaryContentServers {
margin-left: 5px;
margin-right: 5px;
max-height: 350px;
overflow: auto;
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
}
.titleButton {
margin-left: 5px;
margin-top: 4px;
outline: none;
}
.marked {
color: #0097a7;
}
.divider {
@ -60,13 +74,6 @@
padding-right: 5px;
}
mat-icon {
font-size: 18px;
width: 20px;
height: 20px;
margin-top: 4px;
}
::-webkit-scrollbar {
width: 0.5em;
}
@ -91,9 +98,16 @@ mat-icon {
.closeButton {
cursor: pointer;
font-size: 24px;
margin-top: 8px;
margin-right: 5px;
}
.filterBox {
display: flex;
justify-content: space-between;
}
.notvisible {
display: none;
}

11
src/app/components/topology-summary/topology-summary.component.spec.ts
View File

@ -11,13 +11,21 @@ import { NodesDataSource } from '../../cartography/datasources/nodes-datasource'
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { Project } from '../../models/project';
import { Node } from '../../cartography/models/node';
import { Server } from '../../models/server';
import { ComputeService } from '../../services/compute.service';
export class MockedComputeService {
getComputes(server: Server) {
return of([]);
}
}
describe('TopologySummaryComponent', () => {
let component: TopologySummaryComponent;
let fixture: ComponentFixture<TopologySummaryComponent>;
let mockedProjectService: MockedProjectService = new MockedProjectService();
let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
let mockedComputeService: MockedComputeService = new MockedComputeService();
beforeEach(async(() => {
TestBed.configureTestingModule({
@ -32,7 +40,8 @@ describe('TopologySummaryComponent', () => {
],
providers: [
{ provide: ProjectService, useValue: mockedProjectService },
{ provide: NodesDataSource, useValue: mockedNodesDataSource }
{ provide: NodesDataSource, useValue: mockedNodesDataSource },
{ provide: ComputeService, useValue: mockedComputeService}
],
declarations: [TopologySummaryComponent],
schemas: [NO_ERRORS_SCHEMA]

15
src/app/components/topology-summary/topology-summary.component.ts
View File

@ -6,6 +6,8 @@ import { Node } from '../../cartography/models/node';
import { Subscription } from 'rxjs';
import { ProjectService } from '../../services/project.service';
import { ProjectStatistics } from '../../models/project-statistics';
import { Compute } from '../../models/compute';
import { ComputeService } from '../../services/compute.service';
@Component({
@ -27,10 +29,13 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
startedStatusFilterEnabled: boolean = false;
suspendedStatusFilterEnabled: boolean = false;
stoppedStatusFilterEnabled: boolean = false;
computes: Compute[] = [];
isTopologyVisible: boolean = true;
constructor(
private nodesDataSource: NodesDataSource,
private projectService: ProjectService
private projectService: ProjectService,
private computeService: ComputeService
) {}
ngOnInit() {
@ -48,6 +53,14 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
this.projectService.getStatistics(this.server, this.project.project_id).subscribe((stats) => {
this.projectsStatistics = stats;
});
this.computeService.getComputes(this.server).subscribe((computes) => {
this.computes = computes;
});
}
toogleTopologyVisibility(value: boolean) {
this.isTopologyVisible = value;
}
compareAsc(first: Node, second: Node) {

6
src/app/material.imports.ts
View File

@ -20,7 +20,8 @@ import {
MatStepperModule,
MatRadioModule,
MatGridListModule,
MatTabsModule
MatTabsModule,
MatTreeModule
} from '@angular/material';
export const MATERIAL_IMPORTS = [
@ -45,5 +46,6 @@ export const MATERIAL_IMPORTS = [
MatStepperModule,
MatRadioModule,
MatGridListModule,
MatTabsModule
MatTabsModule,
MatTreeModule
];

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

@ -0,0 +1,19 @@
export interface Capabilities {
node_types: string[];
platform: string;
version: string;
}
export interface Compute {
capabilities: Capabilities;
compute_id: string;
connected: boolean;
cpu_usage_percent: number;
host: string;
last_error?: any;
memory_usage_percent: number;
name: string;
port: number;
protocol: string;
user: string;
}

14
src/app/services/compute.service.ts Normal file
View File

@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
import { HttpServer } from './http-server.service';
import { Server } from '../models/server';
import { Compute } from '../models/compute';
import { Observable } from 'rxjs';
@Injectable()
export class ComputeService {
constructor(private httpServer: HttpServer) {}
getComputes(server: Server): Observable<Compute[]> {
return this.httpServer.get<Compute[]>(server, '/computes') as Observable<Compute[]>;
}
}