consul-templaterb 1.2.1 → 1.3.0

data/samples/consul-ui/consul_keys.json.erb

@@ -0,0 +1,12 @@
+<% path = ENV['kv_path'] || ''
+require 'base64'
+require 'json'
+require 'date'
+
+data = {}
+kv(path, recurse:true).each do |tuple|
+  data[tuple['Key']] = tuple['Value']
+end
+%><%
+json = { kv: data, generated_at: Time.now}
+%><%= JSON.pretty_generate(json) %>

data/samples/consul-ui/consul_nodes.json.erb

@@ -0,0 +1,64 @@
+<%
+# This template can be configure the following way with environment variables
+# Environment variables to filter services/instances
+#   SERVICES_TAG_FILTER: basic tag filter for service (default HTTP)
+#   INSTANCE_MUST_TAG: Second level of filtering (optional, default to SERVICES_TAG_FILTER)
+#   INSTANCE_EXCLUDE_TAG: Exclude instances having the given tag (default: canary)
+#   EXCLUDE_SERVICES: comma-separated services to exclude (default: consul-agent-http,mesos-slave,mesos-agent-watcher)
+
+  service_tag_filter = ENV['SERVICES_TAG_FILTER'] || nil
+  instance_must_tag = ENV['INSTANCE_MUST_TAG'] || service_tag_filter
+  instance_exclude_tag = ENV['INSTANCE_EXCLUDE_TAG']
+
+  # Services to hide
+  services_blacklist = (ENV['EXCLUDE_SERVICES'] || 'consul-agent-http,mesos-slave,mesos-agent-watcher,mesos-exporter-slave').split(',')
+  service_per_node = {}
+  services.each do |service_name, tags|
+    if !services_blacklist.include? service_name
+      service(service_name, tag: service_tag_filter).sort {|a,b| a['Node']['Node'] <=> b['Node']['Node'] }.each do |snode|
+        node_info = service_per_node[snode['Node']['Node']] || {}
+
+        node_node_data = {
+          Name: snode['Node']['Node'],
+          Address: snode['Node']['Address'],
+          Meta: snode['Node']['Meta'],
+        }
+
+        node_services_data = node_info[:Service] || []
+
+        service_data = {
+          Service: snode["Service"]["Service"],
+          Address: snode.service_address,
+          Tags: snode["Service"]["Tags"],
+          Port: snode["Service"]["Port"],
+        }
+        checks_array = []
+        snode["Checks"].each do |check|
+          checks_data = {
+            name: check["Name"],
+            status: check["Status"],
+            notes: check["Notes"],
+            output: check["Output"],
+          }
+          checks_array.push(checks_data)
+        end
+        node_service = {
+          Service: service_data,
+          Checks: checks_array,
+        }
+        node_services_data.push(node_service)
+
+        node_data = {
+          Node: node_node_data,
+          Service: node_services_data,
+        }
+
+        service_per_node[snode['Node']['Node']] = node_data
+      end
+      # break
+    end
+  end
+%><%
+  json_datacenters = datacenters
+  json = { nodes: service_per_node, datacenters: json_datacenters, generated_at: Time.now}
+%><%= JSON.pretty_generate(json) %>

data/samples/consul-ui/css/style.css

@@ -3,7 +3,7 @@
    box-shadow: none;
 }
 
-#service-wrapper, #instances-wrapper {
+#service-wrapper, #instances-wrapper, #keys-wrapper {
   overflow: scroll;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
@@ -18,23 +18,35 @@
   overflow: hidden;
 }
 
-#service-wrapper  .list-group-item:last-child, #instances-wrapper .list-group-item:last-child {
+#service-wrapper .list-group-item:last-child, #instances-wrapper .list-group-item:last-child,
+#keys-wrapper .list-group-item:last-child {
   border-bottom-width: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
 
