further optimizations; in the progress of adding a menu to the new dashboard;
Costa Tsaousis (ktsaou) committed
Dec 13, 2015 at 23:19 UTC
b8cdace1321f7ee8f4da1ba1fd99db4a4f876b3a
3 files changed
+159
-20
web/dashboard.css
+1
-1
@@ -83,7 +83,7 @@ html {
83
margin-top: 0px;
84
}
85
.netdata-legend-series {
86
- position: relative;
86
+ position: absolute;
87
width: 110px;
88
height: calc(100% - 50px);
89
overflow: hidden;
web/dashboard.js
+6
-7
@@ -870,9 +870,6 @@
870
}
871
872
chartState.prototype.legendFormatValue = function(value) {
873
- // FIXME
874
- // return '';
875
- // return value;
873
if(value === null) return '';
874
if(typeof value !== 'number') return value;
875
@@ -885,12 +882,14 @@
882
chartState.prototype.legendSetLabelValue = function(label, value) {
883
var series = this.element_legend_childs.series[label];
884
888
- if(typeof series === 'undefined' || series.last === value)
889
- return;
885
+ if(typeof series === 'undefined') return;
886
891
- series.last = value;
887
value = this.legendFormatValue(value);
888
889
+ // if the value has not changed, skip DOM update
890
+ if(series.last === value) return;
891
+ series.last = value;
892
+
893
if(series.value !== null) series.value.innerHTML = value;
894
if(series.user !== null) series.user.innerHTML = value;
895
}
@@ -3043,7 +3042,7 @@
3042
3043
NETDATA.requiredCSS = [
3044
NETDATA.serverDefault + 'css/bootstrap.min.css',
3046
- NETDATA.serverDefault + 'css/bootstrap-theme.min.css',
3045
+ //NETDATA.serverDefault + 'css/bootstrap-theme.min.css',
3046
NETDATA.dashboard_css
3047
];
3048
web/dashboard_full.html
+152
-12
@@ -10,12 +10,110 @@
10
<meta name="apple-mobile-web-app-capable" content="yes">
11
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
<meta name="author" content="costa@tsaousis.gr">
13
+<style>
14
+body {
15
+ padding-top:50px;
16
+}
17
+
18
+#masthead h1 {
19
+ /*font-size: 30px;*/
20
+ line-height: 1;
21
+ padding-top:20px;
22
+}
23
+
24
+#masthead .well {
25
+ margin-top:4%;
26
+}
27
+
28
+#sidebar li.active {
29
+ border:0 #eee solid;
30
+ border-right-width:5px;
31
+}
32
+
33
+@media (min-width: 979px) {
34
+ #sidebar.affix-top {
35
+ position: static;
36
+ margin-top:30px;
37
+ width:228px;
38
+ }
39
+
40
+ #sidebar.affix {
41
+ position: fixed;
42
+ top:70px;
43
+ width:228px;
44
+ }
45
+}
46
+</style>
47
</head>
48
<body>
15
-
16
-<div class="container-fluid">
17
- <div id="charts_div" class="container-fluid"></div>
18
-</div>
49
+ <nav class="navbar navbar-default navbar-fixed-top" role="banner">
50
+ <div class="container">
51
+ <div class="navbar-header">
52
+ <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
53
+ <span class="sr-only">Toggle navigation</span>
54
+ <span class="icon-bar"></span>
55
+ <span class="icon-bar"></span>
56
+ <span class="icon-bar"></span>
57
+ </button>
58
+ <a href="/" class="navbar-brand">Netdata</a>
59
+ </div>
60
+ <nav class="collapse navbar-collapse" role="navigation">
61
+ <ul class="nav navbar-nav">
62
+ <li><a href="#sec">Get Started</a></li>
63
+ <li><a href="#sec">Edit</a></li>
64
+ <li><a href="#sec">Visualize</a></li>
65
+ <li><a href="#sec">Prototype</a></li>
66
+ </ul>
67
+ </nav>
68
+ </div>
69
+ </nav>
70
+
71
+ <div id="masthead">
72
+ <div class="container">
73
+ <div class="row">
74
+ <div class="col-md-6">
75
+ <h1>Netdata Dashboard
76
+ <p class="lead">Real time data collection and graphs...</p>
77
+ </h1>
78
+ </div>
79
+ <div class="col-md-6">
80
+ <div class="well well-lg">
81
+ <div class="row">
82
+ <div class="col-sm-6">
83
+ <div data-netdata="system.cpu" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-before="0" data-after="-60" data-width="100%" data-height="60px"></div>
84
+ </div>
85
+ <div class="col-sm-6">
86
+ Drag charts to pan.<br/>
87
+ Shift + wheel on them, to zoom.</br>
88
+ Double-click on them, to reset.
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="container">
98
+ <div class="row">
99
+ <div class="col-md-10" role="main">
100
+ <div id="charts_div"></div>
101
+ </div>
102
+ <div class="col-md-2" role="complementary">
103
+ <div class="hidden-print hidden-xs hidden-sm affix-top">
104
+ <ul class="nav nav-stacked" id="sidebar">
105
+ <li><a href="#sec0">Section 0</a>
106
+ <ul class="nav">
107
+ <li><a href="#sec0">Section 0a</a></li>
108
+ <li><a href="#sec0">Section 0b</a></li>
109
+ </ul>
110
+ </li>
111
+ <li><a href="#sec0">Section 1</a></li>
112
+ </ul>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
118
</body>
119
</html>
@@ -35,8 +133,8 @@ var options = {
133
families: new Array(),
134
families_idx: {},
135
chartsPerRow: 0,
38
- chartsMinWidth: 450,
39
- chartsHeight: 200,
136
+ chartsMinWidth: 1450,
137
+ chartsHeight: 150,
138
sparklinesHeight: 60
139
}
140
@@ -121,7 +219,7 @@ function prepareScreen(data) {
219
switch(c.category) {
220
case 'system':
221
c.category_priority = 10;
124
- c.category_title = 'System';
222
+ c.category_title = 'System Summary';
223
c.glyphicon = "glyphicon-dashboard";
224
break;
225
@@ -151,13 +249,13 @@ function prepareScreen(data) {
249
250
case 'netfilter':
251
c.category_priority = 60;
154
- c.category_title = 'Netfilter';
252
+ c.category_title = 'Netfilter / IPTables';
253
c.glyphicon = "glyphicon-cloud";
254
break;
255
256
case 'ipv4':
257
c.category_priority = 70;
160
- c.category_title = 'IPv4';
258
+ c.category_title = 'IPv4 Summary';
259
c.glyphicon = "glyphicon-globe";
260
break;
261
@@ -197,6 +295,18 @@ function prepareScreen(data) {
295
c.glyphicon = "glyphicon-thumbs-up";
296
break;
297
298
+ case 'sensors':
299
+ c.category_priority = 160;
300
+ c.category_title = 'Hardware Sensors';
301
+ c.glyphicon = "glyphicon-thumbs-up";
302
+ break;
303
+
304
+ case 'postfix':
305
+ c.category_priority = 170;
306
+ c.category_title = 'Mail Server';
307
+ c.glyphicon = "glyphicon-thumbs-up";
308
+ break;
309
+
310
case 'example':
311
c.category_priority = 100000;
312
c.category_title = 'Example Plugins';
@@ -258,11 +368,15 @@ function prepareScreen(data) {
368
// find the proper duration for per-second updates
369
var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
370
console.log(duration);
261
- html = '';
371
+ var html = '';
372
+ var sidebar = '';
373
+
374
+ // render the charts
375
$.each(options.categories, function(i, t) {
376
t.charts.sort(prioritySort);
377
265
- html += '<div class="container-fluid row clearfix"><h2>' + t.title + '</h2>';
378
+ sidebar += '<li><a href="#section' + i + '">' + t.title + '</a></li>';
379
+ html += '<h2 id="section' + i + '">' + t.title + '</h2>';
380
381
if(t.name === 'net') {
382
var interfaces = uniq_with_list(t.charts, function(c) { return c.family; });
@@ -329,7 +443,7 @@ function prepareScreen(data) {
443
});
444
}
445
332
- html += '</div>';
446
+ html += '';
447
});
448
449
html += '<br/>'
@@ -338,7 +452,33 @@ function prepareScreen(data) {
452
});
453
454
div.innerHTML = html;
455
+ document.getElementById('sidebar').innerHTML = sidebar;
456
NETDATA.unpause();
457
+
458
+ /* activate sidebar */
459
+ $('#sidebar').affix({
460
+ offset: {
461
+ top: 200
462
+ }
463
+ });
464
+
465
+ // fix for jumping to proper anchor after ajax
466
+ $(window).load(function(){
467
+ // Remove the # from the hash, as different browsers may or may not include it
468
+ var hash = location.hash.replace('#','');
469
+
470
+ if(hash != '') {
471
+ // Clear the hash in the URL
472
+ // location.hash = ''; // delete front "//" if you want to change the address bar
473
+ $('html, body').animate({ scrollTop: $(location.hash).offset().top - 55}, 0);
474
+ }
475
+ });
476
+
477
+ /* activate scrollspy menu */
478
+ $(document.body).scrollspy({
479
+ target: '#leftCol',
480
+ offset: -55
481
+ });
482
}
483
484
NETDATA.ready(function() {