Skip to content

Commit

Permalink
progress on new status page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssalinas
ssalinas committed Jan 23, 2015
1 parent 3669146 commit 11bfb1c
Show file tree
Hide file tree
Showing 4 changed files with 264 additions and 239 deletions.
3 changes: 2 additions & 1 deletion SingularityUI/app/styles/colors.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@ $yellow = #ffff99
$green = #48a770
$blue = #336ca6
$purple = #b93c96
$dark-yellow = #e6e65c

$removeRed = #df6f6f
$removeRed = #df6f6f
48 changes: 48 additions & 0 deletions SingularityUI/app/styles/status.styl
View file
Original file line number Diff line number Diff line change
@@ -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
327 changes: 127 additions & 200 deletions SingularityUI/app/templates/status.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,131 @@
{{#if synced}}
<div class="row same-size-row-top">
<div class="col-md-6 same-size-col">
<a href="{{appRoot}}/requests"><h2>Requests</h2></a>
<div class="row same-size-row">
<div class="col-md-4 same-size-col chart-data">
{{#each requests}}
<div class="datablock" id="{{ type }}" style="height:{{ height }}%" title="{{count}} {{label}}"></div>
{{/each}}
</div>
<div class="col-md-8 same-size-col">
<div class="row same-size-row">
<div class="col-md-8 same-size-col">
<ul class="list-group" id="legend">
{{#each requests}}
<li class="list-group-item">
<span class="badge pull-left" id="{{ type }}">{{ count }}</span>
{{#if link}}
<a href="{{appRoot}}{{ link }}">{{ label }}</a>
{{else}}
{{ label }}
{{/if}}
</li>
{{/each}}
</ul>
<ul class="list-group" id="legend-left">
<li class="list-group-item">
<span class="badge">{{state.overProvisionedRequests}}</span>
Over Provisioned
</li>
<li class="list-group-item" id="legend-left">
<span class="badge">{{state.underProvisionedRequests}}</span>
Under Provisioned
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 same-size-col">
<a href="{{appRoot}}/tasks"><h2>Tasks</h2></a>
<div class="row same-size-row">
<div class="col-md-4 same-size-col chart-data">
{{#each tasks}}
<div class="datablock" id="{{ type }}" style="height:{{ height }}%" title="{{count}} {{label}}"></div>
{{/each}}
</div>
<div class="col-md-8 same-size-col">
<div class="row same-size-row">
<div class="col-md-8 same-size-col">
<ul class="list-group" id="legend">
{{#each tasks}}
<li class="list-group-item">
<span class="badge pull-left" id="{{ type }}">{{ count }}</span>
{{#if link}}
<a href="{{appRoot}}{{ link }}">{{ label }}</a>
{{else}}
{{ label }}
{{/if}}
</li>
{{/each}}
</ul>
<ul class="list-group" id="legend-left">
<li class="list-group-item">
<span class="badge">{{timestampDuration state.maxTaskLag}}</span>
Max Task Lag
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="{{appRoot}}/racks"><h2>Racks</h2></a>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">{{state.activeRacks}}</span>
<a href="{{appRoot}}/racks">Active Racks</a>
</li>
<li class="list-group-item">
<span class="badge">{{state.decommissioningRacks}}</span>
<a href="{{appRoot}}/racks">Decommissioning Racks</a>
</li>
<li class="list-group-item">
<span class="badge">{{state.deadRacks}}</span>
<a href="{{appRoot}}/racks">Dead Racks</a>
</li>
</ul>
</div>
<div class="col-md-4">
<a href="{{appRoot}}/slaves"><h2>Slaves</h2></a>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">{{state.activeSlaves}}</span>
<a href="{{appRoot}}/slaves">Active Slaves</a>
</li>
<li class="list-group-item">
<span class="badge">{{state.decommissioningSlaves}}</span>
<a href="{{appRoot}}/slaves">Decommissioning Slaves</a>
</li>
<li class="list-group-item">
<span class="badge">{{state.deadSlaves}}</span>
<a href="{{appRoot}}/slaves">Dead Slaves</a>
</li>
<li class="list-group-item">
<span class="badge">{{state.unknownSlaves}}</span>
<a href="{{appRoot}}/slaves">Unknown Slaves</a>
</li>
</ul>
</div>
<div class="col-md-4">
<h2>Deploys</h2>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">{{state.numDeploys}}</span>
Active deploys
</li>
<li class="list-group-item">
<span class="badge">{{timestampDuration state.oldestDeploy}}</span>
Time since last deploy
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="page-header">
Expand Down Expand Up @@ -34,206 +161,6 @@
</table>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>Requests</h2>
</div>
<div class="row">
<div class="col-md-2">
<a class="big-number-link" href="{{appRoot}}/requests">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="requests">{{ state.allRequests }}</div>
<div class="number-label">Total</div>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="big-number-link" href="{{appRoot}}/requests/active">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="requests">{{ state.activeRequests }}</div>
<div class="number-label">Active</div>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="big-number-link" href="{{appRoot}}/requests/cooldown">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="requests">{{ state.cooldownRequests }}</div>
<div class="number-label">Cooldown</div>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="big-number-link" href="{{appRoot}}/requests/paused">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="pausedRequests">{{ state.pausedRequests }}</div>
<div class="number-label">Paused</div>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="big-number-link" href="{{appRoot}}/requests/pending">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="pendingRequests">{{ state.pendingRequests }}</div>
<div class="number-label">Pending</div>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="big-number-link" href="{{appRoot}}/requests/cleaning">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="cleaningRequests">{{ state.cleaningRequests }}</div>
<div class="number-label">Cleaning</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>Tasks</h2>
</div>
<div class="row">
<div class="col-md-3">
<a class="big-number-link" href="{{appRoot}}/tasks">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="activeTasks">{{ state.activeTasks }}</div>
<div class="number-label">Active</div>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="big-number-link" href="{{appRoot}}/tasks/scheduled">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="lateTasks">{{ state.lateTasks }}</div>
<div class="number-label">Overdue</div>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="big-number-link" href="{{appRoot}}/tasks/scheduled">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="futureTasks">{{ state.futureTasks }}</div>
<div class="number-label">Future</div>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="big-number-link" href="{{appRoot}}/tasks/cleaning">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="cleaningTasks">{{ state.cleaningTasks }}</div>
<div class="number-label">Cleaning</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>Racks</h2>
</div>
<div class="row">
<div class="col-md-4">
<a class="big-number-link" href="{{appRoot}}/racks">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="activeRacks">{{ state.activeRacks }}</div>
<div class="number-label">Active</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a class="big-number-link" href="{{appRoot}}/racks">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="deadRacks">{{ state.deadRacks }}</div>
<div class="number-label">Dead</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a class="big-number-link" href="{{appRoot}}/racks">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="decomissioningRacks">{{ state.decomissioningRacks }}</div>
<div class="number-label">Decomissioning</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>Slaves</h2>
</div>
<div class="row">
<div class="col-md-4">
<a class="big-number-link" href="{{appRoot}}/slaves">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="activeSlaves">{{ state.activeSlaves }}</div>
<div class="number-label">Active</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a class="big-number-link" href="{{appRoot}}/slaves">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="deadSlaves">{{ state.deadSlaves }}</div>
<div class="number-label">Dead</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a class="big-number-link" href="{{appRoot}}/slaves">
<div class="well">
<div class="big-number">
<div class="number" data-state-attribute="decomissioningSlaves">{{ state.decomissioningSlaves }}</div>
<div class="number-label">Decomissioning</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
{{else}}
<div class="page-loader centered cushy"></div>
{{/if}}
Loading

0 comments on commit 11bfb1c

Please sign in to comment.