ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-05-19 17:03:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updating topology summary widget

Browse Source
This commit is contained in:
piotrpekala7 2020-03-09 13:52:26 +01:00
parent 271807cd9a
commit b33eb4ce24
3 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,26 +23,23 @@
<div [ngClass]="{ notvisible: !isTopologyVisible }"> <div [ngClass]="{ notvisible: !isTopologyVisible }">
<mat-divider class="divider"></mat-divider> <mat-divider class="divider"></mat-divider>
<div class="summaryFilters"> <div class="summaryFilters">
Filter by status <br/> <mat-select placeholder="Filter nodes" multiple>
<div class="filterBox"> <mat-optgroup label="Status filter">
<mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">started</mat-checkbox> <mat-option value="started" (onSelectionChange)="applyStatusFilter('started')">started</mat-option>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'suspended')">suspended</mat-checkbox> <mat-option value="suspended" (onSelectionChange)="applyStatusFilter('suspended')">suspended</mat-option>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'stopped')">stopped</mat-checkbox> <mat-option value="stopped" (onSelectionChange)="applyStatusFilter('stopped')">stopped</mat-option>
</div> </mat-optgroup>
Show devices with <br/> <mat-optgroup label="Capture filter">
<div class="filterBox"> <mat-option value="capture" (onSelectionChange)="applyCaptureFilter('capture')">active capture(s)</mat-option>
<mat-checkbox (change)="applyCaptureFilter($event.checked, 'capture')">active capture(s)</mat-checkbox> <mat-option value="packet" (onSelectionChange)="applyCaptureFilter('packet')">active packet captures</mat-option>
<mat-checkbox (change)="applyCaptureFilter($event.checked, 'packet')">active packet filters</mat-checkbox> </mat-optgroup>
</div> </mat-select>
</div> </div>
<div class="summarySorting"> <div class="summarySorting">
Sorting <br/> <mat-select (selectionChange)="setSortingOrder()" placeholder="Sorting" [(value)]="sortingOrder">
<div class="radio-group-wrapper"> <mat-option value="asc">sort by name ascending</mat-option>
<mat-radio-group class="radio-group" aria-label="Sorting"> <mat-option value="desc">sort by name descending</mat-option>
<mat-radio-button value="1" (click)="setSortingOrder('asc')" checked>By name ascending</mat-radio-button> </mat-select>
<mat-radio-button value="2" (click)="setSortingOrder('desc')">By name descending</mat-radio-button>
</mat-radio-group>
</div>
</div> </div>
<mat-divider class="divider"></mat-divider> <mat-divider class="divider"></mat-divider>
<div <div

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

@ -29,11 +29,13 @@
} }
.summaryFilters { .summaryFilters {
height: 25px;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
.summarySorting { .summarySorting {
height: 25px;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }

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

@ -26,12 +26,12 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
@Output() closeTopologySummary = new EventEmitter<boolean>(); @Output() closeTopologySummary = new EventEmitter<boolean>();
public style = { }; public style = { };
public styleInside = { height: `180px` }; public styleInside = { height: `280px` };
private subscriptions: Subscription[] = []; private subscriptions: Subscription[] = [];
projectsStatistics: ProjectStatistics; projectsStatistics: ProjectStatistics;
nodes: Node[] = []; nodes: Node[] = [];
filteredNodes: Node[] = []; filteredNodes: Node[] = [];
sortingOrder: string = 'asc'; public sortingOrder: string = 'asc';
startedStatusFilterEnabled: boolean = false; startedStatusFilterEnabled: boolean = false;
suspendedStatusFilterEnabled: boolean = false; suspendedStatusFilterEnabled: boolean = false;
stoppedStatusFilterEnabled: boolean = false; stoppedStatusFilterEnabled: boolean = false;
@ -134,7 +134,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
}; };
this.styleInside = { this.styleInside = {
height: `${event.rectangle.height - 220}px` height: `${event.rectangle.height - 120}px`
}; };
} }
@ -156,8 +156,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe()); this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
} }
setSortingOrder(order: string) { setSortingOrder() {
this.sortingOrder = order;
if (this.sortingOrder === 'asc') { if (this.sortingOrder === 'asc') {
this.filteredNodes = this.filteredNodes.sort(this.compareAsc); this.filteredNodes = this.filteredNodes.sort(this.compareAsc);
} else { } else {
@ -165,22 +164,22 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
} }
} }
applyStatusFilter(value: boolean, filter: string) { applyStatusFilter(filter: string) {
if (filter === 'started') { if (filter === 'started') {
this.startedStatusFilterEnabled = value; this.startedStatusFilterEnabled = !this.startedStatusFilterEnabled;
} else if (filter === 'stopped') { } else if (filter === 'stopped') {
this.stoppedStatusFilterEnabled = value; this.stoppedStatusFilterEnabled = !this.stoppedStatusFilterEnabled;
} else if (filter === 'suspended') { } else if (filter === 'suspended') {
this.suspendedStatusFilterEnabled = value; this.suspendedStatusFilterEnabled = !this.suspendedStatusFilterEnabled;
} }
this.applyFilters(); this.applyFilters();
} }
applyCaptureFilter(value: boolean, filter: string) { applyCaptureFilter(filter: string) {
if (filter === 'capture') { if (filter === 'capture') {
this.captureFilterEnabled = value; this.captureFilterEnabled = !this.captureFilterEnabled;
} else if (filter === 'packet') { } else if (filter === 'packet') {
this.packetFilterEnabled = value; this.packetFilterEnabled = !this.packetFilterEnabled;
} }
this.applyFilters(); this.applyFilters();
} }