ui: refactor nodes as embedded resource
This commit is contained in:
Jack Pearkes
parent
6a4887ec8e
commit
4f467aec8c
114
ui/index.html
114
ui/index.html
|
|
@ -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,39 +90,37 @@
|
|||
</script>
|
||||
|
||||
<script type="text/x-handlebars" id="service">
|
||||
{{#if model}}
|
||||
<h2 class="no-margin">{{ model.1.ServiceName }}</h2>
|
||||
<hr>
|
||||
<h5>Tags</h5>
|
||||
<p>Pending...</p>
|
||||
<h2 class="no-margin">{{ model.1.ServiceName }}</h2>
|
||||
<hr>
|
||||
<h5>Tags</h5>
|
||||
<p>Pending...</p>
|
||||
|
||||
<h5>Nodes</h5>
|
||||
<h5>Nodes</h5>
|
||||
|
||||
{{#each node in model }}
|
||||
{{#each node in model }}
|
||||
|
||||
<div {{bind-attr class=":panel node.hasFailingChecks:panel-warning:panel-success"}}>
|
||||
<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}}
|
||||
<small>{{node.Address}}</small>
|
||||
<span class="panel-note">{{node.checkMessage}}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div {{bind-attr class=":panel node.hasFailingChecks:panel-warning:panel-success"}}>
|
||||
<div class="panel-bar"></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>
|
||||
<span class="panel-note">{{node.checkMessage}}</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<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>
|
||||
<div class="panel-body">
|
||||
<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}}
|
||||
{{/each}}
|
||||
</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}}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue