blob: 22ab277727537c5d157361c384cd06350ff62283 [file] [log] [blame]
<!--
~ 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">
<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"
[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>