[ONOS-7026] Show table name if the table id of a flow is PiTableId

Change-Id: Icd2f69dad4604b30e7d1ea871f15a2df842af9e0
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 6e49dba..71c7d5a 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
@@ -37,6 +37,7 @@
 import org.onosproject.ui.table.CellFormatter;
 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.EnumFormatter;
 import org.onosproject.ui.table.cell.HexLongFormatter;
 import org.onosproject.ui.table.cell.NumberFormatter;
@@ -69,7 +70,7 @@
     private static final String APP_ID = "appId";
     private static final String APP_NAME = "appName";
     private static final String GROUP_ID = "groupId";
-    private static final String TABLE_ID = "tableId";
+    private static final String TABLE_NAME = "tableName";
     private static final String PRIORITY = "priority";
     private static final String SELECTOR_C = "selector_c"; // for table column
     private static final String SELECTOR = "selector";
@@ -128,7 +129,7 @@
             PACKETS,
             DURATION,
             PRIORITY,
-            TABLE_ID,
+            TABLE_NAME,
             APP_ID,
             APP_NAME,
 
@@ -206,6 +207,7 @@
             tm.setFormatter(SELECTOR, new SelectorFormatter());
             tm.setFormatter(TREATMENT_C, new TreatmentShortFormatter());
             tm.setFormatter(TREATMENT, new TreatmentFormatter());
+            tm.setFormatter(TABLE_NAME, DefaultCellFormatter.INSTANCE);
             return tm;
         }
 
@@ -231,7 +233,7 @@
                     .cell(PACKETS, flow.packets())
                     .cell(DURATION, flow.life())
                     .cell(PRIORITY, flow.priority())
-                    .cell(TABLE_ID, flow.tableId())
+                    .cell(TABLE_NAME, flow.table())
                     .cell(APP_ID, flow.appId())
                     .cell(APP_NAME, makeAppName(flow.appId(), lookup))
 
@@ -407,7 +409,7 @@
                 data.put(DURATION, NumberFormatter.INTEGER.format(flow.life()));
 
                 data.put(FLOW_PRIORITY, flow.priority());
-                data.put(TABLE_ID, flow.tableId());
+                data.put(TABLE_NAME, flow.table().toString());
                 data.put(APP_ID, flow.appId());
                 // NOTE: horribly inefficient... make a map and retrieve a single value...
                 data.put(APP_NAME, makeAppName(flow.appId(), appShortMap()));
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index af24a63..3039983 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -62,7 +62,7 @@
                 <option value="$">All Fields</option>
                 <!--<option value="id">Flow ID</option>-->
                 <option value="priority">Priority</option>
-                <option value="tableId">Table ID</option>
+                <option value="tableName">Table Name</option>
                 <option value="selector">Selector</option>
                 <option value="treatment">Treatment</option>
                 <option value="appName">App Name</option>
@@ -81,7 +81,7 @@
                     <td class="right" colId="packets" col-width="90px" sortable> Packets </td>
                     <td class="right" colId="duration" col-width="90px" sortable> Duration </td>
                     <td colId="priority" col-width="80px" sortable> Priority </td>
-                    <td colId="tableId" col-width="80px" sortable> Table ID </td>
+                    <td colId="tableName" col-width="120px" sortable> Table Name </td>
                     <td colId="selector" sortable> Selector </td>
                     <td colId="treatment" sortable> Treatment </td>
                     <td colId="appName" sortable> App Name </td>
@@ -108,7 +108,7 @@
                     <td class="right">{{flow.packets}}</td>
                     <td class="right">{{flow.duration}}</td>
                     <td>{{flow.priority}}</td>
-                    <td>{{flow.tableId}}</td>
+                    <td>{{flow.tableName}}</td>
                     <td>{{flow.selector_c}}</td>
                     <td>{{flow.treatment_c}}</td>
                     <td>{{flow.appName}}</td>
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 2000997..cd1e58a 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.js
+++ b/web/gui/src/main/webapp/app/view/flow/flow.js
@@ -54,7 +54,7 @@
             'duration',
 
             'priority',
-            'tableId',
+            'tableName',
             'appName',
             'appId',
 
@@ -71,7 +71,7 @@
             'Duration',
 
             'Flow Priority',
-            'Table ID',
+            'Table Name',
             'App Name',
             'App ID',