Merge lp:~hatch/juju-gui/agent-data-support into lp:juju-gui/experimental

[Jeff Pihach]

Adds agent_state_data(SourceData) support

The simulator and juju-core return SourceData along with any
error messages. These are now displayed in the unit details
left breakout panel in the new inspector.

I also removed an unused template from the old inspectors and
modified some css to make the left panel react properly to
varying unit detail header heights.

https://codereview.appspot.com/29400043/

[Jeff Pihach (hatch)]

Reviewers: mp+195896_code.launchpad.net,

Message:
Please take a look.

Description:
Adds agent_state_data(SourceData) support

The simulator and juju-core return SourceData along with any
error messages. These are now displayed in the unit details
left breakout panel in the new inspector.

I also removed an unused template from the old inspectors and
modified some css to make the left panel react properly to
varying unit detail header heights.

I have tested it's functionality on LXC and the sandbox

To QA:
On sandbox
Deploy any two relatable services with a number of units
Relate the two services and wait until there are unit errors
Clicking on a unit in the inspector should show the ServiceData
below the ServiceInfo which is always there.
For best results look for a unit with a relation error.

On real env
Deploy two services (with different names) of failtester with
one with the 'relation-changed' configuration option set to 'true'.
Once both services turn green, relate them.
After a few seconds the one should turn red.
Clicking on it's errored unit should show the ServiceData relation
error information in the left details panel.

https://code.launchpad.net/~hatch/juju-gui/agent-data-support/+merge/195896

(do not edit description out of merge proposal)

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

Affected files (+33, -170 lines):
   A [revision details]
   M app/models/handlers.js
   M app/models/models.js
   M app/store/env/sandbox.js
   D app/templates/unit.handlebars
   M app/templates/unitOverview.handlebars
   M app/views/utils.js
   M app/views/viewlets/unit-details.js
   M lib/views/juju-inspector.less
   M test/test_utils.js

[Madison Scott-Clary (makyo)]

Code's good, will see about QA later unless someone else snags it.

https://codereview.appspot.com/29400043/

[Gary Poster (gary)]

On 2013/11/20 01:32:00, matthew.scott wrote:
> Code's good, will see about QA later unless someone else snags it.

QA OK

https://codereview.appspot.com/29400043/

[Gary Poster (gary)]

On 2013/11/20 14:56:52, gary.poster wrote:
> On 2013/11/20 01:32:00, matthew.scott wrote:
> > Code's good, will see about QA later unless someone else snags it.

> QA OK

sandbox that is

https://codereview.appspot.com/29400043/

[Jeff Pihach (hatch)]

*** Submitted:

Adds agent_state_data(SourceData) support

The simulator and juju-core return SourceData along with any
error messages. These are now displayed in the unit details
left breakout panel in the new inspector.

I also removed an unused template from the old inspectors and
modified some css to make the left panel react properly to
varying unit detail header heights.

R=matthew.scott, gary.poster
CC=
https://codereview.appspot.com/29400043

https://codereview.appspot.com/29400043/

=== modified file 'app/models/handlers.js'
--- app/models/handlers.js	2013-10-10 04:47:56 +0000
+++ app/models/handlers.js	2013-11-20 01:27:03 +0000
@@ -162,6 +162,7 @@
         machine: change.MachineId,
         agent_state: change.Status,
         agent_state_info: change.StatusInfo,
+        agent_state_data: change.StatusData,
         public_address: change.PublicAddress,
         private_address: change.PrivateAddress,
         open_ports: utils.convertOpenPorts(change.Ports)
@@ -246,7 +247,8 @@
         id: change.Id,
         instance_id: change.InstanceId,
         agent_state: change.Status,
-        agent_state_info: change.StatusInfo
+        agent_state_info: change.StatusInfo,
+        agent_state_data: change.StatusData
       };
       db.machines.process_delta(action, data);
     },

=== modified file 'app/models/models.js'
--- app/models/models.js	2013-10-31 17:19:16 +0000
+++ app/models/models.js	2013-11-20 01:27:03 +0000
@@ -489,6 +489,7 @@
           machine: {},
           agent_state: {},
           agent_state_info: {},
+          agent_state_data: {},
           // This is empty if there are no relation errors, and otherwise
           // shows only the relations with errors.  The data structure in that
           // case is a hash mapping a local relation name to a list of services
@@ -651,7 +652,8 @@
       public_address: {},
       instance_id: {},
       agent_state: {},
-      agent_state_info: {}
+      agent_state_info: {},
+      agent_state_data: {}
     }
   });
   models.Machine = Machine;

=== modified file 'app/store/env/sandbox.js'
--- app/store/env/sandbox.js	2013-10-31 16:35:27 +0000
+++ app/store/env/sandbox.js	2013-11-20 01:27:03 +0000
@@ -885,7 +885,8 @@
         MachineId: 'machine',
         Ports: 'open_ports',
         Status: 'agent_state',
-        StatusInfo: 'agent_state_info'
+        StatusInfo: 'agent_state_info',
+        StatusData: 'agent_state_data'
       },
       relation: {
         Key: 'relation_id',

=== removed file 'app/templates/unit.handlebars'
--- app/templates/unit.handlebars	2013-04-15 15:45:18 +0000
+++ app/templates/unit.handlebars	1970-01-01 00:00:00 +0000
@@ -1,116 +0,0 @@
-<div class="yui3-g">
-  <div class="well yui3-u-1">
-    <div class="unit-button-palette">
-      <form>
-        {{#if hasErrors}}
-          <button type="button" class="btn" id="resolved-unit-button">Resolved</button>
-          <button type="button" class="btn" id="retry-unit-button">Retry</button>
-        {{/if}}
-        <button type="button" {{#if disabled_remove}}disabled="true"{{/if}}
-         class="btn" id="remove-unit-button">Remove</button>
-      </form>
-    </div>
-    <h1 id="unit-id">{{unit.displayName}} {{landscapeBadge landscape unit 'reboot' 'round'}}{{landscapeBadge landscape unit 'security' 'round'}}</h1>
-    <b id="charm-uri">
-      <a href="{{charmUri}}">{{charm.id}}</a>
-    </span>
-    {{#if unit.is_subordinate}} (subordinate){{/if}}
-    <div id="unit-status">
-      {{unit_ip_description}}
-      {{#unit_ip_description}}|{{/unit_ip_description}}
-      {{#if isRunning}}
-        <span class="running">&#x25B6;</span>
-      {{/if}}
-      {{#if isPending}}
-        <span class="pending">&#x2b24;</span>
-      {{/if}}
-      {{#if hasErrors}}
-        <span class="error">&#x2b1b;</span>
-      {{/if}}
-      {{showStatus unit}}
-    </div>
-  </div>
-<div>
-
-<div class="yui3-g">
-  <div class="yui3-u-1">
-    <h2 id="machine-name">&#x2637; Machine {{unit.machine}}</h2>
-    <table class="table table-striped table-bordered">
-      <tbody>
-        <tr>
-          <th>agent-state</th>
-          <td id="machine-agent-state">{{showStatus machine}}</td>
-        </tr>
-        <tr>
-          <th>instance-id</th>
-          <td id="machine-instance-id">{{machine.instance_id}}</td>
-        </tr>
-        <tr>
-          <th>public-address</th>
-          <td id="machine-public-address">{{machine.public_address}}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-
-{{#unless relations}}
-<div class="yui3-u">This unit has no relations.</div>
-{{else}}
-<div id="relations" class="yui3-g">
-  <div class="yui3-u-1">
-    <h2>&#x26B9; Relations</h2>
-    <table class="table table-striped table-bordered">
-      <thead>
-        <tr>
-          <th>id</th>
-          <th>endpoint</th>
-          <th>name</th>
-          <th>role</th>
-          <th>scope</th>
-          <th>status</th>
-        </tr>
-      </thead>
-      <tbody>
-        {{#relations}}
-          <tr {{#if highlight}}class="highlighted" {{/if}}id="{{elementId}}">
-            <td class="relation-ident">{{ident}}</td>
-            <td class="relation-endpoint">
-              {{#if far}}
-              <a href="{{../../serviceRootUri}}{{far.service}}/relations">{{far.service}}</a>
-              {{else}}
-              (self)
-              {{/if}}
-            </td>
-            <td class="relation-name">{{near.name}}</td>
-            <td class="relation-role">{{near.role}}</td>
-            <td class="relation-scope">{{scope}}</td>
-            <td class="relation-status">
-              {{#if has_error}}
-              <span class="error">&#x2b1b;</span> error
-              <div class="unit-button-palette">
-                <form id="{{near.name}}">
-                <button type="button" class="btn resolved-relation-button"
-                  value="{{relation_id}}">Resolved</button>
-                <button type="button" class="btn retry-relation-button"
-                  value="{{relation_id}}">Retry</button>
-                </form>
-              </div>
-              {{/if}}
-            </td>
-          </tr>
-        {{/relations}}
-      </tbody>
-    </table>
-  </div>
-</div>
-{{/unless}}
-<div class="yui3-g">
-    <div class="bottom-navbar">
-        {{> landscape-controls }}
-    </div>
-</div>
-
-<div id="resolved-modal-panel"></div>
-<div id="remove-modal-panel"></div>
-<div id="resolved-relation-modal-panel"></div>

=== modified file 'app/templates/unitOverview.handlebars'
--- app/templates/unitOverview.handlebars	2013-09-24 21:10:50 +0000
+++ app/templates/unitOverview.handlebars	2013-11-20 01:27:03 +0000
@@ -5,6 +5,7 @@
             <li>IP Address: <span data-bind="private_address"></span></li>
             <li>Status: <span data-bind="agent_state"></span></li>
             <li data-bind="agent_state_info">Status Info: <span></span></li>
+            <li data-bind="agent_state_data">Status Data: <ul></ul></li>
             <li>Public Address: <span data-bind="public_address"></span></li>
             <li data-bind="annotations.landscape-computer">
               <a class="landscape" target="_blank">Open Landscape</a>

=== modified file 'app/views/utils.js'
--- app/views/utils.js	2013-11-19 16:45:52 +0000
+++ app/views/utils.js	2013-11-20 01:27:03 +0000
@@ -1489,18 +1489,6 @@
         return agent_state;
       });
 
-  /*
-   * Show the status and, if present, the status info of the given db instance.
-   */
-  Y.Handlebars.registerHelper('showStatus', function(instance) {
-    // The "instance" argument is typically a unit or a machine model instance.
-    var result = instance.agent_state;
-    if (instance.agent_state_info) {
-      result += ': ' + instance.agent_state_info;
-    }
-    return result;
-  });
-
   Y.Handlebars.registerHelper('any', function() {
     var conditions = Y.Array(arguments, 0, true),
         options = conditions.pop();

=== modified file 'app/views/viewlets/unit-details.js'
--- app/views/viewlets/unit-details.js	2013-10-10 14:05:58 +0000
+++ app/views/viewlets/unit-details.js	2013-11-20 01:27:03 +0000
@@ -96,6 +96,19 @@
           }
         }
       },
+      agent_state_data: {
+        'update': function(node, value) {
+          if (value) {
+            var data = '';
+            Object.keys(value).forEach(function(key) {
+              data += '<li>' + key + ': ' + value[key] + '</li>';
+            });
+            node.one('ul').setHTML(data);
+          } else {
+            node.hide();
+          }
+        }
+      },
       'annotations.landscape-computer': {
         'update': function(node, value) {
           if (value) {

=== modified file 'lib/views/juju-inspector.less'
--- lib/views/juju-inspector.less	2013-11-12 23:17:39 +0000
+++ lib/views/juju-inspector.less	2013-11-20 01:27:03 +0000
@@ -35,14 +35,16 @@
 @keyframes pulse-green {.pulse-green-frames-mixin;}
 
 .yui3-juju-inspector {
+    top: 20px;
+    right: 70px;
+    position: absolute;
+
     .customize-scrollbar;
 
     .left-breakout {
         .type9;
-        top: 20px;
-        bottom: 70px;
         left: auto;
-        right: @inspector-width + 71px;
+        right: @inspector-width;
 
         .charm .yui3-tabview {
             margin-top: 30px;
@@ -72,15 +74,16 @@
                     }
                 }
             }
+            li ul {
+                margin-left: 20px;
+            }
         }
     }
 
     .juju-inspector {
         .create-border-radius(@border-radius);
-        position: absolute;
+        position: relative;
         z-index: 500;
-        top: 20px;
-        right: 70px;
         width: @inspector-width;
         min-height: 100px;
         border: 0;

=== modified file 'test/test_utils.js'
--- test/test_utils.js	2013-11-13 20:00:38 +0000
+++ test/test_utils.js	2013-11-20 01:27:03 +0000
@@ -1169,39 +1169,6 @@
       assert.equal('is empty', html);
     });
 
-    describe('showStatus', function() {
-      var html, obj, template;
-
-      before(function() {
-        template = Y.Handlebars.compile('{{showStatus instance}}');
-      });
-
-      beforeEach(function() {
-        obj = {agent_state: 'started'};
-      });
-
-      it('shows the instance status correctly', function() {
-        html = template({instance: obj});
-        assert.strictEqual(obj.agent_state, html);
-      });
-
-      it('avoids including status info if not present', function() {
-        [undefined, null, ''].forEach(function(info) {
-          obj.agent_state_info = info;
-          html = template({instance: obj});
-          assert.strictEqual(obj.agent_state, html, 'info: ' + info);
-        });
-      });
-
-      it('includes status info if present', function() {
-        obj.agent_state_info = 'some information';
-        html = template({instance: obj});
-        var expected = obj.agent_state + ': ' + obj.agent_state_info;
-        assert.strictEqual(expected, html);
-      });
-
-    });
-
     describe('if_eq tests', function() {
 
       it('outputs success when equal', function() {