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

web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java

@@ -23,6 +23,7 @@ import com.google.common.collect.ImmutableSet;
 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 @@ public class FlowViewMessageHandler extends UiMessageHandler {
     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 @@ public class FlowViewMessageHandler extends UiMessageHandler {
             APP_NAME,
 
             GROUP_ID,
-            TIMEOUT,
+            IDLE_TIMEOUT,
             PERMANENT,
 
             SELECTOR_C,
@@ -169,9 +171,13 @@ public class FlowViewMessageHandler extends UiMessageHandler {
     // Return an application name, based on a lookup of the internal short ID
     private String makeAppName(short id, Map<Short, ApplicationId> lookup) {
         ApplicationId appId = lookup.get(id);
+        if (appId == null) {
+            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)
                 ? appName.replaceFirst(ONOS_PREFIX, ONOS_MARKER) : appName;
@@ -238,7 +244,7 @@ public class FlowViewMessageHandler extends UiMessageHandler {
                     .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 @@ public class FlowViewMessageHandler extends UiMessageHandler {
                 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));

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 {

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) {