luxolus/open-consul
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

ui: refactor nodes as embedded resource

Browse source
This commit is contained in:
Jack Pearkes 2014-04-25 13:32:41 -04:00
parent 6a4887ec8e
commit 4f467aec8c
2 changed files with 93 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
ui/index.html
View file

@ -29,11 +29,11 @@
</div>
<div class="col-md-2 col-sm-3">
{{#link-to 'services' controllers.application.getDc class='btn btn-default'}}Services{{/link-to}}
{{#link-to 'services' class='btn btn-default'}}Services{{/link-to}}
</div>
<div class="col-md-2 col-sm-3">
{{#link-to 'nodes' controllers.application.getDc class='btn btn-default'}}Nodes{{/link-to}}
{{#link-to 'nodes' class='btn btn-default'}}Nodes{{/link-to}}
</div>
<div class="col-md-2 col-sm-3">
@ -72,7 +72,7 @@
</h4>
<ul class="list-inline">
{{#each node in service.Nodes }}
<li>{{#link-to 'node' controllers.application.getDc node class='subtle'}}{{node}}{{/link-to}}</li>
<li>{{#link-to 'nodes.show' node class='subtle'}}{{node}}{{/link-to}}</li>
{{/each}}
</ul>
</div>
@ -90,7 +90,6 @@
</script>
<script type="text/x-handlebars" id="service">
{{#if model}}
<h2 class="no-margin">{{ model.1.ServiceName }}</h2>
<hr>
<h5>Tags</h5>
@ -104,7 +103,7 @@
<div class="panel-bar"></div>
<div class="panel-heading">
<h3 class="panel-title">
{{#link-to 'node' controllers.application.getDc node.Node class='subtle'}}{{node.Node}}{{/link-to}}
{{#link-to 'nodes.show' node.Node class='subtle'}}{{node.Node}}{{/link-to}}
<small>{{node.Address}}</small>
<span class="panel-note">{{node.checkMessage}}</span>
</h3>
@ -122,7 +121,6 @@
</div>
{{/each}}
{{/if}}
</script>
<script type="text/x-handlebars" id="nodes">
@ -130,10 +128,10 @@
{{#each node in nodes}}
<div class="row">
{{#link-to 'node' controllers.application.getDc node.Name tagName="div" href=false class="list-group-item list-link" }}
{{#link-to 'nodes.show' node.Name 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 'node' controllers.application.getDc node.Name class='subtle'}}{{node.Name}}{{/link-to}}
{{#link-to 'nodes.show' node.Name class='subtle'}}{{node.Name}}{{/link-to}}
<small>{{node.Name}}</small>
<div class="heading-helper">
<a class="subtle" href="#">{{node.checkMessage}}</a>
@ -158,6 +156,56 @@
</div>
</script>
<script type="text/x-handlebars" id="node">
<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>
<h5>Output</h5>
<pre>
{{check.Output}}
</pre>
</div>
</div>
{{/each}}
<h5>Services</h5>
{{#each service in model.Services }}
{{#link-to 'services.show' service.Service }}
<div class="panel panel-default panel-link panel-short">
<div class="panel-bar"></div>
<div class="panel-heading">
<h3 class="panel-title">
{{service.Service}}
<small>{{sevice.ID}}</small>
<span class="panel-note">:{{service.Port}}</span>
</h3>
</div>
</div>
{{/link-to}}
{{/each}}
</script>
<script type="text/x-handlebars" id="index">
<div class="col-md-8 col-md-offset-2 vertical-center">
{{#each item in model}}

36
ui/javascripts/app.js
View file

@ -5,16 +5,17 @@ window.App = Ember.Application.create({
});
App.Router.map(function() {
this.resource("dc", {path: "/:dc"}, function() {
this.resource("services", { path: "/services" }, function(){
this.route("show", { path: "/:name" });
});
this.resource("nodes", { path: "/nodes" }, function() {
this.route("show", { path: "/:name" });
});
// this.route("services", { path: "/:dc/services" });
// this.route("service", { path: "/:dc/services/:name" });
});
this.route("index", { path: "/" });
this.route("nodes", { path: "/:dc/nodes" });
this.route("node", { path: "/:dc/nodes/:name" });
this.route("kv", { path: "/:dc/kv" });
});
@ -57,17 +58,6 @@ App.BaseRoute = Ember.Route.extend({
if (controller.getDc === null) {
this.transitionTo('index');
};
},
actions: {
//
// Mimics the link-to helper for triggering actions on
// no <a> tags. Takes the route name, i.e nodes, the datacenter,
// i.e "ny1" and a name.
//
linkTo: function(route, dc, name) {
return this.transitionTo(route, dc, name);
},
}
});
@ -265,7 +255,7 @@ App.ServicesShowView = Ember.View.extend({
// array and have a simple conditional to display the nested
// individual service resource.
//
templateName: 'service',
templateName: 'service'
})
@ -291,7 +281,7 @@ App.ServicesShowController = Ember.Controller.extend({
needs: ['application']
})
//
//=
// path: /:dc/nodes
//
App.NodesController = Ember.Controller.extend({
@ -301,7 +291,7 @@ App.NodesController = Ember.Controller.extend({
//
// path: /:dc/nodes/:name
//
App.NodeController = Ember.Controller.extend({
App.NodesShowController = Ember.Controller.extend({
needs: ['application']
})
@ -309,18 +299,16 @@ App.NodeController = Ember.Controller.extend({
// Nodes
//
App.NodesView = Ember.View.extend({
templateName: 'nodes',
layoutName: 'default_layout'
templateName: 'nodes'
})
App.NodeView = Ember.View.extend({
App.NodesShowView = 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'
templateName: 'node'
})
@ -328,7 +316,7 @@ App.NodeView = Ember.View.extend({
// Display an individual node, as well as the global nodes in the left
// column.
//
App.NodeRoute = App.BaseRoute.extend({
App.NodesShowRoute = App.BaseRoute.extend({
//
// Set the model on the route. We look up the specific node
// by it's identifier passed via the route