add icons for service status, and show this in the app-explorer summary page (plus more tidies to summary page)
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/a5f59b0c Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/a5f59b0c Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/a5f59b0c Branch: refs/heads/0.6.0 Commit: a5f59b0c5c0f44a677e4e3e2b4a002c8e21286d1 Parents: 1e4f73b Author: Alex Heneveld <[email protected]> Authored: Tue Sep 17 01:39:27 2013 +0100 Committer: Alex Heneveld <[email protected]> Committed: Wed Sep 18 09:30:06 2013 +0100 ---------------------------------------------------------------------- usage/jsgui/src/main/webapp/assets/css/base.css | 4 - usage/jsgui/src/main/webapp/assets/img/fire.png | Bin 0 -> 37127 bytes .../webapp/assets/img/icon-loading-radii.gif | Bin 0 -> 88779 bytes .../webapp/assets/img/icon-status-onfire.png | Bin 0 -> 37127 bytes .../assets/img/icon-status-running-onfire.png | Bin 0 -> 56029 bytes .../webapp/assets/img/icon-status-running.png | Bin 0 -> 31290 bytes .../webapp/assets/img/icon-status-starting.gif | Bin 0 -> 12433 bytes .../assets/img/icon-status-stopped-onfire.png | Bin 0 -> 53515 bytes .../webapp/assets/img/icon-status-stopped.png | Bin 0 -> 31858 bytes .../webapp/assets/img/icon-status-stopping.gif | Bin 0 -> 12433 bytes .../webapp/assets/js/view/entity-summary.js | 25 ++++++- .../src/main/webapp/assets/js/view/viewutils.js | 40 ++++++++++ .../main/webapp/assets/tpl/apps/summary.html | 74 +++++++++++-------- 13 files changed, 107 insertions(+), 36 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/css/base.css ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/css/base.css b/usage/jsgui/src/main/webapp/assets/css/base.css index 9e33d3e..c3df6e6 100644 --- a/usage/jsgui/src/main/webapp/assets/css/base.css +++ b/usage/jsgui/src/main/webapp/assets/css/base.css @@ -645,10 +645,6 @@ line-height: 18px; .app-summary .inforow > div { display: inline-block; } .app-summary .inforow .info-name-value > div { display: inline-block; } .app-summary .inforow .info-name-value .name { font-weight: 700; width: 120px; padding-right: 12px;} -.app-summary .inforow .info-name-value.id { margin-bottom: 6px; } -.app-summary .inforow .info-name-value.serviceUp { margin-top: 6px; } -.app-summary > .name { margin-bottom: 12px; } -.app-summary .json { margin-top: 18px; } table.dataTable tbody td.row-expansion { background: #D8E4D0; http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/fire.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/fire.png b/usage/jsgui/src/main/webapp/assets/img/fire.png new file mode 100644 index 0000000..a238ba9 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/fire.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/icon-loading-radii.gif ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/icon-loading-radii.gif b/usage/jsgui/src/main/webapp/assets/img/icon-loading-radii.gif new file mode 100644 index 0000000..01024e2 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/icon-loading-radii.gif differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/icon-status-onfire.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/icon-status-onfire.png b/usage/jsgui/src/main/webapp/assets/img/icon-status-onfire.png new file mode 100644 index 0000000..a238ba9 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/icon-status-onfire.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/icon-status-running-onfire.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/icon-status-running-onfire.png b/usage/jsgui/src/main/webapp/assets/img/icon-status-running-onfire.png new file mode 100644 index 0000000..d0af3d7 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/icon-status-running-onfire.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/icon-status-running.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/icon-status-running.png b/usage/jsgui/src/main/webapp/assets/img/icon-status-running.png new file mode 100644 index 0000000..8bb39f8 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/icon-status-running.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/icon-status-starting.gif ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/icon-status-starting.gif b/usage/jsgui/src/main/webapp/assets/img/icon-status-starting.gif new file mode 100644 index 0000000..f3b4883 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/icon-status-starting.gif differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/icon-status-stopped-onfire.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/icon-status-stopped-onfire.png b/usage/jsgui/src/main/webapp/assets/img/icon-status-stopped-onfire.png new file mode 100644 index 0000000..03eceb5 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/icon-status-stopped-onfire.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/icon-status-stopped.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/icon-status-stopped.png b/usage/jsgui/src/main/webapp/assets/img/icon-status-stopped.png new file mode 100644 index 0000000..effb768 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/icon-status-stopped.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/img/icon-status-stopping.gif ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/icon-status-stopping.gif b/usage/jsgui/src/main/webapp/assets/img/icon-status-stopping.gif new file mode 100644 index 0000000..c488f16 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/icon-status-stopping.gif differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js index e189489..7bc4ab2 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js @@ -27,20 +27,41 @@ define([ render:function () { return this }, - revealIfHasValue: function(that, sensor, $div) { + revealIfHasValue: function(that, sensor, $div, renderer) { + var that = this; + if (!renderer) renderer = function(data) { return _.escape(data); } $.ajax({ url: that.model.getLinkByName("sensors")+"/"+sensor, contentType:"application/json", success:function (data) { if (data || data===false) { - $(".value", $div).html(_.escape(data)) + $(".value", $div).html(renderer(data)) $div.show() + } else { + $div.hide(); } + that.updateStatusIcon(); }}) }, updateSensorsNow: function(that) { + <!-- hard-coded values for most commonly used sensors --> + that.revealIfHasValue(that, "service.isUp", that.$(".serviceUp")) that.revealIfHasValue(that, "service.state", that.$(".status")) + + that.revealIfHasValue(that, "webapp.url", that.$(".url"), + function(data) { return "<a href='"+_.escape(data)+"'>"+_.escape(data)+"</img>" }) + }, + + updateStatusIcon: function() { + // currently we use the string values from the page; messy, but it works + var statusIconUrl = ViewUtils.computeStatusIcon(this.$(".serviceUp .value:visible").html(), this.$(".status .value:visible").html()); + if (statusIconUrl) { + this.$('#status-icon').html('<img src="'+statusIconUrl+'" '+ + 'style="max-width: 64px; max-height: 64px;"/>') + } else { + this.$('#status-icon').html(''); + } } }) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js b/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js index 0e2669e..ae9dbb7 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js @@ -241,6 +241,46 @@ define([ } catch (e) { // ignore - normal during tests } + }, + computeStatusIcon: function(serviceUp, lifecycleState) { + if (serviceUp==false || serviceUp=="false") serviceUp=false; + else if (serviceUp===true || serviceUp=="true") serviceUp=true; + else { + if (serviceUp!=null && serviceUp !== "" && serviceUp !== undefined) { + log("Unknown 'serviceUp' value:") + log(serviceUp) + } + serviceUp = null; + } + var PATH = "/assets/img/"; + + if (lifecycleState=="running") { + if (serviceUp==false) return PATH+"icon-status-running-onfire.png"; + return PATH+"icon-status-running.png"; + } + if (lifecycleState=="stopped") { + if (serviceUp==true) return PATH+"icon-status-stopped-onfire.png"; + return PATH+"icon-status-stopped.png"; + } + if (lifecycleState=="starting") { + return PATH+"icon-status-starting.gif"; + } + if (lifecycleState=="stopping") { + return PATH+"icon-status-stopping.gif"; + } + if (lifecycleState=="onfire") { + return PATH+"icon-status-onfire.gif"; + } + if (lifecycleState!=null && lifecycleState !== "" && lifecycleState !== undefined) { + log("Unknown 'lifecycleState' value:") + log(lifecycleState) + return null; + } + // no lifecycle state, rely on serviceUp + if (serviceUp) return PATH+"icon-status-running.png"; + if (serviceUp===false) return PATH+"icon-status-stopped.png"; + // no status info at all + return null; } }; return ViewUtils; http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/a5f59b0c/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html index 030d453..d2da7c2 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html @@ -1,39 +1,30 @@ <div class="app-summary"> - <div id="title-and-info-row"> + <div id="title-and-info-row" style="white-space: nowrap;"> <% if (entity.getLinkByName('iconUrl')) { %> - <div style="display: inline-block; vertical-align: top; padding-top: 12px;"> + <div style="display: inline-block; vertical-align: bottom; padding-top: 12px; padding-bottom: 18px;"> <img src="<%= entity.getLinkByName('iconUrl') %>" style="max-width: 128px; max-height: 128px;"/> </div> <% } %> - <div style="display: inline-block; vertical-align: top;"> + <div style="display: inline-block; vertical-align: bottom;"> - <div class="name" style="margin-bottom: 12px;"> + <div class="name" style="margin-bottom: 12px; padding-right: 12px;"> <h2><%= entity.get('name') %></h2> </div> - <div class="inforow"> - <!-- - <div class="left"> - TODO nice big icon for status here; derived as: - running (with optional overlay if service-not-(yet)-up) - starting, stopping, stopped, on-fire (all with optional overlay if service-up) - </div> - --> - <div class="right"> - <div class="info-name-value id"> - <div class="name">ID</div> - <div class="value"><%= entity.get('id') %></div> - </div> -<!-- TODO - <div class="info-name-value location"> - <div class="name">Location</div> - <div class="value"><i>Loading...</i></div> - </div> - --> - + </div> + </div> + + <div class="toggler-region"> + <div class="toggler-header"> + <div class="toggler-icon icon-chevron-down"></div> + <div><b>Status</b></div> + </div> + <div class="inforow" style="position: relative;"> + + <div style="display: inline-block; padding-left: 8px; padding-right: 24px; padding-top: 6px;"> <div class="info-name-value serviceUp hide"> <div class="name">Service Up</div> <div class="value"><i>Loading...</i></div> @@ -42,18 +33,41 @@ <div class="name">Expected State</div> <div class="value"><i>Loading...</i></div> </div> - <!-- TODO parent, app, children --> - </div> + + <div class="info-name-value url hide" style="margin-top: 12px;"> + <div class="name">URL</div> + <div class="value"><i>Loading...</i></div> + </div> + + <div class="info-name-value type" style="margin-top: 12px;"> + <div class="name">Type</div> + <div class="value"><%= entity.get('type') %></div> + </div> + <div class="info-name-value id"> + <div class="name">ID</div> + <div class="value"><%= entity.get('id') %></div> + </div> + + <div id="status-icon" style="display: inline-block; padding-top: 12px; padding-bottom: 18px; padding-right: 8px; position: absolute; right: 0; top: 0;"></div> + </div> </div> </div> - <!-- TODO - map + <!-- TODO - include much more info in summary (following values not readily available) + parent, app (above?) + children, members (above? new section here ?) + active tasks (new section here) + locations / map (new section here ?) --> +<!-- TODO + <div class="info-name-value location"> + <div class="name">Location</div> + <div class="value"><i>Loading...</i></div> + </div> +--> - <!-- TODO hide the json --> - <div class="toggler-region json"> + <div class="toggler-region json" style="margin-top: 18px;"> <div class="toggler-header user-hidden"> <div class="toggler-icon icon-chevron-left"></div> <div><b>JSON</b></div>
