mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-19 21:17:51 +00:00
Merge branch 'master' into Export/import-project
This commit is contained in:
Piotr Pekala
commit
c2d5e6fd08
@ -188,10 +188,11 @@ 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 { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component';
|
||||
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';
|
||||
@ -320,6 +321,7 @@ if (environment.production) {
|
||||
ProjectMapMenuComponent,
|
||||
HelpComponent,
|
||||
SaveProjectDialogComponent,
|
||||
TopologySummaryComponent,
|
||||
InfoDialogComponent,
|
||||
BringToFrontActionComponent
|
||||
],
|
||||
@ -397,7 +399,7 @@ if (environment.production) {
|
||||
NodeCreatedLabelStylesFixer,
|
||||
NonNegativeValidator,
|
||||
RotationValidator,
|
||||
MapSettingService,
|
||||
MapSettingsService,
|
||||
InfoService
|
||||
],
|
||||
entryComponents: [
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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]
|
||||
|
||||
@ -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
|
||||
) {}
|
||||
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
</mat-menu>
|
||||
|
||||
<mat-toolbar-row>
|
||||
<button matTooltip="Show/hide interface labels" mat-icon-button [matMenuTriggerFor]="viewMenu"><mat-icon>view_module</mat-icon></button>
|
||||
<button matTooltip="Map settings" mat-icon-button [matMenuTriggerFor]="viewMenu"><mat-icon>view_module</mat-icon></button>
|
||||
</mat-toolbar-row>
|
||||
|
||||
<mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
|
||||
@ -77,6 +77,9 @@
|
||||
<mat-checkbox [ngModel]="project.show_interface_labels" (change)="toggleShowInterfaceLabels($event.checked)">
|
||||
Show interface labels
|
||||
</mat-checkbox>
|
||||
<mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
|
||||
Show topology summary
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
@ -140,3 +143,6 @@
|
||||
<app-node-label-dragged [server]="server"></app-node-label-dragged>
|
||||
<app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
|
||||
<app-text-edited [server]="server"></app-text-edited>
|
||||
<div [ngClass]="{ visible: !isTopologySummaryVisible }">
|
||||
<app-topology-summary *ngIf="project" [server]="server" [project]="project" (closeTopologySummary)='toggleShowTopologySummary($event)'></app-topology-summary>
|
||||
</div>
|
||||
|
||||
@ -230,3 +230,7 @@ g.node text,
|
||||
.context-menu-items .mat-menu-item:focus {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -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';
|
||||
@ -193,6 +193,10 @@ export class MockedNodesDataSource {
|
||||
update() {
|
||||
return of({});
|
||||
}
|
||||
|
||||
public get changes() {
|
||||
return new BehaviorSubject<[]>([]);
|
||||
}
|
||||
}
|
||||
|
||||
export class MockedLinksDataSource {
|
||||
@ -257,7 +261,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]
|
||||
|
||||
@ -56,6 +56,7 @@ import { MatDialog } from '@angular/material';
|
||||
import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
|
||||
import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
|
||||
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
|
||||
import { MapSettingsService } from '../../services/mapsettings.service';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -73,6 +74,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
public server: Server;
|
||||
public ws: WebSocket;
|
||||
public isProjectMapMenuVisible: boolean = false;
|
||||
public isTopologySummaryVisible: boolean = false;
|
||||
|
||||
tools = {
|
||||
selection: true,
|
||||
@ -126,11 +128,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) => {
|
||||
@ -399,6 +403,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
this.project.show_interface_labels = enabled;
|
||||
}
|
||||
|
||||
public toggleShowTopologySummary(visible: boolean) {
|
||||
this.isTopologySummaryVisible = visible;
|
||||
this.mapSettingsService.toggleTopologySummary(this.isTopologySummaryVisible);
|
||||
}
|
||||
|
||||
public hideMenu() {
|
||||
this.projectMapMenuComponent.resetDrawToolChoice()
|
||||
this.isProjectMapMenuVisible = false;
|
||||
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
@ -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');
|
||||
});
|
||||
});
|
||||
@ -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
6
src/app/models/project-statistics.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export class ProjectStatistics {
|
||||
drawings: number;
|
||||
links: number;
|
||||
nodes: number;
|
||||
snapshots: number
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +45,10 @@ export class MockedProjectService {
|
||||
duplicate(server: Server, project_id: string) {
|
||||
return of(project_id);
|
||||
}
|
||||
|
||||
getStatistics(server: Server, project_id: string) {
|
||||
return of({});
|
||||
}
|
||||
}
|
||||
|
||||
describe('ProjectService', () => {
|
||||
|
||||
@ -53,6 +53,10 @@ export class ProjectService {
|
||||
return this.httpServer.get(server, `/projects/${project_id}/export`)
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user