Merge lp:~hatch/juju-gui/highlight-bundle-service into lp:juju-gui/experimental

[Jeff Pihach]

Adds highlight to service icon in bundle topo

When viewing a bundle topology it will now auto select
a service icon which now adds a highlight svg behind
the icon and pops open the name panel.

https://codereview.appspot.com/19920043/

[Jeff Pihach (hatch)]

Reviewers: mp+193316_code.launchpad.net,

Message:
Please take a look.

Description:
Adds highlight to service icon in bundle topo

When viewing a bundle topology it will now auto select
a service icon which now adds a highlight svg behind
the icon and pops open the name panel.

The SVG for this highlight will need to be requested
from design. The one used is just a temporary icon.

https://code.launchpad.net/~hatch/juju-gui/highlight-bundle-service/+merge/193316

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/19920043/

Affected files (+88, -0 lines):
   A [revision details]
   A app/assets/images/non-sprites/service-highlight.svg
   M app/views/topology/bundle.js
   M lib/views/browser/bundle-panel.less

Index: [revision details]
=== added file '[revision details]'
--- [revision details] 2012-01-01 00:00:00 +0000
+++ [revision details] 2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision: <email address hidden>

Index: app/views/topology/bundle.js
=== modified file 'app/views/topology/bundle.js'
--- app/views/topology/bundle.js 2013-10-24 21:03:02 +0000
+++ app/views/topology/bundle.js 2013-10-30 19:11:22 +0000
@@ -72,6 +72,11 @@
          num_units: box.units.size(),
          settings: box.config
        });
+
+ var topo = self.get('component');
+ topo.vis.selectAll('.selected').classed('selected', false);
+ d3.select(this).classed('selected', true);
+
        details.setHTML(templates['bundle-service-details'](context));
        details.show();
      },
