grafana-scripted-dashboard.js

/* global _ */

/*
 * Complex scripted dashboard
 * This script generates a dashboard object that Grafana can load. It also takes a number of user
 * supplied URL parameters (in the ARGS variable)
 *
 * Return a dashboard object, or a function
 *
 * For async scripts, return a function, this function must take a single callback function as argument,
 * call this callback function with the dashboard object (look at scripted_async.js for an example)
 */

'use strict';

// accessible variables in this scope
var window, document, ARGS, $, jQuery, moment, kbn;

// Setup some variables
var dashboard;

// All url parameters are available via the ARGS object
var ARGS;

// Initialize a skeleton with nothing but a rows array and service object
dashboard = {
  rows : [],
};

// Initialize args data and elasticseach data

var rows = 1;
var seriesName = 'argName';
var scenario_id = '';
var scenario_name = '';
var response = '';
var cell_id = '41S01SMCON8701_S01SMCON87';

if(!_.isUndefined(ARGS.rows)) {
  rows = parseInt(ARGS.rows, 10);
}

if(!_.isUndefined(ARGS.name)) {
  seriesName = ARGS.name;
}

if(!_.isUndefined(ARGS.scenario_name)) {
  scenario_name = ARGS.scenario_name;
}

if(!_.isUndefined(ARGS.scenario_id)) {
  scenario_id = ARGS.scenario_id;
}

if(!_.isUndefined(ARGS.cell_id)) {
  cell_id = ARGS.cell_id;
}

// mode options
var fill = 1
var lineWidth = 1
var staircase = false
var pointRadius = 2

if (!_.isUndefined(ARGS.fill)) {
    fill = parseInt(ARGS.fill)
}

if (!_.isUndefined(ARGS.lineWidth)) {
    lineWidth = parseInt(ARGS.lineWidth)
}

if (!_.isUndefined(ARGS.staircase)) {
    if (ARGS.staircase == 'false') {
        staircase = false
    } else if (ARGS.staircase == 'true') {
        staircase = true
    }
}

if (!_.isUndefined(ARGS.pointRadius)) {
    pointRadius = parseFloat(ARGS.pointRadius)
}

// stacking and null value
var stack = false
var nullValue = 'null'

if (!_.isUndefined(ARGS.stack)) {
    if (ARGS.stack == 'false') {
        stack = false
        console.log(ARGS.stack)
    } else if (ARGS.stack == 'true') {
        stack = true
    }
}

if (!_.isUndefined(ARGS.nullValue)) {
    if ((ARGS.nullValue == 'null') ||
        (ARGS.nullValue == 'null as zero') ||
        (ARGS.nullValue == 'connected')) {
            nullValue = ARGS.nullValue
    } 
}

// draw modes
var bars = false
var lines = true
var points = true

if (!_.isUndefined(ARGS.bars)) {
    if (ARGS.bars == 'false') {
        bars = false
    } else if (ARGS.bars == 'true') {
        bars = true
    }
}

if (!_.isUndefined(ARGS.lines)) {
    if (ARGS.lines == 'false') {
        lines = false
    } else if (ARGS.lines == 'true') {
        lines = true
    }
}

if (!_.isUndefined(ARGS.points)) {
    if (ARGS.points == 'false') {
        points = false
    } else if (ARGS.points == 'true') {
        points = true
    }
}

// yaxis
var showYAxis = true
var scale = 1;
var yMin = null
var yMax = null


if (!_.isUndefined(ARGS.showYAxis)) {
    if (ARGS.showYAxis == 'false') {
        showYAxis = false
    } else if (ARGS.showYAxis == 'true') {
        showYAxis = true
    }
}

if (!_.isUndefined(ARGS.scale)) {
    if (ARGS.scale == 'linear') {
        scale = 1
    } else if (ARGS.scale == 'log (base 2)') {
        scale = 2
    } else if (ARGS.scale == 'log (base 10)') {
        scale = 10
    } else if (ARGS.scale == 'log (base 32)') {
        scale = 32
    } else if (ARGS.scale == 'log (base 1024)') {
        scale = 1024
    }
}


if (!_.isUndefined(ARGS.yMin)) {
    if (ARGS.yMin == "null"){
        yMin = null
    } else {
        yMin = parseFloat(ARGS.yMin)
    }
}

if (!_.isUndefined(ARGS.yMax)) {
    if (ARGS.yMax == "null"){
        yMax = null
    } else {
        yMax = parseFloat(ARGS.yMax)
    }
}

