ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-23 08:55:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update topology summary component

Browse Source
This commit is contained in:
Piotr Pekala
2019-08-19 00:59:04 -07:00
parent 909e197b9a
commit 51ef91f8d3
6 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,7 @@
</mat-menu> </mat-menu>
<mat-toolbar-row> <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-toolbar-row>
<mat-menu #viewMenu="matMenu" [overlapTrigger]="false"> <mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
@ -57,6 +57,9 @@
<mat-checkbox [ngModel]="project.show_interface_labels" (change)="toggleShowInterfaceLabels($event.checked)"> <mat-checkbox [ngModel]="project.show_interface_labels" (change)="toggleShowInterfaceLabels($event.checked)">
Show interface labels Show interface labels
</mat-checkbox> </mat-checkbox>
<mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
Show topology summary
</mat-checkbox>
</div> </div>
</mat-menu> </mat-menu>
@ -120,4 +123,6 @@
<app-node-label-dragged [server]="server"></app-node-label-dragged> <app-node-label-dragged [server]="server"></app-node-label-dragged>
<app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added> <app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
<app-text-edited [server]="server"></app-text-edited> <app-text-edited [server]="server"></app-text-edited>
<app-topology-summary *ngIf="project" [server]="server" [project]="project"></app-topology-summary> <div [ngClass]="{ visible: !isTopologySummaryVisible }">
<app-topology-summary *ngIf="project" [server]="server" [project]="project" (closeTopologySummary)='toggleShowTopologySummary($event)'></app-topology-summary>
</div>

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

@ -230,3 +230,7 @@ g.node text,
.context-menu-items .mat-menu-item:focus { .context-menu-items .mat-menu-item:focus {
background: none; background: none;
} }
.visible {
display: none;
}

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

@ -68,6 +68,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public server: Server; public server: Server;
public ws: WebSocket; public ws: WebSocket;
public isProjectMapMenuVisible: boolean = false; public isProjectMapMenuVisible: boolean = false;
public isTopologySummaryVisible: boolean = false;
tools = { tools = {
selection: true, selection: true,
@ -362,6 +363,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.project.show_interface_labels = enabled; this.project.show_interface_labels = enabled;
} }
public toggleShowTopologySummary(visible: boolean) {
this.isTopologySummaryVisible = visible;
}
public hideMenu() { public hideMenu() {
this.projectMapMenuComponent.resetDrawToolChoice() this.projectMapMenuComponent.resetDrawToolChoice()
this.isProjectMapMenuVisible = false; this.isProjectMapMenuVisible = false;

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

@ -1,7 +1,7 @@
<div class="summaryWrapper" *ngIf="projectsStatistics"> <div class="summaryWrapper" *ngIf="projectsStatistics">
<div class="summaryHeader"> <div class="summaryHeader">
<span class="title">Topology summary ({{projectsStatistics.snapshots}} snapshots)</span> <span class="title">Topology summary ({{projectsStatistics.snapshots}} snapshots)</span>
<mat-icon>close</mat-icon> <mat-icon (click)="close()" class="closeButton">close</mat-icon>
</div> </div>
<mat-divider class="divider"></mat-divider> <mat-divider class="divider"></mat-divider>
<div class="summaryFilters"> <div class="summaryFilters">

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

@ -65,3 +65,7 @@ mat-icon {
.radio-group { .radio-group {
margin-top: 5px; margin-top: 5px;
} }
.closeButton {
cursor: pointer;
}

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

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, Input, AfterViewInit } from '@angular/core'; import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { Project } from '../../models/project'; import { Project } from '../../models/project';
import { Server } from '../../models/server'; import { Server } from '../../models/server';
import { NodesDataSource } from '../../cartography/datasources/nodes-datasource'; import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
@ -18,6 +18,8 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
@Input() server: Server; @Input() server: Server;
@Input() project: Project; @Input() project: Project;
@Output() closeTopologySummary = new EventEmitter<boolean>();
private subscriptions: Subscription[] = []; private subscriptions: Subscription[] = [];
projectsStatistics: ProjectStatistics; projectsStatistics: ProjectStatistics;
nodes: Node[] = []; nodes: Node[] = [];
@ -91,4 +93,8 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
this.filteredNodes = nodes.sort(this.compareDesc); this.filteredNodes = nodes.sort(this.compareDesc);
} }
} }
close() {
this.closeTopologySummary.emit(false);
}
} }