ui: initial pass at filtering and condensed view for nodes/services

This commit is contained in:
Jack Pearkes 2014-06-02 10:35:46 -04:00
parent 7cab1c3c4c
commit a94ef9d529
6 changed files with 171 additions and 105 deletions

View file

@ -48,6 +48,22 @@
</div>
</script>
<script type="text/x-handlebars" id="actionbar">
<div class="row">
<div class="col-md-8">
{{ input type="text" value=filter class="form-control" placeholder="Filter by name"}}
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
{{input type="checkbox" name="condensedView" checked=condensedView}}
Condensed
</label>
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="dc">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 topbar">
@ -238,45 +254,61 @@
</script>
<script type="text/x-handlebars" id="services">
<div class="row">
<div class="col-md-5 scrollable">
{{view App.ActionBarView }}
<div {{ bind-attr class=":col-md-5" }}>
{{#each service in filteredContent}}
{{#each service in services}}
{{#if condensedView }}
<div class="row">
{{#link-to 'services.show' service.Name tagName="div" href=false class="list-group-item list-link" }}
<div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
<h4 class="list-group-item-heading">
{{#link-to 'services.show' service.Name class='subtle'}}{{service.Name}}{{/link-to}}
<div class="heading-helper">
<a class="subtle" href="#">{{service.checkMessage}}</a>
{{#link-to 'services.show' service.Name tagName="div" href=false class="list-group-item list-condensed-link" }}
<div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
<div class="name">
{{service.Name}}
<small class="pull-right">
{{ service.checkMessage }}
</small>
</div>
</h4>
<ul class="list-inline">
{{#each node in service.Nodes }}
<li class="bold">{{node}}</li>
{{/each}}
</ul>
{{/link-to}}
</div>
{{/link-to}}
{{/each}}
{{else}}
</div>
{{#link-to 'services.show' service.Name tagName="div" href=false class="list-group-item list-link" }}
<div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
<h4 class="list-group-item-heading">
{{#link-to 'services.show' service.Name class='subtle'}}{{service.Name}}{{/link-to}}
<div class="heading-helper">
<a class="subtle" href="#">{{service.checkMessage}}</a>
</div>
</h4>
<ul class="list-inline">
{{#each node in service.Nodes }}
<li class="bold">{{node}}</li>
{{/each}}
</ul>
{{/link-to}}
{{/if}}
{{/each}}
<div class="col-md-1">
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
</div>
</div>
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="col-md-1">
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
{{outlet}}
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="col-md-6 scrollable">
<div class="row">
{{outlet}}
</div>
</div>
</div>
</script>
@ -316,64 +348,61 @@
</script>
<script type="text/x-handlebars" id="nodes">
<div class="col-md-5">
<div class="row">
<div class="col-md-5 scrollable">
{{view App.ActionBarView }}
{{#if condensedView }}
{{#each node in filteredContent}}
{{#each node in nodes}}
<div class="row">
{{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-condensed-link" }}
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
<div class="name">
{{node.Node}}
<small class="pull-right">
{{ node.Services.length }} services
</small>
</div>
</div>
{{/link-to}}
{{#if condensedView }}
{{/each}}
{{else}}
{{#each node in nodes}}
<div class="row">
{{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-link" }}
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
<h4 class="list-group-item-heading">
{{node.Node}}
<small>{{node.Address}}</small>
<div class="heading-helper">
<a class="subtle" href="#">{{node.checkMessage}}</a>
{{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-condensed-link" }}
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
<div class="name">
{{node.Node}}
<small class="pull-right">
{{ node.numServices }} services
</small>
</div>
</h4>
<ul class="list-inline">
{{#each service in node.Services }}
<li class="bold">{{service.Service}}</li>
{{/each}}
</ul>
</div>
{{/link-to}}
{{/link-to}}
{{/each}}
{{/if}}
</div>
{{else}}
<div class="col-md-1">
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
{{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-link" }}
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
<h4 class="list-group-item-heading">
{{node.Node}}
<small>{{node.Address}}</small>
<div class="heading-helper">
<a class="subtle" href="#">{{node.checkMessage}}</a>
</div>
</h4>
<ul class="list-inline">
{{#each service in node.Services }}
<li class="bold">{{service.Service}}</li>
{{/each}}
</ul>
{{/link-to}}
{{/if}}
{{/each}}
</div>
</div>
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="col-md-1">
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
</div>
</div>
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="col-md-6">
<div class="row">
{{outlet}}
<div class="col-md-6 scrollable">
<div class="row">
{{outlet}}
</div>
</div>
</div>
</script>

View file

@ -217,6 +217,27 @@ App.KvEditController = KvBaseController.extend({
});
App.NodesController = Ember.ArrayController.extend({
condensedView: true
ItemBaseController = Ember.ArrayController.extend({
needs: ["dc"],
dc: Ember.computed.alias("controllers.dc"),
condensedView: true,
filter: "",
filteredContent: function() {
var filter = this.get('filter');
return this.get('items').filter(function(item, index, enumerable){
return item.get('filterKey').toLowerCase().match(filter.toLowerCase());
});
}.property('filter', 'items.@each'),
});
App.NodesController = ItemBaseController.extend({
items: Ember.computed.alias("nodes"),
});
App.ServicesController = ItemBaseController.extend({
items: Ember.computed.alias("services"),
});

View file

@ -51,7 +51,11 @@ App.Service = Ember.Object.extend({
//
hasFailingChecks: function() {
return (this.get('failingChecks') > 0);
}.property('Checks')
}.property('Checks'),
filterKey: function() {
return this.get('Name')
}.property('Name')
});
//
@ -93,7 +97,18 @@ App.Node = Ember.Object.extend({
//
hasFailingChecks: function() {
return (this.get('failingChecks') > 0);
}.property('Checks')
}.property('Checks'),
//
// The number of services on the node
//
numServices: function() {
return (this.get('Services').length)
}.property('Services'),
filterKey: function() {
return this.get('Node')
}.property('Node')
});

View file

@ -3,6 +3,7 @@
//
App.BaseRoute = Ember.Route.extend({
rootKey: '',
condensedView: false,
getParentAndGrandparent: function(key) {
var parentKey = this.rootKey,
@ -246,13 +247,6 @@ App.NodesRoute = App.BaseRoute.extend({
objs = [];
data.map(function(obj){
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
});
return objs
});

View file

@ -14,6 +14,11 @@ App.DcView = Ember.View.extend({
}
})
App.ItemView = Ember.View.extend({
templateName: 'item'
})
//
// Services
//
@ -45,6 +50,15 @@ App.NodesLoadingView = Ember.View.extend({
templateName: 'item/loading'
})
// KV
App.KvListView = Ember.View.extend({
templateName: 'kv'
})
// Actions
App.ActionBarView = Ember.View.extend({
templateName: 'actionbar'
})

View file

@ -47,17 +47,9 @@
background-color: lighten($gray-background, 8%);
}
&.active {
@include transition(border-color .1s linear);
border-color: $purple;
.list-bar, .list-bar-horizontal {
@include transition(background-color .1s linear);
background-color: $purple;
}
}
&.list-condensed-link {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-color: $gray-background;
margin-bottom: 4px;
margin-top: 4px;
@ -84,15 +76,16 @@
height: 100%;
margin-right: 10px;
}
}
ul.list-broken {
li {
// border-top: 2px lighten($gray-background, 5%) solid;
}
&:last-child {
// border-bottom: 2px lighten($gray-background, 5%) solid;
&.active {
@include transition(border-color .1s linear);
border-color: $purple;
.list-bar, .list-bar-horizontal {
@include transition(background-color .1s linear);
background-color: $purple;
}
}
}