ui: refactor file structure
This commit is contained in:
parent
62955c5b97
commit
b5718ac23b
|
@ -229,7 +229,11 @@
|
|||
<script src="javascripts/libs/handlebars-1.1.2.js"></script>
|
||||
<script src="javascripts/libs/ember-1.5.0.js"></script>
|
||||
<script src="javascripts/fixtures.js"></script>
|
||||
<script src="javascripts/app.js"></script>
|
||||
<script src="javascripts/app/router.js"></script>
|
||||
<script src="javascripts/app/routes.js"></script>
|
||||
<script src="javascripts/app/models.js"></script>
|
||||
<script src="javascripts/app/views.js"></script>
|
||||
<script src="javascripts/app/controllers.js"></script>
|
||||
|
||||
<!-- to activate the test runner, add the "?test" query string parameter -->
|
||||
<script src="tests/runner.js"></script>
|
||||
|
|
15
ui/javascripts/app/controllers.js
Normal file
15
ui/javascripts/app/controllers.js
Normal file
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// path: /
|
||||
//
|
||||
// The index is for choosing datacenters.
|
||||
//
|
||||
App.IndexController = Ember.Controller.extend({
|
||||
});
|
||||
|
||||
//
|
||||
// path: /:dc
|
||||
//
|
||||
App.DcController = Ember.Controller.extend({
|
||||
})
|
||||
|
||||
|
78
ui/javascripts/app/models.js
Normal file
78
ui/javascripts/app/models.js
Normal file
|
@ -0,0 +1,78 @@
|
|||
//
|
||||
// A Consul service.
|
||||
//
|
||||
App.Service = Ember.Object.extend({
|
||||
//
|
||||
// The number of failing checks within the service.
|
||||
//
|
||||
failingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'critical').get('length');
|
||||
}.property('failingChecks'),
|
||||
|
||||
//
|
||||
// The number of passing checks within the service.
|
||||
//
|
||||
passingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'passing').get('length');
|
||||
}.property('passingChecks'),
|
||||
|
||||
//
|
||||
// The formatted message returned for the user which represents the
|
||||
// number of checks failing or passing. Returns `1 passing` or `2 failing`
|
||||
//
|
||||
checkMessage: function() {
|
||||
if (this.get('hasFailingChecks') === false) {
|
||||
return this.get('passingChecks') + ' passing';
|
||||
} else {
|
||||
return this.get('failingChecks') + ' failing';
|
||||
}
|
||||
}.property('checkMessage'),
|
||||
|
||||
//
|
||||
// Boolean of whether or not there are failing checks in the service.
|
||||
// This is used to set color backgrounds and so on.
|
||||
//
|
||||
hasFailingChecks: function() {
|
||||
return (this.get('failingChecks') > 0);
|
||||
}.property('hasFailingChecks')
|
||||
});
|
||||
|
||||
//
|
||||
// A Consul Node
|
||||
//
|
||||
App.Node = Ember.Object.extend({
|
||||
//
|
||||
// The number of failing checks within the service.
|
||||
//
|
||||
failingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'critical').get('length');
|
||||
}.property('failingChecks'),
|
||||
|
||||
//
|
||||
// The number of passing checks within the service.
|
||||
//
|
||||
passingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'passing').get('length');
|
||||
}.property('passingChecks'),
|
||||
|
||||
//
|
||||
// The formatted message returned for the user which represents the
|
||||
// number of checks failing or passing. Returns `1 passing` or `2 failing`
|
||||
//
|
||||
checkMessage: function() {
|
||||
if (this.get('hasFailingChecks') === false) {
|
||||
return this.get('passingChecks') + ' passing';
|
||||
} else {
|
||||
return this.get('failingChecks') + ' failing';
|
||||
}
|
||||
}.property('checkMessage'),
|
||||
|
||||
//
|
||||
// Boolean of whether or not there are failing checks in the service.
|
||||
// This is used to set color backgrounds and so on.
|
||||
//
|
||||
hasFailingChecks: function() {
|
||||
return (this.get('failingChecks') > 0);
|
||||
}.property('hasFailingChecks')
|
||||
});
|
||||
|
20
ui/javascripts/app/router.js
Normal file
20
ui/javascripts/app/router.js
Normal file
|
@ -0,0 +1,20 @@
|
|||
window.App = Ember.Application.create({
|
||||
rootElement: "#app",
|
||||
LOG_TRANSITIONS: true
|
||||
});
|
||||
|
||||
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.resource("kv", { path: "/kv" });
|
||||
});
|
||||
|
||||
this.route("index", { path: "/" });
|
||||
});
|
||||
|
174
ui/javascripts/app.js → ui/javascripts/app/routes.js
Executable file → Normal file
174
ui/javascripts/app.js → ui/javascripts/app/routes.js
Executable file → Normal file
|
@ -1,25 +1,3 @@
|
|||
window.App = Ember.Application.create({
|
||||
rootElement: "#app",
|
||||
LOG_TRANSITIONS: true,
|
||||
currentPath: ''
|
||||
});
|
||||
|
||||
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.resource("kv", { path: "/kv" });
|
||||
});
|
||||
|
||||
this.route("index", { path: "/" });
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Superclass to be used by all of the main routes below. All routes
|
||||
// but the IndexRoute share the need to have a datacenter set.
|
||||
|
@ -56,91 +34,20 @@ App.IndexRoute = Ember.Route.extend({
|
|||
}
|
||||
});
|
||||
|
||||
//
|
||||
// path: /
|
||||
//
|
||||
// The index is for choosing datacenters.
|
||||
//
|
||||
App.IndexController = Ember.Controller.extend({
|
||||
// The base DC route
|
||||
|
||||
App.DcRoute = App.BaseRoute.extend({
|
||||
//
|
||||
// Set the model on the route. We look up the specific service
|
||||
// by it's identifier passed via the route
|
||||
//
|
||||
model: function(params) {
|
||||
return params.dc;
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// A Consul service.
|
||||
//
|
||||
App.Service = Ember.Object.extend({
|
||||
//
|
||||
// The number of failing checks within the service.
|
||||
//
|
||||
failingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'critical').get('length');
|
||||
}.property('failingChecks'),
|
||||
|
||||
//
|
||||
// The number of passing checks within the service.
|
||||
//
|
||||
passingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'passing').get('length');
|
||||
}.property('passingChecks'),
|
||||
|
||||
//
|
||||
// The formatted message returned for the user which represents the
|
||||
// number of checks failing or passing. Returns `1 passing` or `2 failing`
|
||||
//
|
||||
checkMessage: function() {
|
||||
if (this.get('hasFailingChecks') === false) {
|
||||
return this.get('passingChecks') + ' passing';
|
||||
} else {
|
||||
return this.get('failingChecks') + ' failing';
|
||||
}
|
||||
}.property('checkMessage'),
|
||||
|
||||
//
|
||||
// Boolean of whether or not there are failing checks in the service.
|
||||
// This is used to set color backgrounds and so on.
|
||||
//
|
||||
hasFailingChecks: function() {
|
||||
return (this.get('failingChecks') > 0);
|
||||
}.property('hasFailingChecks')
|
||||
});
|
||||
|
||||
//
|
||||
// A Consul Node
|
||||
//
|
||||
App.Node = Ember.Object.extend({
|
||||
//
|
||||
// The number of failing checks within the service.
|
||||
//
|
||||
failingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'critical').get('length');
|
||||
}.property('failingChecks'),
|
||||
|
||||
//
|
||||
// The number of passing checks within the service.
|
||||
//
|
||||
passingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'passing').get('length');
|
||||
}.property('passingChecks'),
|
||||
|
||||
//
|
||||
// The formatted message returned for the user which represents the
|
||||
// number of checks failing or passing. Returns `1 passing` or `2 failing`
|
||||
//
|
||||
checkMessage: function() {
|
||||
if (this.get('hasFailingChecks') === false) {
|
||||
return this.get('passingChecks') + ' passing';
|
||||
} else {
|
||||
return this.get('failingChecks') + ' failing';
|
||||
}
|
||||
}.property('checkMessage'),
|
||||
|
||||
//
|
||||
// Boolean of whether or not there are failing checks in the service.
|
||||
// This is used to set color backgrounds and so on.
|
||||
//
|
||||
hasFailingChecks: function() {
|
||||
return (this.get('failingChecks') > 0);
|
||||
}.property('hasFailingChecks')
|
||||
});
|
||||
/// services
|
||||
|
||||
//
|
||||
// Display all the services, allow to drill down into the specific services.
|
||||
|
@ -161,16 +68,6 @@ App.ServicesRoute = App.BaseRoute.extend({
|
|||
});
|
||||
|
||||
|
||||
App.DcRoute = App.BaseRoute.extend({
|
||||
//
|
||||
// Set the model on the route. We look up the specific service
|
||||
// by it's identifier passed via the route
|
||||
//
|
||||
model: function(params) {
|
||||
return params.dc;
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// Display an individual service, as well as the global services in the left
|
||||
// column.
|
||||
|
@ -195,55 +92,8 @@ App.ServicesShowRoute = App.BaseRoute.extend({
|
|||
}
|
||||
});
|
||||
|
||||
//
|
||||
// DC
|
||||
//
|
||||
App.DcView = Ember.View.extend({
|
||||
templateName: 'dc',
|
||||
})
|
||||
|
||||
//
|
||||
// Services
|
||||
//
|
||||
App.ServicesView = Ember.View.extend({
|
||||
templateName: 'services',
|
||||
})
|
||||
|
||||
//
|
||||
// Services
|
||||
//
|
||||
App.ServicesShowView = 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: 'service'
|
||||
})
|
||||
|
||||
|
||||
//
|
||||
// path: /:dc
|
||||
//
|
||||
App.DcController = Ember.Controller.extend({
|
||||
})
|
||||
|
||||
//
|
||||
// Nodes
|
||||
//
|
||||
App.NodesView = Ember.View.extend({
|
||||
templateName: 'nodes'
|
||||
})
|
||||
|
||||
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: 'node'
|
||||
})
|
||||
|
||||
/// nodes
|
||||
|
||||
//
|
||||
// Display an individual node, as well as the global nodes in the left
|
43
ui/javascripts/app/views.js
Normal file
43
ui/javascripts/app/views.js
Normal file
|
@ -0,0 +1,43 @@
|
|||
|
||||
//
|
||||
// DC
|
||||
//
|
||||
|
||||
App.DcView = Ember.View.extend({
|
||||
templateName: 'dc',
|
||||
})
|
||||
|
||||
//
|
||||
// Services
|
||||
//
|
||||
App.ServicesView = Ember.View.extend({
|
||||
templateName: 'services',
|
||||
})
|
||||
|
||||
App.ServicesShowView = 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: 'service'
|
||||
})
|
||||
|
||||
|
||||
//
|
||||
// Nodes
|
||||
//
|
||||
|
||||
App.NodesView = Ember.View.extend({
|
||||
templateName: 'nodes'
|
||||
})
|
||||
|
||||
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: 'node'
|
||||
})
|
||||
|
Loading…
Reference in a new issue