NetData Datasource Example

" + a.html + ""; - }); - - function categoriessort(a, b) { - if(a.priority < b.priority) return -1; - return 1; - } - categories.sort(categoriessort); - - function familiessort(a, b) { - if(a.name < b.name) return -1; - return 1; - } - families.sort(familiessort); - - function chartslistsort(a, b) { - if(a.name < b.name) return -1; - return 1; - } - chartslist.sort(chartslistsort); - - // combine all the htmls into one - var allcategories = ""; - mainmenu = '

"; - - familiesmainmenu = '"; - - chartsmainmenu = '"; - - mainmenu += categoriesmainmenu; - mainmenu += familiesmainmenu; - mainmenu += chartsmainmenu; - mainmenu += ''; - - thumbsContainer.innerHTML = allcategories; - switchToThumbGraphs(); - checkRefreshThread(); - }); -} - -$(window).blur(function() { - page_is_visible = 0; - mylog('Lost Focus!'); -}); - -$(window).focus(function() { - page_is_visible = 1; - mylog('Focus restored!'); -}); - -// Set a callback to run when the Google Visualization API is loaded. -google.setOnLoadCallback(initCharts); diff --git a/web/old/netdata.js b/web/old/netdata.js deleted file mode 100644 index f1af0a67d..000000000 --- a/web/old/netdata.js +++ /dev/null @@ -1,502 +0,0 @@ -// fix old IE bug with console -if(!window.console){ window.console = {log: function(){} }; } - -// Load the Visualization API and the piechart package. -google.load('visualization', '1.1', {'packages':['corechart']}); -//google.load('visualization', '1.1', {'packages':['controls']}); - -function canChartBeRefreshed(chart) { - // is it enabled? - if(!chart.enabled) return false; - - // is there something selected on the chart? - if(chart.chart && chart.chart.getSelection()[0]) return false; - - // is it too soon for a refresh? - var now = new Date().getTime(); - if((now - chart.last_updated) < (chart.group * chart.update_every * 1000)) return false; - - // is the chart in the visible area? - //console.log(chart.div); - if($('#' + chart.div).visible(true) == false) return false; - - // ok, do it - return true; -} - -function generateChartURL(chart) { - // build the data URL - var url = chart.url; - url += chart.points_to_show?chart.points_to_show.toString():"all"; - url += "/"; - url += chart.group?chart.group.toString():"1"; - url += "/"; - url += chart.group_method?chart.group_method:"average"; - url += "/"; - url += chart.after?chart.after.toString():"0"; - url += "/"; - url += chart.before?chart.before.toString():"0"; - url += "/"; - url += chart.non_zero?"nonzero":"all"; - url += "/"; - - return url; -} - -function renderChart(chart, doNext) { - if(canChartBeRefreshed(chart) == false) return false; - - $.ajax({ - url: generateChartURL(chart), - dataType:"json", - cache: false - }) - .done(function(jsondata) { - if(!jsondata || jsondata.length == 0) return; - chart.jsondata = jsondata; - - // Create our data table out of JSON data loaded from server. - chart.datatable = new google.visualization.DataTable(chart.jsondata); - //console.log(chart.datatable); - - // cleanup once every 50 updates - // we don't cleanup on every single, to avoid firefox flashing effect - if(chart.chart && chart.refreshCount > 50) { - chart.chart.clearChart(); - chart.chart = null; - chart.refreshCount = 0; - } - - // Instantiate and draw our chart, passing in some options. - if(!chart.chart) { - // console.log('Creating new chart for ' + chart.url); - if(chart.chartType == "LineChart") - chart.chart = new google.visualization.LineChart(document.getElementById(chart.div)); - else - chart.chart = new google.visualization.AreaChart(document.getElementById(chart.div)); - } - - if(chart.chart) { - chart.chart.draw(chart.datatable, chart.chartOptions); - chart.refreshCount++; - chart.last_updated = new Date().getTime(); - } - else console.log('Cannot create chart for ' + chart.url); - }) - .fail(function() { - // to avoid an infinite loop, let's assume it was refreshed - if(chart.chart) chart.chart.clearChart(); - chart.chart = null; - chart.refreshCount = 0; - showChartIsLoading(chart.div, chart.name, chart.chartOptions.width, chart.chartOptions.height, "failed to refresh"); - chart.last_updated = new Date().getTime(); - }) - .always(function() { - if(typeof doNext == "function") doNext(); - }); - - return true; -} - -function chartIsLoadingHTML(name, width, height, message) -{ - return "

