ui: condense and improve UI for check display under services

This commit is contained in:
Jack Pearkes 2014-06-05 14:28:40 -04:00
parent e94fc14b6a
commit ad438e86fa
4 changed files with 54 additions and 14 deletions

View File

@ -294,7 +294,11 @@
<div class="border-left hidden-xs hidden-sm">
</div>
<div class="col-md-6 col-lg-7 border-left scrollable">
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="col-md-6 col-lg-7 border-left">
<div class="row padded-border">
{{outlet}}
</div>
@ -315,8 +319,9 @@
{{#each node in model }}
{{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link" }}
<div {{ bind-attr class=":panel-bar node.hasFailingChecks:bg-orange:bg-green" }}></div>
{{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link panel-list" }}
<div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :panel-bar-horizontal"}}></div>
<div class="panel-heading">
<h3 class="panel-title">
{{node.Node.Node}}
@ -325,15 +330,21 @@
</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled list-broken">
{{#each check in node.Checks }}
<li>
<h4 class="check">{{ check.Name }} <small>{{ check.CheckID }}</small> <span class="pull-right"><small>{{check.Status}}</small></h4>
</li>
{{/each}}
</ul>
</div>
<ul class="list-unstyled">
{{#each check in node.Checks }}
<li class="list-group-item list-condensed-link">
{{listBar check.Status}}
<div class="name">
{{check.Name}}
<small>{{ check.CheckID }}</small>
<small class="pull-right">
{{check.Status}}
</small>
</div>
</li>
{{/each}}
</ul>
{{/link-to}}
{{/each}}
@ -391,7 +402,7 @@
<div class="border-left hidden-xs hidden-sm">
</div>
<div class="col-md-6 col-lg-7 border-left scrollable">
<div class="col-md-6 col-lg-7 border-left">
<div class="row padded-border">
{{outlet}}
</div>

View File

@ -8,3 +8,14 @@ Ember.Handlebars.helper('panelBar', function(status) {
}
return new Handlebars.SafeString('<div class="panel-bar ' + highlightClass + '"></div>');
});
Ember.Handlebars.helper('listBar', function(status) {
var highlightClass;
if (status == "passing") {
highlightClass = "bg-green";
} else {
highlightClass = "bg-orange";
}
return new Handlebars.SafeString('<div class="list-bar-horizontal ' + highlightClass + '"></div>');
});

View File

@ -59,7 +59,7 @@
small {
padding-right: 8px;
padding-top: 1px;
padding-top: 2px;
font-size: 12px;
color: $gray-light;
}

View File

@ -4,6 +4,7 @@
@include transition(background-color .3s ease-in-out);
.panel-heading {
padding: 10px 7px;
background-color: transparent;
border-width: 2px;
border-color: $gray-background;
@ -57,6 +58,23 @@
border-bottom-width: 2px;
}
&.panel-list {
ul {
margin: 0;
li {
margin: 0;
border: 0;
}
}
}
.panel-bar-horizontal {
width: 20px;
float: left;
height: 50px;
margin-right: 10px;
display: block;
}
&.panel-short {
border-bottom-width: 0px;
}