-#service-wrapper  .list-group-item:first-child, #instances-wrapper .list-group-item:first-child {
+#service-wrapper .list-group-item:first-child, #instances-wrapper .list-group-item:first-child,
+#keys-wrapper .list-group-item:first-child {
   border-top-width: 0px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
 }
 
-#service-wrapper  .list-group-item, #instances-wrapper .list-group-item {
+#service-wrapper .list-group-item, #instances-wrapper .list-group-item, #keys-wrapper .list-group-item {
   border-left: 0px;
   border-right: 0px;
 }
 
+#node-statuses span {
+  font-size: 1rem;
+  transition: background-color .16s linear;
+  cursor: pointer;
+}
+
+#node-statuses {
+  margin-top: 0.4rem;
+}
+
 h2 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -75,3 +87,67 @@ h2 .fas:hover {
   background-color: #a5a5a5 !important;
   color: #f1f1f1 !important;
 }
+
+.status-deactivated {
+  background-color: #a5a5a5 !important;
+  color: #f1f1f1 !important;
+}
+
+.service-status {
+  transition: background-color .16s linear;
+  font-size: 85%;
+  cursor: pointer;
+}
+
+#instance-statuses {
+  padding-top: 5px;
+  text-align: center;
+}
+
+.status-sidebar {
+  width: 5px !important;
+  min-height: 1px;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.instance-content {
+  width: 100%;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 12px;
+}
+
+#nodes #instances-list .list-group-item {
+  padding-left: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  display: flex;
+  flex-direction: row;
+}
+
+html, body {
+    height:100%;
+}
+
+.instance-content-header {
+  display: flex;
+}
+
+.instance-content-header h5 {
+  margin-right: 10px;
+}
+
+.meta-tags {
+  text-align: right;
+  flex: 2 0 0;
+}
+
+#data-wrapper {
+  overflow: scroll;
+}
+
+pre, code {
+  height: 100%;
+  margin-bottom: 0px;
+}

data/samples/consul-ui/js/keys.js

