From 8efc6fede8e37d7d35c6440959ae7bd3a42c55f1 Mon Sep 17 00:00:00 2001 From: Stephen Salinas Date: Fri, 23 Jan 2015 09:39:14 -0500 Subject: [PATCH] progress on new status page --- SingularityUI/app/styles/colors.styl | 3 +- SingularityUI/app/styles/status.styl | 48 ++++ SingularityUI/app/templates/status.hbs | 337 ++++++++++--------------- SingularityUI/app/views/status.coffee | 125 ++++++--- 4 files changed, 264 insertions(+), 249 deletions(-) create mode 100644 SingularityUI/app/styles/status.styl diff --git a/SingularityUI/app/styles/colors.styl b/SingularityUI/app/styles/colors.styl index a43c25effc..fe05dfd7b4 100644 --- a/SingularityUI/app/styles/colors.styl +++ b/SingularityUI/app/styles/colors.styl @@ -9,5 +9,6 @@ $yellow = #ffff99 $green = #48a770 $blue = #336ca6 $purple = #b93c96 +$dark-yellow = #e6e65c -$removeRed = #df6f6f \ No newline at end of file +$removeRed = #df6f6f diff --git a/SingularityUI/app/styles/status.styl b/SingularityUI/app/styles/status.styl new file mode 100644 index 0000000000..753262cae6 --- /dev/null +++ b/SingularityUI/app/styles/status.styl @@ -0,0 +1,48 @@ +@import colors + +.same-size-row-top + display table + width 100% + +.same-size-row + display table + width 100% + height 100% + +.same-size-col + float none + display table-cell + vertical-align top + +.chart-data + line-height 0 + +div.datablock + width 100% + display inline-block + margin 0px + outline none + vertical-align top + +#legend .list-group-item, #legend-left .list-group-item + padding 4px 15px + +#legend .list-group-item + text-align right +#active_item + background $green +#paused_item + background $grey +#pending_item + background $purple +#cleaning_item + background $dark-yellow + color $grey +#cooldown_item + background $blue +#scheduled_item + background $blue +#overdue_item + background $red +#lbCleanup_item + background $orange diff --git a/SingularityUI/app/templates/status.hbs b/SingularityUI/app/templates/status.hbs index 5a9b1bef8b..02c7b5d2b4 100644 --- a/SingularityUI/app/templates/status.hbs +++ b/SingularityUI/app/templates/status.hbs @@ -1,4 +1,131 @@ {{#if synced}} +
+
+

Requests

 +