@@ -131,6 +136,16 @@
        @method createServiceNode
       */
      createServiceNode: function(node, self) {
+ // Add the highlight svg image to each element
+ node.append('image')
+ .attr({
+ class: 'highlight',
+ width: SERVICE_SIZE + 10,
+ height: SERVICE_SIZE + 10,
+ transform: 'translate(-5,-5)',
+ 'xlink:href':
+ '/juju-ui/assets/images/non-sprites/service-highlight.svg'
+ });
        node.append('image')
         .classed('service-icon', true)
         .attr({
@@ -417,6 +432,18 @@
    BundleTopology.prototype.render = function() {
      this.topology.render();
      this.zoomToFit();
+ // Pass the first service data to the showServiceDetails to select it.
+ var topo = this.topology;
+ var firstService = topo.vis.select('.service');
+ var bundleModule = topo.modules.BundleModule;
+ // We need the actual svg dom node out of the d3 selection
+ // If for whatever reason this node isn't in the DOM we don't want
+ // to try and select it and have the whole application fall over.
+ if (firstService.node()) {
+ bundleModule.showServiceDetails.call(
+ firstService.node(), firstService.datum(), bundleModule);
+ }
+
      return this;
    };

Index: lib/views/browser/bundle-panel.less
=== modified file 'lib/views/browser/bundle-panel.less'
--- lib/views/browser/bundle-panel.less 2013-10-21 23:24:39 +0000
+++ lib/views/browser/bundle-panel.less 2013-10-30 17:54:53 +0000
...

[lp:~hatch/juju-gui/highlight-bundle-service]

1169. By Jeff Pihach on 2013-10-30

some cleanups

[Jeff Pihach (hatch)]

Please take a look.

https://codereview.appspot.com/19920043/

[Gary Poster (gary)]

Code LGTM with ultra trivial. I asked you to investigate using the
official Juju squircle SVG
(https://juju.ubuntu.com/docs/media/icon.svg). I will QA after you let
me know to do so.

https://codereview.appspot.com/19920043/diff/20001/app/views/topology/bundle.js
File app/views/topology/bundle.js (right):

https://codereview.appspot.com/19920043/diff/20001/app/views/topology/bundle.js#newcode140
app/views/topology/bundle.js:140: node.append('image')
I asked on IRC whether we ought to use a ref, but Makyo said it wouldn't
buy us much. Cool.

https://codereview.appspot.com/19920043/diff/20001/app/views/topology/bundle.js#newcode439
app/views/topology/bundle.js:439: // We need the actual svg dom node out
of the d3 selection
The grammar police! <RRrrrraaaarrrRRRrraaaarrrRRR>

Add a period. ;-)

https://codereview.appspot.com/19920043/diff/20001/app/views/topology/bundle.js#newcode440
app/views/topology/bundle.js:440: // If for whatever reason this node
isn't in the DOM we don't want
The grammar police let the missing comma slide, but they consider a
citation.

https://codereview.appspot.com/19920043/

[lp:~hatch/juju-gui/highlight-bundle-service]

1170. By Jeff Pihach on 2013-10-30

updated service highlight svg

[Gary Poster (gary)]

QAOK. Looks great! Thanks! I only see aliasing issues with the
default icons; maybe the designers have an idea about that.

https://codereview.appspot.com/19920043/

[Jeff Pihach (hatch)]

Thanks for the review!

https://codereview.appspot.com/19920043/diff/20001/app/views/topology/bundle.js
File app/views/topology/bundle.js (right):

https://codereview.appspot.com/19920043/diff/20001/app/views/topology/bundle.js#newcode439
app/views/topology/bundle.js:439: // We need the actual svg dom node out
of the d3 selection
haha done

https://codereview.appspot.com/19920043/diff/20001/app/views/topology/bundle.js#newcode440
app/views/topology/bundle.js:440: // If for whatever reason this node
isn't in the DOM we don't want
On 2013/10/30 20:36:53, gary.poster wrote:
> The grammar police let the missing comma slide, but they consider a
citation.

Done.

https://codereview.appspot.com/19920043/

[Jeff Pihach (hatch)]

*** Submitted:

Adds highlight to service icon in bundle topo

When viewing a bundle topology it will now auto select
a service icon which now adds a highlight svg behind
the icon and pops open the name panel.

R=gary.poster
CC=
https://codereview.appspot.com/19920043

https://codereview.appspot.com/19920043/

=== added file 'app/assets/images/non-sprites/service-highlight.svg'
--- app/assets/images/non-sprites/service-highlight.svg	1970-01-01 00:00:00 +0000
+++ app/assets/images/non-sprites/service-highlight.svg	2013-10-30 20:49:48 +0000
@@ -0,0 +1,275 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="101"
+   height="101"
+   id="svg6517"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="service-highlight.svg">
+  <defs
+     id="defs6519">
+    <linearGradient
+       id="Background">
+      <stop
+         id="stop4178"
+         offset="0"
+         style="stop-color:#b8b8b8;stop-opacity:1" />
+      <stop
+         id="stop4180"
+         offset="1"
+         style="stop-color:#c9c9c9;stop-opacity:1" />
+    </linearGradient>
+    <filter
+       inkscape:label="Inner Shadow"
+       id="filter1121"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0.59999999999999998"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood1123" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="out"
+         result="composite1"
+         id="feComposite1125" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="1"
+         result="blur"
+         id="feGaussianBlur1127" />
+      <feOffset
+         dx="0"
+         dy="2"
+         result="offset"
+         id="feOffset1129" />
+      <feComposite
+         in="offset"
+         in2="SourceGraphic"
+         operator="atop"
+         result="composite2"
+         id="feComposite1131" />
+    </filter>
+    <filter
+       inkscape:label="Drop Shadow"
+       id="filter950"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0.25"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood952" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="in"
+         result="composite1"
+         id="feComposite954" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="1"
+         result="blur"
+         id="feGaussianBlur956" />
+      <feOffset
+         dx="0"
+         dy="1"
+         result="offset"
+         id="feOffset958" />
+      <feComposite
+         in="SourceGraphic"
+         in2="offset"
+         operator="over"
+         result="composite2"
+         id="feComposite960" />
+    </filter>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath873">
+      <g
+         transform="matrix(0,-0.66666667,0.66604479,0,-258.25992,677.00001)"
+         id="g875"
+         inkscape:label="Layer 1"
+         style="fill:#ff00ff;fill-opacity:1;stroke:none;display:inline">
+        <path
+           style="fill:#ff00ff;fill-opacity:1;stroke:none;display:inline"
+           d="m 46.702703,898.22775 50.594594,0 C 138.16216,898.22775 144,904.06497 144,944.92583 l 0,50.73846 c 0,40.86071 -5.83784,46.69791 -46.702703,46.69791 l -50.594594,0 C 5.8378378,1042.3622 0,1036.525 0,995.66429 l 0,-50.73846 c 0,-40.86086 5.8378378,-46.69808 46.702703,-46.69808 z"
+           id="path877"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="sssssssss" />
+      </g>
+    </clipPath>
+    <filter
+       inkscape:collect="always"
+       id="filter891"
+       inkscape:label="Badge Shadow"
+       color-interpolation-filters="sRGB">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.71999962"
+         id="feGaussianBlur893" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4.0745362"
+     inkscape:cx="-22.425856"
+     inkscape:cy="51.518179"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1557"
+     inkscape:window-height="957"
+     inkscape:window-x="322"
+     inkscape:window-y="241"
+     inkscape:window-maximized="0"
+     showborder="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:showpageshadow="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid821"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="18.5,50.50001"
+       id="guide823" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="66.5,82.50001"
+       id="guide825" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="82.5,42.50001"
+       id="guide827" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="66.5,18.50001"
+       id="guide829" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6522">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="BACKGROUND"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(270.5,-632.79077)"
+     style="display:inline">
+    <path
+       style="fill:none;stroke:#dd4814;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
+       d="m -268,700.15563 0,-33.72973 c 0,-27.24324 3.88785,-31.13513 31.10302,-31.13513 l 33.79408,0 c 27.21507,0 31.1029,3.89189 31.1029,31.13513 l 0,33.72973 c 0,27.24325 -3.88783,31.13514 -31.1029,31.13514 l -33.79408,0 c -27.21517,0 -31.10302,-3.89189 -31.10302,-31.13514 z"
+       id="path6455"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sssssssss" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="PLACE YOUR PICTOGRAM HERE"
+     style="display:inline"
+     transform="translate(2.5,2.49999)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="BADGE"
+     style="display:none"
+     sodipodi:insensitive="true"
+     transform="translate(2.5,2.49999)">
+    <g
+       style="display:inline"
+       transform="translate(-340.00001,-581)"
+       id="g4394"
+       clip-path="none">
+      <g
+         id="g855">
+        <g
+           inkscape:groupmode="maskhelper"
+           id="g870"
+           clip-path="url(#clipPath873)"
+           style="opacity:0.6;filter:url(#filter891)">
+          <path
+             transform="matrix(1.4999992,0,0,1.4999992,-29.999795,-237.54282)"
+             d="m 264,552.36218 c 0,6.62742 -5.37258,12 -12,12 -6.62742,0 -12,-5.37258 -12,-12 0,-6.62741 5.37258,-12 12,-12 6.62742,0 12,5.37259 12,12 z"
+             sodipodi:ry="12"
+             sodipodi:rx="12"
+             sodipodi:cy="552.36218"
+             sodipodi:cx="252"
+             id="path844"
+             style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             sodipodi:type="arc" />
+        </g>
+        <g
+           id="g862">
+          <path
+             sodipodi:type="arc"
+             style="color:#000000;fill:#f5f5f5;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             id="path4398"
+             sodipodi:cx="252"
+             sodipodi:cy="552.36218"
+             sodipodi:rx="12"
+             sodipodi:ry="12"
+             d="m 264,552.36218 c 0,6.62742 -5.37258,12 -12,12 -6.62742,0 -12,-5.37258 -12,-12 0,-6.62741 5.37258,-12 12,-12 6.62742,0 12,5.37259 12,12 z"
+             transform="matrix(1.4999992,0,0,1.4999992,-29.999795,-238.54282)" />
+          <path
+             transform="matrix(1.25,0,0,1.25,33,-100.45273)"
+             d="m 264,552.36218 c 0,6.62742 -5.37258,12 -12,12 -6.62742,0 -12,-5.37258 -12,-12 0,-6.62741 5.37258,-12 12,-12 6.62742,0 12,5.37259 12,12 z"
+             sodipodi:ry="12"
+             sodipodi:rx="12"
+             sodipodi:cy="552.36218"
+             sodipodi:cx="252"
+             id="path4400"
+             style="color:#000000;fill:#dd4814;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             sodipodi:type="arc" />
+          <path
+             sodipodi:type="star"
+             style="color:#000000;fill:#f5f5f5;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             id="path4459"
+             sodipodi:sides="5"
+             sodipodi:cx="666.19574"
+             sodipodi:cy="589.50385"
+             sodipodi:r1="7.2431178"
+             sodipodi:r2="4.3458705"
+             sodipodi:arg1="1.0471976"
+             sodipodi:arg2="1.6755161"
+             inkscape:flatsided="false"
+             inkscape:rounded="0.1"
+             inkscape:randomized="0"
+             d="m 669.8173,595.77657 c -0.39132,0.22593 -3.62645,-1.90343 -4.07583,-1.95066 -0.44938,-0.0472 -4.05653,1.36297 -4.39232,1.06062 -0.3358,-0.30235 0.68963,-4.03715 0.59569,-4.47913 -0.0939,-0.44198 -2.5498,-3.43681 -2.36602,-3.8496 0.18379,-0.41279 4.05267,-0.59166 4.44398,-0.81759 0.39132,-0.22593 2.48067,-3.48704 2.93005,-3.4398 0.44938,0.0472 1.81505,3.67147 2.15084,3.97382 0.3358,0.30236 4.08294,1.2817 4.17689,1.72369 0.0939,0.44198 -2.9309,2.86076 -3.11469,3.27355 -0.18379,0.41279 0.0427,4.27917 -0.34859,4.5051 z"
+             transform="matrix(1.511423,-0.16366377,0.16366377,1.511423,-755.37346,-191.93651)" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

=== modified file 'app/views/topology/bundle.js'
--- app/views/topology/bundle.js	2013-10-24 21:03:02 +0000
+++ app/views/topology/bundle.js	2013-10-30 20:49:48 +0000
@@ -72,6 +72,11 @@
         num_units: box.units.size(),
         settings: box.config
       });
+
+      var topo = self.get('component');
+      topo.vis.selectAll('.selected').classed('selected', false);
+      d3.select(this).classed('selected', true);
+
       details.setHTML(templates['bundle-service-details'](context));
       details.show();
     },