@@ -0,0 +1,129 @@
+class ConsulKeys {
+  constructor(ressourceURL, refresh) {
+    this.ressourceURL = ressourceURL;
+    this.fetchRessource();
+    this.keysList = $("#keys-list");
+    this.keysFilter = $("#keys-filter");
+    this.keysFilter.keyup(this.filterService);
+    this.refresh = parseInt(refresh);
+    this.keysFilterCounter = $("#keys-counter");
+    this.keysFilterCount = 0;
+  }
+
+  fetchRessource() {
+    $.ajax({url: this.ressourceURL, cache: false, dataType: "json", sourceObject: this, success: function(result){
+      consulKeys.initRessource(result);
+    }});
+  }
+
+  initRessource(data) {
+    this.data = data;
+    this.reloadKeysList();
+    console.log('Data generated at: ' + data['generated_at']);
+
+    var urlParam = new URL(location.href).searchParams.get('key');
+    if (urlParam) {
+      var nodes = document.getElementById('keys-list').childNodes;
+      for(var i in nodes) {
+        if($(nodes[i]).find(".key-name").html() == urlParam) {
+          var selectedElement = $(nodes[i])
+          this.selectKey(selectedElement);
+          selectedElement.focus()
+          break;
+        }
+      }
+    } else {
+      this.selectKey(document.getElementById('keys-list').firstElementChild);
+    }
+
+    if(this.refresh > 0) {
+      setTimeout(this.fetchRessource, this.refresh * 1000);
+    }
+  }
+
+  reloadKeysList() {
+    this.keysList.html('');
+    this.keysFilterCount = 0;
+
+    for (var key in this.data.kv) {
+
+      var listItem = document.createElement('button');
+      listItem.setAttribute('type','button');
+      listItem.setAttribute('onfocus','consulKeys.onClickServiceName(this)');
+      listItem.setAttribute('onclick','consulKeys.onClickServiceName(this)');
+      listItem.setAttribute('value',key);
+      listItem.setAttribute('class','list-group-item list-group-item-action');
+
+      var serviceNameItem = document.createElement('div');
+      serviceNameItem.setAttribute('class', 'key-name');
+      serviceNameItem.appendChild(document.createTextNode(key));
+      listItem.appendChild(serviceNameItem);
+
+      this.keysFilterCount += 1;
+      this.keysList.append(listItem);
+    }
+    this.keysFilterCounter.html(this.keysFilterCount);
+    resizeWrapper('keys-wrapper', 'keys-list');
+    this.filterService();
+  }
+
+  filterService() {
+    var filter = new RegExp(consulKeys.keysFilter.val());
+    consulKeys.keysFilterCount = 0;
+    consulKeys.keysList.children('button').each(function (){
+      var ui = $(this);
+      if(keyMatcher(this, filter)) {
+        ui.removeClass('d-none');
+        ui.addClass('d-block');
+        consulKeys.keysFilterCount += 1;
+        consulKeys.keysFilterCounter.html(consulKeys.keysFilterCount);
+      } else {
+        ui.removeClass('d-block');
+        ui.addClass('d-none');
+      }
+    })
+  }
+
+  onClickServiceName(source) {
+    this.selectKey(source);
+    this.updateURL($(source).find(".key-name").html());
+  }
+
+  updateURL(link) {
+    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
+    if (link) {
+      newUrl += '?key=' + link
+    }
+    window.history.pushState({},"",newUrl);
+  }
+
+  selectKey(source) {
+    if (this.selectedKey) {
+      $(this.selectedKey).removeClass('active');
+    }
+    var serviceName = $(source).find(".key-name").html()
+    this.selectedKey = source.closest( "button" );
+    $(this.selectedKey).addClass('active');
+    this.displayKey([serviceName]);
+  }
+
+  displayKey(key) {
+    $("#kv-title").html(key);
+    if(this.data.kv[key] != null) {
+      var dataToDisplay = atob(this.data.kv[key]);
+    } else {
+      var dataToDisplay = 'NO DATA';
+    }
+
+    $("#kv-data").html(dataToDisplay);
+    $("#kv-data").removeClass();
+
+    $('pre code').each(function(i, block) {
+      hljs.highlightBlock(block);
+    });
+    resizeWrapper('data-wrapper', 'kv-data');
+  }
+}
+
+$( window ).resize(resizeData);
+resizeData();

data/samples/consul-ui/js/nodes.js

