Added a Pipeconf View to GUI2 including Table Statistics
Change-Id: Ic043f78d7408a7f96a66735f2493cf0765c01885
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/PipeconfViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/PipeconfViewMessageHandler.java
index 36e2502..bba7f14 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/PipeconfViewMessageHandler.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/PipeconfViewMessageHandler.java
@@ -17,17 +17,25 @@
package org.onosproject.ui.impl;
import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.base.Strings;
import com.google.common.collect.ImmutableSet;
import org.onosproject.codec.CodecContext;
import org.onosproject.net.Device;
import org.onosproject.net.DeviceId;
import org.onosproject.net.device.DeviceService;
+import org.onosproject.net.flow.FlowRuleService;
+import org.onosproject.net.flow.TableStatisticsEntry;
import org.onosproject.net.pi.model.PiPipeconf;
import org.onosproject.net.pi.model.PiPipeconfId;
import org.onosproject.net.pi.model.PiPipelineModel;
import org.onosproject.net.pi.service.PiPipeconfService;
import org.onosproject.ui.RequestHandler;
import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.table.TableModel;
+import org.onosproject.ui.table.TableRequestHandler;
+
+import org.onosproject.ui.table.cell.DefaultCellFormatter;
+import org.onosproject.ui.table.cell.NumberFormatter;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
@@ -44,9 +52,25 @@
private static final String PIPELINE_MODEL = "pipelineModel";
private static final String NO_PIPECONF_RESP = "noPipeconfResp";
+ private static final String TABLESTAT_DATA_REQ = "tableStatDataRequest";
+ private static final String TABLESTAT_DATA_RESP = "tableStatDataResponse";
+ private static final String TABLESTATS = "tableStats";
+ private static final String TABLE_NAME = "table";
+ private static final String ACTIVE = "active";
+ private static final String LOOKEDUP = "lookedup";
+ private static final String HASLOOKEDUP = "haslookedup";
+ private static final String MATCHED = "matched";
+ private static final String HASMAXSIZE = "hasmaxsize";
+ private static final String MAXSIZE = "maxsize";
+
+ private static final String[] COL_IDS = {
+ TABLE_NAME, ACTIVE, HASLOOKEDUP, LOOKEDUP, MATCHED, HASMAXSIZE, MAXSIZE
+ };
+
+
@Override
protected Collection<RequestHandler> createRequestHandlers() {
- return ImmutableSet.of(new PipeconfRequestHandler());
+ return ImmutableSet.of(new PipeconfRequestHandler(), new TableStatsHandler());
}
private class PipeconfRequestHandler extends RequestHandler {
@@ -102,4 +126,64 @@
sendMessage(PIPECONF_RESP, responseData);
}
}
+
+ private class TableStatsHandler extends TableRequestHandler {
+
+ TableStatsHandler() {
+ super(TABLESTAT_DATA_REQ, TABLESTAT_DATA_RESP, TABLESTATS);
+ }
+
+ @Override
+ protected String noRowsMessage(ObjectNode payload) {
+ return NO_PIPECONF_RESP;
+ }
+
+ @Override
+ protected String defaultColumnId() {
+ return TABLE_NAME;
+ }
+
+ @Override
+ protected String[] getColumnIds() {
+ return COL_IDS;
+ }
+
+ @Override
+ protected TableModel createTableModel() {
+ TableModel tm = super.createTableModel();
+ tm.setFormatter(TABLE_NAME, DefaultCellFormatter.INSTANCE);
+ tm.setFormatter(ACTIVE, NumberFormatter.INTEGER);
+ tm.setFormatter(HASLOOKEDUP, DefaultCellFormatter.INSTANCE);
+ tm.setFormatter(LOOKEDUP, NumberFormatter.INTEGER);
+ tm.setFormatter(MATCHED, NumberFormatter.INTEGER);
+ tm.setFormatter(HASMAXSIZE, DefaultCellFormatter.INSTANCE);
+ tm.setFormatter(MAXSIZE, NumberFormatter.INTEGER);
+ return tm;
+ }
+
+ @Override
+ protected void populateTable(TableModel tm, ObjectNode payload) {
+ String uri = string(payload, "devId");
+ if (!Strings.isNullOrEmpty(uri)) {
+ DeviceId deviceId = DeviceId.deviceId(uri);
+ DeviceService ds = get(DeviceService.class);
+ FlowRuleService flowService = get(FlowRuleService.class);
+
+ Iterable<TableStatisticsEntry> stats = flowService.getFlowTableStatistics(deviceId);
+ for (TableStatisticsEntry stat : stats) {
+ populateRow(tm.addRow(), stat);
+ }
+ }
+ }
+
+ private void populateRow(TableModel.Row row, TableStatisticsEntry tableStat) {
+ row.cell(TABLE_NAME, tableStat.table())
+ .cell(ACTIVE, tableStat.activeFlowEntries())
+ .cell(HASLOOKEDUP, tableStat.hasPacketsLookedup())
+ .cell(LOOKEDUP, tableStat.packetsLookedup())
+ .cell(MATCHED, tableStat.packetsMatched())
+ .cell(HASMAXSIZE, tableStat.hasMaxSize())
+ .cell(MAXSIZE, tableStat.maxSize());
+ }
+ }
}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
index da86354..f3c6432 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
@@ -197,6 +197,5 @@
glyphName = iconCls;
}
this.gs.loadDefs(this.ensureIconLibDefs(), [glyphName], true, [iconCls]);
- this.log.debug('icon definition', glyphName, 'added to defs as', iconCls);
}
}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts
index af736fd..138bb82 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.ts
@@ -50,7 +50,6 @@
private log: LogService
) {
// Note: iconId is not available until initialization
- this.log.debug('IconComponent constructed');
}
/**
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/details/details.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/details/details.component.html
index 236cefe..5421776 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/details/details.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/details/details.component.html
@@ -68,6 +68,12 @@
[iconId]="'clock'"
classes="button icon selected">
</onos-icon>
+ <onos-icon id="topo2-p-detail-core-pipeconf"
+ (click)="navto('pipeconf')"
+ [iconSize]="25"
+ [iconId]="'pipeconfTable'"
+ classes="button icon selected">
+ </onos-icon>
</div>
</div>
</div>
diff --git a/web/gui2/src/main/webapp/app/onos-routing.module.ts b/web/gui2/src/main/webapp/app/onos-routing.module.ts
index c461bf97..fc8375d 100644
--- a/web/gui2/src/main/webapp/app/onos-routing.module.ts
+++ b/web/gui2/src/main/webapp/app/onos-routing.module.ts
@@ -13,11 +13,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { Gui2TopoLibModule } from 'gui2-topo-lib';
-import { FmGui2LibModule } from 'fm-gui2-lib';
-import { RoadmGuiLibModule } from 'roadm-gui-lib';
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import {Gui2TopoLibModule} from 'gui2-topo-lib';
+import {FmGui2LibModule} from 'fm-gui2-lib';
+import {RoadmGuiLibModule} from 'roadm-gui-lib';
/**
* The set of Routes in the application - can be chosen from nav menu or
@@ -80,6 +80,10 @@
path: 'meter',
loadChildren: 'app/view/meter/meter.module#MeterModule'
},
+ {
+ path: 'pipeconf',
+ loadChildren: 'app/view/pipeconf/pipeconf.module#PipeconfModule'
+ },
/* Comment out below section for running locally with 'ng serve' when developing */
{
path: 'topo2',
@@ -108,9 +112,10 @@
*/
@NgModule({
imports: [
- RouterModule.forRoot(onosRoutes, { useHash : true })
+ RouterModule.forRoot(onosRoutes, {useHash: true})
],
exports: [RouterModule],
providers: []
})
-export class OnosRoutingModule { }
+export class OnosRoutingModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/device/device/device.component.ts b/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
index d810319..a164af2 100644
--- a/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
+++ b/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
@@ -110,7 +110,7 @@
}
navto(path) {
- this.log.debug('navigate');
+ this.log.debug('navigate to', path);
if (this.selId) {
this.router.navigate([path], { queryParams: { devId: this.selId } });
}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts
new file mode 100644
index 0000000..b837eb8
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+import {NgModule} from '@angular/core';
+import {PipeconfComponent} from './pipeconf/pipeconf.component';
+import {RouterModule, Routes} from '@angular/router';
+
+const pipeconfRoutes: Routes = [
+ {
+ path: '',
+ component: PipeconfComponent
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(pipeconfRoutes)],
+ exports: [RouterModule]
+})
+export class PipeconfRoutingModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts
new file mode 100644
index 0000000..535fa0f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PipeconfComponent} from './pipeconf/pipeconf.component';
+import {PipeconfDetailsComponent} from './pipeconfdetails/pipeconfdetails.component';
+import {Gui2FwLibModule} from 'gui2-fw-lib';
+import {FormsModule} from '@angular/forms';
+import {PipeconfRoutingModule} from './pipeconf-routing.module';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ PipeconfRoutingModule,
+ Gui2FwLibModule,
+ FormsModule
+ ],
+ declarations: [
+ PipeconfComponent,
+ PipeconfDetailsComponent
+ ],
+})
+export class PipeconfModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css
new file mode 100644
index 0000000..0057ac8
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css
@@ -0,0 +1,165 @@
+/*
+ * 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.
+ */
+
+
+/* Base */
+#pipeconf-info h2 {
+ display: inline-block;
+ margin: 10px 0 10px 0;
+}
+
+#pipeconf-info h3 {
+ display: inline-block;
+ margin-bottom: 10px;
+}
+
+#pipeconf-info {
+ height: 80vh;
+ max-width: 100%;
+ overflow-y: scroll;
+ overflow-x: scroll;
+ padding-left: 16px;
+ padding-right: 20px;
+}
+
+#pipeconf-info::-webkit-scrollbar {
+ display: none;
+}
+
+/* Table */
+.pipeconf-table {
+ width: 100%;
+}
+
+.pipeconf-table tr {
+ transition: background-color 500ms;
+ text-align: left;
+ padding: 8px 4px;
+}
+
+.pipeconf-table .selected {
+ background-color: #dbeffc !important;
+}
+
+.pipeconf-table tr:nth-child(even) {
+ background-color: #f4f4f4;
+}
+
+.pipeconf-table tr:nth-child(odd) {
+ background-color: #fbfbfb;
+}
+
+.pipeconf-table thead th {
+ background-color: #e5e5e6;
+ color: #3c3a3a;
+ font-weight: bold;
+ font-variant: small-caps;
+ text-transform: uppercase;
+ font-size: 10pt;
+ letter-spacing: 0.02em;
+}
+
+.pipeconf-table tr td {
+ padding: 4px;
+ text-align: left;
+ word-wrap: break-word;
+ font-size: 10pt;
+}
+
+.pipeconf-table tr td p {
+ margin: 5px 0;
+}
+
+/* Detail panel */
+.container {
+ padding: 10px;
+ overflow: hidden;
+}
+
+.container .top, .bottom {
+ padding: 15px;
+}
+.container .bottom {
+ overflow-y: scroll;
+}
+
+.container .bottom h2 {
+ margin: 0;
+}
+
+.container .top .detail-panel-header {
+ display: inline-block;
+ margin: 0 0 10px;
+}
+
+
+.detail-panel-table {
+ width: 100%;
+ overflow-y: hidden;
+}
+
+.detail-panel-table td, th {
+ text-align: left;
+ padding: 6px 12px;
+}
+
+.top-info {
+ font-size: 12pt;
+}
+
+.top-info .label {
+ font-weight: bold;
+ text-align: right;
+ display: inline-block;
+ margin: 0;
+ padding-right:6px;
+}
+
+.top-info .value {
+ margin: 0;
+ text-align: left;
+ display: inline-block;
+}
+
+/* Widgets */
+#ov-pipeconf h2 {
+ display: inline-block;
+}
+
+.collapse-btn {
+ cursor: pointer;
+ display: inline-block;
+ max-height: 30px;
+ overflow-y: hidden;
+ position: relative;
+ top: 8px;
+}
+
+.close-btn {
+ display: inline-block;
+ float: right;
+ margin: 0.1em;
+ cursor: pointer;
+}
+
+.text-center {
+ text-align: center !important;
+}
+
+.no-data {
+ text-align: center !important;
+ font-style: italic;
+}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.html b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.html
new file mode 100644
index 0000000..368997d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.html
@@ -0,0 +1,132 @@
+<!--
+~ 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.
+-->
+
+<div id="ov-pipeconf">
+ <div class="tabular-header">
+ <h2>Pipeconf for Device {{devId || "(No device selected)"}}</h2>
+
+ <div class="ctrl-btns">
+ <div class="refresh" (click)="toggleRefresh()">
+ <!-- See icon.theme.css for the defintions of the classes active and refresh-->
+ <onos-icon classes="{{ autoRefresh?'active refresh':'refresh' }}" iconId="refresh" iconSize="42" toolTip="{{ autoRefreshTip }}"></onos-icon>
+ </div>
+ <div class="separator"></div>
+ <div (click)="navto('/device')">
+ <onos-icon classes="active-rect" iconId="deviceTable" iconSize="42"></onos-icon>
+ </div>
+ <div (click)="navto('/flow')">
+ <onos-icon classes="active-rect" iconId="flowTable" iconSize="42" toolTip="{{ flowTip }}"></onos-icon>
+ </div>
+ <div (click)="navto('/port')">
+ <onos-icon classes="active-rect" iconId="portTable" iconSize="42" toolTip="{{ portTip }}"></onos-icon>
+ </div>
+ <div (click)="navto('/group')">
+ <onos-icon classes="active-rect" iconId="groupTable" iconSize="42" toolTip="{{ groupTip }}"></onos-icon>
+ </div>
+ <div (click)="navto('/meter')">
+ <onos-icon classes="active-rect" iconId="meterTable" iconSize="42" toolTip="{{ meterTip }}"></onos-icon>
+ </div>
+ <div>
+ <onos-icon classes="current-view" iconId="pipeconfTable" iconSize="42" toolTip="{{ pipeconfTip }}"></onos-icon>
+ </div>
+ </div>
+ </div>
+ <div id="pipeconf-info" auto-height>
+ <div id="pipeconf-basic">
+ <table class="pipeconf-table">
+ <thead>
+ <th class="text-center" style="width: 160px">Name</th>
+ <th>Info</th>
+ </thead>
+ <tr *ngIf="pipeconfData === undefined; else pipeconfDataShow">
+ <td colspan="2" class="no-data">
+ No PiPipeconf for this device
+ </td>
+ </tr>
+ <ng-template #pipeconfDataShow>
+ <tr>
+ <td class="text-center">ID</td>
+ <td>{{pipeconfData.pipeconf.id}}</td>
+ </tr>
+ <tr>
+ <td class="text-center">Behaviors</td>
+ <td>{{pipeconfData.pipeconf.behaviors.join(", ")}}</td>
+ </tr>
+ <tr>
+ <td class="text-center">Extensions</td>
+ <td>{{pipeconfData.pipeconf.extensions.join(", ")}}</td>
+ </tr>
+ </ng-template>
+ </table>
+ </div>
+ <h2>Pipeline Model</h2>
+ <div id="pipeconf-tables">
+ <table class="pipeconf-table">
+ <thead>
+ <th class="text-center">Table</th>
+ <th class="text-center">Entries used</th>
+ <th class="text-center">Max entries</th>
+ <th class="text-center">LookedUp</th>
+ <th class="text-center">Matched</th>
+ <th class="text-center">Has Counters</th>
+ <th class="text-center">Support Aging</th>
+ <th class="text-left">Match fields</th>
+ <th class="text-left">Actions</th>
+ </thead>
+ <tr *ngFor="let table of tableData"
+ (click)="selectCallback($event, table)"
+ [ngClass]="{selected: table.table === selId, 'data-change': isChanged(table.table)}"
+ class="clickable">
+ <td class="text-center">{{table.table}}</td>
+ <td class="text-center">{{table.active}}</td>
+ <td class="text-center">{{table.maxsize}}</td>
+ <td *ngIf="table.haslookedup === 'true'; else hasLookedupNa" class="text-center">{{table.lookedup}}</td>
+ <ng-template #hasLookedupNa>
+ <td class="text-center">N/A</td>
+ </ng-template>
+ <td class="text-center">{{table.matched}}</td>
+ <td class="text-center">
+ <onos-icon
+ [iconId]="pipeconfModelTable(table.table)?.hasCounters?'active':'inactive'"
+ [classes]="pipeconfModelTable(table.table)?.hasCounters?'active':'active-rect'"
+ [iconSize]="20">
+ </onos-icon>
+ </td>
+ <td class="text-center">
+ <onos-icon
+ [iconId]="pipeconfModelTable(table.table)?.supportAging?'active':'inactive'"
+ [classes]="pipeconfModelTable(table.table)?.supportAging?'active':'active-rect'"
+ [iconSize]="20">
+ </onos-icon>
+ </td>
+ <td *ngIf="pipeconfModelTable(table.table)?.matchFields.length > 0; else noMatchFields">
+ <p *ngFor="let mf of pipeconfModelTable(table.table)?.matchFields">{{mf.field}}</p>
+ </td>
+ <ng-template #noMatchFields>
+ <td>No match fields</td>
+ </ng-template>
+ <td *ngIf="pipeconfModelTable(table.table)?.actions.length !== 0; else noActions">
+ <p *ngFor="let act of pipeconfModelTable(table.table)?.actions">{{act}}</p>
+ </td>
+ <ng-template #noActions>
+ <td>No table actions</td>
+ </ng-template>
+ </tr>
+ </table>
+ </div>
+ </div>
+ <onos-pipeconfdetails id="{{selId}}" [actions]="pipeconfData?.pipelineModel.actions" [pipeconfTable]="selectedTable" (closeEvent)="deselectRow($event)"></onos-pipeconfdetails>
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.spec.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.spec.ts
new file mode 100644
index 0000000..6af5b82
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.spec.ts
@@ -0,0 +1,96 @@
+/*
+ * 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.
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PipeconfComponent} from './pipeconf.component';
+import {
+ FnService,
+ Gui2FwLibModule,
+ LogService,
+} from 'gui2-fw-lib';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FormsModule} from '@angular/forms';
+import {RouterTestingModule} from '@angular/router/testing';
+import {PipeconfDetailsComponent} from '../pipeconfdetails/pipeconfdetails.component';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+/**
+ * ONOS GUI -- Pipeconf Component test - Unit Tests
+ */
+describe('PipeconfComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: PipeconfComponent;
+ let fixture: ComponentFixture<PipeconfComponent>;
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [
+ BrowserAnimationsModule,
+ FormsModule,
+ RouterTestingModule,
+ Gui2FwLibModule
+ ],
+ declarations: [
+ PipeconfComponent,
+ PipeconfDetailsComponent
+ ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ }).compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PipeconfComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts
new file mode 100644
index 0000000..8a2c9e6
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts
@@ -0,0 +1,197 @@
+/*
+ * Copyright 2018-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.
+ */
+
+import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {
+ FnService,
+ LogService, SortDir,
+ TableBaseImpl,
+ WebSocketService
+} from 'gui2-fw-lib';
+import {ActivatedRoute, Router} from '@angular/router';
+
+const pipeconfReq = 'pipeconfRequest';
+const pipeconfResp = 'pipeConfResponse';
+
+export interface PipeconfHeader {
+ id: string;
+ behaviors: string[];
+ extensions: string[];
+}
+
+export interface ActionParam {
+ name: string;
+ bitWidth: number;
+}
+
+export interface PipeconfAction {
+ name: string;
+ params: ActionParam[];
+}
+
+export interface MatchFields {
+ matchType: string;
+ bitWidth: number;
+ field: string;
+}
+
+export interface PipeconfTable {
+ name: string;
+ maxSize: number;
+ hasCounters: boolean;
+ supportAging: boolean;
+ matchFields: MatchFields[];
+ actions: string[];
+}
+
+export interface PipelineModel {
+ actions: PipeconfAction[];
+ tables: PipeconfTable[];
+}
+
+export interface PipeconfData {
+ pipeconf: PipeconfHeader;
+ pipelineModel: PipelineModel;
+}
+
+
+export interface TableStat {
+ table: string;
+ active: number;
+ haslookedup: boolean;
+ lookedup: number;
+ matched: number;
+ hasmaxsize: boolean;
+ maxsize: number;
+}
+
+export interface TableStats {
+ tableStats: TableStat[];
+}
+
+/**
+ * ONOS GUI -- Pipeconf View Component
+ */
+@Component({
+ selector: 'onos-pipeconf',
+ templateUrl: './pipeconf.component.html',
+ styleUrls: ['./pipeconf.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+})
+export class PipeconfComponent extends TableBaseImpl implements OnInit, OnDestroy {
+ devId: string;
+ pipeconfData: PipeconfData;
+ selectedTable: PipeconfTable;
+ parentSelCb = this.updateSelected; // Func
+
+ // TODO: Update for LION
+ flowTip = 'Show flow view for selected device';
+ portTip = 'Show port view for selected device';
+ groupTip = 'Show group view for selected device';
+ meterTip = 'Show meter view for selected device';
+ pipeconfTip = 'Show pipeconf view for selected device';
+ na = 'N/A';
+
+ constructor(
+ protected fs: FnService,
+ protected log: LogService,
+ protected ar: ActivatedRoute,
+ protected router: Router,
+ protected wss: WebSocketService,
+ private ref: ChangeDetectorRef,
+ ) {
+ super(fs, log, wss, 'tableStat', 'table');
+ this.ar.queryParams.subscribe(params => {
+ this.devId = params['devId'];
+
+ });
+
+ this.payloadParams = {
+ devId: this.devId
+ };
+
+ this.responseCallback = this.tableStatsResponseCb;
+
+ this.sortParams = {
+ firstCol: 'table',
+ firstDir: SortDir.desc,
+ secondCol: 'active',
+ secondDir: SortDir.asc,
+ };
+ }
+
+ ngOnInit() {
+ // Also make a once off call to get the Pipeconf Static information
+ this.wss.bindHandlers(new Map<string, (data) => void>([
+ [pipeconfResp, (data) => {
+ this.pipeconfData = data;
+ this.ref.markForCheck();
+ this.log.debug('Pipeconf static data received', this.pipeconfData);
+ }]
+ ]));
+
+ const p = Object.assign({}, this.sortParams, this.payloadParams);
+
+ // Allow it to sit in pending events
+ if (this.wss.isConnected()) {
+ this.wss.sendEvent(pipeconfReq, p);
+ }
+
+ this.init();
+
+ this.log.debug('PipeconfComponent initialized');
+ }
+
+ ngOnDestroy() {
+ this.destroy();
+ this.wss.unbindHandlers([pipeconfResp]);
+
+ this.log.debug('PipeconfComponent destroyed');
+ }
+
+ tableStatsResponseCb(newTableData: TableStats) {
+ // checks if data changed for row flashing
+ }
+
+ /**
+ * There's nothing to navigate down further to for Pipeconf - instead we can
+ * navigate for the Device that was passed in
+ * @param path
+ */
+ navto(path) {
+ this.log.debug('navigate to', path);
+ this.router.navigate([path], { queryParams: { devId: this.devId } });
+ }
+
+ pipeconfModelTable(table: string): PipeconfTable {
+ if (this.pipeconfData === undefined) {
+ return; // Not loaded yet
+ }
+ for (const t of this.pipeconfData.pipelineModel.tables) {
+ if (t.name === table) {
+ return t;
+ }
+ }
+ this.log.warn('Could not find table', table, 'in PipelineModel');
+ }
+
+ updateSelected(event: any, selRow: any): void {
+ if (this.selId === undefined) {
+ this.selectedTable = undefined;
+ } else {
+ this.selectedTable = this.pipeconfModelTable(this.selId);
+ }
+ }
+}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.css b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.css
new file mode 100644
index 0000000..48b5c0d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.css
@@ -0,0 +1,93 @@
+/*
+ * 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.
+ */
+
+/* More in generic panel.css */
+
+#pipeconf-details-panel.floatpanel {
+ z-index: 0;
+}
+
+
+#pipeconf-details-panel .container {
+ padding: 8px 12px;
+}
+
+#pipeconf-details-panel .close-btn {
+ position: absolute;
+ right: 12px;
+ top: 12px;
+ cursor: pointer;
+}
+
+#pipeconf-details-panel .dev-icon {
+ display: inline-block;
+ padding: 0 6px 0 0;
+ vertical-align: middle;
+}
+
+#pipeconf-details-panel h2 {
+ display: inline-block;
+ margin: 8px 0;
+}
+
+
+#pipeconf-details-panel h2 input {
+ font-size: 0.90em;
+ width: 106%;
+}
+
+#pipeconf-details-panel .top-tables {
+ font-size: 10pt;
+ white-space: nowrap;
+}
+
+#pipeconf-details-panel .top div.left {
+ float: left;
+ padding: 0 18px 0 0;
+}
+#pipeconf-details-panel .top div.right {
+ display: inline-block;
+}
+
+#pipeconf-details-panel td.label {
+ font-weight: bold;
+ text-align: right;
+ padding-right: 6px;
+}
+
+#pipeconf-details-panel .actionBtns div {
+ padding: 12px 6px;
+}
+
+#pipeconf-details-panel hr {
+ width: 100%;
+ margin: 2px auto;
+}
+
+#pipeconf-details-panel .bottom table {
+ border-spacing: 0;
+}
+
+#pipeconf-details-panel .bottom th {
+ letter-spacing: 0.02em;
+}
+
+#pipeconf-details-panel .bottom th,
+#pipeconf-details-panel .bottom td {
+ padding: 6px 12px;
+ text-align: center;
+}
+
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.html b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.html
new file mode 100644
index 0000000..399ad28
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.html
@@ -0,0 +1,90 @@
+<!--
+~ 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.
+-->
+
+<div id="pipeconf-details-panel" class="floatpanel"
+ [@pipeconfDetailsState]="id!=='' && !closed">
+ <div class="container">
+ <div class="top">
+ <div class="close-btn">
+ <onos-icon class="close-btn" classes="active-close"
+ iconId="close" iconSize="20"
+ (click)="close()"></onos-icon>
+ </div>
+ <h2>{{id}}</h2>
+ <div class="top-content">
+ <div class="top-tables">
+ <div class="left">
+ <table>
+ <tbody>
+ <tr>
+ <td class="label" width="110">Name :</td>
+ <td class="value"
+ width="80">{{pipeconfTable?.name}}</td>
+ <td class="label" width="110">Support Aging :
+ </td>
+ <td class="value"
+ width="80">{{pipeconfTable?.supportAging}}</td>
+ </tr>
+ <tr>
+ <td class="label" width="110">Has counters :
+ </td>
+ <td class="value"
+ width="80">{{pipeconfTable?.hasCounters}}</td>
+ <td class="label" width="110">Max entries :</td>
+ <td class="value"
+ width="80">{{pipeconfTable?.maxSize}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <hr>
+ </div>
+ <div class="bottom">
+ <h2 class="match-title">Match fields</h2>
+ <table>
+ <thead>
+ <th>Field</th>
+ <th>Match type</th>
+ <th>Bit width</th>
+ </thead>
+ <tbody>
+ <tr *ngFor="let mf of pipeconfTable?.matchFields">
+ <td>{{mf.field}}</td>
+ <td>{{mf.matchType}}</td>
+ <td>{{mf.bitWidth}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="bottom">
+ <h2 class="action-title">Actions</h2>
+ <table>
+ <thead>
+ <th>Action</th>
+ <th>Parameter</th>
+ </thead>
+ <tbody>
+ <tr *ngFor="let actionKey of pipeconfTable?.actions">
+ <td>{{actionKey}}</td>
+ <td><p *ngFor="let param of actionDetails(actionKey).params">{{param.name}}:{{param.bitWidth}}</p></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.spec.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.spec.ts
new file mode 100644
index 0000000..f8bbf7a
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.spec.ts
@@ -0,0 +1,81 @@
+/*
+ * 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.
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PipeconfDetailsComponent} from './pipeconfdetails.component';
+import {
+ FnService, Gui2FwLibModule,
+ LogService,
+} from 'gui2-fw-lib';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+describe('PipeconfDetailsComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: PipeconfDetailsComponent;
+ let fixture: ComponentFixture<PipeconfDetailsComponent>;
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({ 'debug': 'panel' });
+ windowMock = <any>{
+ location: <any>{
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true' },
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [BrowserAnimationsModule, Gui2FwLibModule],
+ declarations: [PipeconfDetailsComponent],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ }).compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PipeconfDetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts
new file mode 100644
index 0000000..2fcb117
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts
@@ -0,0 +1,102 @@
+/*
+ * 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.
+ */
+
+import {
+ Component, Input,
+ OnChanges,
+ OnDestroy,
+ OnInit,
+ SimpleChanges
+} from '@angular/core';
+import {
+ DetailsPanelBaseImpl,
+ FnService,
+ IconService,
+ LogService, WebSocketService
+} from 'gui2-fw-lib';
+import {PipeconfAction, PipeconfTable} from '../pipeconf/pipeconf.component';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+/**
+ * ONOS GUI -- Pipeconf Detail View Component
+ */
+@Component({
+ selector: 'onos-pipeconfdetails',
+ templateUrl: './pipeconfdetails.component.html',
+ styleUrls: ['./pipeconfdetails.component.css',
+ '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'],
+ animations: [
+ trigger('pipeconfDetailsState', [
+ state('true', style({
+ transform: 'translateX(-100%)',
+ opacity: '100'
+ })),
+ state('false', style({
+ transform: 'translateX(0%)',
+ opacity: '0'
+ })),
+ transition('0 => 1', animate('100ms ease-in')),
+ transition('1 => 0', animate('100ms ease-out'))
+ ])
+ ]
+})
+export class PipeconfDetailsComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy, OnChanges {
+ @Input() id: string;
+ @Input() pipeconfTable: PipeconfTable;
+ @Input() actions: PipeconfAction[] = [];
+
+ constructor(protected fs: FnService,
+ protected log: LogService,
+ protected is: IconService,
+ protected wss: WebSocketService
+ ) {
+ super(fs, log, wss, 'device');
+ }
+
+ ngOnInit() {
+ this.init();
+ this.log.debug('Pipeconf Details Component initialized:', this.id);
+ }
+
+ /**
+ * Stop listening to appDetailsResponse on WebSocket
+ */
+ ngOnDestroy() {
+ this.destroy();
+ this.log.debug('Pipeconf Details Component destroyed');
+ }
+
+ /**
+ * Details Panel Data Request on row selection changes
+ * Should be called whenever id changes
+ * If id is empty, no request is made
+ */
+ ngOnChanges(changes: SimpleChanges) {
+ if (this.id === undefined || this.id === '') {
+ this.closed = false;
+ }
+ }
+
+ actionDetails(name: string): PipeconfAction {
+ for (const action of this.actions) {
+ if (action.name === name) {
+ return action;
+ }
+ }
+ this.log.debug('Action not found', name);
+ }
+
+}