diff --git a/public/dashboards/embed.js b/public/dashboards/embed.js new file mode 100644 index 000000000000..c25be29cd9de --- /dev/null +++ b/public/dashboards/embed.js @@ -0,0 +1,273 @@ +//# sourceURL=embed.js +// The marker above helps Google Chrome to find the source code in Developer Console (https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources) +// accessable variables in this scope +var window, document, ARGS, $, jQuery, moment, kbn, _, services; + +var constructDashboardAsync = function (callbackFunction) { + + if (!ARGS) { + ARGS = {}; + } + + var downsampleIntTemplate = { + "type": "interval", + "datasource": null, + "hide": 2, + "refresh_on_load": false, + "name": "downsampleInt", + "options": [ + { + "text": "auto", + "value": "$__auto_interval" + }, + { + "text": "1m", + "value": "1m" + }, + { + "text": "10m", + "value": "10m" + }, + { + "text": "30m", + "value": "30m" + }, + { + "text": "1h", + "value": "1h" + }, + { + "text": "6h", + "value": "6h" + }, + { + "text": "12h", + "value": "12h" + }, + { + "text": "1d", + "value": "1d" + }, + { + "text": "7d", + "value": "7d" + }, + { + "text": "14d", + "value": "14d" + }, + { + "text": "30d", + "value": "30d" + } + ], + "includeAll": false, + "allFormat": "glob", + "query": "1m,10m,30m,1h,6h,12h,1d,7d,14d,30d", + "auto": true, + "current": { + "text": "1m", + "value": "1m" + }, + "auto_count": 200 + }; + + function loadDashboard() { + var result = { + "title": "Metrics Overview", + "time": { + "from": "now-1h", + "to": "now" + }, + "rows": [ + { + "title": "", + "height": "600px", + "editable": false, + "collapse": false, + "showTitle": false, + "panels": [ + { + "id": 0, + "span": 12, + "editable": false, + "type": "graph", + "renderer": "flot", + "x-axis": true, + "y-axis": true, + "scale": 1, + "y_formats": [ + "gscustom", + "none" + ], + "lines": true, + "fill": 0, + "linewidth": 2, + "points": false, + "pointradius": 5, + "bars": false, + "stack": false, + "percentage": false, + "legend": { + "show": true, + "values": true, + "min": false, + "max": false, + "current": false, + "total": false, + "avg": false, + "hideEmpty": false, + "alignAsTable": false, + "rightSide": false + }, + "nullPointMode": "connected", + "steppedLine": false, + "tooltip": { + "value_type": "cumulative", + "shared": false + }, + "seriesOverrides": [], + "links": [], + "leftYAxisLabel": "", + "targets": [], + "title": "" + } + ] + } + ], + "templating": { + "list": [ ], + "enable": true + } + }; + + // Auto-downsampling template + result.templating.list.push(downsampleIntTemplate); + + // construct target from ARGS + setTimeRange(result); + + if (result.rows[0] && ARGS.height) { + result.rows[0].height = ARGS.height; + } + + var panel = result.rows[0].panels[0]; + customizePanel(panel) + + if (ARGS.targets) { + // Example usage : http://grafana-url.com/#/dashboard/script/embed.js?targets=%5B%7B%22domain%22:%22system%22,%22asset%22:%22nds1630358.com%22,%22metric%22:%22ENDPOINT.Processor.PercentUserTime%22%7D%5D&startTime=now-6h&endTime=now&chartTitle=CPU%20Usage&embed&fullscreen&panelId=1 + // Show multiple lines via target arguments + var targets = JSON.parse(ARGS.targets); + for (var i=0; iPulse default HTML panel

" + }; + $.extend(panel, custom); + return panel; + }; + + var createDefaultRow = function(custom) { + var row = { + "title": "Default", + "height": "300px", + "editable": true, + "collapse": true, + "showTitle": true, + "panels": [] + }; + $.extend(row, custom); + return row; + }; + + return { + createDefaultPanel: createDefaultPanel, + createHtmlPanel: createHtmlPanel, + createDefaultRow: createDefaultRow, + createDefaultTarget: createDefaultTarget + }; +}; + +var constructDashboardAsync = function (callbackFunction) { + // Example value: "user/dashboardHost" + var dashboardId = ARGS['dashboard']; + + // https://grafana-url.com/api/datasources/proxy/1/grafana/script/user/dashboardHost + var url = '/api/datasources/proxy/1/grafana/script/'+dashboardId; + $.ajax({ + method: 'GET', + url: url + }).done(function(scriptedDashboardApiResult) { + executeScriptedDashboard(scriptedDashboardApiResult, callbackFunction); + }); +}; + +var executeScriptedDashboard = function(scriptedDashboardApiResult, callbackFunction) { + // The result is from GrafanaController.getScriptedDashboard + if (! scriptedDashboardApiResult) { + console.log("Scripted dashboard returned empty for URL" + url); + return; + } + environmentConfig = { + pulseApiBaseUrl: '/api/datasources/proxy/1' + }; + var scriptBody = scriptedDashboardApiResult.script; + var scriptFunc = new Function('ARGS', 'kbn', '_', 'moment', 'window', 'document', '$', 'jQuery', 'services', scriptBody); + var servicesForFunc = { + pulseService: pulseService($), + sysdigService: sysdigService($) + }; + var scriptResult = scriptFunc(ARGS, kbn, _, moment, window, document, $, $, servicesForFunc); + + // Handle async dashboard scripts + var dashboardPromise; + if (_.isFunction(scriptResult)) { + try { + dashboardPromise = new Promise(resolve => { + scriptResult(function (dashboard) { + resolve({data: dashboard}); + }); + }); + } catch (e) { + console.log('Caught an error', e); + } + //dashboardPromise = promise; + } else { + dashboardPromise = Promise.resolve({ data: scriptResult }); + } + dashboardPromise.then(function(scriptedDashboardResult) { + handleScriptedDashboardResult(scriptedDashboardResult, callbackFunction); + }, + function(err) { + console.log("Failed to resolve promise", err); + }); +}; + +var handleScriptedDashboardResult = function (scriptedDashboardResult, callbackFunction) { + var dashboardObj = scriptedDashboardResult.data; + // This API converts Grafana1 dashboard to Grafana5 + var dashboardConvertUrl = '/api/datasources/proxy/1/grafana/dashboards/convert'; + if (dashboardObj.panels) { + // In case the function already returns Grafana 5 Dashboard object, then + // we don't need to call + callbackFunction(dashboardObj); + } else { + $.ajax({ + method: 'POST', + url: dashboardConvertUrl, + data: JSON.stringify(dashboardObj), + contentType: 'application/json' + }).done(function(convertedDashboard) { + callbackFunction(convertedDashboard); + }).fail(function(jqXHR, textStatus){ + console.log("Failed to call convert API", textStatus, jqXHR); + }); + } +}; + +return constructDashboardAsync;