Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 1 | /* |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 2 | * Copyright 2019-present Open Networking Foundation |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 3 | * |
| 4 | * Licensed under the Apache License, Version 2.0 (the 'License'); |
| 5 | * you may not use this file except in compliance with the License. |
| 6 | * You may obtain a copy of the License at |
| 7 | * |
| 8 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | * |
| 10 | * Unless required by applicable law or agreed to in writing, software |
| 11 | * distributed under the License is distributed on an 'AS IS' BASIS, |
| 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | * See the License for the specific language governing permissions and |
| 14 | * limitations under the License. |
| 15 | */ |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 16 | import { |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 17 | AfterContentInit, |
| 18 | Component, HostListener, Inject, Input, |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 19 | OnDestroy, |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 20 | OnInit, SimpleChange, |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 21 | ViewChild |
| 22 | } from '@angular/core'; |
Sean Condon | 55c3053 | 2018-10-29 12:26:57 +0000 | [diff] [blame] | 23 | import * as d3 from 'd3'; |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 24 | import { |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 25 | FnService, |
| 26 | IconService, |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 27 | KeysService, |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 28 | KeysToken, |
| 29 | LionService, |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 30 | LogService, |
| 31 | PrefsService, |
| 32 | SvgUtilService, |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 33 | TopoZoomPrefs, |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 34 | WebSocketService, |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 35 | ZoomUtils |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 36 | } from 'gui2-fw-lib'; |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 37 | import {InstanceComponent} from '../panel/instance/instance.component'; |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 38 | import {DetailsComponent} from '../panel/details/details.component'; |
| 39 | import {BackgroundSvgComponent} from '../layer/backgroundsvg/backgroundsvg.component'; |
| 40 | import {ForceSvgComponent} from '../layer/forcesvg/forcesvg.component'; |
| 41 | import {TopologyService} from '../topology.service'; |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 42 | import { |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 43 | GridDisplayToggle, |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 44 | HostLabelToggle, |
| 45 | LabelToggle, |
| 46 | UiElement |
| 47 | } from '../layer/forcesvg/models'; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 48 | import { |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 49 | ALL_TRAFFIC, |
| 50 | BKGRND_SELECT, |
| 51 | BKGRND_TOGGLE, |
| 52 | CANCEL_TRAFFIC, |
| 53 | CYCLEGRIDDISPLAY_BTN, |
| 54 | CYCLEHOSTLABEL_BTN, |
| 55 | CYCLELABELS_BTN, |
| 56 | DETAILS_TOGGLE, |
| 57 | EQMASTER_BTN, |
| 58 | HOSTS_TOGGLE, |
| 59 | INSTANCE_TOGGLE, |
| 60 | LAYOUT_ACCESS_BTN, |
| 61 | LAYOUT_DEFAULT_BTN, |
| 62 | OFFLINE_TOGGLE, |
| 63 | PORTS_TOGGLE, |
| 64 | QUICKHELP_BTN, |
| 65 | RESETZOOM_BTN, |
| 66 | SUMMARY_TOGGLE |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 67 | } from '../panel/toolbar/toolbar.component'; |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 68 | import {TrafficService, TrafficType} from '../traffic.service'; |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 69 | import {ZoomableDirective} from '../layer/zoomable.directive'; |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 70 | import {MapObject} from '../layer/maputils'; |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 71 | import {LayoutService, LayoutType} from '../layout.service'; |
Sean Condon | 64ea7d2 | 2019-04-12 19:39:13 +0100 | [diff] [blame] | 72 | import {SelectedEvent} from '../layer/forcesvg/visuals/nodevisual'; |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 73 | |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 74 | const TOPO2_PREFS = 'topo2_prefs'; |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 75 | const TOPO_MAPID_PREFS = 'topo_mapid'; |
| 76 | |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 77 | const PREF_BG = 'bg'; |
| 78 | const PREF_DETAIL = 'detail'; |
| 79 | const PREF_DLBLS = 'dlbls'; |
| 80 | const PREF_HLBLS = 'hlbls'; |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 81 | const PREF_GRID = 'grid'; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 82 | const PREF_HOSTS = 'hosts'; |
| 83 | const PREF_INSTS = 'insts'; |
| 84 | const PREF_OFFDEV = 'offdev'; |
| 85 | const PREF_PORTHL = 'porthl'; |
| 86 | const PREF_SUMMARY = 'summary'; |
| 87 | const PREF_TOOLBAR = 'toolbar'; |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 88 | const PREF_PINNED = 'pinned'; |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 89 | const PREF_TRAFFIC = 'traffic'; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 90 | |
Sean Condon | 64ea7d2 | 2019-04-12 19:39:13 +0100 | [diff] [blame] | 91 | const BACKGROUND_ELEMENTS = [ |
| 92 | 'svg topo2', |
| 93 | 'path bgmap' |
| 94 | ]; |
| 95 | |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 96 | /** |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 97 | * Model of the topo2_prefs object - this is a subset of the overall Prefs returned |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 98 | * by the server |
| 99 | */ |
| 100 | export interface Topo2Prefs { |
| 101 | bg: number; |
| 102 | detail: number; |
| 103 | dlbls: number; |
| 104 | hlbls: number; |
| 105 | hosts: number; |
| 106 | insts: number; |
| 107 | offdev: number; |
| 108 | porthl: number; |
| 109 | spr: number; |
| 110 | ovid: string; |
| 111 | summary: number; |
| 112 | toolbar: number; |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 113 | grid: number; |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 114 | pinned: number; |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 115 | traffic: number; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 116 | } |
| 117 | |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 118 | /** |
| 119 | * ONOS GUI Topology View |
| 120 | * |
| 121 | * This Topology View component is the top level component in a hierarchy that |
| 122 | * comprises the whole Topology View |
| 123 | * |
| 124 | * There are three main parts (panels, graphical and breadcrumbs) |
| 125 | * The panel hierarchy |
| 126 | * |-- Instances Panel (shows ONOS instances) |
| 127 | * |-- Summary Panel (summary of ONOS) |
| 128 | * |-- Toolbar Panel (the toolbar) |
| 129 | * |-- Details Panel (when a node is selected in the Force graphical view (see below)) |
| 130 | * |
| 131 | * The graphical hierarchy contains |
| 132 | * Topology (this) |
| 133 | * |-- No Devices Connected (only of there are no nodes to show) |
| 134 | * |-- Zoom Layer (everything beneath this can be zoomed and panned) |
| 135 | * |-- Background (container for any backgrounds - can be toggled on and off) |
| 136 | * |-- Map |
| 137 | * |-- Forces (all of the nodes and links laid out by a d3.force simulation) |
| 138 | * |
| 139 | * The breadcrumbs |
| 140 | * |-- Breadcrumb (in region view a way of navigating back up through regions) |
| 141 | */ |
| 142 | @Component({ |
| 143 | selector: 'onos-topology', |
| 144 | templateUrl: './topology.component.html', |
| 145 | styleUrls: ['./topology.component.css'] |
| 146 | }) |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame] | 147 | export class TopologyComponent implements OnInit, OnDestroy { |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 148 | @Input() bannerHeight: number = 48; |
Sean Condon | aa4366d | 2018-11-02 14:29:01 +0000 | [diff] [blame] | 149 | // These are references to the components inserted in the template |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 150 | @ViewChild(InstanceComponent) instance: InstanceComponent; |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 151 | @ViewChild(DetailsComponent) details: DetailsComponent; |
Sean Condon | aa4366d | 2018-11-02 14:29:01 +0000 | [diff] [blame] | 152 | @ViewChild(BackgroundSvgComponent) background: BackgroundSvgComponent; |
| 153 | @ViewChild(ForceSvgComponent) force: ForceSvgComponent; |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 154 | @ViewChild(ZoomableDirective) zoomDirective: ZoomableDirective; |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 155 | |
| 156 | flashMsg: string = ''; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 157 | // These are used as defaults if nothing is set on the server |
| 158 | prefsState: Topo2Prefs = <Topo2Prefs>{ |
| 159 | bg: 0, |
| 160 | detail: 1, |
| 161 | dlbls: 0, |
| 162 | hlbls: 2, |
| 163 | hosts: 0, |
| 164 | insts: 1, |
| 165 | offdev: 1, |
| 166 | ovid: 'traffic', // default to traffic overlay |
| 167 | porthl: 1, |
| 168 | spr: 0, |
| 169 | summary: 1, |
| 170 | toolbar: 0, |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 171 | grid: 0, |
| 172 | pinned: 0, |
| 173 | traffic: 2 // default to PORTSTATSPKTSEC, as it will iterate over to 0 on init |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 174 | }; |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 175 | |
| 176 | mapIdState: MapObject = <MapObject>{ |
| 177 | id: undefined, |
| 178 | scale: 1.0 |
| 179 | }; |
| 180 | mapSelShown: boolean = false; |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 181 | lionFn; // Function |
Sean Condon | 55c3053 | 2018-10-29 12:26:57 +0000 | [diff] [blame] | 182 | |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 183 | gridShown: boolean = true; |
| 184 | geoGridShown: boolean = true; |
| 185 | |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 186 | constructor( |
| 187 | protected log: LogService, |
| 188 | protected fs: FnService, |
| 189 | protected ks: KeysService, |
| 190 | protected sus: SvgUtilService, |
| 191 | protected ps: PrefsService, |
Sean Condon | 55c3053 | 2018-10-29 12:26:57 +0000 | [diff] [blame] | 192 | protected wss: WebSocketService, |
Sean Condon | aa4366d | 2018-11-02 14:29:01 +0000 | [diff] [blame] | 193 | protected ts: TopologyService, |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 194 | protected trs: TrafficService, |
| 195 | protected is: IconService, |
| 196 | private lion: LionService, |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 197 | private layout: LayoutService, |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 198 | @Inject('Window') public window: any, |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 199 | ) { |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 200 | if (this.lion.ubercache.length === 0) { |
| 201 | this.lionFn = this.dummyLion; |
| 202 | this.lion.loadCbs.set('topo-toolbar', () => this.doLion()); |
| 203 | } else { |
| 204 | this.doLion(); |
| 205 | } |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 206 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 207 | this.is.loadIconDef('active'); |
Sean Condon | 4747ece | 2019-05-04 20:17:02 +0100 | [diff] [blame] | 208 | this.is.loadIconDef('bgpSpeaker'); |
| 209 | this.is.loadIconDef('bird'); |
| 210 | this.is.loadIconDef('deviceTable'); |
| 211 | this.is.loadIconDef('fiber_switch'); |
| 212 | this.is.loadIconDef('flowTable'); |
| 213 | this.is.loadIconDef('groupTable'); |
| 214 | this.is.loadIconDef('m_allTraffic'); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 215 | this.is.loadIconDef('m_cycleLabels'); |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 216 | this.is.loadIconDef('m_cycleGridDisplay'); |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 217 | this.is.loadIconDef('m_disjointPaths'); |
Sean Condon | 4747ece | 2019-05-04 20:17:02 +0100 | [diff] [blame] | 218 | this.is.loadIconDef('m_details'); |
| 219 | this.is.loadIconDef('m_endstation'); |
| 220 | this.is.loadIconDef('m_eqMaster'); |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 221 | this.is.loadIconDef('m_fiberSwitch'); |
Sean Condon | 4747ece | 2019-05-04 20:17:02 +0100 | [diff] [blame] | 222 | this.is.loadIconDef('m_firewall'); |
| 223 | this.is.loadIconDef('m_map'); |
| 224 | this.is.loadIconDef('m_microwave'); |
| 225 | this.is.loadIconDef('m_ols'); |
| 226 | this.is.loadIconDef('m_otn'); |
| 227 | this.is.loadIconDef('m_ports'); |
| 228 | this.is.loadIconDef('m_resetZoom'); |
| 229 | this.is.loadIconDef('m_roadm'); |
| 230 | this.is.loadIconDef('m_roadm_otn'); |
| 231 | this.is.loadIconDef('m_router'); |
| 232 | this.is.loadIconDef('m_selectMap'); |
| 233 | this.is.loadIconDef('m_summary'); |
| 234 | this.is.loadIconDef('m_switch'); |
| 235 | this.is.loadIconDef('m_terminal_device'); |
| 236 | this.is.loadIconDef('m_uiAttached'); |
| 237 | this.is.loadIconDef('m_unknown'); |
| 238 | this.is.loadIconDef('meterTable'); |
| 239 | this.is.loadIconDef('microwave'); |
| 240 | this.is.loadIconDef('otn'); |
| 241 | this.is.loadIconDef('portTable'); |
| 242 | this.is.loadIconDef('roadm_otn'); |
| 243 | this.is.loadIconDef('triangleUp'); |
| 244 | this.is.loadIconDef('uiAttached'); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 245 | this.log.debug('Topology component constructed'); |
| 246 | } |
| 247 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 248 | /** |
| 249 | * Static functions must come before member variables |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 250 | * @param index Corresponds to LabelToggle.Enum index |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 251 | */ |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 252 | private static deviceLabelFlashMessage(index: number): string { |
| 253 | switch (index) { |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 254 | case 0: return 'fl_device_labels_hide'; |
| 255 | case 1: return 'fl_device_labels_show_friendly'; |
| 256 | case 2: return 'fl_device_labels_show_id'; |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 257 | } |
| 258 | } |
| 259 | |
| 260 | private static hostLabelFlashMessage(index: number): string { |
| 261 | switch (index) { |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 262 | case 0: return 'fl_host_labels_hide'; |
| 263 | case 1: return 'fl_host_labels_show_friendly'; |
| 264 | case 2: return 'fl_host_labels_show_ip'; |
| 265 | case 3: return 'fl_host_labels_show_mac'; |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 266 | } |
| 267 | } |
| 268 | |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 269 | private static gridDisplayFlashMessage(index: number): string { |
| 270 | switch (index) { |
| 271 | case 0: return 'fl_grid_display_hide'; |
| 272 | case 1: return 'fl_grid_display_1000'; |
| 273 | case 2: return 'fl_grid_display_geo'; |
| 274 | case 3: return 'fl_grid_display_both'; |
| 275 | } |
| 276 | } |
| 277 | |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 278 | private static trafficTypeFlashMessage(index: number): string { |
| 279 | switch (index) { |
| 280 | case 0: return 'tr_fl_fstats_bytes'; |
| 281 | case 1: return 'tr_fl_pstats_bits'; |
| 282 | case 2: return 'tr_fl_pstats_pkts'; |
| 283 | } |
| 284 | } |
| 285 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 286 | /** |
| 287 | * Pass the list of Key Commands to the KeyService, and initialize the Topology |
| 288 | * Service - which communicates with through the WebSocket to the ONOS server |
| 289 | * to get the nodes and links. |
| 290 | */ |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 291 | ngOnInit() { |
| 292 | this.bindCommands(); |
Sean Condon | aa4366d | 2018-11-02 14:29:01 +0000 | [diff] [blame] | 293 | // The components from the template are handed over to TopologyService here |
| 294 | // so that WebSocket responses can be passed back in to them |
| 295 | // The handling of the WebSocket call is delegated out to the Topology |
| 296 | // Service just to compartmentalize things a bit |
| 297 | this.ts.init(this.instance, this.background, this.force); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 298 | |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame] | 299 | // For the 2.1 release to not listen to updates of prefs as they are |
| 300 | // only the echo of what we have sent down and the event mechanism |
| 301 | // does not discern between users. Can get confused if multiple windows open |
| 302 | // this.ps.addListener((data) => this.prefsUpdateHandler(data)); |
| 303 | |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 304 | this.prefsState = this.ps.getPrefs(TOPO2_PREFS, this.prefsState); |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 305 | this.mapIdState = this.ps.getPrefs(TOPO_MAPID_PREFS, this.mapIdState); |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 306 | this.trs.init(this.force); |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 307 | |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 308 | // Scale the window initially - then after resize |
| 309 | const zoomMapExtents = ZoomUtils.zoomToWindowSize( |
| 310 | this.bannerHeight, this.window.innerWidth, this.window.innerHeight); |
| 311 | this.zoomDirective.changeZoomLevel(zoomMapExtents, true); |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame] | 312 | this.log.debug('TopologyComponent initialized', |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 313 | this.bannerHeight, this.window.innerWidth, this.window.innerHeight, |
| 314 | zoomMapExtents); |
| 315 | } |
| 316 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 317 | /** |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 318 | * Callback function that's called whenever new Prefs are received from WebSocket |
| 319 | * |
| 320 | * Note: At present the backend server does not filter updated by logged in user, |
| 321 | * so you might get updates pertaining to a different user |
| 322 | */ |
| 323 | prefsUpdateHandler(data: any): void { |
| 324 | // Extract the TOPO2 prefs from it |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 325 | if (data[TOPO2_PREFS]) { |
| 326 | this.prefsState = data[TOPO2_PREFS]; |
| 327 | } |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 328 | this.log.debug('Updated topo2 prefs', this.prefsState, this.mapIdState); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 329 | } |
| 330 | |
| 331 | /** |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 332 | * When this component is being stopped, disconnect the TopologyService from |
| 333 | * the WebSocket |
| 334 | */ |
Sean Condon | aa4366d | 2018-11-02 14:29:01 +0000 | [diff] [blame] | 335 | ngOnDestroy() { |
| 336 | this.ts.destroy(); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 337 | this.ps.removeListener((data) => this.prefsUpdateHandler(data)); |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 338 | this.trs.destroy(); |
Sean Condon | aa4366d | 2018-11-02 14:29:01 +0000 | [diff] [blame] | 339 | this.log.debug('Topology component destroyed'); |
| 340 | } |
| 341 | |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 342 | @HostListener('window:resize', ['$event']) |
| 343 | onResize(event) { |
| 344 | const zoomMapExtents = ZoomUtils.zoomToWindowSize( |
| 345 | this.bannerHeight, event.target.innerWidth, event.target.innerHeight); |
| 346 | this.zoomDirective.changeZoomLevel(zoomMapExtents, true); |
| 347 | this.log.debug('Topology window resize', |
| 348 | event.target.innerWidth, event.target.innerHeight, this.bannerHeight, zoomMapExtents); |
| 349 | } |
| 350 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 351 | /** |
| 352 | * When ever a toolbar button is clicked, an event is sent up from toolbar |
| 353 | * component which is caught and passed on to here. |
| 354 | * @param name The name of the button that was clicked |
| 355 | */ |
| 356 | toolbarButtonClicked(name: string) { |
| 357 | switch (name) { |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 358 | case INSTANCE_TOGGLE: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 359 | this.toggleInstancePanel(); |
| 360 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 361 | case SUMMARY_TOGGLE: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 362 | this.toggleSummary(); |
| 363 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 364 | case DETAILS_TOGGLE: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 365 | this.toggleDetails(); |
| 366 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 367 | case HOSTS_TOGGLE: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 368 | this.toggleHosts(); |
| 369 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 370 | case OFFLINE_TOGGLE: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 371 | this.toggleOfflineDevices(); |
| 372 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 373 | case PORTS_TOGGLE: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 374 | this.togglePorts(); |
| 375 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 376 | case BKGRND_TOGGLE: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 377 | this.toggleBackground(); |
| 378 | break; |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 379 | case BKGRND_SELECT: |
| 380 | this.mapSelShown = !this.mapSelShown; |
| 381 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 382 | case CYCLELABELS_BTN: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 383 | this.cycleDeviceLabels(); |
| 384 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 385 | case CYCLEHOSTLABEL_BTN: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 386 | this.cycleHostLabels(); |
| 387 | break; |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 388 | case CYCLEGRIDDISPLAY_BTN: |
| 389 | this.cycleGridDisplay(); |
| 390 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 391 | case RESETZOOM_BTN: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 392 | this.resetZoom(); |
| 393 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 394 | case EQMASTER_BTN: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 395 | this.equalizeMasters(); |
| 396 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 397 | case CANCEL_TRAFFIC: |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 398 | this.cancelTraffic(); |
| 399 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 400 | case ALL_TRAFFIC: |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 401 | this.cycleTrafficTypeDisplay(); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 402 | break; |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 403 | case QUICKHELP_BTN: |
| 404 | this.ks.quickHelpShown = true; |
| 405 | break; |
Sean Condon | 2888433 | 2019-03-21 14:07:00 +0000 | [diff] [blame] | 406 | case LAYOUT_DEFAULT_BTN: |
| 407 | this.layout.changeLayout(LayoutType.LAYOUT_DEFAULT); |
| 408 | break; |
| 409 | case LAYOUT_ACCESS_BTN: |
| 410 | this.layout.changeLayout(LayoutType.LAYOUT_ACCESS); |
| 411 | break; |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 412 | default: |
| 413 | this.log.warn('Unhandled Toolbar action', name); |
| 414 | } |
| 415 | } |
| 416 | |
| 417 | /** |
| 418 | * The list of key strokes that will be active in the Topology View. |
| 419 | * |
| 420 | * This action map is passed to the KeyService through the bindCommands() |
| 421 | * when this component is being initialized |
Sean Condon | bed2e03 | 2019-04-17 22:22:49 +0100 | [diff] [blame] | 422 | * |
| 423 | * TODO - Replace this doggy doo doo (copied over from GUI-1) |
| 424 | * with something more structured |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 425 | */ |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 426 | actionMap() { |
| 427 | return { |
Sean Condon | bed2e03 | 2019-04-17 22:22:49 +0100 | [diff] [blame] | 428 | A: [() => {this.cycleTrafficTypeDisplay(); }, this.lionFn('tr_btn_monitor_all')], |
| 429 | B: [(token) => {this.toggleBackground(token); }, this.lionFn('tbtt_tog_map')], |
| 430 | D: [(token) => {this.toggleDetails(token); }, this.lionFn('tbtt_tog_use_detail')], |
| 431 | E: [() => {this.equalizeMasters(); }, this.lionFn('tbtt_eq_master')], |
| 432 | H: [() => {this.toggleHosts(); }, this.lionFn('tbtt_tog_host')], |
| 433 | I: [(token) => {this.toggleInstancePanel(token); }, this.lionFn('tbtt_tog_instances')], |
| 434 | G: [() => {this.mapSelShown = !this.mapSelShown; }, this.lionFn('tbtt_sel_map')], |
| 435 | L: [() => {this.cycleDeviceLabels(); }, this.lionFn('tbtt_cyc_dev_labs')], |
| 436 | M: [() => {this.toggleOfflineDevices(); }, this.lionFn('tbtt_tog_offline')], |
| 437 | O: [() => {this.toggleSummary(); }, this.lionFn('tbtt_tog_summary')], |
| 438 | P: [(token) => {this.togglePorts(token); }, this.lionFn('tbtt_tog_porthi')], |
| 439 | Q: [() => {this.cycleGridDisplay(); }, this.lionFn('tbtt_cyc_grid_display')], |
| 440 | R: [() => {this.resetZoom(); }, this.lionFn('tbtt_reset_zoom')], |
| 441 | U: [() => {this.unpinOrFreezeNodes(); }, this.lionFn('tbtt_unpin_node')], |
| 442 | X: [() => {this.resetNodeLocation(); }, this.lionFn('tbtt_reset_loc')], |
| 443 | dot: [() => {this.toggleToolbar(); }, this.lionFn('tbtt_tog_toolbar')], |
| 444 | 0: [() => {this.cancelTraffic(); }, this.lionFn('tr_btn_cancel_monitoring')], |
| 445 | 'shift-L': [() => {this.cycleHostLabels(); }, this.lionFn('tbtt_cyc_host_labs')], |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 446 | |
| 447 | // -- instance color palette debug |
Sean Condon | 55c3053 | 2018-10-29 12:26:57 +0000 | [diff] [blame] | 448 | 9: () => { |
| 449 | this.sus.cat7().testCard(d3.select('svg#topo2')); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 450 | }, |
| 451 | |
Sean Condon | bed2e03 | 2019-04-17 22:22:49 +0100 | [diff] [blame] | 452 | esc: [() => {this.handleEscape(); }, this.lionFn('qh_hint_esc')], |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 453 | |
| 454 | // TODO update after adding in Background Service |
| 455 | // topology overlay selections |
| 456 | // F1: function () { t2tbs.fnKey(0); }, |
| 457 | // F2: function () { t2tbs.fnKey(1); }, |
| 458 | // F3: function () { t2tbs.fnKey(2); }, |
| 459 | // F4: function () { t2tbs.fnKey(3); }, |
| 460 | // F5: function () { t2tbs.fnKey(4); }, |
| 461 | // |
| 462 | // _keyListener: t2tbs.keyListener.bind(t2tbs), |
| 463 | |
| 464 | _helpFormat: [ |
| 465 | ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B'], |
| 466 | ['X', 'Z', 'N', 'L', 'shift-L', 'U', 'R', 'E', 'dot'], |
| 467 | [], // this column reserved for overlay actions |
| 468 | ], |
| 469 | }; |
| 470 | } |
| 471 | |
| 472 | |
| 473 | bindCommands(additional?: any) { |
| 474 | |
| 475 | const am = this.actionMap(); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 476 | this.ks.keyBindings(am); |
| 477 | |
| 478 | this.ks.gestureNotes([ |
| 479 | ['click', 'Select the item and show details'], |
| 480 | ['shift-click', 'Toggle selection state'], |
| 481 | ['drag', 'Reposition (and pin) device / host'], |
| 482 | ['cmd-scroll', 'Zoom in / out'], |
| 483 | ['cmd-drag', 'Pan'], |
| 484 | ]); |
| 485 | } |
| 486 | |
| 487 | handleEscape() { |
| 488 | |
| 489 | if (false) { |
| 490 | // TODO: Cancel show mastership |
| 491 | // TODO: Cancel Active overlay |
| 492 | // TODO: Reinstate with components |
| 493 | } else { |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 494 | this.nodeSelected(undefined); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 495 | this.log.debug('Handling escape'); |
| 496 | // } else if (t2rs.deselectAllNodes()) { |
| 497 | // // else if we have node selections, deselect them all |
| 498 | // // (work already done) |
| 499 | // } else if (t2rs.deselectLink()) { |
| 500 | // // else if we have a link selection, deselect it |
| 501 | // // (work already done) |
| 502 | // } else if (t2is.isVisible()) { |
| 503 | // // If the instance panel is visible, close it |
| 504 | // t2is.toggle(); |
| 505 | // } else if (t2sp.isVisible()) { |
| 506 | // // If the summary panel is visible, close it |
| 507 | // t2sp.toggle(); |
| 508 | } |
| 509 | } |
| 510 | |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 511 | /** |
| 512 | * Updates the cache of preferences locally and onwards to the PrefsService |
| 513 | * @param what The attribute of the local topo2-prefs cache to update |
| 514 | * @param b the value to update it with |
| 515 | */ |
| 516 | updatePrefsState(what: string, b: number) { |
| 517 | this.prefsState[what] = b; |
| 518 | this.ps.setPrefs(TOPO2_PREFS, this.prefsState); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 519 | } |
| 520 | |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 521 | /** |
| 522 | * When the button is clicked on the toolbar or the L key is pressed |
| 523 | * 1) cycle through options |
| 524 | * 2) flash up a message |
| 525 | * 3a) Update the local prefs cache |
| 526 | * 3b) And passes on to the global prefs service which sends back to the server |
| 527 | * 3c) It also has a knock on effect of passing it on to ForceSvgComponent |
| 528 | * because prefsState.dlbls is given as an input to it |
| 529 | * 3d) This will in turn pass it down to the DeviceSvgComponent which |
| 530 | * displays the label |
| 531 | */ |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 532 | protected cycleDeviceLabels() { |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 533 | const old: LabelToggle.Enum = this.prefsState.dlbls; |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 534 | const next = LabelToggle.next(old); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 535 | this.flashMsg = this.lionFn(TopologyComponent.deviceLabelFlashMessage(next)); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 536 | this.updatePrefsState(PREF_DLBLS, next); |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 537 | this.log.debug('Cycling device labels', old, next); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 538 | } |
| 539 | |
| 540 | protected cycleHostLabels() { |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 541 | const old: HostLabelToggle.Enum = this.prefsState.hlbls; |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 542 | const next = HostLabelToggle.next(old); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 543 | this.flashMsg = this.lionFn(TopologyComponent.hostLabelFlashMessage(next)); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 544 | this.updatePrefsState(PREF_HLBLS, next); |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 545 | this.log.debug('Cycling host labels', old, next); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 546 | } |
| 547 | |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 548 | protected cycleGridDisplay() { |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 549 | const old: GridDisplayToggle.Enum = this.prefsState.grid; |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 550 | const next = GridDisplayToggle.next(old); |
| 551 | this.flashMsg = this.lionFn(TopologyComponent.gridDisplayFlashMessage(next)); |
| 552 | this.updatePrefsState(PREF_GRID, next); |
| 553 | this.log.debug('Cycling grid display', old, next); |
| 554 | } |
| 555 | |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 556 | protected cycleTrafficTypeDisplay() { |
| 557 | const old: TrafficType.Enum = this.prefsState.traffic; // by number |
| 558 | const next = TrafficType.next(old); |
| 559 | this.flashMsg = this.lionFn(TopologyComponent.trafficTypeFlashMessage(next)); |
| 560 | this.updatePrefsState(PREF_TRAFFIC, next); |
| 561 | this.trs.requestTraffic(next); |
| 562 | this.log.debug('Cycling traffic display', old, next); |
| 563 | } |
| 564 | |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 565 | /** |
| 566 | * When the button is clicked on the toolbar or the B key is pressed |
| 567 | * 1) Find the inverse of the current state (held as 1 or 0) |
| 568 | * 2) Flash up a message on screen |
| 569 | * 3b) And passes on to the global prefs service which sends back to the server |
| 570 | * 3c) It also has a knock on effect of passing it on to ToolbarComponent |
| 571 | * because prefsState.bg is given as an input to it |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 572 | * @param token not currently used |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 573 | */ |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 574 | protected toggleBackground(token?: KeysToken) { |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 575 | const bg: boolean = !Boolean(this.prefsState.bg); |
| 576 | this.flashMsg = this.lionFn(bg ? 'show' : 'hide') + |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 577 | ' ' + this.lionFn('fl_background_map'); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 578 | this.updatePrefsState(PREF_BG, bg ? 1 : 0); |
| 579 | this.log.debug('Toggling background', token, bg ? 'shown' : 'hidden'); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 580 | } |
| 581 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 582 | protected toggleDetails(token?: KeysToken) { |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 583 | const on: boolean = !Boolean(this.prefsState.detail); |
| 584 | this.flashMsg = this.lionFn(on ? 'show' : 'hide') + |
| 585 | ' ' + this.lionFn('fl_panel_details'); |
| 586 | this.updatePrefsState(PREF_DETAIL, on ? 1 : 0); |
| 587 | this.log.debug('Toggling details', token); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 588 | } |
| 589 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 590 | protected toggleInstancePanel(token?: KeysToken) { |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 591 | const on: boolean = !Boolean(this.prefsState.insts); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 592 | this.flashMsg = this.lionFn(on ? 'show' : 'hide') + |
| 593 | ' ' + this.lionFn('fl_panel_instances'); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 594 | this.updatePrefsState(PREF_INSTS, on ? 1 : 0); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 595 | this.log.debug('Toggling instances', token, on); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 596 | } |
| 597 | |
| 598 | protected toggleSummary() { |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 599 | const on: boolean = !Boolean(this.prefsState.summary); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 600 | this.flashMsg = this.lionFn(on ? 'show' : 'hide') + |
| 601 | ' ' + this.lionFn('fl_panel_summary'); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 602 | this.updatePrefsState(PREF_SUMMARY, on ? 1 : 0); |
| 603 | } |
| 604 | |
| 605 | protected togglePorts(token?: KeysToken) { |
| 606 | const current: boolean = !Boolean(this.prefsState.porthl); |
| 607 | this.flashMsg = this.lionFn(current ? 'enable' : 'disable') + |
| 608 | ' ' + this.lionFn('fl_port_highlighting'); |
| 609 | this.updatePrefsState(PREF_PORTHL, current ? 1 : 0); |
| 610 | this.log.debug(current ? 'Enable' : 'Disable', 'port highlighting'); |
| 611 | } |
| 612 | |
| 613 | protected toggleToolbar() { |
| 614 | const on: boolean = !Boolean(this.prefsState.toolbar); |
| 615 | this.updatePrefsState(PREF_TOOLBAR, on ? 1 : 0); |
| 616 | this.log.debug('toggling toolbar', on ? 'shown' : 'hidden'); |
| 617 | } |
| 618 | |
| 619 | protected toggleHosts() { |
| 620 | const current: boolean = !Boolean(this.prefsState.hosts); |
| 621 | this.flashMsg = this.lionFn('hosts') + ' ' + |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame] | 622 | this.lionFn(current ? 'visible' : 'hidden'); |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 623 | this.updatePrefsState(PREF_HOSTS, current ? 1 : 0); |
| 624 | this.log.debug('toggling hosts: ', this.prefsState.hosts ? 'Show' : 'Hide'); |
| 625 | } |
| 626 | |
| 627 | protected toggleOfflineDevices() { |
| 628 | const on: boolean = !Boolean(this.prefsState.offdev); |
| 629 | this.flashMsg = this.lionFn(on ? 'show' : 'hide') + |
| 630 | ' ' + this.lionFn('fl_offline_devices'); |
| 631 | this.updatePrefsState(PREF_OFFDEV, on ? 1 : 0); |
| 632 | this.log.debug('toggling offline devices', this.prefsState.offdev); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 633 | } |
| 634 | |
| 635 | protected resetZoom() { |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 636 | const zoomMapExtents = ZoomUtils.zoomToWindowSize( |
| 637 | this.bannerHeight, this.window.innerWidth, this.window.innerHeight); |
| 638 | this.zoomDirective.changeZoomLevel(zoomMapExtents, false); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 639 | this.flashMsg = this.lionFn('fl_pan_zoom_reset'); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 640 | } |
| 641 | |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 642 | protected equalizeMasters() { |
Sean Condon | 64ea7d2 | 2019-04-12 19:39:13 +0100 | [diff] [blame] | 643 | this.wss.sendEvent('equalizeMasters', {}); |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 644 | this.flashMsg = this.lionFn('fl_eq_masters'); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 645 | this.log.debug('equalizing masters'); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 646 | } |
| 647 | |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 648 | /** |
| 649 | * If any nodes with fixed positions had been dragged out of place |
| 650 | * then put back where they belong |
| 651 | * If there are some devices selected reset only these |
| 652 | */ |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 653 | protected resetNodeLocation() { |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 654 | const numNodes = this.force.resetNodeLocations(); |
| 655 | this.flashMsg = this.lionFn('fl_reset_node_locations') + |
| 656 | '(' + String(numNodes) + ')'; |
| 657 | this.log.debug('resetting ', numNodes, 'node(s) location'); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 658 | } |
| 659 | |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 660 | /** |
| 661 | * Toggle floating nodes between pinned and frozen |
| 662 | * If there are floating nodes selected toggle only these |
| 663 | */ |
| 664 | protected unpinOrFreezeNodes() { |
| 665 | const pinned: boolean = !Boolean(this.prefsState.pinned); |
| 666 | const numNodes = this.force.unpinOrFreezeNodes(pinned); |
| 667 | this.flashMsg = this.lionFn(pinned ? |
| 668 | 'fl_pinned_floating_nodes' : 'fl_unpinned_floating_nodes') + |
| 669 | '(' + String(numNodes) + ')'; |
| 670 | this.updatePrefsState(PREF_PINNED, pinned ? 1 : 0); |
| 671 | this.log.debug('Toggling pinning for floating ', numNodes, 'nodes', pinned); |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 672 | } |
| 673 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 674 | /** |
| 675 | * Check to see if this is needed anymore |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 676 | * @param what - a key stroke |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 677 | */ |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 678 | protected notValid(what) { |
| 679 | this.log.warn('topo.js getActionEntry(): Not a valid ' + what); |
| 680 | } |
| 681 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 682 | /** |
| 683 | * Check to see if this is needed anymore |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 684 | * @param key - a key stroke |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 685 | */ |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 686 | getActionEntry(key) { |
| 687 | let entry; |
| 688 | |
| 689 | if (!key) { |
| 690 | this.notValid('key'); |
| 691 | return null; |
| 692 | } |
| 693 | |
| 694 | entry = this.actionMap()[key]; |
| 695 | |
| 696 | if (!entry) { |
| 697 | this.notValid('actionMap (' + key + ') entry'); |
| 698 | return null; |
| 699 | } |
| 700 | return this.fs.isA(entry) || [entry, '']; |
| 701 | } |
| 702 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 703 | /** |
| 704 | * An event handler that updates the details panel as items are |
| 705 | * selected in the forcesvg layer |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 706 | * |
| 707 | * @param nodesOrLink the item(s) to display details of |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 708 | */ |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 709 | nodeSelected(nodesOrLink: UiElement[]) { |
| 710 | this.details.ngOnChanges({'selectedNodes': |
| 711 | new SimpleChange(undefined, nodesOrLink, true)}); |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 712 | } |
| 713 | |
| 714 | /** |
| 715 | * Cancel traffic monitoring |
| 716 | */ |
| 717 | cancelTraffic() { |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 718 | this.flashMsg = this.lionFn('fl_monitoring_canceled'); |
Sean Condon | 19e8367 | 2019-04-13 16:21:52 +0100 | [diff] [blame] | 719 | this.trs.cancelTraffic(); |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 720 | } |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 721 | |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 722 | changeMap(map: MapObject) { |
| 723 | this.mapSelShown = false; // Hide the MapSelector component |
| 724 | this.mapIdState = map; |
| 725 | this.ps.setPrefs(TOPO_MAPID_PREFS, this.mapIdState); |
| 726 | this.log.debug('Map has been changed to ', map); |
| 727 | } |
| 728 | |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 729 | mapExtentsZoom(zoomMapExtents: TopoZoomPrefs) { |
| 730 | // this.zoomDirective.updateZoomState(zoomPrefs.tx, zoomPrefs.ty, zoomPrefs.sc); |
| 731 | this.zoomDirective.changeZoomLevel(zoomMapExtents); |
| 732 | this.log.debug('Map zoom prefs updated', zoomMapExtents); |
| 733 | } |
| 734 | |
Sean Condon | 64ea7d2 | 2019-04-12 19:39:13 +0100 | [diff] [blame] | 735 | backgroundClicked(event: MouseEvent) { |
| 736 | const elemTagName = event.target['tagName'] + ' ' + event.target['id']; |
| 737 | if (BACKGROUND_ELEMENTS.includes(elemTagName)) { |
| 738 | this.force.updateSelected( |
| 739 | <SelectedEvent>{ |
| 740 | uiElement: undefined, |
| 741 | deselecting: true |
| 742 | } |
| 743 | ); |
| 744 | } |
| 745 | } |
| 746 | |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 747 | /** |
| 748 | * Read the LION bundle for Toolbar and set up the lionFn |
| 749 | */ |
| 750 | doLion() { |
| 751 | this.lionFn = this.lion.bundle('core.view.Topo'); |
| 752 | } |
| 753 | |
| 754 | /** |
| 755 | * A dummy implementation of the lionFn until the response is received and the LION |
| 756 | * bundle is received from the WebSocket |
| 757 | */ |
| 758 | dummyLion(key: string): string { |
| 759 | return '%' + key + '%'; |
| 760 | } |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 761 | } |