consul-templaterb 1.15.2 → 1.15.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 265b3062a39b78eaa45775583d748de5c349ac21
-  data.tar.gz: ad53bb875e0dabdf005c1081cd28b42c5e482bc5
+SHA256:
+  metadata.gz: e5d7b1fe74f3740048aeef233a2f97097f90042fbdfa8a43776ec9b3ed1d3cab
+  data.tar.gz: 7bd5f3cea503187786e05b62d0748afaf0de8c1629333e70bec2689d88a2e79c
 SHA512:
-  metadata.gz: a87af9eb230325e5d9f1f032e97e078c9ef2365e5ade766818eafd97dfdce9d537c1a2961a26aa50d8a0086ccc55ec20bbb7224dc5dd773486844dc4ceafcb11
-  data.tar.gz: d09545ef6d131b6324c198a9eca24fea15a10a58fbce25da44a97e68b31726a5372929cd606cba35d2c2674927c986c88ef2e54d9407ea7df44038d7f761f7d3
+  metadata.gz: eabeef36879669e2dc937f06fcac7a7f92b1f107840a8717b11df2b9527df9da1b0bdc490c3db5c54b0e826502557e8a84f8ae72216e98736f95650893085d0a
+  data.tar.gz: f982bafbe7e6060f6db7ae0cf60b576ba4c3ff4c33b645636f6aa0b309108ba84f63fbc11941e3a0a692de1bb96343be18722611d21ca7f5ff09f330b67d030d

data/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## (UNRELEASED)
 
+## 1.15.3 (June 20, 2019)
+
+Improved consul-ui Javascript #37 thanks to [@warrenseine](https://github.com/warrenseine)
+
 ## 1.15.2 (June 12, 2019)
 
 IMPROVEMENTS

data/lib/consul/async/version.rb

@@ -1,5 +1,5 @@
 module Consul
   module Async
-    VERSION = '1.15.2'.freeze
+    VERSION = '1.15.3'.freeze
   end
 end

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

@@ -16,7 +16,7 @@
 }
 
 #service-wrapper, #instances-wrapper, #keys-wrapper {
-  overflow: scroll;
+  overflow-y: scroll;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-style: solid;

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