@@ -131,6 +136,16 @@
       @method createServiceNode
      */
     createServiceNode: function(node, self) {
+      // Add the highlight svg image to each element
+      node.append('image')
+          .attr({
+            class: 'highlight',
+            width: SERVICE_SIZE + 10,
+            height: SERVICE_SIZE + 10,
+            transform: 'translate(-5,-5)',
+            'xlink:href':
+                '/juju-ui/assets/images/non-sprites/service-highlight.svg'
+          });
       node.append('image')
        .classed('service-icon', true)
        .attr({
@@ -417,6 +432,19 @@
   BundleTopology.prototype.render = function() {
     this.topology.render();
     this.zoomToFit();
+    // Pass the first service data to the showServiceDetails to select it.
+    var topo = this.topology;
+    var firstService = topo.vis.select('.service');
+    var bundleModule = topo.modules.BundleModule;
+    // We need the actual svg dom node out of the d3 selection
+    // If for whatever reason this node isn't in the DOM we don't want
+    // to try and select it and have the whole application fall over.
+    var firstServiceNode = firstService.node();
+    if (firstServiceNode) {
+      bundleModule.showServiceDetails.call(
+          firstServiceNode, firstService.datum(), bundleModule);
+    }
+
     return this;
   };
 

=== modified file 'lib/views/browser/bundle-panel.less'
--- lib/views/browser/bundle-panel.less	2013-10-21 23:24:39 +0000
+++ lib/views/browser/bundle-panel.less	2013-10-30 20:49:48 +0000
@@ -1,7 +1,17 @@
 #subapp-browser .bundle {
+
     #bws-bundle {
         position: relative;
         padding: 10px;
+        .service {
+            cursor: pointer;
+            &.selected .highlight {
+                display: block;
+            }
+        }
+        .highlight {
+            display: none;
+        }
     }
     .topo-info {
         @box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);