consul-templaterb 1.18.5 → 1.19.0

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

@@ -5,10 +5,10 @@ class ServiceTimeline {
       this.fetchRessource(true);
       this.serviceList = $("#service-list");
       this.serviceFilter = $("#service-filter");
-      this.serviceFilter.keyup(debounce(this.filterService, 250));
+      this.serviceFilter.keyup(debounce('timeline-service-filter-keyup', this.filterService, 250));
       this.serviceInstanceFilter = '';
       this.instanceFilter = $("#instance-filter");
-      this.instanceFilter.keyup(debounce(this.doFilter, 250));
+      this.instanceFilter.keyup(debounce('timeline-instance-filter-keyup', this.doFilter, 250));
       this.refresh = parseInt(refresh);
       this.filterStatus = null;
       this.refreshTimeout = null;
@@ -299,13 +299,11 @@ class ServiceTimeline {
         var filterValue = $('#instance-filter')[0].value;
         var serviceName = serviceTimeline.serviceInstanceFilter;
         var serviceEvaluator = function(){return true};
-        var stylesheetText = '';
+        var showServiceColumn = true;
         if (serviceName != '' && serviceName != 'All') {
-           stylesheetText = '.serviceCol { display: none; }';
+           showServiceColumn = false;
            serviceEvaluator = function(e){ return e.service === serviceName }
         }
-        // Show / hide .serviceCol content
-        document.getElementById('serviceCol').textContent = stylesheetText;
         var maxRows = document.getElementById("maxRows").value;
         //$("#service-title").html(service['name']);
         var tableBody = $('#all-events > tbody');
@@ -429,7 +427,9 @@ class ServiceTimeline {
               timeElement.setAttribute('title', fullTimestamp + '\nX-Consul-Index: ' +e.idx);
               this.buildCell(row, 'td', 'ts', timeElement);
             }
-            this.buildCell(row, 'td', 'lookup serviceName serviceCol', document.createTextNode(e.service));
+            if (showServiceColumn) {
+              this.buildCell(row, 'td', 'lookup serviceName serviceCol', document.createTextNode(e.service));
+            }
             var text = e.instance;
             if (e.instance_info && e.instance_info.node) {
                 text = e.instance_info.node;
@@ -512,5 +512,10 @@ class ServiceTimeline {
         if (this.data.length > 1) {
           this.lastEntryLoaded = this.data[this.data.length - 1];
         }
+        if (showServiceColumn) {
+          $('.serviceCol').show();
+        } else {
+          $('.serviceCol').hide();
+        }
     }
 }

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

@@ -0,0 +1,317 @@
+class ConsulUIManager {
+    constructor(resourceURL) {
+        this.resourceURL = resourceURL;
+    }
+
+    async fetchResource() {
+        const response = await fetch(this.resourceURL);
+        const result = await response.json();
+        this.data = result;
+        await this.initResource(result);
+    }
+
+    async initResource(data) {}
+}
+
+class SideSelector {
+    constructor(
+        filterElement,
+        listElement,
+        counterElement,
+        URLLabelFilter,
+        URLLabelSelected,
+        activateFavorite
+    ) {
+        this.filterElement = filterElement;
+        this.listElement = listElement;
+        this.counterElement = counterElement;
+        this.elements = {}
+        this.filterElement.keyup(debounce('side-selector-filter-element-keyup', this.updateFilter.bind(this), 250));
+
+        this.URLLabelFilter = URLLabelFilter;
+        this.URLLabelSelected = URLLabelSelected;
+
+        this.selectedItem = new URL(location.href).searchParams.get(
+            URLLabelSelected
+        );
+        this.filterValue = new URL(location.href).searchParams.get(URLLabelFilter);
+        if (this.filterValue == null) {
+            this.filterValue = "";
+        }
+        this.filterElement.val(this.filterValue);
+        this.activateFavorite = activateFavorite;
+        if (this.activateFavorite) {
+            this.favorites = new Favorites("favorite_services");
+        }
+        this.showProxies = false;
+    }
+
+    prepareData() {
+        for (var key in this.data) {
+            this.elements[key] = this.elementGenerator(key, this.data[key]);
+        }
+    }
+
+    updateFilter() {
+        this.filterValue = this.filterElement.val();
+        updateURL(this.URLLabelFilter, this.filterValue);
+        this.refreshList();
+    }
+
+    refreshList() {
+        this.listElement.html("");
+        var filter;
+        try {
+            filter = new RegExp(this.filterValue);
+        } catch (e) {
+            var safeReg = this.filterValue.replace(/[-[\]{}()*+?.,\\^$|]/g, "\\$&");
+            console.log(
+                "Failed to compile regexp for '" +
+                this.filterValue +
+                "', using strict lookup due to: " +
+                e
+            );
+            filter = new RegExp(safeReg);
+        }
+        var selectItem = null;
+        var selectElement = null;
+        var elementTotal = 0;
+
+        if (this.activateFavorite) {
+            var favList = this.favorites.getAsArray();
+            var favDict = this.favorites.favorites;
+            for (var i in favList) {
+                if (favList[i] in this.data) {
+                    if (this.matchElement(favList[i], this.data[favList[i]], filter)) {
+                        if (selectItem == null || this.selectedItem == favList[i]) {
+                            selectItem = favList[i];
+                            selectElement = this.elements[favList[i]];
+                        }
+                        elementTotal++;
+                        this.listElement.append(this.elements[favList[i]]);
+                    }
+                }
+            }
+        } else {
+            var favDict = {};
+        }
+
+        for (var key in this.data) {
+            if (!(key in favDict) && this.matchElement(key, this.data[key], filter)) {
+                if (selectItem == null || this.selectedItem == key) {
+                    selectItem = key;
+                    selectElement = this.elements[key];
+                }
+                this.listElement.append(this.elements[key]);
+                elementTotal++;
+            }
+        }
+        this.elementTotal = elementTotal;
+        this.counterElement.html(this.elementTotal);
+        if (selectElement) {
+          selectElement.scrollIntoView();
+        }
+        this.selectItem(selectElement, selectItem);
+    }
+
+    onClickElement(source, selected) {
+        this.selectItem(source, selected);
+    }
+
+    selectItem(element, item) {
+        if (this.selectedElem != null) {
+            this.selectedElem.classList.remove("active");
+        }
+        this.selectedElem = element;
+        if (element != null) {
+          this.selectedElem.classList.add("active");
+        }
+
+        this.selectedItem = item;
+
+        updateURL(this.URLLabelSelected, item);
+    }
+}
+
+class MainSelector {
+    constructor(listElement, filterElement, counterElement, maxDisplayElement, URLLabelFilter, URLLabelStatus) {
+        this.listElement = listElement;
+        this.filterElement = filterElement;
+        this.filterElement.keyup(debounce('main-selector-filter-element', this.updateFilter.bind(this), 250));
+        this.selectorStatus = {}
+        this.counterElement = counterElement;
+        this.maxDisplayElement = maxDisplayElement;
+        this.maxDisplayElement.get(0).addEventListener("change", this.maxDisplaySelection.bind(this));
+        this.URLLabelFilter = URLLabelFilter
+        this.URLLabelStatus = URLLabelStatus
+
+        this.filterValue = new URL(location.href).searchParams.get(URLLabelFilter);
+        if (this.filterValue == null) {
+            this.filterValue = "";
+        }
+        this.filterElement.val(this.filterValue)
+
+        this.statusFilter = new URL(location.href).searchParams.get(URLLabelStatus);
+        updateFilterDisplay(this.statusFilter);
+        console.log("filter", this.statusFilter);
+
+        this.maxDisplayed = this.maxDisplayElement.val();
+    }
+
+    initSelector(data) {
+        this.data = data;
+        for (var key in this.data) {
+            this.data[key]["element"] = this.elementGenerator(this.data[key]);
+        }
+        this.refreshList();
+    }
+
+    maxDisplaySelection() {
+        this.maxDisplayed = this.maxDisplayElement.val();
+        this.refreshList();
+    }
+
+    refreshList() {
+        this.listElement.html("");
+        try {
+            var filter = new RegExp(this.filterValue);
+        } catch (e) {
+            var safeReg = this.filterValue.replace(/[-[\]{}()*+?.,\\^$|]/g, "\\$&");
+            console.log(
+                "Failed to compile regexp for '" +
+                this.filterValue +
+                "', using strict lookup due to: " +
+                e
+            );
+            var filter = new RegExp(safeReg);
+        }
+
+        this.selectorStatus = {}
+        var displayedCounter = 0
+        for (var key in this.data) {
+            if (this.matchElement(this.data[key], filter)) {
+                if (this.maxDisplayed == "all" ||  displayedCounter < this.maxDisplayed) {
+                    this.listElement.append(this.data[key]["element"]);
+                    displayedCounter++
+                }
+
+                var state = this.getStatus(this.data[key]);
+                this.selectorStatus[state] = (this.selectorStatus[state] || 0) + 1;
+                this.selectorStatus['total'] = (this.selectorStatus['total'] || 0) + 1;
+            }
+        }
+        this.counterElement.html(displayedCounter);
+        this.updateStatusCounters();
+    }
+
+    onClickFilter(source, status) {
+        if (this.statusFilter == status) {
+            this.statusFilter = null;
+        } else {
+            this.statusFilter = status;
+        }
+
+        updateURL(this.URLLabelStatus, this.statusFilter);
+        updateFilterDisplay(this.statusFilter);
+        this.refreshList();
+    }
+
+    updateFilter() {
+        //console.log('filter updated from ', this.filterValue, 'to', this.filterElement.val());
+        this.filterValue = this.filterElement.val();
+        updateURL(this.URLLabelFilter, this.filterValue);
+        this.refreshList();
+    }
+}
+
+class CodeDisplayer {
+    constructor(codeElement, titleElement) {
+        this.codeElement = codeElement
+        this.titleElement = titleElement
+    }
+
+    displayData(key, code) {
+        this.titleElement.html(key);
+        this.codeElement.text(code);
+        this.codeElement.removeClass();
+
+        $('pre code').each(function(i, block) {
+            hljs.highlightBlock(block);
+        });
+        resizeWrapper('data-wrapper', 'kv-data');
+    }
+}
+
+class DisplayFlag {
+    constructor(element, callback) {
+        this.state = element.checked;
+        this.callback = callback;
+        this.element = element;
+
+        var obj = this;
+        element.addEventListener("click", function() {
+            obj.onClickElement();
+        });
+    }
+
+    onClickElement() {
+        this.state = this.element.checked;
+        this.callback();
+    }
+}
+
+class Favorites {
+    constructor(favoriteKey) {
+        this.key = favoriteKey;
+        const all = (localStorage.getItem(this.key) || "")
+            .split(",")
+            .filter(e => e != "");
+        this.favorites = {};
+        for (var i in all) {
+            this.favorites[all[i]] = true;
+        }
+    }
+
+    saveFavorites() {
+        let fav = [];
+        for (var i in this.favorites) {
+            if (!this.favorites[i]) {
+                continue;
+            }
+            fav.push(i);
+        }
+        localStorage.setItem(this.key, fav.join());
+    }
+
+    getAsArray() {
+        return Object.keys(this.favorites);
+    }
+
+    buildButton(serviceName) {
+        const btn = document.createElement("button");
+        btn.className = "favorite";
+        btn.setAttribute("title", "Add/Remove from favorites");
+
+        if (this.favorites[serviceName]) {
+            btn.className += " favorited";
+        }
+
+        var obj = this;
+        btn.addEventListener("click", function() {
+            obj.toggleFav(this, serviceName);
+        });
+
+        return btn;
+    }
+
+    toggleFav(source, serviceName) {
+        if (serviceName in this.favorites) {
+            delete this.favorites[serviceName];
+            source.classList.remove("favorited");
+        } else {
+            this.favorites[serviceName] = true;
+            source.classList.add("favorited");
+        }
+        this.saveFavorites();
+    }
+}

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

@@ -1,455 +1,483 @@
 function buildServiceStatus(service) {
-  var serviceStatus = {};
+    var serviceStatus = {};
+    for (var key in service['instances']) {
+        var instance = service['instances'][key];
+        var state = nodeState(instance.checks);
 
-  for (var key in service['instances']) {
-    var instance = service['instances'][key];
-    var state = nodeState(instance.checks);
-
-    serviceStatus[state] = (serviceStatus[state] || 0) + 1;
-    serviceStatus['total'] = (serviceStatus['total'] || 0) + 1;
-  }
-
-  return serviceStatus;
+        serviceStatus[state] = (serviceStatus[state] || 0) + 1;
+        serviceStatus['total'] = (serviceStatus['total'] || 0) + 1;
+    }
+    service["status"] = serviceStatus
+    return serviceStatus;
 }
 
-function debounce(func, wait) {
-	var timeout;
-	return function() {
-		var context = this, args = arguments;
-		var later = function() {
-			timeout = null;
-			func.apply(context, args);
-		};
-		clearTimeout(timeout);
-		timeout = setTimeout(later, wait);
-	};
+var timeouts = {};
+
+function debounce(name, func, wait) {
+    return function() {
+      var context = this,
+          args = arguments;
+      var later = function () {
+          timeouts[name] = null;
+          func.apply(context, args);
+      };
+      if (timeouts[name] != null) {
+        //console.log("Clearing timeout", name);
+        clearTimeout(timeouts[name]);
+      }
+      timeouts[name] = setTimeout(later, wait);
+    };
 };
 
 function padDateUnit(x) {
-  return x > 9 ? x : '0' + x;
+    return x > 9 ? x : '0' + x;
 }
 
 function formatDate(date) {
-  return padDateUnit(date.getMonth()+1) + "/" + padDateUnit(date.getDate()) + " " + padDateUnit(date.getHours()) + ':' + padDateUnit(date.getMinutes()) + ':' + padDateUnit(date.getSeconds());
+    return padDateUnit(date.getMonth() + 1) + "/" + padDateUnit(date.getDate()) + " " + padDateUnit(date.getHours()) + ':' + padDateUnit(date.getMinutes()) + ':' + padDateUnit(date.getSeconds());
 }
 
 function indexOfTimelineEvent(e) {
-  if (e == null) {
-    return 'k/0000000000/0000/0000';
-  }
-  return 'k/' + e.idx.toString().padStart(10, '0') + '/' + e.service + '/' + e.instance;
+    if (e == null) {
+        return 'k/0000000000/0000/0000';
+    }
+    return 'k/' + e.idx.toString().padStart(10, '0') + '/' + e.service + '/' + e.instance;
 }
 
 function nodeState(checks) {
-  status='passing';
-  for (var checkKey in checks) {
-    switch(checks[checkKey]['status']) {
-      case 'passing': break;
-      case 'warning': status='warning'; break;
-      case 'critical': return 'critical'; break;
+    status = 'passing';
+    for (var checkKey in checks) {
+        switch (checks[checkKey]['status']) {
+        case 'passing':
+            break;
+        case 'warning':
+            status = 'warning';
+            break;
+        case 'critical':
+            return 'critical';
+            break;
+        }
     }
-  }
-  return status;
+    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 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');
-  htmlTitle.setAttribute('title', 'Node Name: ' + instance.name +
-                                  '\nAddress: ' + instance.addr +
-                                  '\nService ID: ' + instance.id +
-                                  '\nService Port: ' + instance.port);
-
-  htmlTitle.setAttribute('class',  'instance-name');
-  var instanceLink = document.createElement('a');
-  var appendPort = "";
-  if (instance.port > 0) {
-    appendPort = ':' + instance.port;
-  }
-  if (protocol != null) {
-    instanceLink.setAttribute('href',  protocol + instance.addr + appendPort);
-    instanceLink.setAttribute('target',  '_blank');
-  }
-
-  instanceLink.appendChild(document.createTextNode(instance.name + appendPort));
-  htmlTitle.appendChild(instanceLink);
-  htmlTitle.appendChild(document.createTextNode(' '));
-  htmlTitle.appendChild(document.createTextNode(instance.addr));
-
-  return htmlTitle;
+
+    var htmlTitle = document.createElement('h5');
+    htmlTitle.setAttribute('title', 'Node Name: ' + instance.name +
+        '\nAddress: ' + instance.addr +
+        '\nService ID: ' + instance.id +
+        '\nService Port: ' + instance.port);
+
+    htmlTitle.setAttribute('class', 'instance-name');
+    var instanceLink = document.createElement('a');
+    var appendPort = "";
+    if (instance.port > 0) {
+        appendPort = ':' + instance.port;
+    }
+    if (protocol != null) {
+        instanceLink.setAttribute('href', protocol + instance.addr + appendPort);
+        instanceLink.setAttribute('target', '_blank');
+    }
+
+    instanceLink.appendChild(document.createTextNode(instance.name + appendPort));
+    htmlTitle.appendChild(instanceLink);
+    htmlTitle.appendChild(document.createTextNode(' '));
+    htmlTitle.appendChild(document.createTextNode(instance.addr));
+
+    return htmlTitle;
 }
 
 function nodeNameGenator(nodename, nodeaddr) {
-  var protocol = 'ssh://'
+    var protocol = 'ssh://'
 
-  var htmlTitle = document.createElement('h5');
+    var htmlTitle = document.createElement('h5');
 
-  var instanceLink = document.createElement('a');
-  instanceLink.setAttribute('class',  'instance-name');
-  if (protocol != null) {
-    instanceLink.setAttribute('href',  protocol + nodeaddr);
-    instanceLink.setAttribute('target',  '_blank');
-  }
-  instanceLink.appendChild(document.createTextNode(nodename));
-  htmlTitle.appendChild(instanceLink);
+    var instanceLink = document.createElement('a');
+    instanceLink.setAttribute('class', 'instance-name');
+    if (protocol != null) {
+        instanceLink.setAttribute('href', protocol + nodeaddr);
+        instanceLink.setAttribute('target', '_blank');
+    }
+    instanceLink.appendChild(document.createTextNode(nodename));
+    htmlTitle.appendChild(instanceLink);
 
-  return htmlTitle;
+    return htmlTitle;
 }
 
 function nodeAddressGenator(nodeaddr) {
-  var htmlAddress = document.createElement('h5');
-  htmlAddress.className = 'instance-addr lookup';
-  htmlAddress.appendChild(document.createTextNode(nodeaddr));
-  return htmlAddress;
+    var htmlAddress = document.createElement('h5');
+    htmlAddress.className = 'instance-addr lookup';
+    htmlAddress.appendChild(document.createTextNode(nodeaddr));
+    return htmlAddress;
 }
 
 function nodeMetaGenerator(nodeMetaTags) {
-  var metaTags = document.createElement('div');
-  metaTags.setAttribute('title', 'Node Meta')
-  metaTags.className = 'node-meta';
-  for (var tagKey in nodeMetaTags) {
-    if(!nodeMetaTags[tagKey]) {
-      continue;
+    var metaTags = document.createElement('div');
+    metaTags.setAttribute('title', 'Node Meta')
+    metaTags.className = 'node-meta';
+    for (var tagKey in nodeMetaTags) {
+        if (!nodeMetaTags[tagKey]) {
+            continue;
+        }
+        var metaTag = document.createElement('span');
+        metaTag.setAttribute('class', 'badge badge-primary mx-1 lookup');
+        metaTag.appendChild(document.createTextNode(tagKey + ':' + nodeMetaTags[tagKey]));
+        metaTags.appendChild(metaTag);
     }
-    var metaTag = document.createElement('span');
-    metaTag.setAttribute('class', 'badge badge-primary mx-1 lookup');
-    metaTag.appendChild(document.createTextNode(tagKey + ':' + nodeMetaTags[tagKey]));
-    metaTags.appendChild(metaTag);
-  }
-  return metaTags;
+    return metaTags;
 }
 
 function tagsGenerator(instanceTags) {
-  var tags = document.createElement('div');
-
-  tags.className = 'instance-tags';
-  tags.setAttribute('title', 'Tags of Service');
-  for (var tagKey in instanceTags) {
-    var tag = document.createElement('span');
-    tag.setAttribute('class', 'badge badge-secondary mx-1 lookup');
-    tag.appendChild(document.createTextNode(instanceTags[tagKey]));
-    tags.appendChild(tag);
-  }
-  return tags;
+    var tags = document.createElement('div');
+
+    tags.className = 'instance-tags';
+    tags.setAttribute('title', 'Tags of Service');
+    for (var tagKey in instanceTags) {
+        var tag = document.createElement('span');
+        tag.setAttribute('class', 'badge badge-secondary mx-1 lookup');
+        tag.appendChild(document.createTextNode(instanceTags[tagKey]));
+        tags.appendChild(tag);
+    }
+    return tags;
 }
 
 function connectGenerator(instance) {
-  var connectItem = document.createElement('div');
-  var connectValue = instance['connect']
-  if (connectValue != null && connectValue["Proxy"]) {
-    connectItem.setAttribute('class', 'connect-enabled');
-    var badge = document.createElement("span");
-    badge.setAttribute("class", "badge badge-primary");
-    badge.appendChild(document.createTextNode("Consul Connect Enabled"));
-    connectItem.appendChild(badge);
-    var content = document.createElement("pre");
-    content.setAttribute("class", "connect-data");
-    var code = document.createElement("code");
-    code.setAttribute("class", "connect-source");
-    code.appendChild(document.createTextNode(JSON.stringify(connectValue)));
-    content.appendChild(code);
-    connectItem.appendChild(content);
-    return connectItem;
-  } else {
-    connectItem.setAttribute('class', 'connect-disabled');
-  }
-  return connectItem
+    var connectItem = document.createElement('div');
+    var connectValue = instance['connect']
+    if (connectValue != null && connectValue["Proxy"]) {
+        connectItem.setAttribute('class', 'connect-enabled');
+        var badge = document.createElement("span");
+        badge.setAttribute("class", "badge badge-primary");
+        badge.appendChild(document.createTextNode("Consul Connect Enabled"));
+        connectItem.appendChild(badge);
+        var content = document.createElement("pre");
+        content.setAttribute("class", "connect-data");
+        var code = document.createElement("code");
+        code.setAttribute("class", "connect-source");
+        code.appendChild(document.createTextNode(JSON.stringify(connectValue)));
+        content.appendChild(code);
+        connectItem.appendChild(content);
+        return connectItem;
+    } else {
+        connectItem.setAttribute('class', 'connect-disabled');
+    }
+    return connectItem
 }
 
 function serviceMetaGenerator(instanceMeta) {
-  var top = document.createElement('div');
-  top.className = 'instance-meta';
-  if (instanceMeta) {
-    var container = document.createElement('dl');
-    top.appendChild(container);
-    container.className = 'row';
-    for (var meta in instanceMeta) {
-      var metaH = document.createElement('dt');
-      metaH.className = 'col-sm-4 lookup';
-      metaH.appendChild(document.createTextNode(meta));
-      container.appendChild(metaH);
-      var metaVH = document.createElement('dd');
-      metaVH.className = 'col-sm-8 lookup';
-      metaVH.appendChild(document.createTextNode(instanceMeta[meta]));
-      container.appendChild(metaVH);
+    var top = document.createElement('div');
+    top.className = 'instance-meta';
+    if (instanceMeta) {
+        var container = document.createElement('dl');
+        top.appendChild(container);
+        container.className = 'row';
+        for (var meta in instanceMeta) {
+            var metaH = document.createElement('dt');
+            metaH.className = 'col-sm-4 lookup';
+            metaH.appendChild(document.createTextNode(meta));
+            container.appendChild(metaH);
+            var metaVH = document.createElement('dd');
+            metaVH.className = 'col-sm-8 lookup';
+            metaVH.appendChild(document.createTextNode(instanceMeta[meta]));
+            container.appendChild(metaVH);
+        }
     }
-  }
-  return top;
+    return top;
 }
 
 function weightsGenerator(instanceWeights, instanceStatus) {
-  var weights = document.createElement('div');
-  if (instanceWeights != null) {
-    weights.setAttribute('class', 'weights weight-passing badge badge-' + toCSSClass(instanceStatus));
-    weights.appendChild(document.createTextNode("Weights: "));
-    {
-      var passing = document.createElement("span");
-      passing.setAttribute("class", "weight-passing badge badge-success");
-      passing.appendChild(document.createTextNode(instanceWeights['Passing']));
-      passing.setAttribute('title', "DNS Weight when in warning state")
-      weights.appendChild(passing);
-    }
-    weights.appendChild(document.createTextNode(' '));
-    {
-      var warning = document.createElement("span");
-      warning.setAttribute("class", "weight-warning badge badge-warning");
-      warning.setAttribute('title', "DNS Weight when in warning state")
-      warning.appendChild(document.createTextNode(instanceWeights['Warning']));
-      weights.appendChild(warning);
+    var weights = document.createElement('div');
+    if (instanceWeights != null) {
+        weights.setAttribute('class', 'weights weight-passing badge badge-' + toCSSClass(instanceStatus));
+        weights.appendChild(document.createTextNode("Weights: ")); {
+            var passing = document.createElement("span");
+            passing.setAttribute("class", "weight-passing badge badge-success");
+            passing.appendChild(document.createTextNode(instanceWeights['Passing']));
+            passing.setAttribute('title', "DNS Weight when in warning state")
+            weights.appendChild(passing);
+        }
+        weights.appendChild(document.createTextNode(' ')); {
+            var warning = document.createElement("span");
+            warning.setAttribute("class", "weight-warning badge badge-warning");
+            warning.setAttribute('title', "DNS Weight when in warning state")
+            warning.appendChild(document.createTextNode(instanceWeights['Warning']));
+            weights.appendChild(warning);
+        }
+        return weights;
+    } else {
+        weights.setAttribute('class', 'weights-absent');
     }
-    return weights;
-  } else {
-    weights.setAttribute('class', 'weights-absent');
-  }
-  return weights
+    return weights
 }
 
 function toCSSClass(state) {
-  switch(state) {
-    case 'passing': return 'success';
-    case 'critical': return 'danger';
-  }
-  return state;
+    switch (state) {
+    case 'passing':
+        return 'success';
+    case 'critical':
+        return 'danger';
+    }
+    return state;
 }
 
 function servicesGenerator(instanceServices) {
-  var services = document.createElement('div');
-  services.className = 'instance-services';
-  services.appendChild(document.createTextNode("Services: "));
-  services.appendChild(document.createElement('br'));
-  for (var serviceKey in instanceServices) {
-    var service = document.createElement('a');
-    var serviceName = instanceServices[serviceKey]['Service']['Service'];
-    var servicePort = instanceServices[serviceKey]['Service']['Port'];
-    service.setAttribute('class', 'btn btn-sm m-1 lookup');
-    service.setAttribute('target', '_blank');
-    nodeAddr = instanceServices[serviceKey]['Service']['Address'];
-    service.setAttribute('href', 'http://' + nodeAddr + ':' + servicePort);
-    service.classList.add('btn-outline-'+toCSSClass(nodeState(instanceServices[serviceKey]['Checks'])))
-    service.appendChild(document.createTextNode(serviceName + ':' + servicePort));
-    services.appendChild(service);
-  }
-  return services;
+    var services = document.createElement('div');
+    services.className = 'instance-services';
+    services.appendChild(document.createTextNode("Services: "));
+    services.appendChild(document.createElement('br'));
+    for (var serviceKey in instanceServices) {
+        var service = document.createElement('a');
+        var serviceName = instanceServices[serviceKey]['Service']['Service'];
+        var servicePort = instanceServices[serviceKey]['Service']['Port'];
+        service.setAttribute('class', 'btn btn-sm m-1 lookup');
+        service.setAttribute('target', '_blank');
+        nodeAddr = instanceServices[serviceKey]['Service']['Address'];
+        service.setAttribute('href', 'http://' + nodeAddr + ':' + servicePort);
+        service.classList.add('btn-outline-' + toCSSClass(nodeState(instanceServices[serviceKey]['Checks'])))
+        service.appendChild(document.createTextNode(serviceName + ':' + servicePort));
+        services.appendChild(service);
+    }
+    return services;
 }
 
 function checksStatusGenerator(instance, prefix) {
-  var instanceChecks = instance.checks;
-  var checks = document.createElement('div');
-  checks.className = 'checks';
-  checks.setAttribute('title', 'Checks of Node/Service')
-
-  for (var checkKey in instanceChecks) {
-    var checkInstance = instanceChecks[checkKey];
-    var checkId = prefix + '::' + checkInstance.checkid;
-    var btn = 'btn-' + toCSSClass(instanceChecks[checkKey]['status'])
-    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.setAttribute('title', checkInstance.checkid);
-
-    btnCheck.appendChild(document.createTextNode(instanceChecks[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(instanceChecks[checkKey][dataToDisplay[index]]));
-      td2.appendChild(target)
-      tr.appendChild(td1);
-      tr.appendChild(td2);
-      notes.appendChild(tr);
+    var instanceChecks = instance.checks;
+    var checks = document.createElement('div');
+    checks.className = 'checks';
+    checks.setAttribute('title', 'Checks of Node/Service')
+
+    for (var checkKey in instanceChecks) {
+        var checkInstance = instanceChecks[checkKey];
+        var checkId = prefix + '::' + checkInstance.checkid;
+        var btn = 'btn-' + toCSSClass(instanceChecks[checkKey]['status'])
+        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.setAttribute('title', checkInstance.checkid);
+
+        btnCheck.appendChild(document.createTextNode(instanceChecks[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(instanceChecks[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)
     }
 
-    cardCheck.appendChild(notes);
-    collapseCheck.appendChild(cardCheck);
-    check.appendChild(collapseCheck);
-    checks.appendChild(check)
-  }
-
-  return checks;
+    return checks;
 }
 
 function resizeAll() {
-  resizeWrapper('service-wrapper', 'service-list');
-  resizeWrapper('instances-wrapper', 'instances-list');
+    resizeWrapper('service-wrapper', 'service-list');
+    resizeWrapper('instances-wrapper', 'instances-list');
 }
 
 function resizeInstances() {
-  resizeWrapper('instances-wrapper', 'instances-list');
+    resizeWrapper('instances-wrapper', 'instances-list');
 }
 
 function resizeData() {
-  resizeWrapper('keys-wrapper', 'keys-list');
-  resizeWrapper('data-wrapper', 'kv-data');
+    resizeWrapper('keys-wrapper', 'keys-list');
+    resizeWrapper('data-wrapper', 'kv-data');
 }
 
 function resizeWrapper(wrapperId, wrapped) {
-  var size = $(window).height() - $('#' + wrapperId).offset()["top"] - 20;
-  $('#' + wrapperId).css("height", size);
+    var size = $(window).height() - $('#' + wrapperId).offset()["top"] - 20;
+    $('#' + wrapperId).css("height", size);
 }
 
 function createBadge(classes, data) {
-  var badge = document.createElement('span');
-  badge.setAttribute('class', 'badge mx-1');
-  classesArray = classes.split(' ');
-  for (var i = 0; i < classesArray.length; i++) {
-    badge.classList.add(classesArray[i]);
-  }
-
-  badge.appendChild(document.createTextNode(data));
-  return badge;
+    var badge = document.createElement('span');
+    badge.setAttribute('class', 'badge mx-1');
+    classesArray = classes.split(' ');
+    for (var i = 0; i < classesArray.length; i++) {
+        badge.classList.add(classesArray[i]);
+    }
+
+    badge.appendChild(document.createTextNode(data));
+    return badge;
 }
 
 function serviceMatcher(service, regex, showProxiesInList) {
-  if(service.getElementsByClassName('service-name')[0].innerHTML.match(regex)) {
-    if(!showProxiesInList && service.classList.contains('kind-connect-proxy')){
-      return false;
+    if (service.getElementsByClassName('service-name')[0].innerHTML.match(regex)) {
+        if (!showProxiesInList && service.classList.contains('kind-connect-proxy')) {
+            return false;
+        }
+        return true;
     }
-    return true;
-  }
-  var tags = service.getElementsByClassName('service-tags')[0].getElementsByClassName('badge');
+    var tags = service.getElementsByClassName('service-tags')[0].getElementsByClassName('badge');
 
-  for (var i=0; i < tags.length; i++) {
-    if(tags[i].innerHTML.match(regex)) {
-      return true;
+    for (var i = 0; i < tags.length; i++) {
+        if (tags[i].innerHTML.match(regex)) {
+            return true;
+        }
     }
-  }
-
-  var sstatus = service.getAttribute('status')
-  if(sstatus && sstatus.match(regex)) {
-    return true;
-  }
-  
-  return false;
+
+    var sstatus = service.getAttribute('status')
+    if (sstatus && sstatus.match(regex)) {
+        return true;
+    }
+
+    return false;
 }
 
 function keyMatcher(service, regex) {
-  if(service.getElementsByClassName('key-name')[0].innerHTML.match(regex)) {
-    return true;
-  }
+    if (service.getElementsByClassName('key-name')[0].innerHTML.match(regex)) {
+        return true;
+    }
 }
 
 function hasMatches(instance, regex) {
-  var toLookup = instance.getElementsByClassName('lookup');
-  for (var i = 0 ; i < toLookup.length; i++) {
-    if(toLookup[i].innerHTML.match(regex)) {
-      return true;
+    var toLookup = instance.getElementsByClassName('lookup');
+    for (var i = 0; i < toLookup.length; i++) {
+        if (toLookup[i].innerHTML.match(regex)) {
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 }
 
 function instanceMatcher(instance, regex) {
-  if(instance.getElementsByClassName('instance-name')[0].innerHTML.match(regex)) {
-    return true;
-  }
+    if (instance.getElementsByClassName('instance-name')[0].innerHTML.match(regex)) {
+        return true;
+    }
 
-  return hasMatches(instance, regex);
+    return hasMatches(instance, regex);
 }
 
 function nodeMatcher(instance, regex) {
     instanceMatcher(instance, regex);
-    if(instance.getElementsByClassName('instance-name')[0].innerHTML.match(regex)) {
-      return true;
+    if (instance.getElementsByClassName('instance-name')[0].innerHTML.match(regex)) {
+        return true;
     }
 
     return hasMatches(instance, regex);
 }
 
 function getTagsNode(node) {
-  tags = new Set([]);
-  for (service in node['Service']) {
-    for (tag in node['Service'][service]['Service']['Tags']) {
-      tags.add(node['Service'][service]['Service']['Tags'][tag]);
+    tags = new Set([]);
+    for (service in node['Service']) {
+        for (tag in node['Service'][service]['Service']['Tags']) {
+            tags.add(node['Service'][service]['Service']['Tags'][tag]);
+        }
     }
-  }
-  return Array.from(tags);
+    return Array.from(tags);
 }
 
 function getChecksNode(node) {
-  checks = [];
-  for (service in node['Service']) {
-    for (check in node['Service'][service]['Checks']) {
-      checks.push(node['Service'][service]['Checks'][check]);
+    checks = [];
+    for (service in node['Service']) {
+        for (check in node['Service'][service]['Checks']) {
+            checks.push(node['Service'][service]['Checks'][check]);
+        }
     }
-  }
-  return checks;
+    return checks;
 }
 
 function getGeneralNodeStatus(nodeService) {
-  status='passing';
-  for (var serviceKey in nodeService) {
-    switch(nodeState(nodeService[serviceKey]['Checks'])) {
-        case 'passing': break;
-        case 'warning': status='warning'; break;
-        case 'critical': return 'critical'; break;
+    status = 'passing';
+
+    for (var serviceKey in nodeService) {
+        if (nodeService[serviceKey] != null && "Checks" in nodeService[serviceKey]) {
+            switch (nodeState(nodeService[serviceKey]['Checks']))  {
+            case 'passing':
+                break;
+            case 'warning':
+                status = 'warning';
+                break;
+            case 'critical':
+                return 'critical';
+                break;
+            }
+        }
     }
-  }
-  return status;
+    return status;
 }
 
 function updateStatusItem(statuses) {
-  states = ['passing', 'warning', 'critical', 'total']
-  for (state in states) {
-    document.getElementById('service-status-' + states[state]).innerHTML = (statuses[states[state]] || 0);
-  }
+    states = ['passing', 'warning', 'critical', 'total']
+    for (state in states) {
+        document.getElementById('service-status-' + states[state]).innerHTML = (statuses[states[state]] || 0);
+    }
 }
 
 function updateFilterDisplay(filterStatus) {
-  $('.progress-status').each(function() {
-    var status = $(this).attr('status');
-    if (filterStatus == null || filterStatus == status) {
-      $(this).removeClass('progress-deactivated');
-    } else {
-      $(this).addClass('progress-deactivated');
-    }
-  })
-  $('.service-status').each(function() {
-    var status = $(this).attr('status');
-    if (filterStatus == null || filterStatus == status) {
-      $(this).removeClass('status-deactivated');
+    $('.progress-status').each(function () {
+        var status = $(this).attr('status');
+        if (filterStatus == null || filterStatus == status) {
+            $(this).removeClass('progress-deactivated');
+        } else {
+            $(this).addClass('progress-deactivated');
+        }
+    })
+    $('.service-status').each(function () {
+        var status = $(this).attr('status');
+        if (filterStatus == null || filterStatus == status) {
+            $(this).removeClass('status-deactivated');
+        } else {
+            $(this).addClass('status-deactivated');
+        }
+    })
+
+}
+
+function updateURL(arg, value) {
+    var newUrl = new URL(location.href);
+    if (value == "" || value == null) {
+        newUrl.searchParams.delete(arg);
     } else {
-      $(this).addClass('status-deactivated');
+        newUrl.searchParams.set(arg, value);
     }
-  })
 
-}
+    window.history.pushState({}, "", newUrl);
+}