@@ -4,7 +4,7 @@ class ConsulKeys {
     this.fetchRessource();
     this.keysList = $("#keys-list");
     this.keysFilter = $("#keys-filter");
-    this.keysFilter.keyup(this.filterService);
+    this.keysFilter.keyup(debounce(this.filterService, 250));
     this.refresh = parseInt(refresh);
     this.keysFilterCounter = $("#keys-counter");
     this.keysFilterCount = 0;

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

@@ -3,10 +3,7 @@ class ConsulNodes {
     this.ressourceURL = ressourceURL;
     this.fetchRessource();
     this.instanceFilter = $("#instance-filter");
-    this.instanceFilter.keyup(function (e) {
-      clearTimeout(consulNodes.timeout);
-      consulNodes.timeout = setTimeout(consulNodes.filterInstances, 400);
-    });
+    this.instanceFilter.keyup(debounce(this.filterInstances, 400));
     this.refresh = parseInt(refresh);
     this.filterStatus = null;
     this.maxDisplayed = 100;

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

@@ -1,12 +1,12 @@
 class ConsulService {
-  constructor(ressourceURL, refresh) {
-    this.ressourceURL = ressourceURL;
+  constructor(resourceURL, refresh) {
+    this.resourceURL = resourceURL;
     this.fetchRessource();
     this.serviceList = $("#service-list");
     this.serviceFilter = $("#service-filter");
-    this.serviceFilter.keyup(this.filterService);
+    this.serviceFilter.keyup(debounce(this.filterService, 250));
     this.instanceFilter = $("#instance-filter");
-    this.instanceFilter.keyup(this.filterInstances);
+    this.instanceFilter.keyup(debounce(this.filterInstances, 250));
     this.refresh = parseInt(refresh);
     this.filterStatus = null;
     this.serviceFilterCounter = $("#service-counter");
@@ -33,135 +33,132 @@ class ConsulService {
     }
   }
 
-  fetchRessource() {
-    $.ajax({url: this.ressourceURL, cache: false, dataType: "json", sourceObject: this, success: function(result){
-      consulService.initRessource(result);
-    }});
+  async fetchRessource() {
+    const response = await fetch(this.resourceURL);
+    const result = await response.json();
+    await this.initRessource(result);
   }
 
-  initRessource(data) {
+  async initRessource(data) {
     this.data = data;
-    this.reloadServiceList();
+    await this.reloadServiceList();
     console.log('Data generated at: ' + data['generated_at']);
 
     var urlParam = new URL(location.href).searchParams.get('service');
-    if (urlParam === null) {
-      var servicePrefix = '#service_'
-      if (location.hash.startsWith(servicePrefix)) {
-        urlParam = location.hash.substr(servicePrefix.length)
-      }
-    }
+
     if (urlParam) {
       var nodes = document.getElementById('service-list').childNodes;
-      for(var i in nodes) {
-        if($(nodes[i]).find(".service-name").html() == urlParam) {
-          var selectedElement = $(nodes[i])
+      for (const node of nodes) {
+        if($(node).find(".service-name").html() == urlParam) {
+          var selectedElement = $(node)
           this.selectService(selectedElement);
           selectedElement.focus()
           break;
         }
       }
-    } else {
+      this.serviceFilter.val(urlParam);
+      this.filterService()
+  } else {
+      var servicePrefix = '#service_'
+      if (location.hash.startsWith(servicePrefix)) {
+        urlParam = location.hash.substr(servicePrefix.length)
+      }
       this.selectService(document.getElementById('service-list').firstElementChild);
     }
 
     if(this.refresh > 0) {
       setTimeout(this.fetchRessource, this.refresh * 1000);
     }
-
-    let urlServiceParam = new URL(location.href).searchParams.get('filter');
-    if (urlServiceParam === null) {
-      return
-    } else if (urlServiceParam) {
-      this.serviceFilter.val(urlServiceParam);
-      this.filterService()
-    }
   }
 
-  reloadServiceList() {
+  async reloadServiceList() {
     this.serviceList.html('');
     this.serviceFilterCount = 0;
 
-    let idx = 0;
-    let lastFav = null;
     if (!this.data || !this.data.services) {
       console.log("No data to display");
     } else {
-      for (var serviceName in this.data.services) {
-        var service = this.data.services[serviceName];
-        var serviceStatus = buildServiceStatus(service);
-
-        var listItem = document.createElement('li');
-        listItem.setAttribute('onfocus','consulService.onClickServiceName(this)');
-        listItem.setAttribute('onclick','consulService.onClickServiceName(this)');
-        listItem.setAttribute('value',serviceName);
-        listItem.setAttribute('data-fav', this.favorites[serviceName] ? 1 : 0);
-        listItem.setAttribute('data-index', idx);
-        var listItemClass = 'serviceListItem list-group-item list-group-item-action';
-
-        var statuses = document.createElement('div');
-        statuses.setAttribute('class','statuses float-right');
-
-        if (!!serviceStatus['passing']) {
-          statuses.appendChild(createBadge('badge-success passing', serviceStatus['passing']));
-          listItem.setAttribute('status', 'passing');
-        }
+      const services = Object.values(this.data.services).map((service, index) => ({ service, index }));
+      const favorites = services.filter(({ service }) => this.favorites[service.name]);
+      const others = services.filter(({ service }) => !this.favorites[service.name]);
+
+      const appendServiceAsync = ({ service, index }) =>
+        new Promise(resolve =>
+          setTimeout(() => {
+            this.appendService(service, index);
+            resolve();
+          }, 0)
+        );
+
+      await Promise.all([...favorites, ...others].map(appendServiceAsync));
+    }
 
-        if (!!serviceStatus['warning']) {
-          statuses.appendChild(createBadge('badge-warning warning', serviceStatus['warning']));
-          listItem.setAttribute('status', 'warning');
-        }
+    this.serviceFilterCounter.html(this.serviceFilterCount);
+    resizeWrapper('service-wrapper', 'service-list');
+    this.filterService();
+  }
 
-        if (!!serviceStatus['critical']) {
-          statuses.appendChild(createBadge('badge-danger critical', serviceStatus['critical']));
-          listItem.setAttribute('status', 'critical');
-        }
+  appendService(service, index) {
+    var serviceName = service.name;
+    var serviceStatus = buildServiceStatus(service);
 
-        statuses.appendChild(createBadge('badge-dark', (serviceStatus['total'] || 0)));
+    var listItem = document.createElement('li');
+    listItem.setAttribute('onfocus','consulService.onClickServiceName(this)');
+    listItem.setAttribute('onclick','consulService.onClickServiceName(this)');
+    listItem.setAttribute('value', serviceName);
+    listItem.setAttribute('data-fav', this.favorites[serviceName] ? 1 : 0);
+    listItem.setAttribute('data-index', index);
+    var listItemClass = 'serviceListItem list-group-item list-group-item-action';
 
-        statuses.append(this.buildFavButton(serviceName));
+    var statuses = document.createElement('div');
+    statuses.setAttribute('class','statuses float-right');
 
-        listItem.appendChild(statuses);
-        if (!!service['kind']) {
-          var kind = document.createElement('div');
-          kind.setAttribute('class','kind float-right');
-          kind.appendChild(createBadge('badge-info kind', service['kind']));
-          listItem.appendChild(kind);
-          listItemClass+= " kind-" + service['kind'];
-        }
-        listItem.setAttribute('class', listItemClass);
+    if (!!serviceStatus['passing']) {
+      statuses.appendChild(createBadge('badge-success passing', serviceStatus['passing']));
+      listItem.setAttribute('status', 'passing');
+    }
 
-        var serviceNameItem = document.createElement('div');
-        serviceNameItem.setAttribute('class', 'service-name');
-        serviceNameItem.appendChild(document.createTextNode(serviceName));
-        listItem.appendChild(serviceNameItem);
+    if (!!serviceStatus['warning']) {
+      statuses.appendChild(createBadge('badge-warning warning', serviceStatus['warning']));
+      listItem.setAttribute('status', 'warning');
+    }
 
-        var serviceTagsItem = document.createElement('div');
-        serviceTagsItem.setAttribute('class', 'service-tags');
+    if (!!serviceStatus['critical']) {
+      statuses.appendChild(createBadge('badge-danger critical', serviceStatus['critical']));
+      listItem.setAttribute('status', 'critical');
+    }
 
-        for (var i = 0; i < service.tags.length; i++) {
-          serviceTagsItem.appendChild(createBadge('float-right badge-' + (i%2?'secondary':'info') , service.tags[i]));
-        }
+    statuses.appendChild(createBadge('badge-dark', (serviceStatus['total'] || 0)));
 
-        listItem.appendChild(serviceTagsItem);
-        this.serviceFilterCount += 1;
+    statuses.append(this.buildFavButton(serviceName));
 
-        if (this.favorites[serviceName] && lastFav) {
-          lastFav.after(listItem);
-          lastFav = listItem;
-        } else if (this.favorites[serviceName] && !lastFav) {
-          this.serviceList.prepend(listItem);
-          lastFav = listItem;
-        } else {
-          this.serviceList.append(listItem);
-        }
+    listItem.appendChild(statuses);
+    if (!!service['kind']) {
+      var kind = document.createElement('div');
+      kind.setAttribute('class','kind float-right');
+      kind.appendChild(createBadge('badge-info kind', service['kind']));
+      listItem.appendChild(kind);
+      listItemClass+= " kind-" + service['kind'];
+    }
+    listItem.setAttribute('class', listItemClass);
 
-        idx++;
-      }
+    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++) {
+      serviceTagsItem.appendChild(createBadge('float-right badge-' + (i%2?'secondary':'info') , service.tags[i]));
     }
-    this.serviceFilterCounter.html(this.serviceFilterCount);
-    resizeWrapper('service-wrapper', 'service-list');
-    this.filterService();
+
+    listItem.appendChild(serviceTagsItem);
+
+    this.serviceList.append(listItem);
+
+    this.serviceFilterCount += 1;
   }
 
   filterService() {

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(this.filterService);
+      this.serviceFilter.keyup(debounce(this.filterService, 250));
       this.serviceInstanceFilter = '';
       this.instanceFilter = $("#instance-filter");
-      this.instanceFilter.keyup(this.doFilter);
+      this.instanceFilter.keyup(debounce(this.doFilter, 250));
       this.refresh = parseInt(refresh);
       this.filterStatus = null;
       this.refreshTimeout = null;

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

@@ -12,6 +12,19 @@ function buildServiceStatus(service) {
   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);
+	};
+};
+
 function padDateUnit(x) {
   return x > 9 ? x : '0' + x;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: consul-templaterb
 version: !ruby/object:Gem::Version
-  version: 1.15.2
+  version: 1.15.3
 platform: ruby
 authors:
 - SRE Core Services
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-12 00:00:00.000000000 Z
+date: 2019-06-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: em-http-request
@@ -242,8 +242,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.6.14.4
+rubygems_version: 3.0.4
 signing_key: 
 specification_version: 4
 summary: Implementation of Consul template using Ruby and .erb templating language