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 | 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) |
| 47 | line 1) the No Devices Connected banner is shown if the force component |
| 48 | (from line 4) does not contain any devices |
| 49 | line 2) Create an SVG Grouping and apply the onosZoomableOf directive to it, |
| 50 | passing in the whole SVG canvas (#svgZoom) |
| 51 | line 3) Add in the Background Svg Component (if showBackground is true - toggled |
| 52 | by toolbar and by keyboard shortcut 'B' |
| 53 | line 4) Add in the layer of the Force Svg Component. If any item is selected on it, pass |
| 54 | to the details view and deselect all others. This is node and line graph |
| 55 | whose contents are supplied through the Topology Service, and whose positions |
| 56 | are driven by the d3.force engine |
| 57 | --> |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 58 | <svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2" |
| 59 | preserveAspectRatio="xMaxYMax none"> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 60 | <svg:desc>The main SVG canvas of the Topology View</svg:desc> |
| 61 | <svg:g *ngIf="force.regionData?.devices[0].length + |
| 62 | force.regionData?.devices[1].length + |
| 63 | force.regionData?.devices[2].length=== 0" |
| 64 | onos-nodeviceconnected /> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 65 | <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom"> |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 66 | <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc> |
Sean Condon | 7191054 | 2019-02-16 18:16:42 +0000 | [diff] [blame] | 67 | <svg:g #gridFull *ngIf="prefsState.grid == 1 || prefsState.grid == 3" onos-gridsvg> |
| 68 | </svg:g> |
| 69 | <svg:g #geoGrid *ngIf="prefsState.grid == 2 || prefsState.grid == 3" |
| 70 | onos-gridsvg [horizLowerLimit]="-180" [horizUpperLimit]="180" |
| 71 | [vertLowerLimit]="-75" [vertUpperLimit]="75" [spacing]="15" |
| 72 | [invertVertical]="true" [fit]="'fit1000high'" [aspectRatio]="0.83333" |
| 73 | [gridcolor]="'#bfe7fb'"> |
| 74 | </svg:g> |
Sean Condon | 0d064ec | 2019-02-04 21:53:53 +0000 | [diff] [blame] | 75 | <svg:g *ngIf="prefsState.bg" onos-backgroundsvg [map]="mapIdState"> |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 76 | <svg:desc>The Background SVG component - contains maps</svg:desc> |
| 77 | </svg:g> |
| 78 | <svg:g #force onos-forcesvg |
| 79 | [deviceLabelToggle]="prefsState.dlbls" |
| 80 | [hostLabelToggle]="prefsState.hlbls" |
| 81 | [showHosts]="prefsState.hosts" |
| 82 | [highlightPorts]="prefsState.porthl" |
| 83 | (selectedNodeEvent)="nodeSelected($event)"> |
| 84 | <svg:desc>The Force SVG component - contains all the devices, hosts and links</svg:desc> |
| 85 | </svg:g> |
Sean Condon | 55c3053 | 2018-10-29 12:26:57 +0000 | [diff] [blame] | 86 | </svg:g> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 87 | </svg:svg> |
Sean Condon | f4f54a1 | 2018-10-10 23:25:46 +0100 | [diff] [blame] | 88 | </div> |
| 89 | |
| 90 | <div id="breadcrumbs"></div> |