+
+ {{#each requests}} +
+ {{/each}} +
+
+
+
+
    + {{#each requests}} +
  • + {{ count }} + {{#if link}} + {{ label }} + {{else}} + {{ label }} + {{/if}} +
    • + {{/each}} +
+
    +
  • + {{state.overProvisionedRequests}} + Over Provisioned +
    • +
  • + {{state.underProvisionedRequests}} + Under Provisioned +
    • +
+
+
+
+
+
+
+

Tasks

 +
+
+ {{#each tasks}} +
+ {{/each}} +
+
+
+
+
    + {{#each tasks}} +
  • + {{ count }} + {{#if link}} + {{ label }} + {{else}} + {{ label }} + {{/if}} +
    • + {{/each}} +
+
    +
  • + {{timestampDuration state.maxTaskLag}} + Max Task Lag +
    • +
+
+
+
+
+
+
+
+
+

Racks

 + +
+
+

Slaves

 + +
+
+

Deploys

+
    +
  • + {{state.numDeploys}} + Active deploys +
    • +
  • + {{timestampDuration state.oldestDeploy}} + Time since last deploy +
    • +
+
+
@@ -34,216 +161,6 @@
- -
-
-
-

Requests

-
-
-
- -
-
-
{{ state.allRequests }}
-
Total
-
-
- -
-
- -
-
-
{{ state.activeRequests }}
-
Active
-
-
- -
-
- -
-
-
{{ state.cooldownRequests }}
-
Cooldown
-
-
- -
-
- -
-
-
{{ state.pausedRequests }}
-
Paused
-
-
- -
-
- -
-
-
{{ state.pendingRequests }}
-
Pending
-
-
- -
-
- -
-
-
{{ state.cleaningRequests }}
-
Cleaning
-
-
- -
-
-
-
- -
-
-
-

Tasks

-
-
-
- -
-
-
{{ state.activeTasks }}
-
Active
-
-
- -
-
- -
-
-
{{ state.lateTasks }}
-
Overdue
-
-
- -
-
- -
-
-
{{ state.futureTasks }}
-
Future
-
-
- -
-
- -
-
-
{{ state.cleaningTasks }}
-
Cleaning
-
-
- -
-
- -
-
-
{{ state.lbCleanupTasks }}
-
LB Cleaning
-
-
- -
-
-
-
- -
-
-
-

Racks

-
-
-
- -
-
-
{{ state.activeRacks }}
-
Active
-
-
- -
-
- -
-
-
{{ state.deadRacks }}
-
Dead
-
-
- -
-
- -
-
-
{{ state.decomissioningRacks }}
-
Decomissioning
-
-
- -
-
-
-
- -
-
-
-

Slaves

-
-
-
- -
-
-
{{ state.activeSlaves }}
-
Active
-
-
- -
-
- -
-
-
{{ state.deadSlaves }}
-
Dead
-
-
- -
-
- -
-
-
{{ state.decomissioningSlaves }}
-
Decomissioning
-
-
- -
-
-
-
{{else}}
{{/if}} diff --git a/SingularityUI/app/views/status.coffee b/SingularityUI/app/views/status.coffee index 55265a4151..cbb5b78d73 100644 --- a/SingularityUI/app/views/status.coffee +++ b/SingularityUI/app/views/status.coffee @@ -11,45 +11,94 @@ class StatusView extends View @lastState = _.clone @model.attributes render: => - # When refreshing we want to display a nice pretty animation - # showing which number boxes have changed. - if not @lastState? - # Render template from fresh data - @$el.html @template - state: @model.attributes - synced: @model.synced - else - # Render template with old data and animate the new stuff in - @$el.html @template - state: @lastState - synced: @model.synced - - changedNumbers = {} - - numberAttributes = [] - # Go through each key. If the value is a number, we'll (try to) - # perform a change animation on that key's box - _.each _.keys(@model.attributes), (attribute) => - if typeof @model.attributes[attribute] is 'number' - numberAttributes.push attribute - - for numberAttribute in numberAttributes - oldNumber = @lastState[numberAttribute] - newNumber = @model.attributes[numberAttribute] - if oldNumber isnt newNumber - changedNumbers[numberAttribute] = - direction: "#{ if newNumber > oldNumber then 'inc' else 'dec' }rease" - difference: "#{ if newNumber > oldNumber then '+' else '-' }#{ Math.abs(newNumber - oldNumber) }" - - for attributeName, changes of changedNumbers - $number = @$el.find(""".number[data-state-attribute="#{ attributeName }"]""") - $bigNumber = $number.parents('.big-number-link') - changeClassName = "changed-direction-#{ changes.direction }" - $bigNumber.addClass changeClassName - $bigNumber.find('.well').attr('data-changed-difference', changes.difference) - $number.html @model.attributes[attributeName] - do ($bigNumber, changeClassName) -> setTimeout (-> $bigNumber.removeClass changeClassName), 2000 + @$el.html @template + state: @model.attributes + synced: @model.synced + tasks: @tasks(@model) + requests: @requests(@model) + + @$('.chart-data div[title]').tooltip(placement: 'right') @captureLastState() + requests: (model) => + total_requests = @model.attributes.allRequests + requests = [ + { + type: 'active_item', + label: 'active', + count: @model.attributes.activeRequests, + height: @model.attributes.activeRequests / total_requests * 100, + link: '/requests/active' + }, + { + type: 'paused_item', + label: 'paused', + count: @model.attributes.pausedRequests, + height: @model.attributes.pausedRequests / total_requests * 100, + link: '/requests/paused' + }, + { + type: 'cooldown_item', + label: 'cooling down' + count: @model.attributes.cooldownRequests, + height: @model.attributes.cooldownRequests / total_requests * 100, + link: '/requests/cooldown' + }, + { + type: 'pending_item', + label: 'pending', + count: @model.attributes.pendingRequests, + height: @model.attributes.pendingRequests / total_requests * 100, + link: '/requests/pending' + }, + { + type: 'cleaning_item', + label: 'cleaning', + count: @model.attributes.cleaningRequests, + height: @model.attributes.cleaningRequests / total_requests * 100, + link: '/requests/cleaning' + }, + ] + return requests + + tasks: (model) => + total_tasks = @model.attributes.activeTasks + @model.attributes.lateTasks + @model.attributes.scheduledTasks + @model.attributes.lbCleanupTasks + tasks = [ + { + type: 'active_item', + label: 'active', + count: @model.attributes.activeTasks, + height: @model.attributes.activeTasks / total_tasks * 100, + link: '/tasks' + }, + { + type: 'scheduled_item', + label: 'scheduled' + count: @model.attributes.scheduledTasks, + height: @model.attributes.scheduledTasks / total_tasks * 100, + link: '/tasks/scheduled' + }, + { + type: 'overdue_item', + label: 'overdue', + count: @model.attributes.lateTasks, + height: @model.attributes.lateTasks / total_tasks * 100 + }, + { + type: 'cleaning_item', + label: 'cleaning', + count: @model.attributes.cleaningTasks, + height: @model.attributes.cleaningTasks / total_tasks * 100, + link: 'tasks/cleaning' + }, + { + type: 'lbCleanup_item', + label: 'load balancer cleanup', + count: @model.attributes.lbCleanupTasks, + height: @model.attributes.lbCleanupTasks / total_tasks * 100 + } + ] + return tasks + module.exports = StatusView