« back to all changes in this revision
Viewing changes to reconciler/ui/static/main.js
- browse files at revision 143
- compare with another revision
- download diff
- download tarball
- view history from revision 143
- Committer: Whit Morriss
- Date: 2014-10-20 21:48:10 UTC
- mfrom: (142.1.6 reconciler-ui)
- Revision ID: whit.morriss@canonical.com-20141020214810-rn05b3z12jachor6
merge
added
removed
reconciler/ui/static/main.js
1
//var dashsocket = SocketService('dashboard.ws');
2
3
1
var Tab = $$({name:null,
4
2
active:null,
5
3
page: null},
6
4
{format: '<a class="item" data-bind="name" />'},
7
5
{'click &': function() {
8
this.model.set({active: true});
9
10
var newactive = this.model.get('name');
6
location.hash = this.model.get('name');
11
7
this.trigger('tab-activated', this);
12
13
var page = this.model.get('page');
14
page.view.$().show();
15
8
},
16
9
17
10
'change:active': function(e) {
11
var page = this.model.get('page');
18
12
if (this.model.get('active') == true) {
19
13
this.view.$().addClass('active');
14
page.view.$().show();
20
15
} else {
21
16
this.view.$().removeClass('active');
22
this.model.get('page')
23
.view.$().hide();
17
page.view.$().hide();
24
18
}
25
19
}
26
20
}
31
25
$$({tabs: [], active: null},
32
26
{format: '<div class="ui tabular menu" />'},
33
27
{'create': function(){
34
var tabs = this.model.get('tabs');
35
this.model.set({active:tabs[0]});
36
tabs.forEach(function(t){
37
this.append(t);
38
}, this);
39
},
40
41
'child:tab-activated': function(e, obj){
42
this.model.get('active')
43
.model.get('page')
44
.view.$()
45
.toggle();
46
47
this.model.set({active: obj});
48
this.each(function(){
49
if (this != obj){
50
this.model.set({'active': null});
51
}
28
var tabs = this.model.get('tabs');
29
tabs.forEach(function(t){
30
this.append(t);
31
}, this);
32
33
this.tabByName = function(name) {
34
var result = this.model.get('tabs').filter(function(tab) {
35
return tab.model.get('name') == name;
36
});
37
return result[0];
38
}
39
},
40
41
'change:active': function(e) {
42
var active = this.model.get('active');
43
this.model.get('tabs').forEach(function(tab) {
44
tab.model.set({active: tab === active});
52
45
});
46
},
47
48
'child:tab-activated': function(e, active) {
49
this.model.set({active: active});
53
50
}
54
51
});
55
52
74
71
+ "<div class='three wide column'>"
75
72
+ "<div class='ui ribbon label' data-bind='label'/>"
76
73
+ "</div>"},
77
{'create': function(){
78
console.log(this.model.get("label"));
79
}});
74
{});
80
75
81
76
82
77
var StateCols = $$({label: null},
95
90
.append($$(StateCol, {label: "Current"}));
96
91
}});
97
92
98
var Health = $$(Page, {title:'Health', content: null});
93
94
var HealthEntry = $$({service: null,
95
unit: null,
96
rowspan: 1,
97
colspan: 1,
98
health: null,
99
details: null},
100
{format: '<tr/>'},
101
{'create': function() {
102
var dispositions = {pass: 'positive',
103
warn: 'warning',
104
fail: 'negative'};
105
var service = this.model.get('service');
106
var unit = this.model.get('unit');
107
var rowspan = this.model.get('rowspan');
108
var health = this.model.get('health');
109
var disposition = dispositions[health]
110
var details = this.model.get('details');
111
if (!details) {
112
details = health == 'pass' ? 'Ok' : 'Not ok';
113
}
114
if (service) {
115
this.append($$(
116
{service: service,
117
rowspan: rowspan},
118
'<th data-bind="service, rowspan=rowspan" class="three wide"/>'));
119
}
120
if (unit) {
121
this.append($$(
122
{unit: unit,
123
disposition: disposition + " three wide"},
124
'<td data-bind="unit, class=disposition"/>'));
125
}
126
this.append($$(
127
{details: details,
128
disposition: disposition,
129
colspan: unit ? 1 : 2},
130
'<td data-bind="details, class=disposition, colspan=colspan"/></tr>'));
131
}});
132
133
var Health = $$(Page,
134
{title:'Health', data: []},
135
{format: '<table class="ui column table segment"/>'},
136
{'change:data': function() {
137
var data = this.model.get('data');
138
this.empty();
139
data.forEach(function(service) {
140
if (!service.unhealthy_units.length) {
141
this.append($$(HealthEntry, {service: service.name,
142
health: service.health,
143
details: null}));
144
} else {
145
service.unhealthy_units.forEach(function(unit, i) {
146
var entry = {unit: unit.name,
147
health: unit.health,
148
details: unit.state};
149
if (i == 0) {
150
entry.service = service.name;
151
entry.rowspan = service.unhealthy_units.length;
152
}
153
this.append($$(HealthEntry, entry));
154
}, this);
155
}
156
}, this);
157
}
158
});
159
99
160
var Waterfall = $$(Page, {title:'Waterfall', content: null});
100
161
var Logs = $$(Page, {title:'Logs', content: null});
101
162
102
163
164
var MessageHandler = function() {
165
var $this = this;
166
$this.handlers = {
167
health: function(data) {
168
Health.model.set({data: data});
169
}
170
}
171
172
$this.dispatch = function(message) {
173
var data = JSON.parse(message.data);
174
var handler = $this.handlers[data.message_type];
175
if (handler) {
176
handler(data.message_data);
177
} else {
178
console.error('Unknown message type:', data.message_type)
179
}
180
}
181
return $this;
182
}
183
184
103
185
$(document).ready(
104
186
function() {
105
187
var pagelist = [State, Health, Waterfall, Logs];
111
193
var tabcol = $$(TabCollection, {tabs: tabs});
112
194
$$.document.append(tabcol);
113
195
196
var tab_name = location.hash.replace('#', '');
197
tabcol.model.set({active: tabcol.tabByName(tab_name) || tabs[0]});
198
114
199
pagelist.forEach(function(page){
115
200
$$.document.append(page);
116
201
});
117
202
118
var state = tabs[0];
119
state.model.set({active: true});
120
121
122
var page = state.model.get('page');
123
page.view.$().show();
203
var protocol = location.protocol.replace('http', 'ws');
204
var ws = new WebSocket(protocol + '//' + location.host + '/dashboard.ws');
205
ws.onmessage = new MessageHandler().dispatch;
206
ws.onopen = function() {
207
ws.send(JSON.stringify({message_type: 'health'}));
208
};
124
209
});
Loggerhead is a web-based interface for Breezy
Version: 2.0.1