@@ -0,0 +1,120 @@
+class ConsulNodes {
+  constructor(ressourceURL, refresh) {
+    this.ressourceURL = ressourceURL;
+    this.fetchRessource();
+    this.instanceFilter = $("#instance-filter");
+    this.instanceFilter.keyup(function (e) {
+      clearTimeout(consulNodes.timeout);
+      consulNodes.timeout = setTimeout(consulNodes.filterInstances, 400);
+    });
+    this.refresh = parseInt(refresh);
+    this.filterStatus = null;
+    this.maxDisplayed = 100;
+    this.displayedCount = 0;
+    this.servicesStatus = {};
+  }
+
+  fetchRessource() {
+    $.ajax({url: this.ressourceURL, cache: false, dataType: "json", sourceObject: this, success: function(result){
+      consulNodes.initRessource(result);
+    }});
+  }
+
+  initRessource(data) {
+    this.data = data;
+    this.displayInstances(this.data['nodes']);
+    console.log('Data generated at: ' + data['generated_at']);
+  }
+
+  onClickFilter(source) {
+    var status = $(source).attr('status');
+    this.filterStatus = (this.filterStatus == status) ? null : status;
+    this.filterInstances();
+  }
+
+  filterInstances() {
+    updateFilterDisplay(consulNodes.filterStatus);
+    consulNodes.displayedCount = 0;
+    consulNodes.servicesStatus = {};
+    var filter = new RegExp(consulNodes.instanceFilter.val());
+    $('#instances-list').children('div').each(function() {
+      var status = $(this).attr('status');
+      var limitNotReached = (consulNodes.displayedCount < consulNodes.maxDisplayed);
+
+      if(nodeMatcher(this, filter)) {
+        if (consulNodes.filterStatus == null || consulNodes.filterStatus == status) {
+          if (limitNotReached) {
+            $(this).removeClass('d-none');
+            $(this).addClass('d-flex');
+            consulNodes.displayedCount++;
+          }
+          var state = this.getAttribute('status');
+          consulNodes.servicesStatus[state] = (consulNodes.servicesStatus[state] || 0) + 1;
+          consulNodes.servicesStatus['total'] = (consulNodes.servicesStatus['total'] || 0) + 1;
+          updateStatusItem(consulNodes.servicesStatus);
+        } else {
+          $(this).removeClass('d-flex');
+          $(this).addClass('d-none');
+        }
+      } else {
+        $(this).removeClass('d-flex');
+        $(this).addClass('d-none');
+      }
+    })
+  }
+
+  displayInstances(instances) {
+    $("#instances-list").html("");
+
+    // var serviceStatus = buildServiceStatus(service);
+    this.displayedCount = 0;
+
+    for (var key in instances) {
+      var instance = instances[key];
+
+      var instanceHtml = document.createElement('div');
+      if(this.displayedCount > this.maxDisplayed) {
+        instanceHtml.setAttribute('class','list-group-item d-none');
+      } else {
+        instanceHtml.setAttribute('class','list-group-item');
+      }
+
+      var sidebar = document.createElement('div');
+      sidebar.setAttribute('class','status-sidebar');
+      var state = getGeneralNodeStatus(instance['Service']);
+      switch(state) {
+          case 'passing': sidebar.classList.add('bg-success'); break;
+          case 'warning': sidebar.classList.add('bg-warning'); break;
+          case 'critical': sidebar.classList.add('bg-danger'); break;
+      }
+      this.servicesStatus[state] = (this.servicesStatus[state] || 0) + 1;
+      this.servicesStatus['total'] = (this.servicesStatus['total'] || 0) + 1;
+
+      var content = document.createElement('div');
+      content.setAttribute('class','instance-content');
+      var contentHead = document.createElement('div');
+      contentHead.setAttribute('class','instance-content-header');
+      contentHead.appendChild(nodeNameGenator(instance['Node']['Name'],instance['Node']['Address']));
+      contentHead.appendChild(nodeAddressGenator(instance['Node']['Address']));
+      contentHead.appendChild(nodeMetaGenator(instance['Node']['Meta']));
+      content.appendChild(contentHead);
+      content.appendChild(servicesGenerator(instance['Service']));
+      content.appendChild(tagsGenerator(getTagsNode(instance)));
+
+      instanceHtml.setAttribute('status', state);
+      instanceHtml.appendChild(sidebar)
+      instanceHtml.appendChild(content)
+
+      $("#instances-list").append(instanceHtml);
+
+      this.displayedCount++;
+    }
+
+    resizeInstances();
+    $('#instances-list .list-group-item').resize(resizeInstances);
+    this.filterInstances();
+  }
+}
+
+$( window ).resize(resizeInstances);
+resizeInstances();

data/samples/consul-ui/js/service.js

