Added title to Application View table and details panel.

Change-Id: Id225c3b315a0fd96dfad1e44138551f131bc54df

@@ -33,7 +33,7 @@
 
     <properties>
         <onos.app.name>org.onosproject.drivermatrix</onos.app.name>
-        <onos.app.title>Driver Behaviour Support Matrix App</onos.app.title>
+        <onos.app.title>Driver Support Matrix</onos.app.title>
         <onos.app.category>Utility</onos.app.category>
         <onos.app.url>http://onosproject.org</onos.app.url>
         <onos.app.readme>Driver behaviour support matrix.</onos.app.readme>

@@ -31,7 +31,7 @@
 
     <properties>
         <onos.app.name>org.onosproject.openflow</onos.app.name>
-        <onos.app.title>OpenFlow Southbound Meta App</onos.app.title>
+        <onos.app.title>OpenFlow Meta App</onos.app.title>
         <onos.app.category>Provider</onos.app.category>
         <onos.app.requires>
             org.onosproject.openflow-base,

@@ -103,6 +103,16 @@
     font-size: 12pt;
 }
 
+#application-details-panel .top .app-title {
+    width: 90%;
+    height: 45px;
+    font-size: 22pt;
+    font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 0 12px 0 0;
+}
+
 #application-details-panel .top div.left {
     float: left;
     padding: 0 12px 0 0;

@@ -42,11 +42,11 @@
                 <tr>
                     <td colId="state" class="table-icon" sortable></td>
                     <td colId="icon" class="table-icon">Icon </td>
-                    <td colId="id" sortable col-width="250px">App ID </td>
+                    <td colId="title" sortable col-width="240px">Title </td>
+                    <td colId="id" sortable col-width="240px">App ID </td>
                     <td colId="version" sortable col-width="120px">Version </td>
                     <td colId="category" sortable col-width="100px">Category </td>
-                    <td colId="origin" sortable col-width="100px">Origin </td>
-                    <td colId="desc">Description </td>
+                    <td colId="origin" sortable>Origin </td>
                 </tr>
             </table>
         </div>
@@ -68,11 +68,11 @@
                     </td>
                     <td><img data-ng-src="./rs/applications/{{app.icon}}/icon"
                              height="28px" width="28px" /></td>
+                    <td>{{app.title}}</td>
                     <td>{{app.id}}</td>
                     <td>{{app.version}}</td>
                     <td>{{app.category}}</td>
                     <td>{{app.origin}}</td>
-                    <td>{{app.desc}}</td>
                 </tr>
             </table>
         </div>

@@ -108,6 +108,7 @@
             }
         }
 
+        ndiv('app-title');
         ndiv('left app-icon');
         ndiv('right', 'app-props');
         ndiv('app-url');
@@ -156,6 +157,8 @@
         var propsBody = top.select('.app-props').append('tbody'),
             url = details.url;
 
+        top.select('.app-title').text(details.title);
+
         addIcon(top.select('.app-icon'), details.id);
 
         propOrder.forEach(function (prop, i) {
@@ -263,7 +266,7 @@
             sortParams: {
                 firstCol: 'state',
                 firstDir: 'desc',
-                secondCol: 'id',
+                secondCol: 'title',
                 secondDir: 'asc'
             }
         });