ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-21 02:01:19 +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 }">
<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>
Show devices with <br/>
<div class="filterBox">
<mat-checkbox (change)="applyCaptureFilter($event.checked, 'capture')">active capture(s)</mat-checkbox>
<mat-checkbox (change)="applyCaptureFilter($event.checked, 'packet')">active packet filters</mat-checkbox>
</div>
<mat-select placeholder="Filter nodes" multiple>
<mat-optgroup label="Status filter">
<mat-option value="started" (onSelectionChange)="applyStatusFilter('started')">started</mat-option>
<mat-option value="suspended" (onSelectionChange)="applyStatusFilter('suspended')">suspended</mat-option>
<mat-option value="stopped" (onSelectionChange)="applyStatusFilter('stopped')">stopped</mat-option>
</mat-optgroup>
<mat-optgroup label="Capture filter">
<mat-option value="capture" (onSelectionChange)="applyCaptureFilter('capture')">active capture(s)</mat-option>
<mat-option value="packet" (onSelectionChange)="applyCaptureFilter('packet')">active packet captures</mat-option>
</mat-optgroup>
</mat-select>
</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>
<mat-select (selectionChange)="setSortingOrder()" placeholder="Sorting" [(value)]="sortingOrder">
<mat-option value="asc">sort by name ascending</mat-option>
<mat-option value="desc">sort by name descending</mat-option>
</mat-select>
</div>
<mat-divider class="divider"></mat-divider>
<div

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

@ -29,11 +29,13 @@
}
.summaryFilters {
height: 25px;
margin-left: 5px;
margin-right: 5px;
}
.summarySorting {
height: 25px;
margin-left: 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>();
public style = { };
public styleInside = { height: `180px` };
public styleInside = { height: `280px` };
private subscriptions: Subscription[] = [];
projectsStatistics: ProjectStatistics;
nodes: Node[] = [];
filteredNodes: Node[] = [];
sortingOrder: string = 'asc';
public sortingOrder: string = 'asc';
startedStatusFilterEnabled: boolean = false;
suspendedStatusFilterEnabled: boolean = false;
stoppedStatusFilterEnabled: boolean = false;
@ -134,7 +134,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
};
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());
}
setSortingOrder(order: string) {
this.sortingOrder = order;
setSortingOrder() {
if (this.sortingOrder === 'asc') {
this.filteredNodes = this.filteredNodes.sort(this.compareAsc);
} else {
@ -165,22 +164,22 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
}
}
applyStatusFilter(value: boolean, filter: string) {
applyStatusFilter(filter: string) {
if (filter === 'started') {
this.startedStatusFilterEnabled = value;
this.startedStatusFilterEnabled = !this.startedStatusFilterEnabled;
} else if (filter === 'stopped') {
this.stoppedStatusFilterEnabled = value;
this.stoppedStatusFilterEnabled = !this.stoppedStatusFilterEnabled;
} else if (filter === 'suspended') {
this.suspendedStatusFilterEnabled = value;
this.suspendedStatusFilterEnabled = !this.suspendedStatusFilterEnabled;
}
this.applyFilters();
}
applyCaptureFilter(value: boolean, filter: string) {
applyCaptureFilter(filter: string) {
if (filter === 'capture') {
this.captureFilterEnabled = value;
this.captureFilterEnabled = !this.captureFilterEnabled;
} else if (filter === 'packet') {
this.packetFilterEnabled = value;
this.packetFilterEnabled = !this.packetFilterEnabled;
}
this.applyFilters();
}