ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-24 21:09:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Filters on topology summary added

Browse Source
This commit is contained in:
Piotr Pekala 2019-09-25 02:41:34 -07:00
parent 170560e5f7
commit 1b4d4d2837
3 changed files with 72 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,14 +9,14 @@
<div class="summaryFilters"> <div class="summaryFilters">
Filter by status <br/> Filter by status <br/>
<div class="filterBox"> <div class="filterBox">
<mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Started</mat-checkbox> <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, 'suspended')">suspended</mat-checkbox>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'stopped')">Stopped</mat-checkbox> <mat-checkbox (change)="applyStatusFilter($event.checked, 'stopped')">stopped</mat-checkbox>
</div> </div>
Filter devices with captures <br/> Show devices with <br/>
<div> <div class="filterBox">
<mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Show devices with captures</mat-checkbox><br/> <mat-checkbox (change)="applyCaptureFilter($event.checked, 'capture')">active capture(s)</mat-checkbox>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Show devices with packet filters</mat-checkbox> <mat-checkbox (change)="applyCaptureFilter($event.checked, 'packet')">active packet filters</mat-checkbox>
</div> </div>
</div> </div>
<div class="summarySorting"> <div class="summarySorting">

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

@ -36,7 +36,7 @@
.summaryContent { .summaryContent {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
max-height: 150px; max-height: 180px;
overflow: auto; overflow: auto;
scrollbar-color: darkgrey #263238; scrollbar-color: darkgrey #263238;
scrollbar-width: thin; scrollbar-width: thin;

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

@ -8,6 +8,7 @@ import { ProjectService } from '../../services/project.service';
import { ProjectStatistics } from '../../models/project-statistics'; import { ProjectStatistics } from '../../models/project-statistics';
import { Compute } from '../../models/compute'; import { Compute } from '../../models/compute';
import { ComputeService } from '../../services/compute.service'; import { ComputeService } from '../../services/compute.service';
import { LinksDataSource } from '../../cartography/datasources/links-datasource';
@Component({ @Component({
@ -29,13 +30,16 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
startedStatusFilterEnabled: boolean = false; startedStatusFilterEnabled: boolean = false;
suspendedStatusFilterEnabled: boolean = false; suspendedStatusFilterEnabled: boolean = false;
stoppedStatusFilterEnabled: boolean = false; stoppedStatusFilterEnabled: boolean = false;
captureFilterEnabled: boolean = false;
packetFilterEnabled: boolean = false;
computes: Compute[] = []; computes: Compute[] = [];
isTopologyVisible: boolean = true; isTopologyVisible: boolean = true;
constructor( constructor(
private nodesDataSource: NodesDataSource, private nodesDataSource: NodesDataSource,
private projectService: ProjectService, private projectService: ProjectService,
private computeService: ComputeService private computeService: ComputeService,
private linksDataSource: LinksDataSource
) {} ) {}
ngOnInit() { ngOnInit() {
@ -97,6 +101,15 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
this.applyFilters(); this.applyFilters();
} }
applyCaptureFilter(value: boolean, filter: string) {
if (filter === 'capture') {
this.captureFilterEnabled = value;
} else if (filter === 'packet') {
this.packetFilterEnabled = value;
}
this.applyFilters();
}
applyFilters() { applyFilters() {
let nodes: Node[] = []; let nodes: Node[] = [];
@ -116,6 +129,14 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
nodes = nodes.concat(this.nodes); nodes = nodes.concat(this.nodes);
} }
if (this.captureFilterEnabled) {
nodes = this.checkCapturing(nodes);
}
if(this.packetFilterEnabled) {
nodes = this.checkPacketFilters(nodes);
}
if (this.sortingOrder === 'asc') { if (this.sortingOrder === 'asc') {
this.filteredNodes = nodes.sort(this.compareAsc); this.filteredNodes = nodes.sort(this.compareAsc);
} else { } else {
@ -123,6 +144,48 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
} }
} }
checkCapturing(nodes: Node[]): Node[] {
let links = this.linksDataSource.getItems();
let nodesWithCapturing: string[] = [];
links.forEach(link => {
if (link.capturing) {
link.nodes.forEach(node => {
nodesWithCapturing.push(node.node_id);
});
}
});
let filteredNodes: Node[] = [];
nodes.forEach(node => {
if (nodesWithCapturing.includes(node.node_id)) {
filteredNodes.push(node);
}
});
return filteredNodes;
}
checkPacketFilters(nodes: Node[]): Node[] {
let links = this.linksDataSource.getItems();
let nodesWithPacketFilters: string[] = [];
links.forEach(link => {
if (link.filters.bpf || link.filters.corrupt || link.filters.corrupt || link.filters.packet_loss || link.filters.frequency_drop) {
link.nodes.forEach(node => {
nodesWithPacketFilters.push(node.node_id);
});
}
});
let filteredNodes: Node[] = [];
nodes.forEach(node => {
if (nodesWithPacketFilters.includes(node.node_id)) {
filteredNodes.push(node);
}
});
return filteredNodes;
}
close() { close() {
this.closeTopologySummary.emit(false); this.closeTopologySummary.emit(false);
} }