Fixing some content and visual glitches in the device flows view.
- idle timeout
- hard timeout
- app name fix
- CSS styles & details pane structure
Change-Id: I90a04cfe679a1c8371d06aed3d972c9f0bc93f6f
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java
index 71c7d5a..8f2a0a5 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java
@@ -23,6 +23,7 @@
import org.onosproject.app.ApplicationService;
import org.onosproject.core.Application;
import org.onosproject.core.ApplicationId;
+import org.onosproject.core.CoreService;
import org.onosproject.core.DefaultApplicationId;
import org.onosproject.net.DeviceId;
import org.onosproject.net.flow.FlowEntry;
@@ -76,7 +77,8 @@
private static final String SELECTOR = "selector";
private static final String TREATMENT_C = "treatment_c"; // for table column
private static final String TREATMENT = "treatment";
- private static final String TIMEOUT = "timeout";
+ private static final String IDLE_TIMEOUT = "idleTimeout";
+ private static final String HARD_TIMEOUT = "hardTimeout";
private static final String PERMANENT = "permanent";
private static final String STATE = "state";
private static final String PACKETS = "packets";
@@ -134,7 +136,7 @@
APP_NAME,
GROUP_ID,
- TIMEOUT,
+ IDLE_TIMEOUT,
PERMANENT,
SELECTOR_C,
@@ -170,7 +172,11 @@
private String makeAppName(short id, Map<Short, ApplicationId> lookup) {
ApplicationId appId = lookup.get(id);
if (appId == null) {
- return UNKNOWN + SPACE + ANGLE_O + id + ANGLE_C;
+ appId = get(CoreService.class).getAppId(id);
+ if (appId == null) {
+ return UNKNOWN + SPACE + ANGLE_O + id + ANGLE_C;
+ }
+ lookup.put(id, appId);
}
String appName = appId.name();
return appName.startsWith(ONOS_PREFIX)
@@ -238,7 +244,7 @@
.cell(APP_NAME, makeAppName(flow.appId(), lookup))
.cell(GROUP_ID, flow.groupId().id())
- .cell(TIMEOUT, flow.timeout())
+ .cell(IDLE_TIMEOUT, flow.timeout())
.cell(PERMANENT, flow.isPermanent())
.cell(SELECTOR_C, flow)
@@ -415,7 +421,8 @@
data.put(APP_NAME, makeAppName(flow.appId(), appShortMap()));
data.put(GROUP_ID, decorateGroupId(flow));
- data.put(TIMEOUT, flow.hardTimeout());
+ data.put(IDLE_TIMEOUT, flow.timeout());
+ data.put(HARD_TIMEOUT, flow.hardTimeout());
data.put(PERMANENT, flow.isPermanent());
data.set(SELECTOR, jsonCriteria(flow));
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.css b/web/gui/src/main/webapp/app/view/flow/flow.css
index 06e9b1a..cbe0cdb 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow.css
@@ -64,10 +64,20 @@
#flow-details-panel h2 {
display: inline-block;
margin: 8px 0;
+ font-size: 16pt;
+ font-weight: lighter;
+}
+
+#flow-details-panel h3 {
+ display: inline-block;
+ margin: 8px 0;
+ font-size: 11pt;
+ font-variant: small-caps;
+ text-transform: uppercase;
}
#flow-details-panel .top-content table {
- font-size: 12pt;
+ font-size: 10pt;
}
#flow-details-panel td.label {
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.js b/web/gui/src/main/webapp/app/view/flow/flow.js
index 71794bd..4392d42 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.js
+++ b/web/gui/src/main/webapp/app/view/flow/flow.js
@@ -30,8 +30,6 @@
pHeight,
top,
topTable,
- trtDiv,
- selDiv,
topSelTable,
topTrtTable,
iconDiv,
@@ -39,7 +37,7 @@
// constants
var topPdg = 28,
- wtPdg = 532,
+ wtPdg = 400,
pName = 'flow-details-panel',
detailsReq = 'flowDetailsRequest',
@@ -59,7 +57,8 @@
'appId',
'groupId',
- 'timeout',
+ 'idleTimeout',
+ 'hardTimeout',
'permanent',
],
friendlyProps = [
@@ -76,7 +75,8 @@
'App ID',
'Group ID',
- 'Timeout',
+ 'Idle Timeout',
+ 'Hard Timeout',
'Permanent',
];
@@ -112,16 +112,12 @@
.append('table');
top.append('hr');
- selDiv = container.append('div').classed('top', true);
- selDiv.append('h2').text('Selector');
- topSelTable = selDiv.append('div').classed('top-content', true)
- .append('table');
- selDiv.append('hr');
+ top.append('h3').text('Selector');
+ topSelTable = top.append('div').classed('top-content', true).append('table');
+ top.append('hr');
- trtDiv = container.append('div').classed('top', true);
- trtDiv.append('h2').text('Treatment');
- topTrtTable = trtDiv.append('div').classed('top-content', true)
- .append('table');
+ top.append('h3').text('Treatment');
+ topTrtTable = top.append('div').classed('top-content', true).append('table');
}
function addProp(tbody, label, value) {