finilizing new dashboard
Costa Tsaousis (ktsaou) committed
Dec 18, 2015 at 02:51 UTC
0ef181bed495aafcebf6caf8c493bd8948e0bbbc
2 files changed
+173
-83
web/dashboard.js
+65
-50
@@ -417,7 +417,7 @@
417
if(this.master === null || this.seq === 0)
418
return false;
419
420
- if(state.needsResize())
420
+ if(state.needsRecreation())
421
return true;
422
423
if(state.tm.pan_and_zoom_seq === this.seq)
@@ -492,14 +492,15 @@
492
selected: false, // boolean - is the chart shown a selection?
493
debug: false, // boolean - console.log() debug info about this chart
494
495
+ dom_created: false, // boolean - is the DOM for the chart created?
496
+ chart_created: false, // boolean - is the library.create() been called?
497
+
498
updates_counter: 0, // numeric - the number of refreshes made so far
499
updates_since_last_creation: 0,
500
501
tm: {
502
last_info_downloaded: 0, // milliseconds - the timestamp we downloaded the chart
503
501
- last_created: 0, // the timestamp the chart was created
502
-
504
last_updated: 0, // the timestamp the chart last updated with data
505
506
pan_and_zoom_seq: 0, // the sequence number of the global synchronization
@@ -661,8 +662,14 @@
662
663
// can the chart participate to the global selection sync as a slave?
664
chartState.prototype.globalSelectionSyncIsEligible = function() {
664
- if(this.library !== null && typeof this.library.setSelection === 'function' && this.isVisible() && this.tm.last_created !== 0)
665
+ if(this.enabled === true
666
+ && this.library !== null
667
+ && typeof this.library.setSelection === 'function'
668
+ && this.isVisible()
669
+ && this.dom_created === true
670
+ && this.chart_created === true)
671
return true;
672
+
673
return false;
674
}
675
@@ -696,16 +703,9 @@
703
}
704
}
705
699
- // FIXME
700
- // var start = new Date().getTime();
701
-
706
$.each(NETDATA.globalSelectionSync.slaves, function(i, st) {
707
st.setSelection(t);
708
});
705
-
706
- // FIXME
707
- // var end = new Date().getTime();
708
- // console.log(end - start);
709
}
710
711
// stop syncing all charts to the given time
@@ -1010,8 +1010,7 @@
1010
1011
// this should be called just ONCE per dimension per chart
1012
chartState.prototype._chartDimensionColor = function(label) {
1013
- if(this.colors === null)
1014
- this.chartColors();
1013
+ if(this.colors === null) this.chartColors();
1014
1015
if(typeof this.colors_assigned[label] === 'undefined') {
1016
if(this.colors_available.length === 0) {
@@ -1037,27 +1036,25 @@
1036
if(this.colors !== null) return this.colors;
1037
1038
this.colors = new Array();
1039
+ this.colors_available = new Array();
1040
+ // this.colors_assigned = {};
1041
1041
- if(this.colors_available === null) {
1042
- this.colors_available = new Array();
1043
-
1044
- var c = $(this.element).data('colors');
1045
- if(typeof c !== 'undefined' && c !== null) {
1046
- if(typeof c !== 'string') {
1047
- this.log('invalid color given: ' + c + ' (give a space separated list of colors)');
1048
- }
1049
- else {
1050
- c = c.split(' ');
1051
- for(var i = 0, len = c.length; i < len ; i++)
1052
- this.colors_available.push(c[i]);
1053
- }
1042
+ var c = $(this.element).data('colors');
1043
+ if(typeof c !== 'undefined' && c !== null) {
1044
+ if(typeof c !== 'string') {
1045
+ this.log('invalid color given: ' + c + ' (give a space separated list of colors)');
1046
+ }
1047
+ else {
1048
+ c = c.split(' ');
1049
+ for(var i = 0, len = c.length; i < len ; i++)
1050
+ this.colors_available.push(c[i]);
1051
}
1055
-
1056
- // push all the standard colors too
1057
- for(var i = 0, len = NETDATA.colors.length; i < len ; i++)
1058
- this.colors_available.push(NETDATA.colors[i]);
1052
}
1053
1054
+ // push all the standard colors too
1055
+ for(var i = 0, len = NETDATA.colors.length; i < len ; i++)
1056
+ this.colors_available.push(NETDATA.colors[i]);
1057
+
1058
return this.colors;
1059
}
1060
@@ -1087,8 +1084,8 @@
1084
}
1085
1086
if(needed === false) {
1090
- // make sure there are colors available
1091
- if(this.colors === null) this.colors = NETDATA.colors;
1087
+ // make sure colors available
1088
+ this.chartColors();
1089
1090
// do we have to update the current values?
1091
// we do this, only when the visible chart is current
@@ -1282,6 +1279,7 @@
1279
// in case the user has an active global selection sync in place
1280
// reset it
1281
this.globalSelectionSyncStop();
1282
+ this.dom_created = true;
1283
}
1284
1285
chartState.prototype.hasLegend = function() {
@@ -1327,18 +1325,25 @@
1325
return px;
1326
}
1327
1330
- chartState.prototype.needsResize = function() {
1331
- return (this.library && !this.library.autoresize() && this.tm.last_resized < NETDATA.options.last_resized);
1328
+ chartState.prototype.needsRecreation = function() {
1329
+ return (
1330
+ this.dom_created === true
1331
+ && this.chart_created === true
1332
+ && this.library
1333
+ && this.library.autoresize() === false
1334
+ && this.tm.last_resized < NETDATA.options.last_resized
1335
+ );
1336
}
1337
1338
chartState.prototype.resizeChart = function() {
1335
- if(this.needsResize()) {
1339
+ if(this.needsRecreation()) {
1340
if(this.debug === true)
1341
this.log('forcing re-generation due to window resize.');
1342
1339
- this.tm.last_created = 0;
1340
- this.tm.last_resized = new Date().getTime();
1343
+ this.destroyChart();
1344
}
1345
+
1346
+ this.tm.last_resized = new Date().getTime();
1347
}
1348
1349
chartState.prototype.chartURL = function() {
@@ -1442,10 +1447,13 @@
1447
if(this.debug === true)
1448
this.log('max updates of ' + this.updates_since_last_creation.toString() + ' reached. Forcing re-generation.');
1449
1445
- this.tm.last_created = 0;
1450
+ this.chart_created = false;
1451
}
1452
1448
- if(this.tm.last_created > 0 && typeof this.library.update === 'function') {
1453
+ if(this.chart_created === true
1454
+ && this.dom_created === true
1455
+ && typeof this.library.update === 'function') {
1456
+
1457
if(this.debug === true)
1458
this.log('updating chart...');
1459
@@ -1474,12 +1482,12 @@
1482
1483
if(NETDATA.options.debug.chart_errors === true) {
1484
this.library.create(this, data);
1477
- this.tm.last_created = new Date().getTime();
1485
+ this.chart_created = true;
1486
}
1487
else {
1488
try {
1489
this.library.create(this, data);
1482
- this.tm.last_created = new Date().getTime();
1490
+ this.chart_created = true;
1491
}
1492
catch(err) {
1493
this.error('chart failed to be created as ' + this.library_name);
@@ -1575,8 +1583,6 @@
1583
if(this.debug === true)
1584
this.log('destroying chart');
1585
1578
- this.tm.last_autorefreshed = new Date().getTime();
1579
-
1586
if(this.element_message !== null) {
1587
this.element_message.innerHTML = '';
1588
this.element_message = null;
@@ -1610,7 +1616,8 @@
1616
this.element.innerHTML = '';
1617
this.refresh_dt_element = null;
1618
1613
- this.tm.last_created = 0;
1619
+ this.dom_created = false;
1620
+ this.chart_created = false;
1621
this.paused = false;
1622
this.selected = false;
1623
this.updates_counter = 0;
@@ -1694,7 +1701,7 @@
1701
}
1702
1703
chartState.prototype.showLoading = function() {
1697
- if(typeof this.___showsLoading___ === 'undefined' && this.tm.last_created === 0 && this.enabled === true) {
1704
+ if(typeof this.___showsLoading___ === 'undefined' && this.chart_created === false && this.enabled === true) {
1705
if(this.debug === true)
1706
this.log('show loading...');
1707
@@ -1737,7 +1744,7 @@
1744
if(ret > tolerance) {
1745
// the chart is too far
1746
this.___isVisible___ = false;
1740
- if(this.tm.last_created !== 0) this.hideChart();
1747
+ if(this.chart_created === true) this.hideChart();
1748
1749
if(this.debug === true)
1750
this.log('isVisible: ' + this.___isVisible___);
@@ -1795,13 +1802,20 @@
1802
1803
if(this.isAutoRefreshed() === true) {
1804
// allow the first update, even if the page is not visible
1798
- if(this.updates_counter && !NETDATA.options.page_is_visible) {
1805
+ if(this.updates_counter && NETDATA.options.page_is_visible === false) {
1806
if(NETDATA.options.debug.focus === true || this.debug === true)
1807
this.log('canBeAutoRefreshed(): page does not have focus');
1808
1809
return false;
1810
}
1811
1812
+ if(this.needsRecreation() === true) {
1813
+ if(this.debug === true)
1814
+ this.log('canBeAutoRefreshed(): needs re-creation.');
1815
+
1816
+ return true;
1817
+ }
1818
+
1819
// options valid only for autoRefresh()
1820
if(NETDATA.options.auto_refresher_stop_until === 0 || NETDATA.options.auto_refresher_stop_until < now) {
1821
if(NETDATA.globalPanAndZoom.isActive()) {
@@ -1919,10 +1933,8 @@
1933
}
1934
1935
chartState.prototype.noData = function() {
1922
- if(this.tm.last_created === 0) {
1936
+ if(this.dom_created === false)
1937
this.createChartDOM();
1924
- this.tm.last_created = new Date().getTime();
1925
- }
1938
1939
this.tm.last_autorefreshed = new Date().getTime();
1940
this.current.view_update_every = 30 * 1000;
@@ -2589,6 +2601,9 @@
2601
NETDATA.dygraphChartUpdate = function(state, data) {
2602
var dygraph = state.dygraph_instance;
2603
2604
+ if(typeof dygraph === 'undefined')
2605
+ NETDATA.dygraphChartCreate(state, data);
2606
+
2607
// when the chart is not visible, and hidden
2608
// if there is a window resize, dygraph detects
2609
// its element size as 0x0.
web/dashboard_full.html
+108
-33
@@ -20,26 +20,39 @@
20
/* fix # anchors scrolling under the navbar
21
https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033
22
*/
23
- *[id]:before {
23
+ h1 {
24
+ position: relative;
25
+ z-index: -1;
26
+ }
27
+ h2 {
28
+ position: relative;
29
+ z-index: -2;
30
+ }
31
+ h1:before, h2:before {
32
display: block;
33
content: " ";
26
- margin-top: -70px;
27
- height: 70px;
34
+ margin-top: -70px;
35
+ height: 70px;
36
visibility: hidden;
37
}
38
39
+ .chart-message {
40
+ display: block;
41
+ margin-top: 10px;
42
+ }
43
+
44
.container {
45
width: 90% !important;
46
}
47
48
#masthead h1 {
36
- /*font-size: 30px;*/
37
- line-height: 1;
38
- padding-top:20px;
49
+ /*font-size: 30px;*/
50
+ line-height: 1;
51
+ padding-top: 30px;
52
}
53
54
#masthead .well {
42
- margin-top:4%;
55
+ margin-top:4%;
56
}
57
58
@@ -208,7 +221,7 @@
221
</button>
222
<a href="/" class="navbar-brand">Netdata</a>
223
</div>
211
- <nav class="collapse navbar-collapse" role="navigation">
224
+<!-- <nav class="collapse navbar-collapse" role="navigation">
225
<ul class="nav navbar-nav">
226
<li><a href="#sec">Get Started</a></li>
227
<li><a href="#sec">Edit</a></li>
@@ -216,7 +229,7 @@
229
<li><a href="#sec">Prototype</a></li>
230
</ul>
231
</nav>
219
- </div>
232
+--> </div>
233
</nav>
234
235
<div id="masthead">
@@ -249,10 +262,25 @@
262
<div class="container">
263
<div class="row">
264
<div class="col-md-10" role="main">
265
+ <div class="alert alert-info" role="alert">
266
+ <p>
267
+ <h4><b>Welcome to netdata!</b></h4>
268
+ </p><p>
269
+ <b><a href="https://github.com/firehol/netdata/" target="_blank">Netdata</a></b> is the fastest way to visualize data. It is a resource efficient, highly optimized system for collecting and visualizing any type of timeseries data.
270
+ </p><p>
271
+ To make a chart in <b><a href="https://github.com/firehol/netdata/" target="_blank">Netdata</a></b>, you just need a <b>counter</b>. Just a number you can read again and again. Netdata will turn such a number to a real time chart. For collecting these numbers, it supports <a href="https://github.com/firehol/netdata/tree/master/plugins.d" target="_blank">external plugins</a>, even <a href="https://github.com/firehol/netdata/tree/master/charts.d" target="_blank">bash plugins</a>. Any computer program, in any language, that can print just a few lines of text on its standard output, can be a netdata collector.
272
+ </p><p>
273
+ <b><a href="https://github.com/firehol/netdata/" target="_blank">Netdata</a></b> can embed charts in any web page. You can have its charts on your site too. Just give it a <code>div</code> and a real time chart, zoomable and draggable will appear (don't be afraid of its performance - a raspberry pi 2 can easily serve 500 charts updates per second!).
274
+ </p><p>
275
+ If you like this project, we need help writing documentation, coding plugins, testing new features, supporting end users...
276
+ <br/>
277
+ If you have some time to spare, we will be glad to have you on board...
278
+ </p>
279
+ </div>
280
<div id="charts_div"></div>
281
</div>
254
- <div class="col-md-2" role="main">
255
- <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" data-spy="affix" id="sidebar"></nav>
282
+ <div class="col-md-2" role="complementary">
283
+ <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" data-spy="affix" id="sidebar" role="menu"></nav>
284
</div>
285
</div>
286
</div>
@@ -260,21 +288,69 @@
288
</body>
289
</html>
290
<script>
291
+
292
var options = {
293
+ sparklines_registry: {},
294
data: null,
265
- hostnane: 'netdata_server',
295
+ hostnane: 'netdata_server', // will be overwritten by the netdata server
296
categories: new Array(),
297
categories_idx: {},
298
families: new Array(),
299
families_idx: {},
300
+
301
chartsPerRow: 0,
302
chartsMinWidth: 1450,
303
chartsHeight: 180,
304
sparklinesHeight: 60
305
};
306
307
+// generate a sparkline
308
+// used in the documentation
309
+function sparkline(chart, dimension, units) {
310
+ var key = chart + '.' + dimension;
311
+
312
+ if(typeof units === 'undefined')
313
+ units = '';
314
+
315
+ if(typeof options.sparklines_registry[key] === 'undefined')
316
+ options.sparklines_registry[key] = { count: 1 };
317
+ else
318
+ options.sparklines_registry[key].count++;
319
+
320
+ key = key + '.' + options.sparklines_registry[key].count;
321
+
322
+ var h = '<div data-netdata="' + chart + '" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dimensions="' + dimension + '" data-show-value-of-' + dimension + '-at="' + key + '"></div> (<span id="' + key + '" style="display: inline-block; min-width: 50px; text-align: right;">X</span>' + units + ')';
323
+
324
+ return h;
325
+}
326
+
327
+// documentation for each category and chart
328
var messages = {
277
- 'system.cpu': 'The current CPU utilization of the system is below.<br/>Keep an eye on iowait <div data-netdata="system.cpu" data-after="-60" data-width="15%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dimensions="iowait" data-show-value-of-iowait-at="system.cpu.iowait.1"></div> (<span id="system.cpu.iowait.1" style="display: inline-block; min-width: 40px; text-align: right;">X</span>%). If it is constantly high, your disks are a bottleneck and they slow your system down.'
329
+
330
+ // categories / sections
331
+ 'system': 'Overview of the key system metrices.',
332
+ 'tc': 'Netdata collects and visualizes tc class utilization using its <a href="https://github.com/firehol/netdata/blob/master/plugins.d/tc-qos-helper.sh" target="_blank">tc-helper plugin</a>. If you also use <a href="http://firehol.org/#fireqos" target="_blank">FireQOS</a> for setting up QoS, netdata automatically collects interface and class names.',
333
+ 'net': 'Per network interface statistics collected from <code>/proc/net/dev</code>.',
334
+ 'apps': 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internaly builds a process tree (much like <code>ps fax</code> does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported).<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning childs continiously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited childs of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealisting utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
335
+
336
+ // charts
337
+ 'system.cpu': 'Total CPU utilization (all cores). 100% here means there is no CPU idle time at all. You can get per core usage at the <a href="#cpu">CPUs</a> section and per application usage at the <a href="#apps">Applications Monitoring</a> section.<br/>Keep an eye on <b>iowait</b> ' + sparkline('system.cpu', 'iowait', '%') + '. If it is constantly high, your disks are a bottleneck and they slow your system down.<br/>Another important metric worth monitoring, is <b>softirq</b> ' + sparkline('system.cpu', 'softirq', '%') + '. A constantly high percentage of softirq may indicate network drivers issues.',
338
+ 'system.io': 'Total Disk I/O, for all disks, read from <code>/proc/vmstat</code>. You can get detailed information about each disk at the <a href="#disk">Disks</a> section and per application Disk usage at the <a href="#apps">Applications Monitoring</a> section.',
339
+ 'system.swapio': 'Total Swap I/O, read from <code>/proc/vmstat</code>. (netdata measures both <code>in</code> and <code>out</code>. If either of them is not shown in the chart, it is because it is zero - you can change the page settings to always render all the available dimensions on all charts).',
340
+ 'system.pgfaults': 'Total page faults, read from <code>/proc/vmstat</code>. <b>Major page faults</b> indicates that the system is using its swap. You can find which applications use the swap at the <a href="#apps">Applications Monitoring</a> section.',
341
+ 'system.entropy': '<a href="https://en.wikipedia.org/wiki/Entropy_(computing)" target="_blank">Entropy</a>, read from <code>/proc/sys/kernel/random/entropy_avail</code>, is like a pool of random numbers that are mainly used in cryptography. It is advised that the pool remains always <a href="https://blog.cloudflare.com/ensuring-randomness-with-linuxs-random-number-generator/" target="_blank">above 200</a>. If the pool of entropy gets empty, you risk your security to be predictable and you should install a user-space random numbers generating daemon, like <a href="http://www.issihosts.com/haveged/" target="_blank">haveged</a>, to keep the pool in healthy levels.',
342
+ 'system.forks': 'The number of new processes created per second, read from <code>/proc/stat</code>.',
343
+ 'system.intr': 'Total number of CPU interrupts, read from <code>/proc/stat</code>. Check <code>system.interrupts</code> that gives more detail about each interrupt and also the <a href="#cpu">CPUs</a> section where interrupts are analyzed per CPU core.',
344
+ 'system.interrupts': 'CPU interrupts in detail, read from <code>/proc/interrupts</code>. At the <a href="#cpu">CPUs</a> section, interrupts are analyzed per CPU core.',
345
+ 'system.processes': 'System processes, read from <code>/proc/stat</code>. <b>Blocked</b> are processes that are willing to execute but they cannot, e.g. because they wait for disk activity.',
346
+ 'system.ctxt': '<a href="https://en.wikipedia.org/wiki/Context_switch" target="_blank">Context Switches</a>, read from <code>/proc/stat</code>, is the switching of the CPU from one process, task or thread to another. If there are many processes or threads willing to execute and very few CPU cores available to handle them, the system is making more context switching to balance the CPU resources among them. The whole process is computationally intensive. The more the context switches, the slower the system gets.',
347
+ 'system.idlejitter': 'Idle jitter is calculated by netdata. A thread is spawned that requests to sleep for a few microseconds. When the system wakes it up, it measures how many microseconds have passed. The different between the requested and the actual duration of the sleep, is the <b>idle jitter</b>. This number is useful in realtime environments, where CPU jitter can affect the quality of the service (like VoIP media gateways).',
348
+ 'system.ipv4': 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>. This includes <code>lo</code> device traffic.',
349
+ 'system.ram': 'System memory, read from <code>/proc/meminfo</code>.',
350
+ 'system.swap': 'System swap memory, read from <code>/proc/meminfo</code>.',
351
+
352
+ // just a line to allow ending all entries above with comma
353
+ 'end': 'end'
354
};
355
356
function screenWidth() {
@@ -335,8 +411,8 @@ function uniq_with_list(array, find_key_function) {
411
}
412
413
function prepareScreen(data) {
338
- console.log('NETDATA is paused - ready to prepare the screen');
339
- console.log(data);
414
+ // console.log('NETDATA is paused - ready to prepare the screen');
415
+ // console.log(data);
416
417
options.data = data;
418
options.hostname = data.hostname;
@@ -345,9 +421,6 @@ function prepareScreen(data) {
421
$.each(charts, function(i, c) {
422
if(c.enabled === true) {
423
348
- //if(c.family.length > 4 && c.family.substring(c.family.length - 4, c.family.length) === '-ifb')
349
- // c.family = c.family.split('-')[0];
350
-
424
// find the category of the chart
425
c.category = c.type.split('.')[0];
426
@@ -508,13 +581,12 @@ function prepareScreen(data) {
581
582
// find the proper duration for per-second updates
583
var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
511
- console.log(duration);
584
var html = '';
585
var sidebar = '<ul class="nav dashboard-sidenav" id="sidebar_ul">';
586
587
function getMessage(id) {
588
if(typeof messages[id] !== 'undefined')
517
- return messages[id];
589
+ return '<div class="chart-message" role="document">' + messages[id] + '</div>';
590
else
591
return '';
592
}
@@ -524,7 +596,7 @@ function prepareScreen(data) {
596
t.charts.sort(prioritySort);
597
598
sidebar += '<li class="' + ((i === 0)?'active':'').toString() + '"><a href="#' + t.name + '">' + t.title + '</a>';
527
- html += '<h1 id="' + t.name + '">' + t.title + '</h1><div id="' + t.name + '">';
599
+ html += '<div role="section"><div role="sectionhead"><h1 id="' + t.name + '" role="heading">' + t.title + '</h1>' + getMessage(t.name) + '</div><div id="' + t.name + '" role="document">';
600
601
if(t.name === 'net' || t.name === 'tc') {
602
var interfaces = uniq_with_list(t.charts, function(c) { return c.family; });
@@ -532,7 +604,7 @@ function prepareScreen(data) {
604
sidebar += '<ul class="nav">';
605
$.each(interfaces, function(j, c) {
606
sidebar += '<li class><a href="#' + t.name + '_' + c.name + '">' + c.name + '</a></li>';
535
- html += '<div class="netdata-group-container" id="interface_' + t.name + '_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + t.name + '_' + c.name + '" class="netdata-chart-alignment">' + c.name + '</h2>';
607
+ html += '<div class="netdata-group-container" id="interface_' + t.name + '_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + t.name + '_' + c.name + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>';
608
$.each(c.values, function(x, f) {
609
var c = null;
610
var h = options.chartsHeight / 2;
@@ -547,9 +619,9 @@ function prepareScreen(data) {
619
+ ' data-before="0"'
620
+ ' data-after="-' + duration.toString() + '"'
621
+ ' data-colors="' + c + '"'
550
- + '></div>';
622
+ + ' role="application"></div>';
623
});
552
- html += '</div>';
624
+ html += '</div>'; // netdata-group-container
625
});
626
sidebar += '</ul>';
627
}
@@ -559,7 +631,7 @@ function prepareScreen(data) {
631
sidebar += '<ul class="nav">';
632
$.each(disks, function(j, c) {
633
sidebar += '<li class><a href="#' + c.name + '">' + c.name + '</a></li>';
562
- html += '<div class="netdata-group-container" id="disk_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + c.name + '" class="netdata-chart-alignment">' + c.name + '</h2>';
634
+ html += '<div class="netdata-group-container" id="disk_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + c.name + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>';
635
$.each(c.values, function(x, f) {
636
var c = null;
637
var h = options.chartsHeight / 2;
@@ -576,9 +648,9 @@ function prepareScreen(data) {
648
+ ' data-before="0"'
649
+ ' data-after="-' + duration.toString() + '"'
650
+ ' data-colors="' + c + '"'
579
- + '></div>';
651
+ + ' role="application"></div>';
652
});
581
- html += '</div>';
653
+ html += '</div>'; // netdata-group-container
654
});
655
sidebar += '</ul>';
656
}
@@ -600,7 +672,7 @@ function prepareScreen(data) {
672
+ ' data-before="0"'
673
+ ' data-after="-' + duration.toString() + '"'
674
+ ' data-colors="' + c + '"'
603
- + '></div>';
675
+ + ' role="application"></div>';
676
});
677
}
678
else {
@@ -610,21 +682,24 @@ function prepareScreen(data) {
682
+ ' data-height="' + options.chartsHeight.toString() + 'px"'
683
+ ' data-before="0"'
684
+ ' data-after="-' + duration.toString() + '"'
613
- + '></div>';
685
+ + ' role="application"></div>';
686
});
687
}
688
689
sidebar += '</li>';
618
- html += '</div><hr/>';
690
+ html += '</div>'; // document
691
+ html += '</div>'; // section
692
+ html += '<hr role="separator"/>';
693
});
694
sidebar += '</ul>';
621
-
695
+/*
696
// show the colors
623
- html += '<br/>'
697
+ html += '<br/><div class="row">'
698
$.each(NETDATA.colors, function(i, c){
699
html += '<div style="display: inline-block;"><div style="display: inline-block; width: 100px; height: 100px; background: ' + c + ';"></div><br/>' + c + '</div>';
700
});
627
-
701
+ html += '</div>'
702
+*/
703
div.innerHTML = html;
704
document.getElementById('sidebar').innerHTML = sidebar;
705