ONOS-1477 - GUI -- Added glyphs to nav menu.

Change-Id: Ifacd5d389bdc2bb5adc61182b8329de9e2557af2

@@ -66,9 +66,10 @@ public class UiView {
         }
         }
     }
     }
 
 
+    private final Category category;
     private final String id;
     private final String id;
     private final String label;
     private final String label;
-    private final Category category;
+    private final String iconId;
 
 
     /**
     /**
      * Creates a new user interface view descriptor. The navigation item
      * Creates a new user interface view descriptor. The navigation item
@@ -79,9 +80,24 @@ public class UiView {
      * @param label    view label
      * @param label    view label
      */
      */
     public UiView(Category category, String id, String label) {
     public UiView(Category category, String id, String label) {
+        this(category, id, label, null);
+    }
+
+    /**
+     * Creates a new user interface view descriptor. The navigation item
+     * will appear in the navigation menu under the specified category,
+     * with the specified icon adornment.
+     *
+     * @param category view category
+     * @param id       view identifier
+     * @param label    view label
+     * @param iconId   icon id
+     */
+    public UiView(Category category, String id, String label, String iconId) {
         this.category = category;
         this.category = category;
         this.id = id;
         this.id = id;
         this.label = label;
         this.label = label;
+        this.iconId = iconId;
     }
     }
 
 
     /**
     /**
@@ -111,6 +127,15 @@ public class UiView {
         return label;
         return label;
     }
     }
 
 
+    /**
+     * Returns the icon ID.
+     *
+     * @return icon ID
+     */
+    public String iconId() {
+        return iconId;
+    }
+
     @Override
     @Override
     public int hashCode() {
     public int hashCode() {
         return Objects.hash(id);
         return Objects.hash(id);
@@ -134,6 +159,7 @@ public class UiView {
                 .add("category", category)
                 .add("category", category)
                 .add("id", id)
                 .add("id", id)
                 .add("label", label)
                 .add("label", label)
+                .add("iconId", iconId)
                 .toString();
                 .toString();
     }
     }
 }
 }

@@ -51,7 +51,9 @@ public class MainNavResource extends AbstractInjectionResource {
     private static final String HDR_FORMAT =
     private static final String HDR_FORMAT =
             "<div class=\"nav-hdr\">%s</div>\n";
             "<div class=\"nav-hdr\">%s</div>\n";
     private static final String NAV_FORMAT =
     private static final String NAV_FORMAT =
-            "<a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s</a>\n";
+            "<a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s %s</a>\n";
+
+    private static final String BLANK_GLYPH = "unknown";
 
 
     @GET
     @GET
     @Produces(MediaType.TEXT_HTML)
     @Produces(MediaType.TEXT_HTML)
@@ -110,7 +112,12 @@ public class MainNavResource extends AbstractInjectionResource {
 
 
     private void addCatItems(StringBuilder sb, List<UiView> catViews) {
     private void addCatItems(StringBuilder sb, List<UiView> catViews) {
         for (UiView view : catViews) {
         for (UiView view : catViews) {
-            sb.append(String.format(NAV_FORMAT, view.id(), view.label()));
+            sb.append(String.format(NAV_FORMAT, view.id(), icon(view), view.label()));
+        }
     }
     }
+
+    private String icon(UiView view) {
+        String gid = view.iconId() == null ? BLANK_GLYPH : view.iconId();
+        return "<div icon icon-id=\"" + gid + "\"></div>";
     }
     }
 }
 }

@@ -62,14 +62,16 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
 
 
     // Creates core UI extension
     // Creates core UI extension
     private static UiExtension createCoreExtension() {
     private static UiExtension createCoreExtension() {
-        List<UiView> coreViews = of(new UiView(PLATFORM, "app", "Applications"),
-                                    new UiView(PLATFORM, "cluster", "Cluster Nodes"),
-                                    new UiView(NETWORK, "topo", "Topology"),
-                                    new UiView(NETWORK, "device", "Devices"),
+        List<UiView> coreViews = of(
+                new UiView(PLATFORM, "app", "Applications", "nav_apps"),
+                new UiView(PLATFORM, "cluster", "Cluster Nodes", "nav_cluster"),
+                new UiView(NETWORK, "topo", "Topology", "nav_topo"),
+                new UiView(NETWORK, "device", "Devices", "nav_devs"),
                 new UiViewHidden("flow"),
                 new UiViewHidden("flow"),
-                                    new UiView(NETWORK, "link", "Links"),
-                                    new UiView(NETWORK, "host", "Hosts"),
-                                    new UiView(NETWORK, "intent", "Intents"));
+                new UiView(NETWORK, "link", "Links", "nav_links"),
+                new UiView(NETWORK, "host", "Hosts", "nav_hosts"),
+                new UiView(NETWORK, "intent", "Intents", "nav_intents")
+        );
 
 
         UiMessageHandlerFactory messageHandlerFactory =
         UiMessageHandlerFactory messageHandlerFactory =
                 () -> ImmutableList.of(
                 () -> ImmutableList.of(

@@ -56,7 +56,7 @@
     text-decoration: none;
     text-decoration: none;
     font-size: 14pt;
     font-size: 14pt;
     display: block;
     display: block;
-    padding: 8px 16px 6px 16px;
+    padding: 8px 16px 6px 12px;
 }
 }
 
 
 .light #nav a {
 .light #nav a {
@@ -75,3 +75,12 @@
     background-color: #777;
     background-color: #777;
 }
 }
 
 
+#nav a div {
+    display: inline-block;
+    vertical-align: middle;
+    padding-right: 4px;
+}
+
+#nav a div svg.embeddedIcon g.icon .glyph {
+    fill: #c66;
+}

@@ -47,7 +47,15 @@
 
 
         hostIcon_endstation: 'endstation',
         hostIcon_endstation: 'endstation',
         hostIcon_router: 'router',
         hostIcon_router: 'router',
-        hostIcon_bgpSpeaker: 'bgpSpeaker'
+        hostIcon_bgpSpeaker: 'bgpSpeaker',
+
+        nav_apps: 'bird',
+        nav_cluster: 'node',
+        nav_topo: 'unknown', // TODO: need a topology glyph
+        nav_devs: 'switch',
+        nav_links: 'ports',
+        nav_hosts: 'endstation',
+        nav_intents: 'relatedIntents'
     };
     };
 
 
     function ensureIconLibDefs() {
     function ensureIconLibDefs() {