Added in summary panel of GUI 2 topo view
Change-Id: I5d325ff1dc2940e08ab9e6f970768b5fd0885e10
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html
index e71b58d..d781418 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html
@@ -14,63 +14,7 @@
~ limitations under the License.
-->
<div id="topo2-p-summary" class="floatpanel topo2-p"
- style="opacity: 1; right: 20px; width: 260px;" [@summaryPanelState]="!on">
- <div class="header">
- <div class="icon">
- <svg>
- <use width="24" height="24" class="glyph" xlink:href="#bird"
- transform="translate(1,1)"></use>
- </svg>
- </div>
- <h2>ONOS Summary</h2>
- </div>
- <div class="body">
- <table>
- <tbody>
- <tr>
- <td class="label">Version :</td>
- <td class="value">1.15.0.a18e6e1</td>
- </tr>
- <tr>
- <td colspan="2">
- <hr>
- </td>
- </tr>
- <tr>
- <td class="label">Devices :</td>
- <td class="value">2</td>
- </tr>
- <tr>
- <td class="label">Links :</td>
- <td class="value">0</td>
- </tr>
- <tr>
- <td class="label">Hosts :</td>
- <td class="value">0</td>
- </tr>
- <tr>
- <td class="label">Topology SCCs :</td>
- <td class="value">2</td>
- </tr>
- <tr>
- <td colspan="2">
- <hr>
- </td>
- </tr>
- <tr>
- <td class="label">Intents :</td>
- <td class="value">0</td>
- </tr>
- <tr>
- <td class="label">Tunnels :</td>
- <td class="value">0</td>
- </tr>
- <tr>
- <td class="label">Flows :</td>
- <td class="value">8</td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="footer"></div>
+ style="opacity: 1; right: 20px; width: 260px;" [@summaryPanelState]="on">
+ <!-- everything else is filled in dynamically by listProps() and the
+ response showSummary received from the server -->
</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts
index d314528..7de5e89 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts
@@ -13,15 +13,21 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
+import * as d3 from 'd3';
+import { TopoPanelBaseImpl } from '../topopanel.base';
import {
LogService,
LoadingService,
FnService,
- PanelBaseImpl
+ WebSocketService,
+ GlyphService
} from 'gui2-fw-lib';
+export interface SummaryResponse {
+ title: string;
+}
/*
ONOS GUI -- Topology Summary Module.
Defines modeling of ONOS Summary Panel.
@@ -31,9 +37,10 @@
templateUrl: './summary.component.html',
styleUrls: [
'./summary.component.css',
- '../../topology.common.css',
+ '../../topology.common.css', '../../topology.theme.css',
'../../../../fw/widget/panel.css', '../../../../fw/widget/panel-theme.css'
],
+ encapsulation: ViewEncapsulation.None,
animations: [
trigger('summaryPanelState', [
state('true', style({
@@ -49,19 +56,62 @@
])
]
})
-export class SummaryComponent extends PanelBaseImpl implements OnInit {
+export class SummaryComponent extends TopoPanelBaseImpl implements OnInit, OnDestroy {
+ private handlers: string[] = [];
+ private resp: string = 'showSummary';
+ private summaryData: SummaryResponse;
constructor(
protected fs: FnService,
protected log: LogService,
protected ls: LoadingService,
+ protected wss: WebSocketService,
+ protected gs: GlyphService
) {
- super(fs, ls, log);
+ super(fs, ls, log, 'summary');
+ this.summaryData = <SummaryResponse>{};
this.log.debug('SummaryComponent constructed');
}
ngOnInit() {
+ this.wss.bindHandlers(new Map<string, (data) => void>([
+ [this.resp, (data) => this.handleSummaryData(data)]
+ ]));
+ this.handlers.push(this.resp);
+
+ this.init(d3.select('#topo2-p-summary'));
+ this.on = true;
+
+ this.wss.sendEvent('requestSummary', {});
}
+ ngOnDestroy() {
+ this.wss.sendEvent('cancelSummary', {});
+ this.wss.unbindHandlers(this.handlers);
+ }
+
+ handleSummaryData(data: SummaryResponse) {
+ this.summaryData = data;
+ this.render();
+ this.log.debug('Summary', data);
+ }
+
+ private render() {
+ let endedWithSeparator;
+
+ this.emptyRegions();
+
+ const svg = this.appendToHeader('div')
+ .classed('icon', true)
+ .append('svg');
+ const title = this.appendToHeader('h2');
+ const table = this.appendToBody('table');
+ const tbody = table.append('tbody');
+
+ title.text(this.summaryData.title);
+ this.gs.addGlyph(svg, 'bird', 24, 0, [1, 1]);
+ endedWithSeparator = this.listProps(tbody, this.summaryData);
+ // TODO : review whether we need to use/store end-with-sep state
+ }
}