Update topology summary component

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

View File

@ -49,7 +49,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">
@ -57,6 +57,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>
@ -120,4 +123,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>
<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>

View File

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

View File

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

View File

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

View File

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

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