mirror of https://github.com/status-im/consul.git
ui: initial ember application
This commit is contained in:
Jack Pearkes
parent
83ebad5491
commit
d669e78e3b
|
|
@ -7,22 +7,104 @@
|
|||
<link rel="stylesheet" href="static/base.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-12">
|
||||
<div id="app">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/x-handlebars">
|
||||
<h1>Base</h1>
|
||||
{{outlet}}
|
||||
</script>
|
||||
|
||||
<script type="text/x-handlebars" id="index">
|
||||
<ul>
|
||||
|
||||
<script type="text/x-handlebars" data-template-name="default_layout">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12 topbar">
|
||||
|
||||
<div class="col-md-1 col-sm-2">
|
||||
<a href="#"><div class="top-brand"></div></a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 col-sm-3">
|
||||
<a class="btn btn-primary" href="#">Services</a>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-3">
|
||||
<a class="btn btn-default" href="#">Nodes</a>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-3">
|
||||
<a class="btn btn-default" href="#">Key/Value</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0">
|
||||
<a class="btn btn-warning" href="#">5 checks failing</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 col-sm-3">
|
||||
<a class="btn btn-dropdown btn-default" href="#">
|
||||
us-east-1
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{yield}}
|
||||
</script>
|
||||
|
||||
<script type="text/x-handlebars" id="services">
|
||||
<div class="col-md-6">
|
||||
|
||||
{{#each item in model}}
|
||||
<li>{{item}}</li>
|
||||
<div class="list-group-item">
|
||||
<div {{bind-attr class="item.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
|
||||
<h4 class="list-group-item-heading">
|
||||
<a href="#" class="subtle">{{item.Name}}</a>
|
||||
<small>{{item.Name}}</small>
|
||||
<div class="heading-helper">
|
||||
<a class="subtle" href="#">{{item.checkMessage}}</a>
|
||||
</div>
|
||||
</h4>
|
||||
<ul class="list-inline">
|
||||
{{#each node in item.Nodes }}
|
||||
<li>{{#link-to 'node' controllers.application.getDc node class='subtle'}}{{node}}{{/link-to}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/x-handlebars" id="index">
|
||||
<div class="col-md-8 col-md-offset-2 vertical-center">
|
||||
{{#each item in model}}
|
||||
<a {{action 'selectDc' item}}>
|
||||
<div class="panel panel-success panel-link">
|
||||
<div class="panel-bar"></div>
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
{{item}}
|
||||
<small>{{item}}</small>
|
||||
<span class="panel-note">all checks passing</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="javascripts/libs/jquery-1.10.2.js"></script>
|
||||
<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>
|
||||
|
||||
<!-- to activate the test runner, add the "?test" query string parameter -->
|
||||
|
|
|
|||
|
|
@ -1,11 +1,96 @@
|
|||
App = Ember.Application.create();
|
||||
window.App = Ember.Application.create({
|
||||
rootElement: "#app",
|
||||
LOG_TRANSITIONS: true,
|
||||
currentPath: ''
|
||||
});
|
||||
|
||||
App.Router.map(function() {
|
||||
// put your routes here
|
||||
this.route("index", { path: "/" });
|
||||
this.route("services", { path: "/:dc/services" });
|
||||
this.route("nodes", { path: "/:dc/nodes" });
|
||||
this.route("node", { path: "/:dc/nodes/:name" });
|
||||
this.route("kv", { path: "/:dc/kv" });
|
||||
});
|
||||
|
||||
App.IndexRoute = Ember.Route.extend({
|
||||
model: function() {
|
||||
return ['red', 'yellow', 'blue'];
|
||||
App.ApplicationController = Ember.Controller.extend({
|
||||
setDc: function(dc) {
|
||||
localStorage.setItem("current_dc", dc);
|
||||
},
|
||||
|
||||
getDc: function() {
|
||||
return localStorage.getItem("current_dc");
|
||||
}.property("getDc")
|
||||
});
|
||||
|
||||
App.ServicesController = Ember.Controller.extend({
|
||||
needs: ['application']
|
||||
})
|
||||
|
||||
// Superclass to be used by all of the main routes below
|
||||
App.BaseRoute = Ember.Route.extend({
|
||||
activate: function() {
|
||||
var controller = this.controllerFor('application');
|
||||
if (controller.getDc === null) {
|
||||
this.transitionTo('index');
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Does not extend baseroute due to it not needing
|
||||
// to check for an active DC
|
||||
App.IndexRoute = Ember.Route.extend({
|
||||
model: function() {
|
||||
return window.fixtures.dcs;
|
||||
},
|
||||
afterModel: function(dcs, transition) {
|
||||
if (dcs.get('length') === 1) {
|
||||
this.get('controllers.application').setDc(dcs[0])
|
||||
this.transitionTo('services', dcs[0]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
App.IndexController = Ember.Controller.extend({
|
||||
needs: ['application'],
|
||||
|
||||
actions: {
|
||||
selectDc: function(dc) {
|
||||
this.get('controllers.application').setDc(dc)
|
||||
this.transitionToRoute('services', dc)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
App.Service = Ember.Object.extend({
|
||||
failingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'critical').get('length');
|
||||
}.property('failingChecks'),
|
||||
|
||||
passingChecks: function() {
|
||||
return this.get('Checks').filterBy('Status', 'passing').get('length');
|
||||
}.property('passingChecks'),
|
||||
|
||||
checkMessage: function() {
|
||||
if (this.get('hasFailingChecks') === false) {
|
||||
return this.get('passingChecks') + ' passing';
|
||||
} else {
|
||||
return this.get('failingChecks') + ' failing';
|
||||
}
|
||||
}.property('checkMessage'),
|
||||
|
||||
hasFailingChecks: function() {
|
||||
return (this.get('failingChecks') > 0);
|
||||
}.property('hasFailingChecks')
|
||||
});
|
||||
|
||||
App.ServicesRoute = App.BaseRoute.extend({
|
||||
model: function() {
|
||||
return [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
App.ServicesView = Ember.View.extend({
|
||||
layoutName: 'default_layout'
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
//
|
||||
// I intentionally am not using ember-data and the fixture
|
||||
// adapter. I'm not confident the Consul UI API will be compatible
|
||||
// without a bunch of wrangling, and it's really not enough updating
|
||||
// of the models to justify the use of such a big component. getJSON
|
||||
// *should* be enough.
|
||||
//
|
||||
|
||||
window.fixtures = {}
|
||||
|
||||
fixtures.services = [
|
||||
{
|
||||
"Name": "vagrant-cloud-http",
|
||||
"Checks": [
|
||||
{
|
||||
"Name": "serfHealth",
|
||||
"Status": "passing"
|
||||
},
|
||||
{
|
||||
"Name": "fooHealth",
|
||||
"Status": "critical"
|
||||
},
|
||||
{
|
||||
"Name": "bazHealth",
|
||||
"Status": "passing"
|
||||
}
|
||||
],
|
||||
"Nodes": [
|
||||
"node-10-0-1-109",
|
||||
"node-10-0-1-102",
|
||||
"node-10-0-1-103"
|
||||
]
|
||||
},
|
||||
{
|
||||
"Name": "vagrant-share-mux",
|
||||
"Checks": [
|
||||
{
|
||||
"Name": "serfHealth",
|
||||
"Status": "passing"
|
||||
},
|
||||
{
|
||||
"Name": "fooHealth",
|
||||
"Status": "passing"
|
||||
},
|
||||
{
|
||||
"Name": "bazHealth",
|
||||
"Status": "passing"
|
||||
}
|
||||
],
|
||||
"Nodes": [
|
||||
"node-10-0-1-109",
|
||||
"node-10-0-1-102",
|
||||
"node-10-0-1-103"
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
fixtures.dcs = ['nyc1', 'sf1', 'sg1']
|
||||
|
||||
localStorage.setItem("current_dc", fixtures.dcs[0]);
|
||||
|
|
@ -64,4 +64,8 @@
|
|||
background-color: $orange-faded;
|
||||
}
|
||||
}
|
||||
|
||||
&.panel-link:hover {
|
||||
background-color: lighten($gray-background, 8%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@
|
|||
@import "buttons";
|
||||
@import "lists";
|
||||
|
||||
|
||||
.vertical-center {
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
.row {
|
||||
&.colored {
|
||||
background-color: $light-purple;
|
||||
|
|
|
|||
Loading…
Reference in New Issue