ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-20 08:10:49 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'master' into List-of-debug-events

Browse Source
This commit is contained in:
Piotr Pekala 2019-08-21 07:37:11 -07:00
commit 554944fb51
28 changed files with 713 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,11 +188,15 @@ import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/no
import { NonNegativeValidator } from './validators/non-negative-validator';
import { RotationValidator } from './validators/rotation-validator';
import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component';
import { MapSettingService } from './services/mapsettings.service';
import { MapSettingsService } from './services/mapsettings.service';
import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
import { HelpComponent } from './components/help/help.component';
import { LogConsoleComponent } from './components/project-map/log-console/log-console.component';
import { LogEventsDataSource } from './components/project-map/log-console/log-events-datasource';
import { TopologySummaryComponent } from './components/topology-summary/topology-summary.component';
import { ShowNodeActionComponent } from './components/project-map/context-menu/actions/show-node-action/show-node-action.component';
import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component';
import { InfoService } from './services/info.service';
import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
if (environment.production) {
@ -312,11 +316,14 @@ if (environment.production) {
NodesMenuComponent,
AdbutlerComponent,
ConsoleDeviceActionComponent,
ShowNodeActionComponent,
ConsoleComponent,
NodesMenuComponent,
ProjectMapMenuComponent,
HelpComponent,
LogConsoleComponent,
TopologySummaryComponent,
InfoDialogComponent,
BringToFrontActionComponent
],
imports: [
@ -394,7 +401,8 @@ if (environment.production) {
NodeCreatedLabelStylesFixer,
NonNegativeValidator,
RotationValidator,
MapSettingService
MapSettingsService,
InfoService
],
entryComponents: [
AddServerDialogComponent,
@ -410,7 +418,8 @@ if (environment.production) {
SymbolsComponent,
DeleteConfirmationDialogComponent,
HelpDialogComponent,
StartCaptureDialogComponent
StartCaptureDialogComponent,
InfoDialogComponent
],
bootstrap: [AppComponent]
})

4
src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts
View File

@ -21,7 +21,7 @@ import { MapLabel } from '../../models/map/map-label';
import { MapLinkNode } from '../../models/map/map-link-node';
import { select } from 'd3-selection';
import { MapLink } from '../../models/map/map-link';
import { MapSettingService } from '../../../services/mapsettings.service';
import { MapSettingsService } from '../../../services/mapsettings.service';
describe('DraggableSelectionComponent', () => {
let component: DraggableSelectionComponent;
@ -123,7 +123,7 @@ describe('DraggableSelectionComponent', () => {
{ provide: DrawingsEventSource, useValue: drawingsEventSourceStub },
{ provide: GraphDataManager, useValue: mockedGraphDataManager },
{ provide: LinksEventSource, useValue: linksEventSourceStub },
{ provide: MapSettingService, useClass: MapSettingService }
{ provide: MapSettingsService, useClass: MapSettingsService }
],
declarations: [DraggableSelectionComponent]
}).compileComponents();

4
src/app/cartography/components/draggable-selection/draggable-selection.component.ts
View File

@ -17,7 +17,7 @@ import { LabelWidget } from '../../widgets/label';
import { InterfaceLabelWidget } from '../../widgets/interface-label';
import { MapLinkNode } from '../../models/map/map-link-node';
import { LinksEventSource } from '../../events/links-event-source';
import { MapSettingService } from '../../../services/mapsettings.service';
import { MapSettingsService } from '../../../services/mapsettings.service';
@Component({
selector: 'app-draggable-selection',
@ -44,7 +44,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
private drawingsEventSource: DrawingsEventSource,
private graphDataManager: GraphDataManager,
private linksEventSource: LinksEventSource,
private mapSettingsService: MapSettingService
private mapSettingsService: MapSettingsService
) {}
ngOnInit() {

4
src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.html Normal file
View File

@ -0,0 +1,4 @@
<button mat-menu-item (click)="showNode()">
<mat-icon>info</mat-icon>
<span>Show node information</span>
</button>

26
src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts Normal file
View File

@ -0,0 +1,26 @@
import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { Node } from '../../../../../cartography/models/node';
import { MatDialog } from '@angular/material';
import { InfoDialogComponent } from '../../../info-dialog/info-dialog.component';
import { Server } from '../../../../../models/server';
@Component({
selector: 'app-show-node-action',
templateUrl: './show-node-action.component.html'
})
export class ShowNodeActionComponent {
@Input() node: Node;
@Input() server: Server
constructor(private dialog: MatDialog) {}
showNode() {
const dialogRef = this.dialog.open(InfoDialogComponent, {
width: '600px',
autoFocus: false
});
let instance = dialogRef.componentInstance;
instance.node = this.node;
instance.server = this.server;
}
}

4
src/app/components/project-map/context-menu/context-menu.component.html
View File

@ -1,6 +1,10 @@
<div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
<span [matMenuTriggerFor]="contextMenu"></span>
<mat-menu #contextMenu="matMenu" class="context-menu-items">
<app-show-node-action *ngIf="nodes.length===1"
[server]="server"
[node]="nodes[0]"
></app-show-node-action>
<app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
<app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>
<app-console-device-action

25
src/app/components/project-map/info-dialog/info-dialog.component.html Normal file
View File

@ -0,0 +1,25 @@
<h1 mat-dialog-title>{{node.name}}</h1>
<div class="modal-form-container">
<mat-tab-group>
<mat-tab label="General information">
<div class='textBox'>
<div *ngFor="let info of infoList">
{{info}}
</div>
</div>
</mat-tab>
<mat-tab label="Command line">
<div *ngIf="node.status !== 'started'" class='textBox'>
Please start the node in order to get the command line information.
</div>
<div class="textBox">
{{commandLine}}
</div>
</mat-tab>
</mat-tab-group>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onCloseClick()" color="accent">Close</button>
</div>

3
src/app/components/project-map/info-dialog/info-dialog.component.scss Normal file
View File

@ -0,0 +1,3 @@
.textBox {
margin-top: 10px;
}

31
src/app/components/project-map/info-dialog/info-dialog.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, Input, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { Node } from '../../../cartography/models/node';
import { InfoService } from '../../../services/info.service';
import { Server } from '../../../models/server';
@Component({
selector: 'app-info-dialog',
templateUrl: './info-dialog.component.html',
styleUrls: ['./info-dialog.component.scss']
})
export class InfoDialogComponent implements OnInit {
@Input() server: Server;
@Input() node: Node;
infoList: string[] = [];
commandLine: string = '';
constructor(
public dialogRef: MatDialogRef<InfoDialogComponent>,
private infoService: InfoService
) {}
ngOnInit() {
this.infoList = this.infoService.getInfoAboutNode(this.node, this.server);
this.commandLine = this.infoService.getCommandLine(this.node);
}
onCloseClick() {
this.dialogRef.close();
}
}

6
src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts
View File

@ -1,7 +1,7 @@
import { ProjectMapMenuComponent } from "./project-map-menu.component";
import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { MockedDrawingService } from '../project-map.component.spec';
import { MapSettingService } from '../../../services/mapsettings.service';
import { MapSettingsService } from '../../../services/mapsettings.service';
import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
import { CommonModule } from '@angular/common';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@ -15,7 +15,7 @@ describe('ProjectMapMenuComponent', () => {
let component: ProjectMapMenuComponent;
let fixture: ComponentFixture<ProjectMapMenuComponent>;
let drawingService = new MockedDrawingService();
let mapSettingService = new MapSettingService();
let mapSettingService = new MapSettingsService();
beforeEach(async(() => {
TestBed.configureTestingModule({
@ -23,7 +23,7 @@ describe('ProjectMapMenuComponent', () => {
providers: [
{ provide: DrawingService, useValue: drawingService },
{ provide: ToolsService },
{ provide: MapSettingService, useValue: mapSettingService }
{ provide: MapSettingsService, useValue: mapSettingService }
],
declarations: [ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
schemas: [NO_ERRORS_SCHEMA]

4
src/app/components/project-map/project-map-menu/project-map-menu.component.ts
View File

@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { ToolsService } from '../../../services/tools.service';
import { MapSettingService } from '../../../services/mapsettings.service';
import { MapSettingsService } from '../../../services/mapsettings.service';
import { DrawingService } from '../../../services/drawing.service';
@ -26,7 +26,7 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
constructor(
private toolsService: ToolsService,
private mapSettingsService: MapSettingService,
private mapSettingsService: MapSettingsService,
private drawingService: DrawingService
) {}

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

@ -64,6 +64,9 @@
<mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
Show console
</mat-checkbox>
<mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
Show topology summary
</mat-checkbox>
</div>
</mat-menu>
@ -128,5 +131,8 @@
<app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
<app-text-edited [server]="server"></app-text-edited>
<div [ngClass]="{ visible: !isConsoleVisible }">
<app-log-console [server]="server" [project]="project" (closeConsole)='toggleShowConsole($event)'></app-log-console>
<app-log-console [server]="server" [project]="project" (closeConsole)='toggleShowConsole($event)'></app-log-console>
</div>
<div [ngClass]="{ visible: !isTopologySummaryVisible }">
<app-topology-summary *ngIf="project" [server]="server" [project]="project" (closeTopologySummary)='toggleShowTopologySummary($event)'></app-topology-summary>
</div>

11
src/app/components/project-map/project-map.component.spec.ts
View File

@ -27,7 +27,7 @@ import { MockedProjectService } from '../../services/project.service.spec';
import { Observable } from 'rxjs/Rx';
import { Drawing } from '../../cartography/models/drawing';
import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
import { of } from 'rxjs';
import { of, BehaviorSubject } from 'rxjs';
import { Server } from '../../models/server';
import { Node } from '../../cartography/models/node';
import { ToolsService } from '../../services/tools.service';
@ -48,7 +48,7 @@ import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles
import { LabelWidget } from '../../cartography/widgets/label';
import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label';
import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
import { MapSettingService } from '../../services/mapsettings.service';
import { MapSettingsService } from '../../services/mapsettings.service';
import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
import { MockedToasterService } from '../../services/toaster.service.spec';
import { ToasterService } from '../../services/toaster.service';
@ -213,6 +213,10 @@ export class MockedNodesDataSource {
update() {
return of({});
}
public get changes() {
return new BehaviorSubject<[]>([]);
}
}
export class MockedLinksDataSource {
@ -277,7 +281,8 @@ describe('ProjectMapComponent', () => {
{ provide: MapNodesDataSource, useClass: MapNodesDataSource },
{ provide: MapLinksDataSource, useClass: LinksDataSource },
{ provide: MapDrawingsDataSource, useClass: MapDrawingsDataSource },
{ provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource }
{ provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource },
{ provide: MapSettingsService, useClass: MapSettingsService }
],
declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
schemas: [NO_ERRORS_SCHEMA]

11
src/app/components/project-map/project-map.component.ts
View File

@ -52,6 +52,7 @@ import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map
import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
import { ToasterService } from '../../services/toaster.service';
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
import { MapSettingsService } from '../../services/mapsettings.service';
@Component({
@ -70,6 +71,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public ws: WebSocket;
public isProjectMapMenuVisible: boolean = false;
public isConsoleVisible: boolean = false;
public isTopologySummaryVisible: boolean = false;
tools = {
selection: true,
@ -122,11 +124,13 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private mapNodesDataSource: MapNodesDataSource,
private mapLinksDataSource: MapLinksDataSource,
private mapDrawingsDataSource: MapDrawingsDataSource,
private mapSymbolsDataSource: MapSymbolsDataSource
private mapSymbolsDataSource: MapSymbolsDataSource,
private mapSettingsService: MapSettingsService
) {}
ngOnInit() {
this.settings = this.settingsService.getAll();
this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
this.progressService.activate();
const routeSub = this.route.paramMap.subscribe((paramMap: ParamMap) => {
@ -398,6 +402,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public toggleShowConsole(visible: boolean) {
this.isConsoleVisible = visible;
}
public toggleShowTopologySummary(visible: boolean) {
this.isTopologySummaryVisible = visible;
this.mapSettingsService.toggleTopologySummary(this.isTopologySummaryVisible);
}
public hideMenu() {
this.projectMapMenuComponent.resetDrawToolChoice()

3
src/app/components/projects/projects.component.html
View File

@ -40,6 +40,9 @@
<button mat-icon-button matTooltip="Delete project" (click)="delete(row)" *ngIf="row.status == 'closed'">
<mat-icon aria-label="Delete project">delete</mat-icon>
</button>
<button mat-icon-button matTooltip="Duplicate project" (click)="duplicate(row)" *ngIf="row.status == 'closed'">
<mat-icon aria-label="Duplicate project">filter_2</mat-icon>
</button>
<button mat-icon-button matTooltip="Open project" (click)="open(row)" *ngIf="row.status == 'closed'">
<mat-icon aria-label="Open project">play_arrow</mat-icon>
</button>

22
src/app/components/projects/projects.component.spec.ts
View File

@ -85,6 +85,28 @@ describe('ProjectsComponent', () => {
expect(mockedProjectService.delete).toHaveBeenCalled();
});
it('should call project service after duplicate action', () => {
spyOn(mockedProjectService, 'duplicate').and.returnValue(of());
let project = new Project();
project.project_id = '1';
project.status = 'closed';
component.duplicate(project);
expect(mockedProjectService.duplicate).toHaveBeenCalled();
});
it('should call refresh after duplicate action', () => {
spyOn(component, 'refresh');
let project = new Project();
project.project_id = '1';
project.status = 'closed';
component.duplicate(project);
expect(component.refresh).toHaveBeenCalled();
});
describe('ProjectComponent open', () => {
let project: Project;

6
src/app/components/projects/projects.component.ts
View File

@ -107,6 +107,12 @@ export class ProjectsComponent implements OnInit {
);
}
duplicate(project: Project) {
this.projectService.duplicate(this.server, project.project_id, project.name).subscribe(() => {
this.refresh();
});
}
addBlankProject() {
const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
width: '400px',

2
src/app/components/template/template-list-dialog/template-list-dialog.component.html
View File

@ -1,4 +1,4 @@
<div mat-dialog-content>
<div mat-dialog-content class="content">
<div class="header">
<mat-form-field floatPlaceholder="never">
<input matInput #filter placeholder="Filter templates" />

23
src/app/components/template/template-list-dialog/template-list-dialog.component.scss
View File

@ -16,3 +16,26 @@
font-size: 16px;
flex-grow: 1;
}
div {
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
}
mat-table {
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 0.5em;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid #263238;
}

44
src/app/components/topology-summary/topology-summary.component.html Normal file
View File

@ -0,0 +1,44 @@
<div class="summaryWrapper" *ngIf="projectsStatistics">
<div class="summaryHeader">
<span class="title">Topology summary ({{projectsStatistics.snapshots}} snapshots)</span>
<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>
</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>

99
src/app/components/topology-summary/topology-summary.component.scss Normal file
View File

@ -0,0 +1,99 @@
.summaryWrapper {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
top: 20px;
right: 20px;
height: 400px;
width: 300px;
background: #263238;
color: white;
overflow: hidden;
font-size: 12px;
}
.summaryHeaderMenu {
height: 24px;
}
.summaryHeader {
width: 100%;
height: 24px;
display: flex;
justify-content: space-between;
margin-right: 5px;
}
.summaryFilters {
margin-left: 5px;
margin-right: 5px;
}
.summarySorting {
margin-left: 5px;
margin-right: 5px;
}
.summaryContent {
margin-left: 5px;
margin-right: 5px;
max-height: 240px;
overflow: auto;
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
}
.title {
margin-left: 5px;
margin-top: 4px;
}
.divider {
margin: 5px;
width: 290px;
height: 2px;
}
.nodeRow {
width: 100%;
display: flex;
justify-content: space-between;
padding-right: 5px;
}
mat-icon {
font-size: 18px;
width: 20px;
height: 20px;
margin-top: 4px;
}
::-webkit-scrollbar {
width: 0.5em;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid #263238;
}
.radio-group-wrapper {
margin-top: 5px;
}
.radio-group {
display: flex;
justify-content: space-between;
}
.closeButton {
cursor: pointer;
}
.filterBox {
display: flex;
justify-content: space-between;
}

148
src/app/components/topology-summary/topology-summary.component.spec.ts Normal file
View File

@ -0,0 +1,148 @@
import { TopologySummaryComponent } from "./topology-summary.component";
import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { ProjectService } from '../../services/project.service';
import { MockedProjectService } from '../../services/project.service.spec';
import { MatTableModule, MatTooltipModule, MatIconModule, MatSortModule, MatDialogModule } from '@angular/material';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';
import { MockedNodesDataSource } from '../project-map/project-map.component.spec';
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';
describe('TopologySummaryComponent', () => {
let component: TopologySummaryComponent;
let fixture: ComponentFixture<TopologySummaryComponent>;
let mockedProjectService: MockedProjectService = new MockedProjectService();
let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
MatTableModule,
MatTooltipModule,
MatIconModule,
MatSortModule,
MatDialogModule,
NoopAnimationsModule,
RouterTestingModule.withRoutes([])
],
providers: [
{ provide: ProjectService, useValue: mockedProjectService },
{ provide: NodesDataSource, useValue: mockedNodesDataSource }
],
declarations: [TopologySummaryComponent],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TopologySummaryComponent);
component = fixture.componentInstance;
component.project = { project_id: 1 } as unknown as Project;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should show only running nodes when filter started applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'started');
expect(component.filteredNodes.length).toBe(1);
expect(component.filteredNodes[0].status).toBe('started');
});
it('should show only stopped nodes when filter stopped applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'stopped');
expect(component.filteredNodes.length).toBe(1);
expect(component.filteredNodes[0].status).toBe('stopped');
});
it('should show only suspended nodes when filter suspended applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'suspended');
expect(component.filteredNodes.length).toBe(0);
});
it('should show all nodes when all filters applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'suspended');
component.applyStatusFilter(true, 'started');
component.applyStatusFilter(true, 'stopped');
expect(component.filteredNodes.length).toBe(2);
});
it('should show all nodes when no filters applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'suspended');
component.applyStatusFilter(true, 'started');
component.applyStatusFilter(true, 'stopped');
expect(component.filteredNodes.length).toBe(2);
component.applyStatusFilter(false, 'stopped');
expect(component.filteredNodes.length).toBe(1);
component.applyStatusFilter(false, 'suspended');
component.applyStatusFilter(false, 'started');
expect(component.filteredNodes.length).toBe(2);
});
it('should sort nodes in correct order', () => {
component.nodes = [
{ status: 'started', name: 'A' } as Node,
{ status: 'stopped', name: 'B' } as Node,
{ status: 'stopped', name: 'D' } as Node,
];
component.applyFilters();
component.setSortingOrder('asc');
expect(component.filteredNodes[0].name).toBe('A');
});
it('should sort filtered nodes in correct order', () => {
component.nodes = [
{ status: 'started', name: 'A' } as Node,
{ status: 'stopped', name: 'B' } as Node,
{ status: 'stopped', name: 'D' } as Node,
];
component.applyStatusFilter(true, 'stopped');
component.setSortingOrder('desc');
expect(component.filteredNodes[0].name).toBe('D');
});
});

116
src/app/components/topology-summary/topology-summary.component.ts Normal file
View File

@ -0,0 +1,116 @@
import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { Project } from '../../models/project';
import { Server } from '../../models/server';
import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
import { Node } from '../../cartography/models/node';
import { Subscription } from 'rxjs';
import { ProjectService } from '../../services/project.service';
import { ProjectStatistics } from '../../models/project-statistics';
@Component({
selector: 'app-topology-summary',
templateUrl: './topology-summary.component.html',
styleUrls: ['./topology-summary.component.scss']
})
export class TopologySummaryComponent implements OnInit, OnDestroy {
@Input() server: Server;
@Input() project: Project;
@Output() closeTopologySummary = new EventEmitter<boolean>();
private subscriptions: Subscription[] = [];
projectsStatistics: ProjectStatistics;
nodes: Node[] = [];
filteredNodes: Node[] = [];
sortingOrder: string = 'asc';
startedStatusFilterEnabled: boolean = false;
suspendedStatusFilterEnabled: boolean = false;
stoppedStatusFilterEnabled: boolean = false;
constructor(
private nodesDataSource: NodesDataSource,
private projectService: ProjectService
) {}
ngOnInit() {
this.subscriptions.push(
this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
this.nodes = nodes;
if (this.sortingOrder === 'asc') {
this.filteredNodes = nodes.sort(this.compareAsc);
} else {
this.filteredNodes = nodes.sort(this.compareDesc);
}
})
);
this.projectService.getStatistics(this.server, this.project.project_id).subscribe((stats) => {
this.projectsStatistics = stats;
});
}
compareAsc(first: Node, second: Node) {
if (first.name < second.name) return -1;
return 1;
}
compareDesc(first: Node, second: Node) {
if (first.name < second.name) return 1;
return -1;
}
ngOnDestroy() {
this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
}
setSortingOrder(order: string) {
this.sortingOrder = order;
if (this.sortingOrder === 'asc') {
this.filteredNodes = this.filteredNodes.sort(this.compareAsc);
} else {
this.filteredNodes = this.filteredNodes.sort(this.compareDesc);
}
}
applyStatusFilter(value: boolean, filter: string) {
if (filter === 'started') {
this.startedStatusFilterEnabled = value;
} else if (filter === 'stopped') {
this.stoppedStatusFilterEnabled = value;
} else if (filter === 'suspended') {
this.suspendedStatusFilterEnabled = value;
}
this.applyFilters();
}
applyFilters() {
let nodes: Node[] = [];
if (this.startedStatusFilterEnabled) {
nodes = nodes.concat(this.nodes.filter(n => n.status === 'started'));
}
if (this.stoppedStatusFilterEnabled) {
nodes = nodes.concat(this.nodes.filter(n => n.status === 'stopped'));
}
if (this.suspendedStatusFilterEnabled) {
nodes = nodes.concat(this.nodes.filter(n => n.status === 'suspended'));
}
if (!this.startedStatusFilterEnabled && !this.stoppedStatusFilterEnabled && !this.suspendedStatusFilterEnabled) {
nodes = nodes.concat(this.nodes);
}
if (this.sortingOrder === 'asc') {
this.filteredNodes = nodes.sort(this.compareAsc);
} else {
this.filteredNodes = nodes.sort(this.compareDesc);
}
}
close() {
this.closeTopologySummary.emit(false);
}
}

6
src/app/models/project-statistics.ts Normal file
View File

@ -0,0 +1,6 @@
export class ProjectStatistics {
drawings: number;
links: number;
nodes: number;
snapshots: number
}

77
src/app/services/info.service.ts Normal file
View File

@ -0,0 +1,77 @@
import { Injectable } from "@angular/core";
import { Node } from '../cartography/models/node';
import { Port } from '../models/port';
import { Server } from '../models/server';
@Injectable()
export class InfoService {
getInfoAboutNode(node: Node, server: Server): string[] {
let infoList: string[] = [];
if (node.node_type === 'cloud') {
infoList.push(`Cloud ${node.name} is always on.`);
} else if (node.node_type === 'nat') {
infoList.push(`NAT ${node.name} is always on.`);
} else if (node.node_type === 'ethernet-hub') {
infoList.push(`Ethernet hub ${node.name} is always on.`);
} else if (node.node_type === 'ethernet_switch') {
infoList.push(`Ethernet switch ${node.name} is always on.`);
} else if (node.node_type === 'frame_relay_switch') {
infoList.push(`Frame relay switch ${node.name} is always on.`);
} else if (node.node_type === 'atm_switch') {
infoList.push(`ATM switch ${node.name} is always on.`);
} else if (node.node_type === 'docker') {
infoList.push(`Docker ${node.name} is ${node.status}.`);
} else if (node.node_type === 'dynamips') {
infoList.push(`Dynamips ${node.name} is always on.`);
} else if (node.node_type === 'traceng') {
infoList.push(`TraceNG ${node.name} is always on.`);
} else if (node.node_type === 'virtualbox') {
infoList.push(`VirtualBox VM ${node.name} is ${node.status}.`);
} else if (node.node_type === 'vmware') {
infoList.push(`VMware VM ${node.name} is ${node.status}.`);
} else if (node.node_type === 'qemu') {
infoList.push(`QEMU VM ${node.name} is ${node.status}.`);
} else if (node.node_type === 'iou') {
infoList.push(`IOU ${node.name} is always on.`);
} else if (node.node_type === 'vpcs') {
infoList.push(`Node ${node.name} is ${node.status}.`);
}
infoList.push(`Running on server ${server.name} with port ${server.port}.`);
infoList.push(`Server ID is ${server.id}.`);
if (node.console_type !== 'none' && node.console_type !== 'null') {
infoList.push(`Console is on port ${node.console} and type is ${node.console_type}.`);
}
infoList = infoList.concat(this.getInfoAboutPorts(node.ports));
return infoList;
}
getInfoAboutPorts(ports: Port[]): string {
let response: string = `Ports: `
ports.forEach(port => {
response += `link_type: ${port.link_type},
name: ${port.name}; `
});
response = response.substring(0, response.length - 2);
return response;
}
getCommandLine(node: Node): string {
if (node.node_type === "cloud" ||
node.node_type === "nat" ||
node.node_type === "ethernet_hub" ||
node.node_type === "ethernet_switch" ||
node.node_type === "frame_relay_switch" ||
node.node_type === "atm_switch" ||
node.node_type === "dynamips" ||
node.node_type === "traceng" ||
node.node_type === "iou") {
return 'Command line information is not supported for this type of node.';
} else {
if (node.status === 'started') {
return node.command_line;
} else {
return 'Please start the node in order to get the command line information.';
}
}
}
}

7
src/app/services/mapsettings.service.ts
View File

@ -2,12 +2,17 @@ import { Injectable } from "@angular/core";
import { Subject } from 'rxjs';
@Injectable()
export class MapSettingService {
export class MapSettingsService {
public isMapLocked = new Subject<boolean>();
public isTopologySummaryVisible: boolean = false;
constructor() {}
changeMapLockValue(value: boolean) {
this.isMapLocked.next(value);
}
toggleTopologySummary(value: boolean) {
this.isTopologySummaryVisible = value;
}
}

15
src/app/services/project.service.spec.ts
View File

@ -41,6 +41,14 @@ export class MockedProjectService {
delete(server: Server, project_id: string) {
return of(project_id);
}
duplicate(server: Server, project_id: string) {
return of(project_id);
}
getStatistics(server: Server, project_id: string) {
return of({});
}
}
describe('ProjectService', () => {
@ -132,6 +140,13 @@ describe('ProjectService', () => {
expect(req.request.method).toEqual('DELETE');
});
it('should duplicate the project', () => {
service.duplicate(server, 'projectId', 'projectName').subscribe();
const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/projects/projectId/duplicate');
expect(req.request.method).toEqual('POST');
});
it('should get notifications path of project', () => {
const path = service.notificationsPath(server, 'myproject');
expect(path).toEqual('ws://127.0.0.1:3080/v2/projects/myproject/notifications/ws');

8
src/app/services/project.service.ts
View File

@ -49,6 +49,14 @@ export class ProjectService {
return this.httpServer.delete(server, `/projects/${project_id}`);
}
getStatistics(server: Server, project_id: string): Observable<any> {
return this.httpServer.get(server, `/projects/${project_id}/stats`);
}
duplicate(server: Server, project_id: string, project_name): Observable<any> {
return this.httpServer.post(server, `/projects/${project_id}/duplicate`, { name: project_name });
}
notificationsPath(server: Server, project_id: string): string {
return `ws://${server.host}:${server.port}/v2/projects/${project_id}/notifications/ws`;
}