// legend
var legend = {
    alignAsTable: false,
    avg: false,
    rightSide: false,
    current: false,
    max: false,
    min: false,
    show: true,
    total: false,
    values: false
}

if (!_.isUndefined(ARGS.asTable)) {
    if (ARGS.asTable == 'false') {
        legend.alignAsTable = false
    } else if (ARGS.asTable == 'true') {
        legend.alignAsTable = true
    }
}

if (!_.isUndefined(ARGS.toTheRight)) {
    if (ARGS.toTheRight == 'false') {
        legend.rightSide = false
    } else if (ARGS.toTheRight == 'true') {
        legend.rightSide = true
    }
}


if (!_.isUndefined(ARGS.legendAvg)) {
    if (ARGS.legendAvg == 'false') {
        legend.avg = false
        legend.values = true
    } else if (ARGS.legendAvg == 'true') {
        legend.avg = true
        legend.values = true
    }
}

if (!_.isUndefined(ARGS.legendCurrent)) {
    if (ARGS.legendCurrent == 'false') {
        legend.current = false
        legend.values = true
    } else if (ARGS.legendCurrent == 'true') {
        legend.current = true
        legend.values = true
    }
}

if (!_.isUndefined(ARGS.legendMax)) {
    if (ARGS.legendMax == 'false') {
        legend.max = false
        legend.values = true
    } else if (ARGS.legendMax == 'true') {
        legend.max = true
        legend.values = true
    }
}

if (!_.isUndefined(ARGS.legendMin)) {
    if (ARGS.legendMin == 'false') {
        legend.min = false
        legend.values = true
    } else if (ARGS.legendMin == 'true') {
        legend.min = true
        legend.values = true
    }
}

if (!_.isUndefined(ARGS.showLegend)) {
    if (ARGS.showLegend == 'false') {
        legend.show = false
        legend.values = true
    } else if (ARGS.showLegend == 'true') {
        legend.show = true
        legend.values = true
    }
}

if (!_.isUndefined(ARGS.legendTotal)) {
    if (ARGS.legendTotal == 'false') {
        legend.total = false
        legend.values = true
    } else if (ARGS.legendTotal == 'true') {
        legend.total = true
        legend.values = true
    }
}

var decimals = 2;

if (!_.isUndefined(ARGS.decimals)) {
    decimals = parseInt(ARGS.decimals)
}

var interval = "15m"

if (!_.isUndefined(ARGS.interval)) {
    interval = ARGS.interval
}



var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", 'http://146.250.180.213/api/scenarios/'+scenario_id, false ); // false for synchronous request
xmlHttp.send( null );
response = JSON.parse(xmlHttp.responseText);

dashboard.uid = response.id;

// Set a title
dashboard.title = 'Data Analysis';
// dashboard.uid = 'e49LTL9iz'
dashboard.timezone = "utc"

dashboard.templating= {
  list: [
    {
      allValue: null,
      current: {
        isNone: true,
        tags: [],
        text: cell_id,
        value: cell_id
      },
      datasource: "-- Grafana --",
      definition: "",
      hide: 2,
      includeAll: false,
      label: "Cell ID",
      multi: false,
      name: "cell_id",
      options: [
        {
          isNone: true,
          selected: true,
          text: "None",
          value: ""
        }
      ],
      query: "",
      refresh: 0,
      regex: "",
      skipUrlSync: false,
      sort: 0,
      tagValuesQuery: "",
      tags: [],
      tagsQuery: "",
      type: "query",
      useTags: false
    },
    {
      allValue: null,
      current: {
        isNone: true,
        tags: [],
        text: scenario_id,
        value: scenario_id
      },
      datasource: "-- Grafana --",
      definition: "",
      hide: 2,
      includeAll: false,
      label: "SCENARIO_ID",
      multi: false,
      name: "scenario_id",
      options: [
        {
          isNone: true,
          selected: true,
          text: "None",
          value: ""
        }
      ],
      query: "",
      refresh: 0,
      regex: "",
      skipUrlSync: false,
      sort: 0,
      tagValuesQuery: "",
      tags: [],
      tagsQuery: "",
      type: "query",
      useTags: false
    },
    {
      allValue: null,
      current: {
        isNone: true,
        tags: [],
        text: scenario_name,
        value: scenario_name
      },
      datasource: "-- Grafana --",
      definition: "",
      hide: 2,
      includeAll: false,
      label: "SCENARIO_NAME",
      multi: false,
      name: "scenario_name",
      options: [
        {
          isNone: true,
          selected: true,
          text: "None",
          value: ""
        }
      ],
      query: "",
      refresh: 0,
      regex: "",
      skipUrlSync: false,
      sort: 0,
      tagValuesQuery: "",
      tags: [],
      tagsQuery: "",
      type: "query",
      useTags: false
    }
  ]
}

