| <!-- |
| ~ Copyright 2019-present Open Networking Foundation |
| ~ |
| ~ Licensed under the Apache License, Version 2.0 (the "License"); |
| ~ you may not use this file except in compliance with the License. |
| ~ You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, software |
| ~ distributed under the License is distributed on an "AS IS" BASIS, |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| ~ See the License for the specific language governing permissions and |
| ~ limitations under the License. |
| --> |
| <!-- Template explaination - Add in the flash message component - and link it to |
| the local variable - this is used to display messages when keyboard shortcuts are pressed |
| --> |
| <onos-flash id="topoMsgFlash" message="{{ flashMsg }}" (closed)="flashMsg = ''"></onos-flash> |
| |
| <onos-quickhelp id="topoQuickHelp"></onos-quickhelp> |
| <!-- Template explanation - Add in the Panel components for the Topology view |
| These are referenced inside the typescript by @ViewChild and their label |
| --> |
| <onos-instance #instance [divTopPx]="80" |
| (mastershipEvent)="force.changeInstSelection($event)" |
| [on]="prefsState.insts"> |
| </onos-instance> |
| <onos-summary #summary [on]="prefsState.summary"></onos-summary> |
| <onos-toolbar #toolbar |
| (buttonEvent)="toolbarButtonClicked($event)" |
| [on]="prefsState.toolbar" |
| [backgroundVisible]="prefsState.bg" |
| [detailsVisible]="prefsState.detail" |
| [hostsVisible]="prefsState.hosts" |
| [instancesVisible]="prefsState.insts" |
| [portsVisible]="prefsState.porthl" |
| [summaryVisible]="prefsState.summary"> |
| </onos-toolbar> |
| <onos-details #details [on]="prefsState.detail"></onos-details> |
| <onos-mapselector *ngIf="mapSelShown" (chosenMap)="changeMap($event)"></onos-mapselector> |
| |
| <div id="ov-topo2"> |
| <!-- Template explanation - |
| Line 0) This is the root of the whole SVG canvas of the Topology View - all |
| components beneath it are SVG components only (no HTML) |
| Line 1) if the background is clicked then send the event to the function |
| where it is filtered to make sure it really applied to the background |
| or the map and then used to clear any selections made |
| --> |
| <svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2" |
| preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)" |
| transform="'translate(0,0), scale(1.0)'"> |
| <svg:desc>The main SVG canvas of the Topology View</svg:desc> |
| <!-- Template explanation - |
| line 0) the No Devices Connected banner is shown if the force component |
| (from later) does not contain any devices |
| --> |
| <svg:g *ngIf="force.regionData?.devices[0].length + |
| force.regionData?.devices[1].length + |
| force.regionData?.devices[2].length=== 0" |
| onos-nodeviceconnected /> |
| <!-- Template explanation - |
| line 0) Create an SVG Grouping and apply the onosZoomableOf directive to it, |
| passing in the whole SVG canvas (#svgZoom) |
| --> |
| <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom" #onosZoom> |
| <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc> |
| <!-- Template explanation |
| Line 0) Create an instance of the onos-gridsvg component with the name gridFull |
| All Inputs to that component will use default values |
| This is the grey grid of 1000x1000 with origin at top left |
| Only show it if the grid prefs value is 1 or 3 |
| --> |
| <svg:g #gridFull *ngIf="prefsState.grid == 1 || prefsState.grid == 3" onos-gridsvg> |
| </svg:g> |
| <!-- Template explanation |
| Line 0) Create another instance of the onos-gridsvg component with the name geoGrid |
| This is the blue geo grid of -180 to +180 longitude and -75 |
| to +75 latitude with with origin in the centre |
| Only show it if the grid prefs value is 2 or 3 |
| Line 1) Set the Inputs for the longitude extents |
| Line 2) Set the Inputs for the latitude extents and set the minor line |
| spacing at 15 degrees long and lat |
| Line 3) Invert the vertical axis - positive in the y direction is up |
| Set the vertical extents of this grid to 1000 units high in SVG terms |
| Set the aspect ratio to 5/6 - this is because it is an eqi- |
| rectangular projection and looks stretched out horizontally |
| otherwise. This balances the distortion of equi-rect between |
| equator and the poles |
| Line 4) Set the color of the grid to light blue |
| --> |
| <svg:g #geoGrid *ngIf="prefsState.grid == 2 || prefsState.grid == 3" |
| onos-gridsvg [horizLowerLimit]="-180" [horizUpperLimit]="180" |
| [vertLowerLimit]="-75" [vertUpperLimit]="75" [spacing]="15" |
| [invertVertical]="true" [fit]="'fit1000high'" [aspectRatio]="0.83333" |
| [gridcolor]="'#bfe7fb'"> |
| </svg:g> |
| <!-- Template explanation - |
| line 0) Add in the Background Svg Component (if showBackground is true - toggled |
| by toolbar and by keyboard shortcut 'B' |
| --> |
| <svg:g *ngIf="prefsState.bg" |
| onos-backgroundsvg [map]="mapIdState" (zoomlevel)="mapExtentsZoom($event)"> |
| <svg:desc>The Background SVG component - contains maps</svg:desc> |
| </svg:g> |
| <!-- Template explanation - |
| line 0) Add in the layer of the Force Svg Component. |
| This is node and line graph |
| whose contents are supplied through the Topology Service, and whose positions |
| are driven by the d3.force engine |
| line 6) If any item is selected on it, pass to the details view and deselect all others. |
| --> |
| <svg:g #force onos-forcesvg |
| [deviceLabelToggle]="prefsState.dlbls" |
| [hostLabelToggle]="prefsState.hlbls" |
| [showHosts]="prefsState.hosts" |
| [showAlarms]="prefsState.alarms" |
| [highlightPorts]="prefsState.porthl" |
| [scale]="window.innerHeight / (window.innerWidth * zoomDirective?.zoomCached.sc)" |
| (selectedNodeEvent)="nodeSelected($event)"> |
| <svg:desc>The Force SVG component - contains all the devices, hosts and links</svg:desc> |
| </svg:g> |
| </svg:g> |
| </svg:svg> |
| </div> |
| |
| <div id="breadcrumbs"></div> |