ui: initial pass at filtering and condensed view for nodes/services
This commit is contained in:
parent
7cab1c3c4c
commit
a94ef9d529
183
ui/index.html
183
ui/index.html
|
@ -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>
|
||||
|
|
|
@ -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"),
|
||||
});
|
||||
|
||||
|
|
|
@ -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')
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
});
|
||||
|
|
|
@ -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'
|
||||
})
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue