| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129 |
1
1
1
1
1
1
1
6
1
1
5
5
5
5
5
5
1
1
| 'use strict';
;require.register("views/main/host/log_metrics", function (exports, require, module) {
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var App = require('app');
/**
* @typedef {Ember.Object} LogLevelItemObject
* @property {string} level level name
* @property {number} counter
*/
/**
* @typedef {Object} ServiceLogMetricsObject
* @property {App.Service} service model instance
* @property {LogLevelItemObject[]} logs
*/
App.MainHostLogMetrics = Em.View.extend({
templateName: require('templates/main/host/log_metrics'),
classNames: ['host-log-metrics'],
/**
* @type {ServiceLogMetricsObject[]}
*/
logsData: function () {
var services = this.get('content.hostComponents').mapProperty('service').uniq();
var logLevels = ['fatal', 'critical', 'error', 'warning', 'info', 'debug'];
return services.map(function (service) {
var levels = logLevels.map(function (level) {
return Em.Object.create({
level: level,
counter: Math.ceil(Math.random() * 10)
});
});
return Em.Object.create({
service: service,
logs: levels
});
});
}.property('content'),
/**
* @type {Ember.View} Pie Chart view
* @extends App.PieChartView
*/
chartView: App.ChartPieView.extend({
classNames: ['log-metrics-chart'],
w: 150,
h: 150,
stroke: '#fff',
strokeWidth: 1,
levelColors: {
FATAL: '#B10202',
CRITICAL: '#E00505',
ERROR: App.healthStatusRed,
INFO: App.healthStatusGreen,
WARNING: App.healthStatusOrange,
DEBUG: '#1e61f7'
},
innerR: 36,
donut: d3.layout.pie().sort(null).value(function (d) {
return d.get('counter');
}),
prepareChartData: function prepareChartData(content) {
this.set('data', content.get('logs'));
},
didInsertElement: function didInsertElement() {
this.prepareChartData(this.get('content'));
this._super();
this.appendLabels();
this.formatCenterText();
this.attachArcEvents();
this.colorizeArcs();
},
attachArcEvents: function attachArcEvents() {
var self = this;
this.get('svg').selectAll('.arc').on('mouseover', function (d) {
self.get('svg').select('g.center-text').select('text').text(d.data.get('level').capitalize() + ": " + d.data.get('counter'));
}).on('mouseout', function () {
self.get('svg').select('g.center-text').select('text').text('');
});
},
formatCenterText: function formatCenterText() {
this.get('svg').append('svg:g').attr('class', 'center-text').attr('render-order', 1).append('svg:text').attr('transform', "translate(0,0)").attr('text-anchor', 'middle').attr('stroke', '#000').attr('stroke-width', 0);
},
appendLabels: function appendLabels() {
var labelArc = d3.svg.arc().outerRadius(this.get('outerR') - 15).innerRadius(this.get('outerR') - 15);
this.get('svg').selectAll('.arc').append('text').attr('transform', function (d) {
return "translate(" + labelArc.centroid(d) + ")";
}).attr('stroke', '#000').attr('stroke-width', 0).attr('font-size', '12px').attr('dy', '.50em').text(function (d) {
return d.data.get('counter');
});
},
colorizeArcs: function colorizeArcs() {
var self = this;
this.get('svg').selectAll('.arc path').attr('fill', function (d) {
return self.get('levelColors')[d.data.get('level').toUpperCase()];
});
}
}),
transitionByService: function transitionByService(e) {
var service = e.context;
App.router.transitionTo('logs', { query: '?service_name=' + service.get('service.serviceName') });
}
});
}); |