nanoscroller is now used; compatibility fixes for IE 9
Costa Tsaousis (ktsaou) committed
Dec 12, 2015 at 17:17 UTC
72dbc628bf0e88fe93a7f64eed00335e74d8ec1e
2 files changed
+108
-51
web/dashboard.css
+54
-11
@@ -66,24 +66,67 @@ html {
66
margin-top: 0px;
67
}
68
.netdata-legend-series {
69
- position: absolute;
70
- width: 100%;
69
+ position: relative;
70
+ width: 110px;
71
height: calc(100% - 50px);
72
- /*background-color: Gray;*/
73
- overflow: auto;
74
- /*overflow-y: scroll;*/
75
- overflow-x: hidden;
72
+ overflow: hidden;
73
text-overflow: ellipsis;
74
line-height: 14px;
75
display: block;
76
font-size: 10px;
77
margin-top: 0px;
78
}
82
-/*
83
-.netdata-legend-series > .netdata-legend-series-content { padding: 10px; }
84
-.netdata-legend-series > .netdata-legend-series-pane { background: #888; }
85
-.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider { background: #111; }
86
-*/
79
+
80
+.netdata-legend-series > .netdata-legend-series-content {
81
+ position : absolute;
82
+ overflow : scroll;
83
+ overflow-x : hidden;
84
+ top : 0;
85
+ right : 0;
86
+ bottom : 0;
87
+ left : 0;
88
+ text-overflow: ellipsis;
89
+}
90
+.netdata-legend-series > .netdata-legend-series-content:focus {
91
+ outline: thin dotted;
92
+}
93
+.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
94
+ display: block; /* was 'none', but chrome was hidding content with it */
95
+}
96
+.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
97
+ display: block;
98
+}
99
+.netdata-legend-series > .netdata-legend-series-pane {
100
+ background : rgba(0,0,0,.25);
101
+ position : absolute;
102
+ width : 4px;
103
+ right : 0;
104
+ top : 0;
105
+ bottom : 0;
106
+ visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
107
+ opacity : .01;
108
+ -webkit-transition : .2s;
109
+ -moz-transition : .2s;
110
+ -o-transition : .2s;
111
+ transition : .2s;
112
+ -moz-border-radius : 4px;
113
+ -webkit-border-radius : 4px;
114
+ border-radius : 4px;
115
+}
116
+.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
117
+ background : #444;
118
+ background : rgba(0,0,0,.5);
119
+ position : relative;
120
+ margin : 0 1px;
121
+ -moz-border-radius : 2px;
122
+ -webkit-border-radius : 2px;
123
+ border-radius : 2px;
124
+}
125
+.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
126
+ visibility : visible\9; /* Target only IE7 and IE8 with this hack */
127
+ opacity : 0.99;
128
+}
129
+
130
.netdata-legend-name-table-line {
131
display: inline-block;
132
width: 13px;
web/dashboard.js
+54
-40
@@ -61,7 +61,9 @@
61
else
62
NETDATA.serverDefault = NETDATA._scriptSource();
63
64
- if(NETDATA.serverDefault.slice(-1) !== '/')
64
+ if(NETDATA.serverDefault === null)
65
+ NETDATA.serverDefault = '';
66
+ else if(NETDATA.serverDefault.slice(-1) !== '/')
67
NETDATA.serverDefault += '/';
68
69
// default URLs for all the external files we need
@@ -135,6 +137,8 @@
137
138
last_resized: 0, // the timestamp of the last resize request
139
140
+ crossDomainAjax: false, // enable this to request crossDomain AJAX
141
+
142
// the current profile
143
// we may have many...
144
current: {
@@ -187,7 +191,7 @@
191
192
debug: {
193
show_boxes: 0,
190
- main_loop: 0,
194
+ main_loop: 1,
195
focus: 0,
196
visibility: 0,
197
chart_data_url: 0,
@@ -445,7 +449,7 @@
449
requested_before_ms: null,
450
requested_after_ms: null,
451
first_entry_ms: null,
448
- last_entry_ms: null,
452
+ last_entry_ms: null
453
},
454
pan: {
455
name: 'pan',
@@ -463,7 +467,7 @@
467
requested_before_ms: null,
468
requested_after_ms: null,
469
first_entry_ms: null,
466
- last_entry_ms: null,
470
+ last_entry_ms: null
471
},
472
zoom: {
473
name: 'zoom',
@@ -481,7 +485,7 @@
485
requested_before_ms: null,
486
requested_after_ms: null,
487
first_entry_ms: null,
484
- last_entry_ms: null,
488
+ last_entry_ms: null
489
},
490
491
refresh_dt_ms: 0, // milliseconds - the time the last refresh took
@@ -783,11 +787,6 @@
787
this.current.force_after_ms = after;
788
this.current.force_before_ms = before;
789
NETDATA.globalPanAndZoom.setMaster(this, after, before);
786
- //this.updateChart(function() {
787
- // NETDATA.globalPanAndZoom.setMaster(this, after, before);
788
- // if(typeof callback === 'function')
789
- // callback();
790
- //});
790
return true;
791
}
792
@@ -958,16 +957,14 @@
957
label.value.className += 'netdata-legend-value';
958
label.value.title = name;
959
961
- var table = document.createElement('table');
962
- table.innerHTML = '<tr class="netdata-legend-name-tr"><td class="netdata-legend-name-td"></td></tr>';
963
- table.className += 'netdata-legend-name-table-' + state.chart.chart_type;
964
-
960
var rgb = NETDATA.colorHex2Rgb(NETDATA.colors[c]);
966
- table.style.backgroundColor = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + NETDATA.options.current.color_fill_opacity[state.chart.chart_type] + ')';
961
+ label.name.innerHTML = '<table class="netdata-legend-name-table-'
962
+ + state.chart.chart_type
963
+ + '" style="background-color: '
964
+ + 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + NETDATA.options.current.color_fill_opacity[state.chart.chart_type] + ')'
965
+ + '"><tr class="netdata-legend-name-tr"><td class="netdata-legend-name-td"></td></tr></table>'
966
967
var text = document.createTextNode(' ' + name);
969
-
970
- label.name.appendChild(table);
968
label.name.appendChild(text);
969
970
label.name.style.color = NETDATA.colors[c];
@@ -1002,16 +999,18 @@
999
this.element_legend_childs.hidden = document.createElement('div');
1000
el.appendChild(this.element_legend_childs.hidden);
1001
nano.appendChild(el);
1005
-/*
1002
+
1003
$(nano).nanoScroller({
1004
paneClass: 'netdata-legend-series-pane',
1005
sliderClass: 'netdata-legend-series-slider',
1006
contentClass: 'netdata-legend-series-content',
1007
enabledClass: '__enabled',
1008
flashedClass: '__flashed',
1012
- activeClass: '__active'
1009
+ activeClass: '__active',
1010
+ tabIndex: -1,
1011
+ alwaysVisible: true
1012
});
1014
-*/
1013
+
1014
this.legendShowLatestValues();
1015
}
1016
@@ -1254,13 +1253,21 @@
1253
}
1254
1255
chartState.prototype.updateChart = function(callback) {
1257
- if(!this.chart) {
1256
+ // due to late initialization of charts and libraries
1257
+ // we need to check this too
1258
+ if(this.enabled === false) {
1259
+ if(this.debug) this.log('I am not enabled');
1260
+ if(typeof callback === 'function') callback();
1261
+ return false;
1262
+ }
1263
+
1264
+ if(this.chart === null) {
1265
var self = this;
1266
this.getChart(function() { self.updateChart(callback); });
1267
return;
1268
}
1269
1263
- if(!this.library.initialized) {
1270
+ if(this.library.initialized === false) {
1271
var self = this;
1272
this.library.initialize(function() { self.updateChart(callback); });
1273
return;
@@ -1273,7 +1280,7 @@
1280
var self = this;
1281
this.xhr = $.ajax( {
1282
url: this.current.url,
1276
- crossDomain: true,
1283
+ crossDomain: NETDATA.options.crossDomainAjax,
1284
cache: false,
1285
async: true
1286
})
@@ -1303,18 +1310,18 @@
1310
chartState.prototype.canBeAutoRefreshed = function() {
1311
now = new Date().getTime();
1312
1306
- if(!this.library || !this.library.enabled) {
1307
- this.error('charting library "' + this.library_name + '" is not available');
1308
- if(this.debug) this.log('My chart library ' + this.library_name + ' is not available');
1313
+ if(this.enabled === false) {
1314
+ if(this.debug) this.log('I am not enabled');
1315
return false;
1316
}
1317
1312
- if(!this.enabled) {
1313
- if(this.debug) this.log('I am not enabled');
1318
+ if(this.library === null || this.library.enabled === false) {
1319
+ this.error('charting library "' + this.library_name + '" is not available');
1320
+ if(this.debug) this.log('My chart library ' + this.library_name + ' is not available');
1321
return false;
1322
}
1323
1317
- if(!this.isVisible()) {
1324
+ if(this.isVisible() === false) {
1325
if(NETDATA.options.debug.visibility || this.debug) this.log('I am not visible');
1326
return;
1327
}
@@ -1392,22 +1399,23 @@
1399
else {
1400
this.chart_url = this.host + "/api/v1/chart?chart=" + this.id;
1401
if(this.debug) this.log('downloading ' + this.chart_url);
1395
- var this_state_object = this;
1402
+ var self = this;
1403
1404
$.ajax( {
1405
url: this.chart_url,
1399
- crossDomain: true,
1400
- cache: false
1406
+ crossDomain: NETDATA.options.crossDomainAjax,
1407
+ cache: false,
1408
+ async: true
1409
})
1410
.done(function(chart) {
1403
- chart.url = this_state_object.chart_url;
1404
- chart.data_url = (this_state_object.host + chart.data_url);
1405
- this_state_object._defaultsFromDownloadedChart(chart);
1406
- NETDATA.chartRegistry.add(this_state_object.host, this_state_object.id, chart);
1411
+ chart.url = self.chart_url;
1412
+ chart.data_url = (self.host + chart.data_url);
1413
+ self._defaultsFromDownloadedChart(chart);
1414
+ NETDATA.chartRegistry.add(self.host, self.id, chart);
1415
})
1416
.fail(function() {
1409
- NETDATA.error(404, this_state_object.chart_url);
1410
- this_state_object.error('chart "' + this_state_object.id + '" not found on url "' + this_state_object.chart_url + '"');
1417
+ NETDATA.error(404, self.chart_url);
1418
+ self.error('chart "' + self.id + '" not found on url "' + self.chart_url + '"');
1419
})
1420
.always(function() {
1421
if(typeof callback === 'function') callback();
@@ -1506,6 +1514,8 @@
1514
// This is used to load jquery - after it is loaded, we use jquery
1515
NETDATA._loadjQuery = function(callback) {
1516
if(typeof jQuery === 'undefined') {
1517
+ if(NETDATA.options.debug.main_loop) console.log('loading ' + NETDATA.jQuery);
1518
+
1519
var script = document.createElement('script');
1520
script.type = 'text/javascript';
1521
script.async = true;
@@ -1929,7 +1939,7 @@
1939
// dygraph
1940
1941
NETDATA.dygraph = {
1932
- smooth: false,
1942
+ smooth: false
1943
};
1944
1945
NETDATA.dygraphSetSelection = function(state, t) {
@@ -2788,12 +2798,14 @@
2798
return;
2799
}
2800
2801
+ if(NETDATA.options.debug.main_loop) console.log('loading ' + NETDATA.requiredJs[index]);
2802
$.ajax({
2803
url: NETDATA.requiredJs[index],
2804
cache: true,
2805
dataType: "script"
2806
})
2807
.success(function() {
2808
+ if(NETDATA.options.debug.main_loop) console.log('loaded ' + NETDATA.requiredJs[index]);
2809
NETDATA.loadRequiredJs(++index, callback);
2810
})
2811
.fail(function() {
@@ -2805,8 +2817,10 @@
2817
NETDATA._loadjQuery(function() {
2818
NETDATA.loadRequiredJs(0, function() {
2819
NETDATA._loadCSS(NETDATA.dashboard_css);
2808
- if(typeof netdataDontStart === 'undefined' || !netdataDontStart)
2820
+ if(typeof netdataDontStart === 'undefined' || !netdataDontStart) {
2821
+ if(NETDATA.options.debug.main_loop) console.log('starting chart refresh thread');
2822
NETDATA.start();
2823
+ }
2824
});
2825
});
2826