[ONOS-3635] Implement detail panel view for extended app properties

This commit implements detail panel view of application.
Current implementation adds id, state, category, version, origin,
role and url properties to detail panel view.
List of features and required applications will be added in a
separated commit.

Change-Id: Id5cd7ed128b3d69225153aca990c91b462e5a677

@@ -15,6 +15,7 @@
  */
 package org.onosproject.ui.impl;
 
+import com.fasterxml.jackson.databind.node.ArrayNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.common.collect.ImmutableSet;
 import org.onosproject.app.ApplicationAdminService;
@@ -42,6 +43,10 @@ public class ApplicationViewMessageHandler extends UiMessageHandler {
 
     private static final String APP_MGMT_REQ = "appManagementRequest";
 
+    private static final String APP_DETAILS_REQ = "appDetailsRequest";
+    private static final String APP_DETAILS_RESP = "appDetailsResponse";
+    private static final String DETAILS = "details";
+
     private static final String STATE = "state";
     private static final String STATE_IID = "_iconid_state";
     private static final String ID = "id";
@@ -51,19 +56,25 @@ public class ApplicationViewMessageHandler extends UiMessageHandler {
     private static final String ORIGIN = "origin";
     private static final String DESC = "desc";
     private static final String URL = "url";
+    private static final String README = "readme";
+    private static final String ROLE = "role";
+    private static final String REQUIRED_APPS = "_required_apps";
+    private static final String FEATURES = "features";
 
     private static final String ICON_ID_ACTIVE = "active";
     private static final String ICON_ID_INACTIVE = "appInactive";
 
     private static final String[] COL_IDS = {
-            STATE, STATE_IID, ID, ICON, VERSION, CATEGORY, ORIGIN, DESC, URL
+            STATE, STATE_IID, ID, ICON, VERSION, CATEGORY, ORIGIN, DESC,
+            URL, README, ROLE, REQUIRED_APPS, FEATURES
     };
 
     @Override
     protected Collection<RequestHandler> createRequestHandlers() {
         return ImmutableSet.of(
                 new AppDataRequest(),
-                new AppMgmtRequest()
+                new AppMgmtRequest(),
+                new DetailRequestHandler()
         );
     }
 
@@ -135,4 +146,46 @@ public class ApplicationViewMessageHandler extends UiMessageHandler {
             }
         }
     }
+
+    // handler for selected application detail requests
+    private final class DetailRequestHandler extends RequestHandler {
+        private DetailRequestHandler() {
+            super(APP_DETAILS_REQ);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String id = string(payload, ID);
+            ApplicationService as = get(ApplicationService.class);
+            ApplicationId appId = as.getId(id);
+            ApplicationState state = as.getState(appId);
+            Application app = as.getApplication(appId);
+            ObjectNode data = objectNode();
+
+            data.put(STATE, state.toString());
+            data.put(ID, appId.name());
+            data.put(VERSION, app.version().toString());
+            data.put(ROLE, app.role().toString());
+            data.put(CATEGORY, app.category());
+            data.put(ORIGIN, app.origin());
+            data.put(README, app.readme());
+            data.put(URL, app.url());
+
+            // process required applications
+            ArrayNode requiredApps = arrayNode();
+            app.requiredApps().forEach(s -> requiredApps.add(s));
+
+            data.set(REQUIRED_APPS, requiredApps);
+
+            // process features
+            ArrayNode features = arrayNode();
+            app.features().forEach(f -> features.add(f));
+
+            data.set(FEATURES, features);
+
+            ObjectNode rootNode = objectNode();
+            rootNode.set(DETAILS, data);
+            sendMessage(APP_DETAILS_RESP, 0, rootNode);
+        }
+    }
 }

 /*
- * Copyright 2015 Open Networking Laboratory
+ * Copyright 2015-2016 Open Networking Laboratory
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -60,3 +60,118 @@
 .dark #app-dialog.floatpanel.dialog {
     background-color: #444;
 }
+
+#application-details-panel.floatpanel {
+    -moz-border-radius: 0;
+    border-radius: 0;
+    z-index: 0;
+}
+
+.light #application-details-panel.floatpanel {
+    background-color: rgb(229, 234, 237);
+}
+.dark #application-details-panel.floatpanel {
+    background-color: #3A4042;
+}
+
+#application-details-panel .container {
+    padding: 0 12px;
+}
+
+#application-details-panel .close-btn {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    cursor: pointer;
+}
+.light .close-btn svg.embeddedIcon .icon.plus .glyph {
+    fill: #aaa;
+}
+.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
+    fill: #ccc;
+}
+
+#application-details-panel .dev-icon {
+    display: inline-block;
+    padding: 0 6px 0 0;
+    vertical-align: middle;
+}
+.light .dev-icon svg.embeddedIcon .glyph {
+    fill: rgb(0, 172, 229);
+}
+.dark .dev-icon svg.embeddedIcon .glyph {
+    fill: #486D91;
+}
+
+#application-details-panel h2 {
+    display: inline-block;
+    margin: 8px 0;
+}
+
+#application-details-panel .top div.left {
+    float: left;
+    padding: 0 18px 0 0;
+}
+#application-details-panel .top div.right {
+    display: inline-block;
+}
+
+#application-details-panel td.label {
+    font-style: italic;
+    padding-right: 12px;
+    /* works for both light and dark themes ... */
+    color: #777;
+}
+
+#application-details-panel .actionBtns div {
+    padding: 12px 6px;
+}
+
+#application-details-panel .top hr {
+    width: 95%;
+    margin: 0 auto;
+}
+
+.light #application-details-panel hr {
+    opacity: .5;
+    border-color: #FFF;
+}
+.dark #application-details-panel hr {
+    border-color: #666;
+}
+
+#application-details-panel .bottom table {
+    border-spacing: 0;
+}
+
+#application-details-panel .bottom th {
+    letter-spacing: 0.02em;
+}
+
+.light #application-details-panel .bottom th {
+    background-color: #CCC;
+    /* default text color */
+}
+.dark #application-details-panel .bottom th {
+    background-color: #131313;
+    color: #ccc;
+}
+
+#application-details-panel .bottom th,
+#application-details-panel .bottom td {
+    padding: 6px 12px;
+    text-align: center;
+}
+
+.light #application-details-panel .bottom tr:nth-child(odd) {
+    background-color: #f9f9f9;
+}
+.light #application-details-panel .bottom tr:nth-child(even) {
+    background-color: #EBEDF2;
+}
+.dark #application-details-panel .bottom tr:nth-child(odd) {
+    background-color: #333;
+}
+.dark #application-details-panel .bottom tr:nth-child(even) {
+    background-color: #555;
+}
\ No newline at end of file

@@ -67,7 +67,8 @@
                     <td class="table-icon">
                         <div icon icon-id="{{app._iconid_state}}"></div>
                     </td>
-                    <td><img data-ng-src="./rs/applications/{{app.icon}}/icon" height="28px" width="28px" /></td>
+                    <td><img data-ng-src="./rs/applications/{{app.icon}}/icon"
+                             height="28px" width="28px" /></td>
                     <td>{{app.id}}</td>
                     <td>{{app.version}}</td>
                     <td>{{app.category}}</td>
@@ -80,4 +81,6 @@
 
     </div>
 
+    <application-details-panel></application-details-panel>
+
 </div>