status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: wire up services, nodes, checks

This commit is contained in:
Jack Pearkes 2014-04-30 14:02:20 -04:00
parent d1213d4e17
commit 50060c9df9
6 changed files with 96 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/index.html
View File

@ -195,7 +195,7 @@
</h4>
<ul class="list-inline">
{{#each node in service.Nodes }}
<li>{{#link-to 'nodes.show' node class='subtle'}}{{node}}{{/link-to}}</li>
<li>{{node}}</li>
{{/each}}
</ul>
{{/link-to}}
@ -219,21 +219,19 @@
</script>
<script type="text/x-handlebars" id="service">
<h2 class="no-margin">{{ model.1.ServiceName }}</h2>
<h2 class="no-margin">{{ model.0.Service.Service }}</h2>
<hr>
<h5>Tags</h5>
<p>Pending...</p>
<h5>Nodes</h5>
{{#each node in model }}
{{#link-to 'nodes.show' node.Node tagName="div" href=false class="panel panel-link" }}
{{#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>
<div class="panel-heading">
<h3 class="panel-title">
{{#link-to 'nodes.show' node.Node class='subtle'}}{{node.Node}}{{/link-to}}
<small>{{node.Address}}</small>
{{node.Node.Node}}
<small>{{node.Node.Address}}</small>
<span class="panel-note">{{node.checkMessage}}</span>
</h3>
</div>
@ -259,10 +257,10 @@
{{#each node in nodes}}
<div class="row">
{{#link-to 'nodes.show' node.Name tagName="div" href=false class="list-group-item list-link" }}
{{#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">
{{#link-to 'nodes.show' node.Name class='subtle'}}{{node.Name}}{{/link-to}}
{{node.Node}}
<small>{{node.Address}}</small>
<div class="heading-helper">
<a class="subtle" href="#">{{node.checkMessage}}</a>
@ -270,7 +268,7 @@
</h4>
<ul class="list-inline">
{{#each service in node.Services }}
<li>{{#link-to 'services.show' service class='subtle'}}{{service}}{{/link-to}}</li>
<li>{{service.Service}}</li>
{{/each}}
</ul>
</div>
@ -294,7 +292,7 @@
</script>
<script type="text/x-handlebars" id="node">
<h2 class="no-margin">{{ model.Node.Node }} <small> {{ model.Node.Address }}</small></h2>
<h2 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h2>
<hr>
<h5>Checks</h5>

2
ui/javascripts/app/controllers.js
View File

@ -16,7 +16,7 @@ App.DcController = Ember.Controller.extend({
isDropdownVisible: false,
checks: function() {
var services = this.get('services');
var services = this.get('nodes');
var checks = Ember.A()
// loop over all of the services we have,

12
ui/javascripts/app/models.js
View File

@ -6,14 +6,22 @@ App.Service = Ember.Object.extend({
// The number of failing checks within the service.
//
failingChecks: function() {
return this.get('Checks').filterBy('Status', 'critical').get('length');
if (this.get('ChecksCritical') != undefined) {
return (this.get('ChecksCritical') + this.get('ChecksWarning'))
} else {
return this.get('Checks').filterBy('Status', 'critical').get('length');
}
}.property('Checks'),
//
// The number of passing checks within the service.
//
passingChecks: function() {
return this.get('Checks').filterBy('Status', 'passing').get('length');
if (this.get('ChecksPassing') != undefined) {
return this.get('ChecksPassing')
} else {
return this.get('Checks').filterBy('Status', 'passing').get('length');
}
}.property('Checks'),
//

4
ui/javascripts/app/router.js
View File

@ -1,8 +1,10 @@
window.App = Ember.Application.create({
rootElement: "#app",
LOG_TRANSITIONS: true
LOG_TRANSITIONS: true,
baseUrl: 'http://localhost:8500'
});
App.Router.map(function() {
this.resource("dc", {path: "/:dc"}, function() {

88
ui/javascripts/app/routes.js
View File

@ -24,18 +24,19 @@ App.BaseRoute = Ember.Route.extend({
// and loop of transitions.
//
App.IndexRoute = Ember.Route.extend({
model: function() {
return window.fixtures.dcs;
model: function(params) {
return Ember.$.getJSON('/v1/catalog/datacenters').then(function(data) {
return data
});
},
setupController: function(controller, model) {
controller.set('content', model);
controller.set('dcs', window.fixtures.dcs);
controller.set('dcs', model);
},
afterModel: function(dcs, transition) {
if (dcs.get('length') === 1) {
this.get('controllers.application').setDc(dcs[0])
this.transitionTo('services', dcs[0]);
}
}
@ -49,15 +50,32 @@ App.DcRoute = App.BaseRoute.extend({
// by it's identifier passed via the route
//
model: function(params) {
return params.dc;
var object = Ember.Object.create();
object.set('dc', params.dc)
var nodesPromise = Ember.$.getJSON('/v1/internal/ui/nodes').then(function(data) {
objs = [];
data.map(function(obj){
objs.push(App.Node.create(obj));
});
object.set('nodes', objs);
return object;
});
var datacentersPromise = Ember.$.getJSON('/v1/catalog/datacenters').then(function(data) {
object.set('dcs', data);
return object;
});
return nodesPromise.then(datacentersPromise);
},
setupController: function(controller, model) {
controller.set('content', model);
controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
controller.set('dcs', window.fixtures.dcs);
controller.set('content', model.get('dc'));
controller.set('nodes', model.get('nodes'));
controller.set('dcs', model.get('dcs'));
}
});
@ -115,6 +133,15 @@ App.KvEditRoute = App.BaseRoute.extend({
// Display all the services, allow to drill down into the specific services.
//
App.ServicesRoute = App.BaseRoute.extend({
model: function(params) {
return Ember.$.getJSON('/v1/internal/ui/services').then(function(data) {
objs = [];
data.map(function(obj){
objs.push(App.Service.create(obj));
});
return objs
});
},
//
// Set the services as the routes default model to be called in
// the template as {{model}}
@ -125,7 +152,7 @@ App.ServicesRoute = App.BaseRoute.extend({
// list of services on the left. Hence setting the attribute
// {{services}} on the controller.
//
controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
controller.set('services', model);
}
});
@ -140,8 +167,17 @@ App.ServicesShowRoute = App.BaseRoute.extend({
// by it's identifier passed via the route
//
model: function(params) {
return [App.Node.create(window.fixtures.services_full[params.name][0]), App.Node.create(window.fixtures.services_full[params.name][1])];
}
return Ember.$.getJSON('/v1/health/service/' + params.name).then(function(data) {
objs = [];
data.map(function(obj){
objs.push(App.Node.create(obj));
});
console.log(objs)
return objs;
});
},
});
@ -157,7 +193,9 @@ App.NodesShowRoute = App.BaseRoute.extend({
// by it's identifier passed via the route
//
model: function(params) {
return App.Node.create(window.fixtures.nodes_full[params.name]);
return Ember.$.getJSON('/v1/internal/ui/node/' + params.name).then(function(data) {
return App.Node.create(data)
});
},
setupController: function(controller, model) {
@ -167,7 +205,15 @@ App.NodesShowRoute = App.BaseRoute.extend({
// list of nodes on the left. Hence setting the attribute
// {{nodes}} on the controller.
//
controller.set('nodes', [App.Node.create(window.fixtures.nodes[0]), App.Node.create(window.fixtures.nodes[1])]);
Ember.$.getJSON('/v1/internal/ui/nodes').then(function(data) {
objs = [];
data.map(function(obj){
objs.push(App.Node.create(obj));
});
controller.set('nodes', objs);
});
}
});
@ -175,6 +221,16 @@ App.NodesShowRoute = App.BaseRoute.extend({
// Display all the nodes, allow to drill down into the specific nodes.
//
App.NodesRoute = App.BaseRoute.extend({
model: function(params) {
return Ember.$.getJSON('/v1/internal/ui/nodes').then(function(data) {
objs = [];
data.map(function(obj){
objs.push(App.Node.create(obj));
});
return objs
});
},
//
// Set the node as the routes default model to be called in
// the template as {{model}}. This is the "expanded" view.
@ -185,6 +241,6 @@ App.NodesRoute = App.BaseRoute.extend({
// list of nodes on the left. Hence setting the attribute
// {{nodes}} on the controller.
//
controller.set('nodes', [App.Node.create(window.fixtures.nodes[0]), App.Node.create(window.fixtures.nodes[1])]);
controller.set('nodes', model);
}
});

2
ui/styles/_nav.scss
View File

@ -1,7 +1,7 @@
.top-brand {
margin-top: 20px;
background: transparent url('/static/consul-logo.png') 0 no-repeat;
background: transparent url('consul-logo.png') 0 no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;