Added d3 force graph to GUI2 topology
Change-Id: I6860472efaf51ea27fad74e630e687f0c6abad3d
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
index af8f6a0..d79954b 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
@@ -21,14 +21,14 @@
<use width="26" height="26" class="glyph" xlink:href="#m_switch"></use>
</svg>
</div>
- <h2 class="clickable">rest:10.1.2.2:443</h2>
+ <h2 class="clickable">{{ selectedNode?.id }}</h2>
</div>
<div class="body">
<table>
<tbody>
<tr>
<td class="label">URI :</td>
- <td class="value">null:0000000000000002</td>
+ <td class="value">{{ selectedNode?.id }}</td>
</tr>
<tr>
<td class="label">Vendor :</td>
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
index 0fcf179..935b2ce 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import {
LogService,
@@ -22,6 +22,7 @@
DetailsPanelBaseImpl,
WebSocketService
} from 'gui2-fw-lib';
+import {Node} from '../../layer/forcesvg/models';
/*
ONOS GUI -- Topology Details Panel.
@@ -51,6 +52,7 @@
]
})
export class DetailsComponent extends DetailsPanelBaseImpl implements OnInit {
+ @Input() selectedNode: Node = undefined;
constructor(
protected fs: FnService,
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html
index f856213..0cb4a0b 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html
@@ -17,7 +17,7 @@
<div *ngFor="let inst of onosInstances | keyvalue ; let i=index"
[ngClass]="['onosInst', inst.value.online?'online':'', inst.value.ready? 'ready': '', mastership?'mastership':'', 'affinity']"
(click)="chooseMastership(inst.value.id)">
- <svg width="170" height="85" viewBox="0 0 170 85">
+ <svg xmlns="http://www.w3.org/2000/svg" width="170" height="85" viewBox="0 0 170 85">
<!-- The following blue-glow effect is applied (through CSS) when mastership style is activated on a rectangle -->
<filter x="-50%" y="-50%" width="200%" height="200%" id="blue-glow">
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 "></feColorMatrix>
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css
index 56f0cc9..894b815 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css
@@ -20,6 +20,7 @@
*/
#topo2-p-summary {
padding: 16px;
+ top: 100px;
}
#topo2-p-summary td.label {