dashboard.links = [
  {
    icon: "external link",
    tags: [],
    type: "dashboards"
  }
]

dashboard.annotations = {
  list: [
    {
      builtIn: 1,
      datasource: "-- Grafana --",
      enable: true,
      hide: true,
      iconColor: "rgba(0, 211, 255, 1)",
      limit: 100,
      name: "Annotations & Alerts",
      showIn: 0,
      type: "dashboard"
    }
  ]
}

dashboard.editable = true
dashboard.gnetId = null
dashboard.graphTooltip = 0
dashboard.id = 1
dashboard.iteration = 1554385724770

dashboard.refresh = "5s"
// dashboard.schemaVersion = 16
dashboard.style = "dark"
dashboard.tags = []
dashboard.timepicker = {
  refresh_intervals: [
    "5s",
    "10s",
    "30s",
    "1m",
    "5m",
    "15m",
    "30m",
    "1h",
    "2h",
    "1d"
  ],
  time_options: [
    "5m",
    "15m",
    "1h",
    "6h",
    "12h",
    "24h",
    "2d",
    "7d",
    "30d"
  ]
}
dashboard.version = 1

// Set default time
// time can be overridden in the url using from/to parameters, but this is
// handled automatically in grafana core during dashboard initialization

dashboard.time = {
  from: "now/y",
  to: "now"
};

var color_list = ["#7eb26d", "#cca300", "#bf1b00"]
var primary_counter_color = {};
var primary_counter = {};
var primary_counter_target = [];
for (var i=0; i< response.primary_counters.length; i++){
  primary_counter_color["Average " + response.primary_counters[i]] = color_list[i];

  primary_counter = {
    bucketAggs: [
      {
        field: "time",
        id: "1",
        settings: {
          interval: interval,
          min_doc_count: 0,
          trimEdges: 0
        },
        type: "date_histogram"
      }
    ],
    metrics: [
      {
        field: response.primary_counters[i],
        id: "1",
        meta: {},
        settings: {},
        type: "avg"
      }
    ],
    query: "cell_id:$cell_id",
    refId: "A",
    timeField: "time"
  }
  primary_counter_target.push(primary_counter)
}



var other_counter_color = {};
var other_counter = {};
var other_counter_target = [];
for (var i=0; i< response.secondary_counters.length; i++){
  other_counter_color["Average " + response.secondary_counters[i]] = color_list[i];

  other_counter = {
    bucketAggs: [
      {
        field: "time",
        id: "2",
        settings: {
          interval: interval,
          min_doc_count: 0,
          trimEdges: 0
        },
        type: "date_histogram"
      }
    ],
    metrics: [
      {
        field: response.secondary_counters[i],
        id: "2",
        meta: {},
        settings: {},
        type: "avg"
      }
    ],
    query: "cell_id:$cell_id",
    refId: "A",
    timeField: "time"
  }
  other_counter_target.push(other_counter)
}


var text_panel={
  height: '110px',
  content: "<center><h1>$cell_id - $scenario_name</h1></center>\n<form target=\"_blank\" action=\"http://localhost:5000/execute_procedures\" method=\"get\">\n    <input type=\"hidden\" name=\"cell_id\" value=\"$cell_id\">\n    <input type=\"hidden\" name=\"scenario\" value=\"$scenario_name\">\n    <center>\n    <button style=\"color:black; font-size: 15px; background-color: white\" type=\"submit\">Execute procedures</button><center>\n</form>",
  gridPos: {
    h: 4,
    w: 24,
    x: 0,
    y: 0
  },
  id: 8,
  links: [],
  mode: "html",
  title: "Cell ID - Scenario",
  type: "text",
  span: 12
};

var primary_panel = {
  height: '340px',
  aliasColors: primary_counter_color,
  bars: bars,
  dashLength: 10,
  dashes: false,
  datasource: "Elasticsearch",
  fill: fill,
  span: 12,
  gridPos: {
    h: 12,
    w: 24,
    x: 0,
    y: 4
  },
  id: 1,
  legend: legend,
  lines: lines,
  linewidth: lineWidth,
  links: [],
  nullPointMode: nullValue,
  percentage: false,
  pointradius: pointRadius,
  points: points,
  renderer: "flot",
  seriesOverrides: [
    {
      alias: "Average degradated",
      yaxis: 1
    }
  ],
  spaceLength: 10,
  stack: stack,
  steppedLine: staircase,
  targets: primary_counter_target,
  timeFrom: null,
  timeRegions: [],
  timeShift: null,
  title: "Primary Counters",
  tooltip: {
    shared: true,
    sort: 0,
    value_type: "individual"
  },
  type: "graph",
  xaxis: {
    buckets: null,
    mode: "time",
    name: null,
    show: true,
    values: []
  },
  transparent: true,
  yaxes: [
    {
      format: 'short',
      label: null,
      logBase: scale,
      max: yMax,
      min: yMin,
      show: showYAxis,
      decimals: decimals
  },
  {
      format: 'short',
      label: null,
      logBase: scale,
      max: yMax,
      min: yMin,
      show: showYAxis,
      decimals: decimals
  }
  ],
  yaxis: {
    align: false,
    alignLevel: null
  }
};

var secondary_panel = {
  height: '340px',
  aliasColors: other_counter_color,
  bars: bars,
  dashLength: 10,
  dashes: false,
  datasource: "Elasticsearch",
  fill: fill,
  span: 12,
  gridPos: {
    h: 12,
    w: 24,
    x: 0,
    y: 4
  },
  id: 2,
  legend: legend,
  lines: lines,
  linewidth: lineWidth,
  links: [],
  nullPointMode: nullValue,
  percentage: false,
  pointradius: pointRadius,
  points: points,
  renderer: "flot",
  seriesOverrides: [
    {
      alias: "Average degradated",
      yaxis: 1
    }
  ],
  spaceLength: 10,
  stack: stack,
  steppedLine: staircase,
  targets: other_counter_target,
  timeFrom: null,
  timeRegions: [],
  timeShift: null,
  title: "Secondary Counters",
  tooltip: {
    shared: true,
    sort: 0,
    value_type: "individual"
  },
  type: "graph",
  xaxis: {
    buckets: null,
    mode: "time",
    name: null,
    show: true,
    values: []
  },
  transparent: true,
  yaxes: [
    {
      format: 'short',
      label: null,
      logBase: scale,
      max: yMax,
      min: yMin,
      show: showYAxis,
      decimals: decimals
  },
  {
      format: 'short',
      label: null,
      logBase: scale,
      max: yMax,
      min: yMin,
      show: showYAxis,
      decimals: decimals
  }
  ],
  yaxis: {
    align: false,
    alignLevel: null
  }
};

var panel_list = [];

panel_list.push(text_panel)
panel_list.push(primary_panel)

if(response.secondary_counters.length > 0){
  panel_list.push(secondary_panel)
}
  

for (var i = 0; i < rows; i++) {
  dashboard.rows.push({
    panels: panel_list,
    schemaVersion: 16
  });
}

var origin;

function sendTime(event) {
  // var message;
  // origin = event.origin;
  // event.source.postMessage(JSON.stringify({from: dashboard.time.from, to: dashboard.time.to}),
  //                          event.origin);
  console.log(dashboard.rows[0].panels[1]);
  dashboard.rows[0].panels[1].bars = !dashboard.rows[0].panels[1].bars
  console.log('message received');
  console.log(dashboard.rows[0].panels[1]);

  return dashboard;
}

// document.getElementsByClassName('main-view').item(0).addEventListener('dblclick', function(){
//   console.log(origin);
//   console.log("Double Click!!");
// });

// var timer
// document.getElementsByClassName('main-view').item(0).addEventListener('mouseup', function() {
//   clearTimeout(timer);
// }, false)

// document.getElementsByClassName('main-view').item(0).addEventListener('mousedown', function() {
//   timer = setTimeout(function() {
//     console.log("LONG PRESS")
//   }, 150);
// }, false)

function changeGraphConfig(){
  console.log('graphconfig received');
  console.log(dashboard.rows[0].panels[1])
}

window.addEventListener("message", sendTime, false);
window.addEventListener("graphconfig", changeGraphConfig, false);

// if (window.addEventListener) {
	// For standards-compliant web browsers
// }
// else {
// 	window.attachEvent("onmessage", sendTime);
// }

document.getElementsByClassName('scroll-canvas')[0].style.backgroundColor = '#fafafa'

document.getElementsByClassName('scroll-canvas')[0].style.border = '1px solid #dadada'




return dashboard;