@@ -5,6 +5,8 @@ class ConsulService {
     this.serviceList = $("#service-list");
     this.serviceFilter = $("#service-filter");
     this.serviceFilter.keyup(this.filterService);
+    this.instanceFilter = $("#instance-filter");
+    this.instanceFilter.keyup(this.filterInstances);
     this.refresh = parseInt(refresh);
     this.filterStatus = null;
     this.serviceFilterCounter = $("#service-counter");
@@ -18,7 +20,7 @@ class ConsulService {
   }
 
   fetchRessource() {
-    $.ajax({url: "consul_template.json", cache: false, dataType: "json", sourceObject: this, success: function(result){
+    $.ajax({url: this.ressourceURL, cache: false, dataType: "json", sourceObject: this, success: function(result){
       consulService.initRessource(result);
     }});
   }
@@ -54,25 +56,45 @@ class ConsulService {
     for (var serviceName in this.data.services) {
       var service = this.data.services[serviceName];
       var serviceStatus = buildServiceStatus(service);
-      var listItem = '<button type="button" onfocus="consulService.onClickServiceName(this)" onclick="consulService.onClickServiceName(this)" value="' + serviceName + '" class="list-group-item list-group-item-action">';
-      listItem += '<div class="statuses" style="float:right">'
+
+      var listItem = document.createElement('button');
+      listItem.setAttribute('type','button');
+      listItem.setAttribute('onfocus','consulService.onClickServiceName(this)');
+      listItem.setAttribute('onclick','consulService.onClickServiceName(this)');
+      listItem.setAttribute('value',serviceName);
+      listItem.setAttribute('class','list-group-item list-group-item-action');
+
+      var statuses = document.createElement('div');
+      statuses.setAttribute('class','statuses float-right');
+
       if (!!serviceStatus['passing']) {
-        listItem += '<span class="badge badge-pill badge-success passing" style="margin-right:10px;">' + serviceStatus['passing'] + '</span>';
+        statuses.appendChild(createBadge('badge-success passing', serviceStatus['passing']));
       }
+
       if (!!serviceStatus['warning']) {
-        listItem += '<span class="badge badge-pill badge-warning warning" style="margin-right:10px;">' + serviceStatus['warning'] + '</span>';
+        statuses.appendChild(createBadge('badge-warning warning', serviceStatus['warning']));
       }
+
       if (!!serviceStatus['critical']) {
-        listItem += '<span class="badge badge-pill badge-danger critical" style="margin-right:10px;">' + serviceStatus['critical'] + '</span>';
+        statuses.appendChild(createBadge('badge-danger critical', serviceStatus['critical']));
       }
-      listItem+= ' / <span class="badge badge-pill badge-dark">' + (serviceStatus['total'] || 0) + '</span></div>';
-      listItem += '<div class="service-name">' + serviceName + '</div>';
-      listItem += '<div class="service-tags">'
+
+      statuses.appendChild(createBadge('badge-dark', (serviceStatus['total'] || 0)));
+      listItem.appendChild(statuses);
+
+      var serviceNameItem = document.createElement('div');
+      serviceNameItem.setAttribute('class', 'service-name');
+      serviceNameItem.appendChild(document.createTextNode(serviceName));
+      listItem.appendChild(serviceNameItem);
+
+      var serviceTagsItem = document.createElement('div');
+      serviceTagsItem.setAttribute('class', 'service-tags');
+
       for (var i = 0; i < service.tags.length; i++) {
-        listItem += '<span title="' + service.tags[i] + '" class="badge badge-pill badge-' + (i%2?'secondary':'info') + '" style="float:right;">' + (service.tags[i]) + '</span> ';
+        serviceTagsItem.appendChild(createBadge('float-right badge-' + (i%2?'secondary':'info') , service.tags[i]));
       }
-      listItem += '</div>'
-      listItem += '</button>';
+
+      listItem.appendChild(serviceTagsItem);
       this.serviceFilterCount += 1;
       this.serviceList.append(listItem);
     }
@@ -85,14 +107,13 @@ class ConsulService {
     var filter = new RegExp(consulService.serviceFilter.val());
     consulService.serviceFilterCount = 0;
     consulService.serviceList.children('button').each(function (){
-      if($(this).html().match(filter)) {
-        var ui = $(this).closest( "button" )
+      var ui = $(this);
+      if(serviceMatcher(this, filter)) {
         ui.removeClass('d-none');
         ui.addClass('d-block');
         consulService.serviceFilterCount += 1;
         consulService.serviceFilterCounter.html(consulService.serviceFilterCount);
       } else {
-        var ui = $(this).closest( "button" )
         ui.removeClass('d-block');
         ui.addClass('d-none');
       }
@@ -111,24 +132,21 @@ class ConsulService {
   }
 
   filterInstances() {
-    $('.progress-status').each(function() {
-      var status = $(this).attr('status');
-      if (consulService.filterStatus == null) {
-        $(this).removeClass('progress-deactivated');
-      } else if(consulService.filterStatus == status) {
-        $(this).removeClass('progress-deactivated');
-      } else {
-        $(this).addClass('progress-deactivated');
-      }
-    })
+    updateFilterDisplay(consulService.filterStatus);
+    var filter = new RegExp(consulService.instanceFilter.val());
     $('#instances-list').children('div').each(function() {
       var status = $(this).attr('status');
-      if (consulService.filterStatus == null) {
-        $(this).removeClass('d-none');
-        $(this).addClass('d-block');
-      } else if (consulService.filterStatus == status) {
-        $(this).removeClass('d-none');
-        $(this).addClass('d-block');
+      if(instanceMatcher(this, filter)) {
+        if (consulService.filterStatus == null) {
+          $(this).removeClass('d-none');
+          $(this).addClass('d-block');
+        } else if (consulService.filterStatus == status) {
+          $(this).removeClass('d-none');
+          $(this).addClass('d-block');
+        } else {
+          $(this).removeClass('d-block');
+          $(this).addClass('d-none');
+        }
       } else {
         $(this).removeClass('d-block');
         $(this).addClass('d-none');
@@ -167,9 +185,9 @@ class ConsulService {
       serviceHtml.setAttribute('class','list-group-item');
 
       serviceHtml.appendChild(serviceTitleGenerator(instance));
-      serviceHtml.appendChild(tagsGenerator(instance));
-      serviceHtml.appendChild(checksStatusGenerator(instance));
-      var state = nodeState(instance);
+      serviceHtml.appendChild(tagsGenerator(instance.tags));
+      serviceHtml.appendChild(checksStatusGenerator(instance.checks));
+      var state = nodeState(instance.checks);
       serviceHtml.setAttribute('status', state);
       $("#instances-list").append(serviceHtml);
     }
@@ -183,153 +201,9 @@ class ConsulService {
 
     resizeWrapper('instances-wrapper', 'instances-list');
     $('#instances-list .list-group-item').resize(resizeAll);
+    this.filterInstances();
   }
 }
 
-function buildServiceStatus(service) {
-  var serviceStatus = {};
-
-  for (var key in service['instances']) {
-    var instance = service['instances'][key];
-    var state = nodeState(instance);
-
-    serviceStatus[state] = (serviceStatus[state] || 0) + 1;
-    serviceStatus['total'] = (serviceStatus['total'] || 0) + 1;
-  }
-
-  return serviceStatus;
-}
-
-function nodeState(instance) {
-  status='passing';
-  for (var checkKey in instance.checks) {
-    switch(instance.checks[checkKey]['status']) {
-      case 'passing': break;
-      case 'warning': status='warning'; break;
-      case 'critical': return 'critical'; break;
-    }
-  }
-  return status;
-}
-
-supported_protocols = ['https', 'http', 'sftp', 'ftp', 'ssh', 'telnet']
-
-function serviceTitleGenerator(instance) {
-  var protocol = null;
-  for (i in supported_protocols) {
-    var protoc = supported_protocols[i]
-    if (instance.tags.includes(protoc)) {
-      protocol = protoc + '://';
-      break;
-    }
-  }
-
-  var htmlTitle = document.createElement('h5');
-
-  var instanceLink = document.createElement('a');
-  if (protocol != null) {
-    instanceLink.setAttribute('href',  protocol + instance.addr + ':' + instance.port);
-    instanceLink.setAttribute('target',  '_blank');
-  }
-  instanceLink.appendChild(document.createTextNode(instance.name + ':' + instance.port));
-  htmlTitle.appendChild(instanceLink);
-
-  return htmlTitle;
-}
-
-function tagsGenerator(instance) {
-  var tags = document.createElement('div');
-
-  tags.className = 'tags';
-  tags.appendChild(document.createTextNode("Tags: "));
-  tags.appendChild(document.createElement('br'));
-
-  for (var tagKey in instance.tags) {
-    var tag = document.createElement('span');
-    tag.setAttribute('class', 'badge badge-secondary mx-1');
-    tag.appendChild(document.createTextNode(instance.tags[tagKey]));
-    tags.appendChild(tag);
-  }
-  return tags;
-}
-
-function checksStatusGenerator(instance) {
-  var checks = document.createElement('div');
-  checks.className = 'checks';
-  checks.appendChild(document.createTextNode("Checks: "));
-  checks.appendChild(document.createElement('br'));
-
-  for (var checkKey in instance.checks) {
-    checkId = Math.floor(Math.random()*10000);
-    switch(instance.checks[checkKey]['status']) {
-      case 'passing': var btn = 'btn-success'; break;
-      case 'warning': var btn = 'btn-warning'; break;
-      case 'critical': var btn = 'btn-danger'; break;
-    }
-    var check = document.createElement('div');
-
-    var btnCheck = document.createElement('button');
-    btnCheck.setAttribute('class','btn ' + btn + ' btn-sm m-1');
-    btnCheck.setAttribute('type', 'button');
-    btnCheck.setAttribute('data-toggle', 'collapse');
-    btnCheck.setAttribute('data-target', '#' + checkId);
-    btnCheck.setAttribute('aria-expanded', 'false');
-
-    btnCheck.appendChild(document.createTextNode(instance.checks[checkKey]['name']));
-
-    check.appendChild(btnCheck);
-
-    var collapseCheck = document.createElement('div');
-    collapseCheck.setAttribute('class', 'collapse')
-    collapseCheck.setAttribute('id', checkId)
-
-    var cardCheck = document.createElement('div');
-    cardCheck.setAttribute('class', 'card card-body p-3 m-1 mb-2');
-
-    var notes = document.createElement('table');
-    notes.setAttribute('class', 'table table-hover mb-0');
-
-    var dataToDisplay = ['notes', 'output'];
-    for (var index in dataToDisplay) {
-      var tr = document.createElement('tr');
-      var td1 = document.createElement('td');
-      var td2 = document.createElement('td');
-      var fieldName = dataToDisplay[index].replace(/\b\w/g, l => l.toUpperCase());
-      td1.appendChild(document.createTextNode(fieldName + ': '));
-      var target = td2
-      if (index != 1) {
-        target = document.createElement('div');
-        target.setAttribute("class", "check-notes")
-      } else {
-        // Notes are rendered as plain text
-        target = document.createElement('pre');
-        target.setAttribute("class", "check-output")
-      }
-      target.appendChild(document.createTextNode(instance.checks[checkKey][dataToDisplay[index]]));
-      td2.appendChild(target)
-      tr.appendChild(td1);
-      tr.appendChild(td2);
-      notes.appendChild(tr);
-    }
-
-    cardCheck.appendChild(notes);
-    collapseCheck.appendChild(cardCheck);
-    check.appendChild(collapseCheck);
-    checks.appendChild(check)
-  }
-
-  return checks;
-}
-
-function resizeAll() {
-  resizeWrapper('service-wrapper', 'service-list');
-  resizeWrapper('instances-wrapper', 'instances-list');
-}
-
-function resizeWrapper(wrapperId, wrapped) {
-  var size = $(window).height() - $('#' + wrapperId).offset()["top"] - 20;
-  $('#' + wrapperId).css("height", size);
-}
-
 $( window ).resize(resizeAll);
 resizeAll();