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 | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 16 | <!-- Template explaination - Add in the flash message component - and link it to |
| 17 | the local variable - this is used to display messages when keyboard shortcuts are pressed |
| 18 | --> |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 19 | <onos-flash id="topoMsgFlash" message="{{ flashMsg }}" (closed)="flashMsg = ''"></onos-flash> |
| 20 | |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame^] | 21 | <onos-quickhelp id="topoQuickHelp"></onos-quickhelp> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 22 | <!-- Template explanation - Add in the Panel components for the Topology view |
| 23 | These are referenced inside the typescript by @ViewChild and their label |
| 24 | --> |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame^] | 25 | <onos-instance #instance [divTopPx]="80" |
| 26 | (mastershipEvent)="force.onosInstMastership = $event" |
| 27 | [on]="prefsState.insts"> |
| 28 | </onos-instance> |
| 29 | <onos-summary #summary [on]="prefsState.summary"></onos-summary> |
| 30 | <onos-toolbar #toolbar |
| 31 | (buttonEvent)="toolbarButtonClicked($event)" |
| 32 | [on]="prefsState.toolbar" |
| 33 | [backgroundVisible]="prefsState.bg" |
| 34 | [detailsVisible]="prefsState.detail" |
| 35 | [hostsVisible]="prefsState.hosts" |
| 36 | [instancesVisible]="prefsState.insts" |
| 37 | [portsVisible]="prefsState.porthl" |
| 38 | [summaryVisible]="prefsState.summary"> |
| 39 | </onos-toolbar> |
| 40 | <onos-details #details [on]="prefsState.detail"></onos-details> |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 41 | |
| 42 | <div id="ov-topo2"> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 43 | <!-- Template explanation - |
| 44 | Line 0) This is the root of the whole SVG canvas of the Topology View - all |
| 45 | components beneath it are SVG components only (no HTML) |
| 46 | line 1) the No Devices Connected banner is shown if the force component |
| 47 | (from line 4) does not contain any devices |
| 48 | line 2) Create an SVG Grouping and apply the onosZoomableOf directive to it, |
| 49 | passing in the whole SVG canvas (#svgZoom) |
| 50 | line 3) Add in the Background Svg Component (if showBackground is true - toggled |
| 51 | by toolbar and by keyboard shortcut 'B' |
| 52 | line 4) Add in the layer of the Force Svg Component. If any item is selected on it, pass |
| 53 | to the details view and deselect all others. This is node and line graph |
| 54 | whose contents are supplied through the Topology Service, and whose positions |
| 55 | are driven by the d3.force engine |
| 56 | --> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 57 | <svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2"> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 58 | <svg:desc>The main SVG canvas of the Topology View</svg:desc> |
| 59 | <svg:g *ngIf="force.regionData?.devices[0].length + |
| 60 | force.regionData?.devices[1].length + |
| 61 | force.regionData?.devices[2].length=== 0" |
| 62 | onos-nodeviceconnected /> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 63 | <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom"> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 64 | <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc> |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame^] | 65 | <svg:g *ngIf="prefsState.bg" onos-backgroundsvg> |
| 66 | <svg:desc>The Background SVG component - contains maps</svg:desc> |
| 67 | </svg:g> |
| 68 | <svg:g #force onos-forcesvg |
| 69 | [deviceLabelToggle]="prefsState.dlbls" |
| 70 | [hostLabelToggle]="prefsState.hlbls" |
| 71 | [showHosts]="prefsState.hosts" |
| 72 | [highlightPorts]="prefsState.porthl" |
| 73 | (selectedNodeEvent)="nodeSelected($event)"> |
| 74 | <svg:desc>The Force SVG component - contains all the devices, hosts and links</svg:desc> |
| 75 | </svg:g> |
Sean Condon | 55c3053 | 2018-10-29 12:26:57 +0000 | [diff] [blame] | 76 | </svg:g> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 77 | </svg:svg> |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 78 | </div> |
| 79 | |
| 80 | <div id="breadcrumbs"></div> |