ui: add nodes
This commit is contained in:
Jack Pearkes
parent
ab3ffa7653
commit
a624deb90e
|
|
@ -60,21 +60,22 @@
|
|||
<div class="col-md-5">
|
||||
|
||||
{{#each service in services}}
|
||||
|
||||
<div class="list-group-item">
|
||||
<div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
|
||||
<h4 class="list-group-item-heading">
|
||||
{{#link-to 'service' controllers.application.getDc service.Name class='subtle'}}{{service.Name}}{{/link-to}}
|
||||
<small>{{service.Name}}</small>
|
||||
<div class="heading-helper">
|
||||
<a class="subtle" href="#">{{service.checkMessage}}</a>
|
||||
</div>
|
||||
</h4>
|
||||
<ul class="list-inline">
|
||||
{{#each node in service.Nodes }}
|
||||
<li>{{#link-to 'node' controllers.application.getDc node class='subtle'}}{{node}}{{/link-to}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="list-group-item">
|
||||
<div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
|
||||
<h4 class="list-group-item-heading">
|
||||
{{#link-to 'service' controllers.application.getDc service.Name class='subtle'}}{{service.Name}}{{/link-to}}
|
||||
<small>{{service.Name}}</small>
|
||||
<div class="heading-helper">
|
||||
<a class="subtle" href="#">{{service.checkMessage}}</a>
|
||||
</div>
|
||||
</h4>
|
||||
<ul class="list-inline">
|
||||
{{#each node in service.Nodes }}
|
||||
<li>{{#link-to 'node' controllers.application.getDc node class='subtle'}}{{node}}{{/link-to}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/each}}
|
||||
|
|
@ -121,6 +122,71 @@
|
|||
</script>
|
||||
|
||||
|
||||
<script type="text/x-handlebars" id="nodes">
|
||||
<div class="col-md-5">
|
||||
|
||||
{{#each node in nodes}}
|
||||
<div class="row">
|
||||
<div class="list-group-item">
|
||||
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
|
||||
<h4 class="list-group-item-heading">
|
||||
{{#link-to 'node' controllers.application.getDc node.Name class='subtle'}}{{node.Name}}{{/link-to}}
|
||||
<small>{{node.Name}}</small>
|
||||
<div class="heading-helper">
|
||||
<a class="subtle" href="#">{{node.checkMessage}}</a>
|
||||
</div>
|
||||
</h4>
|
||||
<ul class="list-inline">
|
||||
{{#each service in node.Services }}
|
||||
<li>{{#link-to 'service' controllers.application.getDc service class='subtle'}}{{service}}{{/link-to}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/each}}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-md-offset-1">
|
||||
<div class="row">
|
||||
{{#if model}}
|
||||
<h2 class="no-margin">{{ model.Node.Node }}</h2>
|
||||
<hr>
|
||||
|
||||
<h5>Checks</h5>
|
||||
|
||||
{{#each check in model.Checks }}
|
||||
|
||||
<div {{bind-attr class=":panel model.hasFailingChecks:panel-warning:panel-success"}}>
|
||||
<div class="panel-bar"></div>
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
{{check.Name}}
|
||||
<small>{{check.CheckID}}</small>
|
||||
<span class="panel-note">{{check.Status}}</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<h5>Notes</h5>
|
||||
<p>{{ check.Notes }}</p>
|
||||
<ul class="list-unstyled list-broken">
|
||||
{{#each check in node.Checks }}
|
||||
<li>
|
||||
<h4>{{ check.Name }} <small>{{ check.CheckID }}</small> <span class="pull-right"><small>{{check.Status}}</small></h4>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/x-handlebars" id="index">
|
||||
<div class="col-md-8 col-md-offset-2 vertical-center">
|
||||
{{#each item in model}}
|
||||
|
|
|
|||
|
|
@ -191,6 +191,7 @@ App.ServicesRoute = App.BaseRoute.extend({
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Display an individual service, as well as the global services in the left
|
||||
// column.
|
||||
|
|
@ -227,6 +228,11 @@ App.ServicesView = Ember.View.extend({
|
|||
// Services
|
||||
//
|
||||
App.ServiceView = Ember.View.extend({
|
||||
//
|
||||
// We use the same template as we do for the services
|
||||
// array and have a simple conditional to display the nested
|
||||
// individual service resource.
|
||||
//
|
||||
templateName: 'services',
|
||||
layoutName: 'default_layout'
|
||||
})
|
||||
|
|
@ -242,10 +248,80 @@ App.ServicesController = Ember.Controller.extend({
|
|||
// path: /:dc/services/:name
|
||||
//
|
||||
App.ServiceController = Ember.Controller.extend({
|
||||
//
|
||||
// We use the same template as we do for the services
|
||||
// array and have a simple conditional to display the nested
|
||||
// individual service resource.
|
||||
//
|
||||
needs: ['application']
|
||||
})
|
||||
|
||||
//
|
||||
// path: /:dc/nodes
|
||||
//
|
||||
App.NodesController = Ember.Controller.extend({
|
||||
needs: ['application']
|
||||
})
|
||||
|
||||
//
|
||||
// path: /:dc/nodes/:name
|
||||
//
|
||||
App.NodeController = Ember.Controller.extend({
|
||||
needs: ['application']
|
||||
})
|
||||
|
||||
//
|
||||
// Nodes
|
||||
//
|
||||
App.NodesView = Ember.View.extend({
|
||||
templateName: 'nodes',
|
||||
layoutName: 'default_layout'
|
||||
})
|
||||
|
||||
App.NodeView = Ember.View.extend({
|
||||
//
|
||||
// We use the same template as we do for the nodes
|
||||
// array and have a simple conditional to display the nested
|
||||
// individual node resource.
|
||||
//
|
||||
templateName: 'nodes',
|
||||
layoutName: 'default_layout'
|
||||
})
|
||||
|
||||
|
||||
//
|
||||
// Display an individual node, as well as the global nodes in the left
|
||||
// column.
|
||||
//
|
||||
App.NodeRoute = App.BaseRoute.extend({
|
||||
//
|
||||
// Set the model on the route. We look up the specific node
|
||||
// by it's identifier passed via the route
|
||||
//
|
||||
model: function(params) {
|
||||
return App.Node.create(window.fixtures.nodes_full[params.name]);
|
||||
},
|
||||
|
||||
setupController: function(controller, model) {
|
||||
controller.set('content', model);
|
||||
//
|
||||
// Since we have 2 column layout, we need to also display the
|
||||
// list of services on the left. Hence setting the attribute
|
||||
// {{services}} on the controller.
|
||||
//
|
||||
controller.set('nodes', [App.Node.create(window.fixtures.nodes[0]), App.Node.create(window.fixtures.nodes[1])]);
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// Display all the services, allow to drill down into the specific services.
|
||||
//
|
||||
App.NodesRoute = App.BaseRoute.extend({
|
||||
//
|
||||
// Set the services as the routes default model to be called in
|
||||
// the template as {{model}}
|
||||
//
|
||||
setupController: function(controller, model) {
|
||||
//
|
||||
// Since we have 2 column layout, we need to also display the
|
||||
// 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])]);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -164,6 +164,153 @@ fixtures.services_full = {
|
|||
]
|
||||
}
|
||||
|
||||
|
||||
fixtures.nodes = [
|
||||
{
|
||||
"Address": "10.0.1.109",
|
||||
"Name": "node-10-0-1-109",
|
||||
"Services": [
|
||||
"vagrant-cloud-worker",
|
||||
"vagrant-cloud-http"
|
||||
],
|
||||
"Checks": [
|
||||
{
|
||||
"Name": "serfHealth",
|
||||
"status": "passing"
|
||||
},
|
||||
{
|
||||
"Name": "fooHealth",
|
||||
"status": "critical"
|
||||
},
|
||||
{
|
||||
"Name": "bazHealth",
|
||||
"status": "passing"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"Address": "10.0.1.102",
|
||||
"Name": "node-10-0-1-102",
|
||||
"Services": [
|
||||
"vagrant-cloud-worker",
|
||||
"vagrant-cloud-http"
|
||||
],
|
||||
"Checks": [
|
||||
{
|
||||
"Name": "serfHealth",
|
||||
"status": "passing"
|
||||
},
|
||||
{
|
||||
"Name": "fooHealth",
|
||||
"status": "critical"
|
||||
},
|
||||
{
|
||||
"Name": "bazHealth",
|
||||
"status": "passing"
|
||||
}
|
||||
],
|
||||
|
||||
},
|
||||
{
|
||||
"Address": "10.0.1.103",
|
||||
"Name": "node-10-0-1-103",
|
||||
"Services": [
|
||||
"vagrant-cloud-worker",
|
||||
"vagrant-cloud-http"
|
||||
],
|
||||
"Checks": [
|
||||
{
|
||||
"Name": "serfHealth",
|
||||
"status": "passing"
|
||||
},
|
||||
{
|
||||
"Name": "fooHealth",
|
||||
"status": "critical"
|
||||
},
|
||||
{
|
||||
"Name": "bazHealth",
|
||||
"status": "passing"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
fixtures.nodes_full = {
|
||||
"node-10-0-1-109": {
|
||||
"Services": [
|
||||
{
|
||||
"Port": 0,
|
||||
"Tags": null,
|
||||
"Service": "vagrant-cloud-http",
|
||||
"ID": "vagrant-cloud-http"
|
||||
},
|
||||
{
|
||||
"Port": 80,
|
||||
"Tags": null,
|
||||
"Service": "vagrant-cloud-http",
|
||||
"ID": "vagrant-cloud-http"
|
||||
}
|
||||
],
|
||||
"Node": {
|
||||
"Address": "10.0.1.109",
|
||||
"Node": "node-10-0-1-109"
|
||||
},
|
||||
"Checks": [
|
||||
{
|
||||
"ServiceName": "",
|
||||
"ServiceID": "",
|
||||
"Notes": "Checks the status of the serf agent",
|
||||
"Status": "passing",
|
||||
"Name": "Serf Health Status",
|
||||
"CheckID": "serfHealth",
|
||||
"Node": "node-10-0-1-109"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node-10-0-1-102": {
|
||||
"Services": [
|
||||
{
|
||||
"Port": 0,
|
||||
"Tags": null,
|
||||
"Service": "vagrant-cloud-http",
|
||||
"ID": "vagrant-cloud-http"
|
||||
},
|
||||
{
|
||||
"Port": 80,
|
||||
"Tags": null,
|
||||
"Service": "vagrant-cloud-http",
|
||||
"ID": "vagrant-cloud-http"
|
||||
}
|
||||
],
|
||||
"Node": {
|
||||
"Address": "10.0.1.102",
|
||||
"Node": "node-10-0-1-102"
|
||||
},
|
||||
"Checks": [
|
||||
{
|
||||
"ServiceName": "",
|
||||
"ServiceID": "",
|
||||
"Notes": "",
|
||||
"Output": "foobar baz",
|
||||
"Status": "passing",
|
||||
"Name": "Baz Status",
|
||||
"CheckID": "bazHealth",
|
||||
"Node": "node-10-0-1-102"
|
||||
},
|
||||
{
|
||||
"ServiceName": "",
|
||||
"ServiceID": "",
|
||||
"Notes": "",
|
||||
"Output": "foobar baz",
|
||||
"Status": "passing",
|
||||
"Name": "Serf Health Status",
|
||||
"CheckID": "serfHealth",
|
||||
"Node": "node-10-0-1-102"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
fixtures.dcs = ['nyc1', 'sf1', 'sg1']
|
||||
|
||||
localStorage.setItem("current_dc", fixtures.dcs[0]);
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
.panel-body {
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: $text-color;
|
||||
}
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue