widget.js

(function(){
  if (typeof String.prototype.startsWith != 'function') {
    String.prototype.startsWith = function (str){
      return this.slice(0, str.length) == str;
    };
  }

  if (typeof String.prototype.endsWith != 'function') {
    String.prototype.endsWith = function (str){
      return this.slice(this.length - str.length, this.length) == str;
    };
  }

  if (typeof String.prototype.capitalize != 'function') {
    String.prototype.capitalize = function() {
      if (this.indexOf('-') > 0 && this.indexOf('-') < 4 || this.length < 3) { //Maybe remove?
        return this.substring(0, 3).toUpperCase() + this.slice(3);
      } else {
        return this.charAt(0).toUpperCase() + this.slice(1);
      }
    };
  }

  if (typeof Array.prototype.scan != 'function') {
    Array.prototype.scan = function (fn) {
      var value = true;
      for (var i = 0; i < this.length; i++) {
        value = value && fn(this[i]);
      };
      return value;
    };
  }

  function toArray(obj) { return (typeof obj == "string" ? [ obj ] : obj) }

  // Given the return value and user value should return widget to display it or null.
  function expressRouter(property, location, instance){
    var progressPattern = /^progress:(\d+)\/(\d+)\/(\d+)\/(\d+)$/
    var urlPattern = /^http/
    var ipPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
    var passPattern = /password|key|secret|credential/i
    var testIp   = function(ip)  { return ipPattern.test(ip) }
    var testHttp = function(url) { return urlPattern.test(url) }
    var testPass = function(id)  { return passPattern.test(id) }

    var id       = property.path[0];
    var value    = String(property.runtimeValue);
    var raw      = property.runtimeValue;
    var isString = typeof raw == 'string';
    var curName  = _.last(property.path);

    if(id.startsWith('frame.') && isString && value.startsWith('https') && location == 'instance')    return Frame
    else if(id.toLowerCase().startsWith('chart.') && isString && progressPattern.test(value.trim()))  return Pie
    else if(property.path[0].endsWith('-rpms-list'))             return RPMList
    //else if(Array.isArray(raw) && raw.scan(testIp))            return Compute
    else if(isString && testIp(raw))                             return Compute
    else if(id.endsWith('-dns'))                                 return Compute
    else if(id.endsWith('-pdns'))                                return Compute
    else if(isString && testHttp(value))                         return Link
    else if(passPattern.test(id) || passPattern.test(curName))   return HideThePassword
    else if(id.endsWith('-pic') && raw.large && raw.small)       return Picture
    else if(_.isObject(raw)  && !_.isArray(raw) && location == 'instance-dashboard') return HideValue
  }

  app.widgets.registerWidgetRouter(expressRouter);

  // Hack. Replaced function
  app.widgets.makeExpandable = function(type, cnt, $content) {
    $content.find('tr').hide();
    var $td = $('<td class="exp-show-link"><a style="cursor:pointer">[ +' + (cnt - 1) + ' more ]</a></td>');
    $content.find('tr:first').show().append($td);
    $content.find('td,th').css('border-bottom', 'none');
    $td.find('a').on('click', function() {
      $content.find('tr').show();
      $content.find('td.exp-show-link').hide();
    });
    return $content;
  }

  function RPMList(property, location, instance) {
    if (location == 'instance') {
      var rpms = property.runtimeValue
      var rpmPattern = /^(.+)\-(.+)\-(\d+)(?:\.(.+))?(?:\.(.+))?$/
      var buff = []
      buff.push("<div style='font-size: small' onclick='this.find('span.fa').toggleClass(\"fa-chevron-left fa-chevron-down\"); this.next().toggle()>" +
        "Tracking " + rpms.length + " package(s)" +
        "<span class='fa fa-chevron-down' style='font-size: x-small; float: right'> </span>" +
        "</div><table style='display: none; font-size: small'><tr style='color: #999'><th>Name</th><th>Version</th><th>Release</th><th>Arch</th></tr>")
      for(var i = 0; i < rpms.length; i++){
        var rpm = rpms[i]
        var groups = rpmPattern.exec(rpm)
        console.log(groups)
        if(groups)
          buff.push(
            "<tr><td>" + groups[1] + "</td><td>" + groups[2] + "</td><td>" + groups[3] + "</td><td>" + (groups[4] == undefined ? 'N/A' : groups[4]) + "</td></tr>"
          )
        else
          buff.push("<tr><td colspan='4'>" + rpm + "</td></tr>")
      }
      buff.push("</table>")
      $(this).html(buff.join(" "))
    } else {
      var rpms = property.runtimeValue
      var retval = "Tracking " + rpms.length + " package(s)"
      $(this).html(retval)
    }
  }

  function Compute(property, location, instance) {
    var icon = "cloud";
    switch(property.path[0]) {
      case "db-hosts":  icon = "columns";    break;
      case "app-hosts": icon = "th";         break;
      case "lb-hosts":  icon = "arrows-alt"; break;
    }
    var ips = toArray(property.runtimeValue);
    if (location == 'instance') {
      if(ips.length > 1) {
        var table = $("<table class='property-table'><tr><td style='border-bottom:0'><i class='widget-compute fa fa-" + icon + "' style='color: #999;'></i>&nbsp;" + ips[0] + "&nbsp;</td></tr></table>");
        for(var i = 1; i < ips.length; i++) {
          table.append(
            $("<tr style='display:none'><td style='border-bottom:0'><i class='widget-compute fa fa-" + icon + "' style='color: #999;'></i>&nbsp;" + ips[i] + "</td></tr>")
          )
        }
        var link = $("<a>[ +" + (ips.length - 1) + " more ]</a>").css('cursor', 'pointer');
        link.on('click', function() {
          link.hide();
          table.find('tr:hidden').show()
        });
        table.find('td:first').append(link);
        $(this).empty().append(table);
      }
      else {
        $(this).html(
          "<i class='widget-compute fa fa-" + icon + "' style='color: #999;'></i> " + ips[0]
        )
      }
    } else {
      if (ips.length > 0) {
        $(this).html(
          "<i class='widget-compute fa fa-" + icon + "' style='float: right; color: #999;'></i>" +
          (ips.length == 1 ? ips[0] : "[ " + ips.length + " IP's ]")
        )
      }
    }
  }

  function Link(property, location, instance) {
    var name = property.description || property.path.join('.');
    if (location.indexOf('instance') >= 0) {
      var $link = $('<a/>').attr({'href': property.runtimeValue, 'target': '_blank'}).text(name);
      $(this).empty().html($link);
    }
  }

  function size(table) {
    var size = 0, key;
    for (key in table) {
        if (table.hasOwnProperty(key)) size++;
    }
    return size;
  };

  function StackChart(property, location, instance) {
    if (location == 'instance') {
      var progressList = property.runtimeValue || []
      var rawData = [["Index", "Pass", "Ignore", "Fail", "Unknown"]]
      for (var i=0; i<progressList.length; i++){
        var text = progressList[i]
        var all, green, progress, red, res, rest, urlPattern, yellow;
        urlPattern = /^progress:(\d+)\/(\d+)\/(\d+)\/(\d+)$/;
        progress = text.trim();
        if (urlPattern.test(progress)) {
          res = progress.match(urlPattern);
          all = res[1] * 1;
          green = res[2] * 1;
          yellow = res[3] * 1;
          red = res[4] * 1;
          rest = all - (green + yellow + red);
          if (all === 0) {
            console.log("Sum is zero: " + progress);
            continue;
          } else if (all < green + yellow + red) {
            console.log("Sum is zero: " + progress);
            continue;
          } else {
            rawData.push([i.toString(), green, yellow, red, rest])
          }
        }
        else {
          console.log("Is not progress info: " + progress);
        }
      }

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawStackChart);
      function drawStackChart() {
        var data = google.visualization.arrayToDataTable(rawData)
        var options = {
          legend: 'none',
          isStacked: true,
          colors: ['green','yellow','red','blue'],
          pointSize: 3
        };

        var chart = new google.visualization.AreaChart(document.getElementById('stackchart'+returnValue.id));
        chart.draw(data, options);

      }

      $(this).attr('id', "stackchart" + returnValue.id);

    } else {
      $(this).empty(); //not rendered
    }
  }

  function Frame(property, location, instance) {
    //layout      : 'block',
    var url = property.runtimeValue;
    $(this).empty().append("<iframe height='500' width='100%' src='"+url+"'><p>Your browser does not support iframes.</p></iframe>");
  }

  function Pie(property, location, instance) {
    var all, green, progress, red, res, rest, yellow;
    var returnValue = property.runtimeValue;
    var urlPattern = /^progress:(\d+)\/(\d+)\/(\d+)\/(\d+)$/;
    progress = property.runtimeValue.trim();

    res    = progress.match(urlPattern);
    all    = res[1] * 1;
    green  = res[2] * 1;
    yellow = res[3] * 1;
    red    = res[4] * 1;
    rest   = all - (green + yellow + red);
    if (all === 0) {
      $(this).html("<span class=\"badge badge-important\">Sum is zero</span> " + progress);
    } else if (all < green + yellow + red) {
      $(this).html("<span class=\"badge badge-warning\">Sum is too small</span> " + progress);
    } else {
      $(this).html("<div style=\"white-space: normal\" class=\"progress\" data=\"" + progress + "\">\n<div class=\"bar bar-success\" style=\"width: " + (green / all * 100) + "%;\">" + green + "</div>\n<div class=\"bar bar-warning\" style=\"width: " + (yellow / all * 100) + "%;\">" + yellow + "</div>\n<div class=\"bar bar-danger\" style=\"width: " + (red / all * 100) + "%;\">" + red + "</div>\n<div class=\"bar bar-info\" style=\"width: " + (rest / all * 100) + "%;\">" + rest + "</div>\n</div>");
    }
  }
    /*
    chart: function(returnValue) {
      var text = property.runtimeValue;
      var all, green, progress, red, res, rest, urlPattern, yellow;
      urlPattern = /^progress:(\d+)\/(\d+)\/(\d+)\/(\d+)$/;
      progress = text.trim();
      console.log("Progress: '" + progress + "'");
      if (urlPattern.test(progress)) {
        res = progress.match(urlPattern);
        all = res[1] * 1;
        green = res[2] * 1;
        yellow = res[3] * 1;
        red = res[4] * 1;
        rest = all - (green + yellow + red);
        if (all === 0) {
          return "<span class=\"badge badge-important\">Sum is zero</span> " + progress;
        } else if (all < green + yellow + red) {
          return "<span class=\"badge badge-warning\">Sum is too small</span> " + progress;
        } else {

          //see https://developers.google.com/chart/interactive/docs/gallery/piechart
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Test Results', 'Tests count'],
              ['Pass',  green],
              ['Ignore', yellow],
              ['Fail',  red],
              ['Unknown', rest]
            ]);
            var options = {
              legend: 'none',
              is3D: true,
              colors: ['green','yellow','red','blue']
            };
            var gchart = new google.visualization.PieChart(document.getElementById('piechart_'+returnValue.id));
            gchart.draw(data, options);
          }
          return "<div id=\"piechart_"+returnValue.id+"\" ></div>";

        }
      } else {
        return text;
      }
    }
    */

  function HideThePassword(property, location, instance) {
    var pass = property.runtimeValue;
    var span = $('<span style="display: inline-block; min-width: 85px; margin-right: 10px;"/>');
    var checkbox = $('<label style="display:inline-block"><input type="checkbox"> show password</label>');

    function updateValue(state) {
      if (state) {
        span.text(pass);
      } else {
        span.text('•••••••••••••••••'.substr(0, pass.length))
      }
    }
    var state = $(this).data('currentState') || false
    checkbox.find('input').prop('checked', state);
    updateValue(state);

    checkbox.on('click', 'input', function(e) {
      $(this).data('currentState', this.checked);
      updateValue(this.checked);
    });

    $(this).append(span).append(checkbox);
  }

  // Display properties like `*-pic: {"large": "url1", "small": "url2"}` as image
  function Picture(property, location, instance) {
    var src;
    var img = $('<img alt="">');
    if (location == 'instance') {
      src = property.runtimeValue.large;
    } else {
      src = property.runtimeValue.small;
      $(this).css('text-align', 'center');
      img.attr('height', property.runtimeValue['small-height'] || 200);
    }
    $(this).empty().append(img.attr('src', src));
  }

  function HideValue(property, location, instance) {
    // Nothing to display
  }

})()