blob: 7381a42cb84b5da43baaba25b9df3218e872d6d9 [file] [log] [blame]
Sean Condonf4f54a12018-10-10 23:25:46 +01001<!--
Sean Condon91481822019-01-01 13:56:14 +00002~ Copyright 2019-present Open Networking Foundation
Sean Condonf4f54a12018-10-10 23:25:46 +01003~
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 Condon91481822019-01-01 13:56:14 +000016<!-- Template explaination - Add in the flash message component - and link it to
17the local variable - this is used to display messages when keyboard shortcuts are pressed
18-->
Sean Condonf4f54a12018-10-10 23:25:46 +010019<onos-flash id="topoMsgFlash" message="{{ flashMsg }}" (closed)="flashMsg = ''"></onos-flash>
20
Sean Condonb2c483c2019-01-16 20:28:55 +000021<onos-quickhelp id="topoQuickHelp"></onos-quickhelp>
Sean Condon91481822019-01-01 13:56:14 +000022<!-- 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 Condonb2c483c2019-01-16 20:28:55 +000025<onos-instance #instance [divTopPx]="80"
Sean Condon058804c2019-04-16 09:41:52 +010026 (mastershipEvent)="force.changeInstSelection($event)"
Sean Condonb2c483c2019-01-16 20:28:55 +000027 [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 Condon0d064ec2019-02-04 21:53:53 +000041<onos-mapselector *ngIf="mapSelShown" (chosenMap)="changeMap($event)"></onos-mapselector>
Sean Condonf4f54a12018-10-10 23:25:46 +010042
43<div id="ov-topo2">
Sean Condon91481822019-01-01 13:56:14 +000044 <!-- 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 Condonb0a196a2019-04-19 09:50:44 +010047 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 Condon91481822019-01-01 13:56:14 +000050 -->
Sean Condon71910542019-02-16 18:16:42 +000051 <svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2"
Sean Condonb0a196a2019-04-19 09:50:44 +010052 preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)"
53 transform="'translate(0,0), scale(1.0)'">
Sean Condon91481822019-01-01 13:56:14 +000054 <svg:desc>The main SVG canvas of the Topology View</svg:desc>
Sean Condonb0a196a2019-04-19 09:50:44 +010055 <!-- 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 Condon91481822019-01-01 13:56:14 +000059 <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 Condonb0a196a2019-04-19 09:50:44 +010063 <!-- 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 Condon0a884ad2019-10-28 17:57:21 +000067 <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom" #onosZoom>
Sean Condon91481822019-01-01 13:56:14 +000068 <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc>
Sean Condonb0a196a2019-04-19 09:50:44 +010069 <!-- 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 Condon71910542019-02-16 18:16:42 +000075 <svg:g #gridFull *ngIf="prefsState.grid == 1 || prefsState.grid == 3" onos-gridsvg>
76 </svg:g>
Sean Condonb0a196a2019-04-19 09:50:44 +010077 <!-- 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 Condon71910542019-02-16 18:16:42 +000093 <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 Condonb0a196a2019-04-19 09:50:44 +010099 <!-- 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 Condon1ae15802019-03-02 09:07:18 +0000103 <svg:g *ngIf="prefsState.bg"
104 onos-backgroundsvg [map]="mapIdState" (zoomlevel)="mapExtentsZoom($event)">
Sean Condonb2c483c2019-01-16 20:28:55 +0000105 <svg:desc>The Background SVG component - contains maps</svg:desc>
106 </svg:g>
Sean Condonb0a196a2019-04-19 09:50:44 +0100107 <!-- 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 Condonb2c483c2019-01-16 20:28:55 +0000114 <svg:g #force onos-forcesvg
115 [deviceLabelToggle]="prefsState.dlbls"
116 [hostLabelToggle]="prefsState.hlbls"
117 [showHosts]="prefsState.hosts"
118 [highlightPorts]="prefsState.porthl"
Sean Condon0a884ad2019-10-28 17:57:21 +0000119 [scale]="window.innerHeight / (window.innerWidth * zoomDirective?.zoomCached.sc)"
Sean Condonb2c483c2019-01-16 20:28:55 +0000120 (selectedNodeEvent)="nodeSelected($event)">
121 <svg:desc>The Force SVG component - contains all the devices, hosts and links</svg:desc>
122 </svg:g>
Sean Condon55c30532018-10-29 12:26:57 +0000123 </svg:g>
Sean Condon0c577f62018-11-18 22:40:05 +0000124 </svg:svg>
Sean Condonf4f54a12018-10-10 23:25:46 +0100125</div>
126
Sean Condonff85fbe2019-03-16 14:28:46 +0000127<div id="breadcrumbs"></div>