aws-reporting 0.9.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,209 @@
1
+ body {
2
+ font: 10px sans-serif;
3
+ background-color: #333333;
4
+ color:#ffffff;
5
+ }
6
+
7
+ svg{
8
+ background-color:#111111;
9
+ stroke:#ffffff;
10
+ margin:0em 1em 2em 1em;
11
+ }
12
+
13
+ text{
14
+ stroke: none;
15
+ fill: #aaa;
16
+ font: 10px sans-serif;
17
+ stroke-width: 1.0px;
18
+ shape-rendering:crispEdges;
19
+ text-rendering:geometricPrecision;
20
+ }
21
+
22
+ .axis path,
23
+ .axis line {
24
+ fill: none;
25
+ stroke: #888;
26
+ shape-rendering: crispEdges;
27
+ }
28
+
29
+ .max_line {
30
+ fill: none;
31
+ stroke: #e69f00;
32
+ stroke-width: 0.5px;
33
+ }
34
+
35
+ .min_line {
36
+ fill: none;
37
+ stroke: #56b4e9;
38
+ stroke-width: 0.5px;
39
+ }
40
+
41
+ .avg_line {
42
+ fill: none;
43
+ stroke: #009e73;
44
+ stroke-width: 1.0px;
45
+ }
46
+
47
+ .sum_line {
48
+ fill: none;
49
+ stroke: #9400D3;
50
+ stroke: #D8BFD8;
51
+ stroke-width: 0.6px;
52
+ }
53
+
54
+ .count_line {
55
+ fill: none;
56
+ stroke: #e51e10;
57
+ stroke-width: 0.6px;
58
+ }
59
+
60
+ .tick line{
61
+ opacity: 0.4;
62
+ }
63
+
64
+ .test{
65
+ background-color:#ffffff;
66
+ }
67
+
68
+ .status-ok{
69
+ border-style:solid;
70
+ border-width:1px;
71
+ border-color:#699e00;
72
+ }
73
+
74
+ .status-alarm{
75
+ border-style:solid;
76
+ border-width:1px;
77
+ border-color:#cc0001;
78
+ }
79
+
80
+ .status-none{
81
+ border-style:solid;
82
+ border-width:1px;
83
+ border-color:#111111;
84
+ }
85
+
86
+ a{
87
+ color:#33b5e5;
88
+ }
89
+
90
+ #header{
91
+ height:45px;
92
+ background-color:#111111;
93
+ margin:1em 0em 1em 0em;
94
+ padding:1em;
95
+ font: 12px sans-serif;
96
+ position:relative;
97
+ }
98
+
99
+ #navigation{
100
+ width:400px;
101
+ height:100%;
102
+ float:left;
103
+ background-color:#111111;
104
+ font: 12px sans-serif;
105
+ padding:0.5em;
106
+ }
107
+
108
+ #content{
109
+ margin-left:410px;
110
+ }
111
+
112
+ table{
113
+ width: 100%;
114
+ border-collapse: collapse;
115
+ margin-top:1em;
116
+ margin-bottom:1em;
117
+ }
118
+
119
+ table th{
120
+ vertical-align: top;
121
+ text-align: left;
122
+ padding: 6px;
123
+ }
124
+
125
+ .odd{
126
+ background-color:#222222;
127
+ }
128
+
129
+ .even{
130
+ background-color:#111111;
131
+ }
132
+
133
+ h1{
134
+ font: 14px sans-serif;
135
+ color: #e5ac0e;
136
+ cursor: pointer;
137
+
138
+ background: #111111; /* Old browsers */
139
+ background: -moz-linear-gradient(top, #111111 0%, #333333 70%, #111111 100%, #131313 100%); /* FF3.6+ */
140
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111111), color-stop(70%,#333333), color-stop(100%,#111111), color-stop(100%,#131313)); /* Chrome,Safari4+ */
141
+ background: -webkit-linear-gradient(top, #111111 0%,#333333 70%,#111111 100%,#131313 100%); /* Chrome10+,Safari5.1+ */
142
+ background: -o-linear-gradient(top, #111111 0%,#333333 70%,#111111 100%,#131313 100%); /* Opera 11.10+ */
143
+ background: -ms-linear-gradient(top, #111111 0%,#333333 70%,#111111 100%,#131313 100%); /* IE10+ */
144
+ background: linear-gradient(to bottom, #111111 0%,#333333 70%,#111111 100%,#131313 100%); /* W3C */
145
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
146
+ }
147
+
148
+ h2{
149
+ font: 14px sans-serif;
150
+ background: #111111;
151
+ margin-left:10px;
152
+ padding-top:0.5em;
153
+ padding-bottom:0.5em;
154
+ padding-left:0.5em;
155
+ color:#aaa;
156
+ }
157
+
158
+ h3{
159
+ font: 14px sans-serif;
160
+ }
161
+
162
+ #report-info{
163
+ background: #111111;
164
+ margin-left:10px;
165
+ margin-bottom:10px;
166
+ padding:10px;
167
+ font: 12px sans-serif;
168
+ }
169
+
170
+ #alarms{
171
+ background: #111111;
172
+ margin-left:10px;
173
+ padding:10px;
174
+ font: 12px sans-serif;
175
+ }
176
+
177
+ .state-alarm{
178
+ color:#cc0001;
179
+ font-weight:bold;
180
+ }
181
+
182
+ .state-ok{
183
+ color:#699e00;
184
+ font-weight:bold;
185
+ }
186
+
187
+ #logo{
188
+ width:200px;
189
+ float:left;
190
+ }
191
+
192
+ #logo a img{
193
+ border-bottom-style:solid;
194
+ border-bottom-color:#111111;
195
+ border-bottom-width:3px;
196
+ padding-bottom:5px;
197
+ }
198
+
199
+ #logo a:hover img{
200
+ border-bottom-style:solid;
201
+ border-bottom-color:#33b5e5;
202
+ border-bottom-width:3px;
203
+ padding-bottom:5px;
204
+ }
205
+
206
+ #github{
207
+ margin-left:210px;
208
+ text-align:right;
209
+ }
Binary file
@@ -0,0 +1,41 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>AWS-Reporting</title>
6
+ <link rel="stylesheet" href="css/nightmare.css">
7
+ <script src="js/lib/d3.min.js"></script>
8
+ <script src="js/lib/jquery-1.11.1.min.js"></script>
9
+ <script src="js/lib/jquery.hashchange.min.js"></script>
10
+ <script src="js/graph.js"></script>
11
+ <script src="js/legend.js"></script>
12
+ <script src="js/gui.js"></script>
13
+ <script>
14
+ $(document).ready(initialize);
15
+ $(window).hashchange(move);
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <div id="header">
20
+ <div id="logo">
21
+ <a href="#"><img src="img/logo.png"></a>
22
+ </div>
23
+ <div id="github">
24
+ <a href="https://github.com/xmisao/aws-reporting">Go to GitHub Page</a>
25
+ </div>
26
+ </div>
27
+ <div id="navigation">
28
+ <div id="metrics">
29
+ </div>
30
+ </div>
31
+ <div id="content">
32
+ <h2 id="title"></h2>
33
+ <div id="report-info">
34
+ </div>
35
+ <div id="alarms">
36
+ </div>
37
+ <div id="graph">
38
+ </div>
39
+ </div>
40
+ </body>
41
+ </html>
@@ -0,0 +1,159 @@
1
+ function NaN2null(val){
2
+ if(isNaN(val)){
3
+ return null;
4
+ } else {
5
+ return val;
6
+ }
7
+ }
8
+
9
+ function drawGraph(json_path){
10
+ var margin = {top: 40, right: 20, bottom: 60, left: 50},
11
+ width = 600 - margin.left - margin.right,
12
+ height = 290 - margin.top - margin.bottom;
13
+
14
+ var parseDate = d3.time.format.iso.parse
15
+
16
+ var x = d3.time.scale()
17
+ .range([0, width]);
18
+
19
+ var y = d3.scale.linear()
20
+ .range([height, 0]);
21
+
22
+ var xAxis = d3.svg.axis()
23
+ .scale(x)
24
+ .orient("bottom")
25
+ .innerTickSize(-height)
26
+ .outerTickSize(0)
27
+ .tickPadding(10);
28
+
29
+ var yAxis = d3.svg.axis()
30
+ .scale(y)
31
+ .orient("left")
32
+ .innerTickSize(-width)
33
+ .outerTickSize(0)
34
+ .tickPadding(10)
35
+ .tickFormat(d3.format('s'));
36
+
37
+ var max_line = d3.svg.line()
38
+ .x(function(d) { return x(d.timestamp); })
39
+ .y(function(d) { return y(d.maximum); });
40
+
41
+ var min_line = d3.svg.line()
42
+ .x(function(d) { return x(d.timestamp); })
43
+ .y(function(d) { return y(d.minimum); });
44
+
45
+ var avg_line = d3.svg.line()
46
+ .x(function(d) { return x(d.timestamp); })
47
+ .y(function(d) { return y(d.average); });
48
+
49
+ var sum_line = d3.svg.line()
50
+ .x(function(d) { return x(d.timestamp); })
51
+ .y(function(d) { return y(d.sum); });
52
+
53
+ var count_line = d3.svg.line()
54
+ .x(function(d) { return x(d.timestamp); })
55
+ .y(function(d) { return y(d.count); });
56
+
57
+ var svg_element = d3.select("#graph").append("svg")
58
+ .attr("width", width + margin.left + margin.right)
59
+ .attr("height", height + margin.top + margin.bottom)
60
+
61
+ var svg = svg_element.append("g")
62
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
63
+
64
+ d3.json(json_path, function(error, info_data) {
65
+ info = info_data.info;
66
+ data = info_data.datapoints;
67
+ data.forEach(function(d) {
68
+ d.timestamp = parseDate(d.timestamp);
69
+ d.maximum = +d.maximum;
70
+ d.minimum = +d.minimum;
71
+ d.average = +d.average;
72
+ d.sum = +d.sum;
73
+ d.count = +d.sample_count;
74
+ });
75
+
76
+ x.domain([parseDate(info.start_time), parseDate(info.end_time)]);
77
+ y.domain([0,
78
+ Math.max(0.001, d3.extent(data, function(d) { return Math.max(NaN2null(d.minimum), NaN2null(d.average), NaN2null(d.maximum), NaN2null(d.sum), NaN2null(d.count)); })[1])]);
79
+
80
+ svg.append("text")
81
+ .text(info.metric_name)
82
+ .attr("transform", "translate(" + -40 + "," + - margin.top / 2 + ")")
83
+ .attr("text-anchor", "left")
84
+ .style("font-size", "14px")
85
+ .style("font-weight", "bold")
86
+ .append("tspan")
87
+ .text('(' + info.unit + ')')
88
+ .style("font-size", "10px")
89
+ .attr("dx", "5");
90
+
91
+ svg.append("g")
92
+ .attr("class", "x axis")
93
+ .attr("transform", "translate(0," + height + ")")
94
+ .call(xAxis);
95
+
96
+ svg.append("g")
97
+ .attr("class", "y axis")
98
+ .call(yAxis)
99
+
100
+ var lines = 0;
101
+ if(info.statistics.indexOf("Maximum") >= 0){
102
+ lines++;
103
+ svg.append("path")
104
+ .datum(data)
105
+ .attr("class", "max_line")
106
+ .attr("d", max_line)
107
+ .attr("data-legend", 'Max');
108
+ }
109
+ if(info.statistics.indexOf("Minimum") >= 0){
110
+ lines++;
111
+ svg.append("path")
112
+ .datum(data)
113
+ .attr("class", "min_line")
114
+ .attr("d", min_line)
115
+ .attr("data-legend", 'Min');
116
+ }
117
+ if(info.statistics.indexOf("Average") >= 0){
118
+ lines++;
119
+ svg.append("path")
120
+ .datum(data)
121
+ .attr("class", "avg_line")
122
+ .attr("d", avg_line)
123
+ .attr("data-legend", 'Avg');
124
+ }
125
+ if(info.statistics.indexOf("Sum") >= 0){
126
+ lines++;
127
+ svg.append("path")
128
+ .datum(data)
129
+ .attr("class", "sum_line")
130
+ .attr("d", sum_line)
131
+ .attr("data-legend", 'Sum');
132
+ }
133
+ if(info.statistics.indexOf("TotalCount") >= 0){
134
+ lines++;
135
+ svg.append("path")
136
+ .datum(data)
137
+ .attr("class", "count_line")
138
+ .attr("d", count_line)
139
+ .attr("data-legend", 'Count');
140
+ }
141
+
142
+ legend = svg.append("g")
143
+ .attr("class","legend")
144
+ .style("font-size","12px")
145
+ .call(d3.legend);
146
+
147
+ //legend_bb = legend.getBBox();
148
+ //console.log(legend_bb);
149
+ legend.attr("transform","translate(" + (270 - lines * 30) + "," + 230 + ")")
150
+
151
+ if(info.status == 'OK'){
152
+ svg_element.attr('class', 'status-ok');
153
+ } else if(info.status == 'ALARM') {
154
+ svg_element.attr('class', 'status-alarm');
155
+ } else {
156
+ svg_element.attr('class', 'status-none');
157
+ }
158
+ });
159
+ }
@@ -0,0 +1,294 @@
1
+ function get_query_string(){
2
+ var result = {};
3
+ var query = window.location.hash.substring(2);
4
+ var parameters = query.split( '&' );
5
+ for( var i = 0; i < parameters.length; i++ )
6
+ {
7
+ var element = parameters[ i ].split( '=' );
8
+ var paramName = decodeURIComponent( element[ 0 ] );
9
+ var paramValue = decodeURIComponent( element[ 1 ] );
10
+ result[ paramName ] = paramValue;
11
+ }
12
+ return result;
13
+ }
14
+
15
+ function get_param(){
16
+ var query = get_query_string();
17
+ if(query.param){
18
+ var param = JSON.parse(decodeURIComponent(query.param));
19
+ return param;
20
+ } else {
21
+ return null;
22
+ }
23
+ }
24
+
25
+ function state_decorate(state){
26
+ if(state == 'OK'){
27
+ return '<span class="state-ok">' + state + '</span>'
28
+ } else if(state == 'ALARM'){
29
+ return '<span class="state-alarm">' + state + '</span>'
30
+ } else {
31
+ return state;
32
+ }
33
+ }
34
+
35
+ function show_report_info(){
36
+ var header = "<h3>Report Information</h3>";
37
+ var table = "<table>";
38
+ table += '<tr><th>' + 'Start Time' + '</th><td>' + REPORT_INFO['start_time'] + '</td></tr>'
39
+ table += '<tr><th>' + 'End Time' + '</th><td>' + REPORT_INFO['end_time'] + '</td></tr>'
40
+ table += '<tr><th>' + 'Period' + '</th><td>' + REPORT_INFO['period'] + '</td></tr>'
41
+ table += '<tr><th>' + 'Timestamp' + '</th><td>' + REPORT_INFO['timestamp'] + '</td></tr>'
42
+ table += '<tr><th>' + 'Number of Metrics' + '</th><td>' + REPORT_INFO['num_of_metrics'] + '</td></tr>'
43
+ table += '<tr><th>' + 'Version' + '</th><td>' + REPORT_INFO['version'] + '</td></tr>'
44
+ table += "</table>";
45
+
46
+ $("#report-info").html(header + table);
47
+ table_striped();
48
+ $("#report-info").css('display', 'block');
49
+ }
50
+
51
+ function show_alarms(){
52
+ $("#graph").html("");
53
+
54
+ var header = "<h3>Alarms</h3>";
55
+ var table = "<table>";
56
+ table += "<tr>";
57
+ table += "<th>";
58
+ table += "State";
59
+ table += "</th>";
60
+ table += "<th>";
61
+ table += "Name";
62
+ table += "</th>";
63
+ table += "<th>";
64
+ table += "Region > Namespace > Dimensions";
65
+ table += "</th>";
66
+ table += "<th>";
67
+ table += "Metric Name";
68
+ table += "</th>";
69
+ table += "</tr>";
70
+ for(var i = 0, n = ALARMS.length; i < n; i++){
71
+ var alarm = ALARMS[i];
72
+ table += "<tr>";
73
+ table += "<td>";
74
+ table += state_decorate(alarm.status);
75
+ table += "</td>";
76
+ table += "<td>";
77
+ table += alarm.name;
78
+ table += "</td>";
79
+ table += "<td>";
80
+ table += '<a href="' + get_link(alarm) + '">' + build_title(alarm) + '</a>';
81
+ table += "</td>";
82
+ table += "<td>";
83
+ table += alarm.metric_name;
84
+ table += "</td>";
85
+ table += "</tr>";
86
+ }
87
+ table += "</table>";
88
+
89
+ $("#alarms").html(header + table);
90
+
91
+ table_striped();
92
+
93
+ $("#alarms").css('display', 'block');
94
+ }
95
+
96
+ function hide_index_elements(){
97
+ $("#alarms").css('display', 'none');
98
+ $("#report-info").css('display', 'none');
99
+ }
100
+
101
+ function move(){
102
+ var param = get_param();
103
+ if(param){
104
+ load(param);
105
+ } else {
106
+ $("#title").html("INDEX");
107
+ show_report_info();
108
+ show_alarms();
109
+ }
110
+ }
111
+
112
+ function compare_dimensions(d0, d1){
113
+ if(d0.length != d1.length){
114
+ return false;
115
+ }
116
+
117
+ for(var i = 0, n = d0.length; i < n; i++){
118
+ if(d0[i].name != d1[i].name){
119
+ return false;
120
+ }
121
+ if(d0[i].value != d1[i].value){
122
+ return false;
123
+ }
124
+ }
125
+
126
+ return true;
127
+ }
128
+
129
+ function get_element(param){
130
+ var region = param.region;
131
+ var dimensions = param.dimensions;
132
+
133
+ for(var k = 0, l = METRICS.length; k < l; k++){
134
+ namespace_table = METRICS[k];
135
+ namespace = namespace_table.namespace;
136
+ if(namespace != param.namespace){
137
+ continue;
138
+ }
139
+ dimension_table = namespace_table.dimension_table;
140
+ for(var i = 0, n = dimension_table.length; i < n; i++){
141
+ for(var j = 0, m = dimension_table[i].elements.length; j < m; j++){
142
+ var element = dimension_table[i].elements[j];
143
+
144
+ if(region != element.region){
145
+ continue;
146
+ }
147
+ if(compare_dimensions(dimensions, element.dimensions)){
148
+ return element;
149
+ }
150
+ }
151
+ }
152
+ }
153
+
154
+ return null;
155
+ }
156
+
157
+ function build_title(element){
158
+ var title = "";
159
+ title += element.region;
160
+ title += " > ";
161
+ title += element.namespace;
162
+ title += " > ";
163
+ title += serialize(element.dimensions);
164
+ return title;
165
+ }
166
+
167
+ function load(param){
168
+ hide_index_elements();
169
+
170
+ var element = get_element(param);
171
+ if(!element) return;
172
+
173
+ $("#graph").html("");
174
+ for(var i = 0, n = element.files.length; i < n; i++){
175
+ drawGraph(element.files[i]);
176
+ }
177
+
178
+ var title = build_title(element);
179
+ $("#title").html(title);
180
+ }
181
+
182
+ function serialize(dimensions){
183
+ var result = [];
184
+ if(dimensions.length == 0){
185
+ return "(direct)";
186
+ }
187
+ for(var i = 0; i < dimensions.length; i++){
188
+ result.push(dimensions[i].name + ' => ' + dimensions[i].value);
189
+ }
190
+ return result.join(', ');
191
+ }
192
+
193
+ function get_value_from_dimension(dimensions, name){
194
+ for(var i = 0, n = dimensions.length; i < n; i++){
195
+ if(dimensions[i].name == name){
196
+ return dimensions[i].value
197
+ }
198
+ }
199
+ }
200
+
201
+ function table_striped(){
202
+ $("tr:nth-child(odd)").addClass("odd");
203
+ $("tr:nth-child(even)").addClass("even");
204
+ }
205
+
206
+ function get_link(element){
207
+ var param = {region:element.region, namespace:element.namespace, dimensions:element.dimensions};
208
+ return "#?param=" + encodeURIComponent(JSON.stringify(param));
209
+ }
210
+
211
+ function add_toggle(){
212
+ $("h1").click(function(event){
213
+ var body_id = event.target.id + '-body';
214
+ $("#" + body_id).slideToggle();
215
+ });
216
+ }
217
+
218
+ function has_name(dimension_table){
219
+ for(var k = 0, l = dimension_table.elements.length; k < l; k++){
220
+ element = dimension_table.elements[k];
221
+ if(element.name){
222
+ return true;
223
+ }
224
+ }
225
+ return false;
226
+ }
227
+
228
+ function format_name(name){
229
+ if(name){
230
+ return name;
231
+ } else {
232
+ return "";
233
+ }
234
+ }
235
+
236
+ function build_table(dimension_table){
237
+ var has_name_flag = has_name(dimension_table);
238
+
239
+ var table = "";
240
+
241
+ table += "<table>";
242
+ table += "<tr>";
243
+ if(has_name_flag){
244
+ table += "<th>Name</th>";
245
+ }
246
+ table += "<th>Region</th>";
247
+ for(var j = 0, m = dimension_table.dimension_type.length; j < m; j++){
248
+ table += "<th>" + dimension_table.dimension_type[j] + "</th>";
249
+ }
250
+ table += "</tr>";
251
+ for(var k = 0, l = dimension_table.elements.length; k < l; k++){
252
+ table += "<tr>";
253
+ element = dimension_table.elements[k];
254
+ if(has_name_flag){
255
+ table += "<td>" + "<a href='" + get_link(element) + "'>" + format_name(element.name) + "</a>" + "</td>";
256
+ }
257
+ table += "<td>" + "<a href='" + get_link(element) + "'>" + element.region + "</a>" + "</td>";
258
+ for(var j = 0, m = dimension_table.dimension_type.length; j < m; j++){
259
+ table += "<td>" + "<a href='" + get_link(element) + "'>" + get_value_from_dimension(element.dimensions, dimension_table.dimension_type[j]) + "</a>" + "</td>";
260
+ }
261
+ table += "</tr>";
262
+ }
263
+ table += "</table>";
264
+
265
+ return table;
266
+ }
267
+
268
+ function initialize(){
269
+ d3.json('data/metrics.json', function(error, data) {
270
+ ALARMS = data.alarms;
271
+ METRICS = data.metrics;
272
+ REPORT_INFO = data.report_info;
273
+ for(var j = 0, m = METRICS.length; j < m; j++){
274
+ var namespace_table = METRICS[j];
275
+ var namespace = namespace_table.namespace;
276
+ var id = namespace.replace('/', '-');
277
+ var body_id = id + '-body';
278
+ $('#metrics').append("<h1 id='" + id + "'>" + namespace + "</h1>" + "<div id='" + body_id + "'></div>");
279
+ $('#' + body_id).toggle();
280
+ for(var i = 0, n = namespace_table.dimension_table.length; i < n; i++){
281
+ dimension_table = namespace_table.dimension_table[i];
282
+ var table = build_table(dimension_table);
283
+ $('#' + body_id).append(table);
284
+ }
285
+ }
286
+ add_toggle();
287
+ table_striped();
288
+ move();
289
+ });
290
+ }
291
+
292
+ METRICS = null;
293
+ ALARMS = null;
294
+ REPORT_INFO = null;