" + name + "

" + (message?message:"loading chart...") + "

"; -} - -function showChartIsLoading(id, name, width, height, message) { - document.getElementById(id).innerHTML = chartIsLoadingHTML(name, width, height, message); -} - -// calculateChartPointsToShow -// calculate the chart group and point to show properties. -// This uses the chartOptions.width and the supplied divisor -// to calculate the propers values so that the chart will -// be visually correct (not too much or too less points shown). -// -// c = the chart -// divisor = when calculating screen points, divide width with this -// if all screen points are used the chart will be overcrowded -// the default is 2 -// maxtime = the maxtime to show -// the default is to render all the server data -// group = the required grouping on points -// if undefined or negative, any calculated value will be used -// if zero, one of 1,2,5,10,15,20,30,45,60 will be used - -function calculateChartPointsToShow(c, divisor, maxtime, group, enable_curve) { - // console.log('calculateChartPointsToShow( c = ' + c.id + ', divisor = ' + divisor + ', maxtime = ' + maxtime + ', group = ' + group + ' )'); - - if(!divisor) divisor = 2; - - var before = c.before?c.before:new Date().getTime() / 1000; - var after = c.after?c.after:c.first_entry_t; - - var dt = before - after; - if(dt > c.entries * c.update_every) dt = c.entries * c.update_every; - - // console.log('chart ' + c.id + ' internal duration is ' + dt + ' secs, requested maxtime is ' + maxtime + ' secs'); - - if(!maxtime) maxtime = c.entries * c.update_every; - dt = maxtime; - - var data_points = Math.round(dt / c.update_every); - if(!data_points) data_points = 100; - - var screen_points = Math.round(c.chartOptions.width / divisor); - if(!screen_points) screen_points = 100; - - // console.log('screen_points = ' + screen_points + ', data_points = ' + data_points + ', divisor = ' + divisor); - - if(group == undefined || group <= 0) { - if(screen_points > data_points) { - c.group = 1; - c.points_to_show = data_points; - // console.log("rendering at full detail (group = " + c.group + ", points_to_show = " + c.points_to_show + ')'); - } - else { - c.group = Math.round(data_points / screen_points); - - if(c.group > 60) c.group = 90; - else if(c.group > 45) c.group = 60; - else if(c.group > 30) c.group = 45; - else if(c.group > 20) c.group = 30; - else if(c.group > 15) c.group = 20; - else if(c.group > 10) c.group = 15; - else if(c.group > 5) c.group = 10; - else if(c.group > 4) c.group = 5; - else if(c.group > 3) c.group = 4; - else if(c.group > 2) c.group = 3; - else if(c.group > 1) c.group = 2; - else c.group = 1; - - c.points_to_show = Math.round(data_points / c.group); - // console.log("rendering adaptive (group = " + c.group + ", points_to_show = " + c.points_to_show + ')'); - } - } - else { - c.group = group; - c.points_to_show = Math.round(data_points / group); - // console.log("rendering with supplied group (group = " + c.group + ", points_to_show = " + c.points_to_show + ')'); - } - - // console.log("final configuration (group = " + c.group + ", points_to_show = " + c.points_to_show + ')'); - - // make sure the line width is not congesting the chart - if(c.chartType == 'LineChart') { - if(c.points_to_show > c.chartOptions.width / 3) { - c.chartOptions.lineWidth = 1; - } - - else { - c.chartOptions.lineWidth = 2; - } - } - else if(c.chartType == 'AreaChart') { - if(c.points_to_show > c.chartOptions.width / 2) - c.chartOptions.lineWidth = 0; - else - c.chartOptions.lineWidth = 1; - } - - // do not render curves when we don't have at - // least 2 twice the space per point - if(!enable_curve || c.points_to_show > (c.chartOptions.width * c.chartOptions.lineWidth / 2) ) - c.chartOptions.curveType = 'none'; - else - c.chartOptions.curveType = c.default_curveType; - - var hpoints = Math.round(maxtime / 30); - if(hpoints > 10) hpoints = 10; - c.chartOptions.hAxis.gridlines.count = hpoints; -} - - -// loadCharts() -// fetches all the charts from the server -// returns an array of objects, containing all the server metadata -// (not the values of the graphs - just the info about the graphs) - -function loadCharts(base_url, doNext) { - $.ajax({ - url: ((base_url)?base_url:'') + '/all.json', - dataType: 'json', - cache: false - }) - .done(function(json) { - $.each(json.charts, function(i, value) { - json.charts[i].div = json.charts[i].name.replace(/\./g,"_"); - json.charts[i].div = json.charts[i].div.replace(/\-/g,"_"); - json.charts[i].div = json.charts[i].div + "_div"; - - // make sure we have the proper values - if(!json.charts[i].update_every) chart.update_every = 1; - if(base_url) json.charts[i].url = base_url + json.charts[i].url; - - json.charts[i].last_updated = 0; - json.charts[i].thumbnail = false; - json.charts[i].refreshCount = 0; - json.charts[i].group = 1; - json.charts[i].points_to_show = 0; // all - json.charts[i].group_method = "max"; - - json.charts[i].chart = null; - json.charts[i].jsondata = null; - json.charts[i].datatable = null; - json.charts[i].before = 0; - json.charts[i].after = 0; - - // if it is detail, disable it by default - if(json.charts[i].isdetail) json.charts[i].enabled = false; - - // set default chart options - json.charts[i].chartOptions = { - width: 400, - height: 200, - lineWidth: 1, - title: json.charts[i].title, - fontSize: 11, - hAxis: { - // title: "Time of Day", - // format:'HH:mm:ss', - viewWindowMode: 'maximized', - slantedText: false, - format:'HH:mm:ss', - textStyle: { - fontSize: 9 - }, - gridlines: { - color: '#EEE' - } - }, - vAxis: { - title: json.charts[i].units, - viewWindowMode: 'pretty', - minValue: -0.1, - maxValue: 0.1, - direction: 1, - textStyle: { - fontSize: 9 - }, - gridlines: { - color: '#EEE' - } - }, - chartArea: { - width: '65%', - height: '80%' - }, - focusTarget: 'category', - annotation: { - '1': { - style: 'line' - } - }, - pointsVisible: 0, - titlePosition: 'out', - titleTextStyle: { - fontSize: 11 - }, - tooltip: { - isHtml: true, - ignoreBounds: true, - textStyle: { - fontSize: 9 - } - } - }; - - json.charts[i].default_curveType = 'none'; - - // set the chart type - switch(json.charts[i].chart_type) { - case "area": - json.charts[i].chartType = "AreaChart"; - json.charts[i].chartOptions.isStacked = false; - json.charts[i].chartOptions.areaOpacity = 0.3; - - json.charts[i].chartOptions.vAxis.viewWindowMode = 'maximized'; - json.charts[i].non_zero = 0; - - json.charts[i].group = 3; - break; - - case "stacked": - json.charts[i].chartType = "AreaChart"; - json.charts[i].chartOptions.isStacked = true; - json.charts[i].chartOptions.areaOpacity = 0.85; - json.charts[i].chartOptions.lineWidth = 1; - json.charts[i].group_method = "average"; - json.charts[i].non_zero = 1; - - json.charts[i].chartOptions.vAxis.viewWindowMode = 'maximized'; - json.charts[i].chartOptions.vAxis.minValue = null; - json.charts[i].chartOptions.vAxis.maxValue = null; - - json.charts[i].group = 10; - break; - - default: - case "line": - json.charts[i].chartType = "LineChart"; - json.charts[i].chartOptions.lineWidth = 2; - json.charts[i].non_zero = 0; - - json.charts[i].default_curveType = 'function'; - - json.charts[i].group = 3; - break; - } - - // the category name, and other options, per type - switch(json.charts[i].type) { - case "system": - json.charts[i].category = "System"; - json.charts[i].categoryPriority = 10; - json.charts[i].glyphicon = "glyphicon-dashboard"; - - if(json.charts[i].id == "system.cpu" || json.charts[i].id == "system.ram") { - json.charts[i].chartOptions.vAxis.minValue = 0; - json.charts[i].chartOptions.vAxis.maxValue = 100; - } - else { - json.charts[i].chartOptions.vAxis.minValue = -0.1; - json.charts[i].chartOptions.vAxis.maxValue = 0.1; - } - break; - - case "net": - json.charts[i].category = "Network"; - json.charts[i].categoryPriority = 20; - json.charts[i].glyphicon = "glyphicon-transfer"; - - // disable IFB and net.lo devices by default - if((json.charts[i].id.substring(json.charts[i].id.length - 4, json.charts[i].id.length) == "-ifb") - || json.charts[i].id == "net.lo") - json.charts[i].enabled = false; - break; - - case "tc": - json.charts[i].category = "Quality of Service"; - json.charts[i].categoryPriority = 30; - json.charts[i].glyphicon = "glyphicon-random"; - break; - - case "ipvs": - json.charts[i].category = "IP Virtual Server"; - json.charts[i].categoryPriority = 40; - json.charts[i].glyphicon = "glyphicon-sort"; - break; - - case "netfilter": - json.charts[i].category = "Netfilter"; - json.charts[i].categoryPriority = 50; - json.charts[i].glyphicon = "glyphicon-cloud"; - break; - - case "ipv4": - json.charts[i].category = "IPv4"; - json.charts[i].categoryPriority = 60; - json.charts[i].glyphicon = "glyphicon-globe"; - break; - - case "mem": - json.charts[i].category = "Memory"; - json.charts[i].categoryPriority = 70; - json.charts[i].glyphicon = "glyphicon-dashboard"; - break; - - case "cpu": - json.charts[i].category = "CPU"; - json.charts[i].categoryPriority = 80; - json.charts[i].glyphicon = "glyphicon-dashboard"; - - if(json.charts[i].id.substring(0, 7) == "cpu.cpu") { - json.charts[i].chartOptions.vAxis.minValue = 0; - json.charts[i].chartOptions.vAxis.maxValue = 100; - } - break; - - case "disk": - json.charts[i].category = "Disks"; - json.charts[i].categoryPriority = 90; - json.charts[i].glyphicon = "glyphicon-hdd"; - break; - - case "nfsd": - json.charts[i].category = "NFS Server"; - json.charts[i].categoryPriority = 100; - json.charts[i].glyphicon = "glyphicon-hdd"; - break; - - case "nut": - json.charts[i].category = "UPS"; - json.charts[i].categoryPriority = 110; - json.charts[i].glyphicon = "glyphicon-dashboard"; - break; - - case "netdata": - json.charts[i].category = "NetData"; - json.charts[i].categoryPriority = 3000; - json.charts[i].glyphicon = "glyphicon-thumbs-up"; - break; - - case "apps": - json.charts[i].category = "Apps"; - json.charts[i].categoryPriority = 4000; - json.charts[i].glyphicon = "glyphicon-tasks"; - break; - - case "squid": - json.charts[i].category = "Squid"; - json.charts[i].categoryPriority = 5000; - json.charts[i].glyphicon = "glyphicon-link"; - break; - - case "example": - json.charts[i].category = "Examples"; - json.charts[i].categoryPriority = 9000; - json.charts[i].glyphicon = "glyphicon-search"; - break; - - default: - json.charts[i].category = json.charts[i].type; - json.charts[i].categoryPriority = 1000; - json.charts[i].glyphicon = "glyphicon-search"; - break; - } - }); - - if(typeof doNext == "function") doNext(json); - }) - .fail(function() { - if(typeof doNext == "function") doNext(); - }); -}; - -// jquery visible plugin -(function($){ - - /** - * Copyright 2012, Digital Fusion - * Licensed under the MIT license. - * http://teamdf.com/jquery-plugins/license/ - * - * @author Sam Sehnert - * @desc A small plugin that checks whether elements are within - * the user visible viewport of a web browser. - * only accounts for vertical position, not horizontal. - */ - $.fn.visible = function(partial){ - - var $t = $(this), - $w = $(window), - viewTop = $w.scrollTop(), - viewBottom = viewTop + $w.height(), - _top = $t.offset().top, - _bottom = _top + $t.height(), - compareTop = partial === true ? _bottom : _top, - compareBottom = partial === true ? _top : _bottom; - - return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); - }; -})(jQuery); diff --git a/web/old/theme.css b/web/old/theme.css deleted file mode 100644 index 02525336b..000000000 --- a/web/old/theme.css +++ /dev/null @@ -1,87 +0,0 @@ -/* http://stackoverflow.com/questions/17005500/bootstrap-css-responsive-left-with-a-white-space-on-the-right */ - -html { - width: auto !important; - overflow-x: hidden !important; -} - -body { - width: auto !important; - overflow-x: hidden !important; - padding-top: 70px; - padding-bottom: 30px; -} - -.theme-dropdown .dropdown-menu { - position: static; - display: block; - margin-bottom: 20px; -} - -.theme-showcase > p > .btn { - margin: 5px 0; -} - -.thumbgraph { - float: left; -} - -.thumbgraphs { - width: 100%; -} - -.thumbtitle { - float: none; - width: 100%; -} - -.thumbgroup { - float: none; - width: 100%; -} - -.container.graphs { - width: 98%; -} - -.breadcrumb.graphs { - margin-top: 10px; - margin-bottom: 10px; -} - -.dropdown-menu { - max-height: 500px; - overflow-y: auto; - overflow-x: hidden; -} - -.google-visualization-tooltip-action: hover { - background-color: #eeeeee; -} -.google-visualization-tooltip { - border: solid 1px #bdbdbd; - border-radius: 2px; - background-color: white; - box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6); - font-size: 9px; - -moz-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6); - -webkit-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6); - position: absolute; - line-height: 90% !important; - margin: 0 0 0 0 !important; - padding: 0.5em 0.1em 0.5em 0.1em !important; - width: 180px !important; - z-index: 1000 !important; -} -.google-visualization-tooltip-item-list { - list-style-type: none; - margin: 0 0 0 0 !important; - padding: 0 0 0 0 !important; -} -.google-visualization-tooltip-item { - margin: 0 0 0 0 !important; -} -.google-visualization-tooltip-item-list -.google-visualization-tooltip-item:first-child { - margin: 0 0 0 0 !important; -} -- cgit v1.2.3

- Welcome to NetData! -

- -

- loading cosmos -

- Please wait... -

NetData

Please wait...

" + name + "

" + (message?message:"loading chart...") + "

" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "	" + groupChartActions(i, c) + "

- Welcome to NetData! - - - - loading cosmos - - Please wait... -

NetData

Please wait...

" + name + "" + (message?message:"loading chart...") + "

- Welcome to NetData! -

- -

- loading cosmos -

- Please wait... -

" + name + "

" + (message?message:"loading chart...") + "