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" |
Sean Condon | 058804c | 2019-04-16 09:41:52 +0100 | [diff] [blame] | 26 | (mastershipEvent)="force.changeInstSelection($event)" |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 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 | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 41 | <onos-mapselector *ngIf="mapSelShown" (chosenMap)="changeMap($event)"></onos-mapselector> |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 42 | |
| 43 | <div id="ov-topo2"> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 44 | <!-- Template explanation - |
| 45 | Line 0) This is the root of the whole SVG canvas of the Topology View - all |
| 46 | components beneath it are SVG components only (no HTML) |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame^] | 47 | Line 1) if the background is clicked then send the event to the function |
| 48 | where it is filtered to make sure it really applied to the background |
| 49 | or the map and then used to clear any selections made |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 50 | --> |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 51 | <svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2" |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame^] | 52 | preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)" |
| 53 | transform="'translate(0,0), scale(1.0)'"> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 54 | <svg:desc>The main SVG canvas of the Topology View</svg:desc> |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame^] | 55 | <!-- Template explanation - |
| 56 | line 0) the No Devices Connected banner is shown if the force component |
| 57 | (from later) does not contain any devices |
| 58 | --> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 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 | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame^] | 63 | <!-- Template explanation - |
| 64 | line 0) Create an SVG Grouping and apply the onosZoomableOf directive to it, |
| 65 | passing in the whole SVG canvas (#svgZoom) |
| 66 | --> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 67 | <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom"> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 68 | <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc> |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame^] | 69 | <!-- Template explanation |
| 70 | Line 0) Create an instance of the onos-gridsvg component with the name gridFull |
| 71 | All Inputs to that component will use default values |
| 72 | This is the grey grid of 1000x1000 with origin at top left |
| 73 | Only show it if the grid prefs value is 1 or 3 |
| 74 | --> |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 75 | <svg:g #gridFull *ngIf="prefsState.grid == 1 || prefsState.grid == 3" onos-gridsvg> |
| 76 | </svg:g> |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame^] | 77 | <!-- Template explanation |
| 78 | Line 0) Create another instance of the onos-gridsvg component with the name geoGrid |
| 79 | This is the blue geo grid of -180 to +180 longitude and -75 |
| 80 | to +75 latitude with with origin in the centre |
| 81 | Only show it if the grid prefs value is 2 or 3 |
| 82 | Line 1) Set the Inputs for the longitude extents |
| 83 | Line 2) Set the Inputs for the latitude extents and set the minor line |
| 84 | spacing at 15 degrees long and lat |
| 85 | Line 3) Invert the vertical axis - positive in the y direction is up |
| 86 | Set the vertical extents of this grid to 1000 units high in SVG terms |
| 87 | Set the aspect ratio to 5/6 - this is because it is an eqi- |
| 88 | rectangular projection and looks stretched out horizontally |
| 89 | otherwise. This balances the distortion of equi-rect between |
| 90 | equator and the poles |
| 91 | Line 4) Set the color of the grid to light blue |
| 92 | --> |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 93 | <svg:g #geoGrid *ngIf="prefsState.grid == 2 || prefsState.grid == 3" |
| 94 | onos-gridsvg [horizLowerLimit]="-180" [horizUpperLimit]="180" |
| 95 | [vertLowerLimit]="-75" [vertUpperLimit]="75" [spacing]="15" |
| 96 | [invertVertical]="true" [fit]="'fit1000high'" [aspectRatio]="0.83333" |
| 97 | [gridcolor]="'#bfe7fb'"> |
| 98 | </svg:g> |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame^] | 99 | <!-- Template explanation - |
| 100 | line 0) Add in the Background Svg Component (if showBackground is true - toggled |
| 101 | by toolbar and by keyboard shortcut 'B' |
| 102 | --> |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 103 | <svg:g *ngIf="prefsState.bg" |
| 104 | onos-backgroundsvg [map]="mapIdState" (zoomlevel)="mapExtentsZoom($event)"> |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 105 | <svg:desc>The Background SVG component - contains maps</svg:desc> |
| 106 | </svg:g> |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame^] | 107 | <!-- Template explanation - |
| 108 | line 0) Add in the layer of the Force Svg Component. |
| 109 | This is node and line graph |
| 110 | whose contents are supplied through the Topology Service, and whose positions |
| 111 | are driven by the d3.force engine |
| 112 | line 6) If any item is selected on it, pass to the details view and deselect all others. |
| 113 | --> |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 114 | <svg:g #force onos-forcesvg |
| 115 | [deviceLabelToggle]="prefsState.dlbls" |
| 116 | [hostLabelToggle]="prefsState.hlbls" |
| 117 | [showHosts]="prefsState.hosts" |
| 118 | [highlightPorts]="prefsState.porthl" |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 119 | [scale]="window.innerHeight / (window.innerWidth * zoomDirective.zoomCached.sc)" |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 120 | (selectedNodeEvent)="nodeSelected($event)"> |
| 121 | <svg:desc>The Force SVG component - contains all the devices, hosts and links</svg:desc> |
| 122 | </svg:g> |
Sean Condon | 55c3053 | 2018-10-29 12:26:57 +0000 | [diff] [blame] | 123 | </svg:g> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 124 | </svg:svg> |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 125 | </div> |
| 126 | |
Sean Condon | ff85fbe | 2019-03-16 14:28:46 +0000 | [diff] [blame] | 127 | <div id="breadcrumbs"></div> |