consul-templaterb 1.8.2 → 1.8.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d652b0259f34bd70784ebdfbfe18e042bb48bdd03af5f5d920a71b94bb1281d
-  data.tar.gz: 00116db5cf7b2f11516abb912aab335c2608ec01fdf9ba527f11deb9bc861755
+  metadata.gz: 68013fd942d003c33f69526b5061fa9f6ce149332bf97db49978e2a2bc9628e0
+  data.tar.gz: d38f04e18ed0c9a7a051804d8cdae8826140ee6161fa17ce400ba5943c8465b5
 SHA512:
-  metadata.gz: c53f3a2704b5b52b3febb4c4844c36dae660b163d1de8298acde2f88c0cb9b9e65bc202d35c160d0747b3624bfa1355c0e014ef58e2d31673a5b40d17b0d8847
-  data.tar.gz: bc16ad7b30485b403c19d01251c87ffa66d17b937b09affdf2c74470455283d5121b95909524ec703d29239efe97b626f7e0c70bb34090a04bab69ad224a176c
+  metadata.gz: 30f1983821cdd6300dd7f6c2610c9936e70d7f110dc4a83afa36b75256d652bdcf59dc20f378d4e3918f8473934e5c01e8ce17f4724d72e96a6ac0c0c77438b9
+  data.tar.gz: 4c0695f4f2a2f0e0ec4695394e6845a8a1880e7745d73b70b400f2cf2039f98f5005f82bc0e1b6bc964909efd81a4b140c6104e44503567b12565fb804cb89b5

data/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## (UNRELEASED)
 
+## 1.8.3 (December 18, 2018)
+
+OPTIMIZATIONS:
+
+ * Consul timeline now autorefresh itself
+ * large performance improvement in Consul
+
 ## 1.8.2 (December 18, 2018)
 
 NEW FEATURES:

data/lib/consul/async/version.rb

@@ -1,5 +1,5 @@
 module Consul
   module Async
-    VERSION = '1.8.2'.freeze
+    VERSION = '1.8.3'.freeze
   end
 end

data/samples/consul-ui/consul-timeline-ui.html.erb

@@ -6,23 +6,21 @@
         <div id="filter-menu" class="col-2 col-m-3 px-4 pt-4">
           <div class="form-group">
             <div class="input-group">
-              <input id="service-filter" type="text" placeholder="filter instances" class="form-control" />
-              <div class="input-group-append">
-                <span class="input-group-text" id="service-counter"></span>
-              </div>
+              <input id="service-filter" type="search" placeholder="filter services" class="form-control" />
             </div>
           </div>
           <div id="service-wrapper" >
             <ul id="service-list" class="list-group">
-            <li onfocus="serviceTimeline.selectService(this)" onclick="serviceTimeline.selectService(this)" value="" class="serviceListItem list-group-item list-group-item-actionn active" id="anyService"><div class="statuses float-right"><span class="lookup badge badge-pill badge-dark">1000</span></div><div class="service-name">All</div></li>
+            <li onfocus="serviceTimeline.selectService(this)" onclick="serviceTimeline.selectService(this)" value="" class="serviceListItem list-group-item list-group-item-actionn" id="anyService"><div class="statuses float-right"><span id="allServicesCount" class="lookup badge badge-pill badge-secondary">loading&hellip;</span></div><div class="service-name">All</div></li>
             </ul>
           </div>
         </div>
         <div class="col-10 col-m-9">
+          <div id="autorefresh"><input id="autorefresh-check" type="checkbox" checked><label for="autorefresh-check">Autorefresh</label></div>
           <h2 class="text-center" id="service-title"></h2>
           <div class="row mb-2">
             <div class="input-group float-left col-12">
-              <input id="instance-filter" type="text" placeholder="filter nodes by name or tags" class="form-control" />
+              <input id="instance-filter" type="search" placeholder="filter events" class="form-control" />
             </div>
           </div>
           <div id="instances-wrapper">
@@ -34,8 +32,8 @@
                   <th scope="col" class="serviceCol">Service</th>
                   <th scope="col">Instance</th>
                   <th scope="col">Check State</th>
-                  <th scope="col">Service&nbsp;Status&nbsp;Change</th>
-                  <th colspan="2" scope="col">Service&nbsp;Instances</th>
+                  <th scope="col">Service&nbsp;Status</th>
+                  <th id="all-instances-header" colspan="2" scope="col">Instances</th>
                 </tr>
               </thead>
               <tbody>

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

@@ -17,6 +17,39 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+.checkTransition {
+  float: left;
+}
+.checkName {
+  padding-left: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+td.serviceName {
+  max-width: 15%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#autorefresh{
+  float: right;
+}
+td.instance {
+  max-width: 15em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#all-instances-header {
+  width: 12em;
+  text-align: right;
+  padding-right: 1em;
+}
+td.ts {
+  width: 9em;
+}
+td.serviceName {
+  max-width: 12em;
+}
 
 #service-list .favorite {
   width: 20px;
@@ -60,7 +93,13 @@
   border-left: 0px;
   border-right: 0px;
 }
-
+.service-status {
+  width: 10em;
+}
+.all-instances {
+  width: 14em;
+  text-align: right;
+}
 #node-statuses span {
   font-size: 1rem;
   transition: background-color .16s linear;

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

@@ -2,7 +2,7 @@
 class ServiceTimeline {
     constructor(ressourceURL, refresh) {
       this.ressourceURL = ressourceURL;
-      this.fetchRessource();
+      this.fetchRessource(true);
       this.serviceList = $("#service-list");
       this.serviceFilter = $("#service-filter");
       this.serviceFilter.keyup(this.filterService);
@@ -12,26 +12,34 @@ class ServiceTimeline {
       this.refresh = parseInt(refresh);
       this.filterStatus = null;
       this.refreshTimeout = null;
-      this.serviceFilterCounter = $("#service-counter");
-      this.serviceFilterCount = 0;
+      this.reloadData = null;
       this.services = {}
+      this.lastEntryLoaded = null;
       this.presentServices = {}
+      this.currentlyUpdating = false;
       var sT = this;
     }
 
-    fetchRessource() {
-        $.ajax({url: this.ressourceURL, cache: false, dataType: "json", sourceObject: this, success: function(result){
-          serviceTimeline.initRessource(result);
-        }});
+    fetchRessource(firstReload) {
+        $.ajax({url: this.ressourceURL, cache: false, dataType: "json", sourceObject: this,
+                success: function(result){
+                           serviceTimeline.initRessource(result, firstReload);
+                },
+                error: function(err) {
+                           console.log("Error updating data", err);
+                           serviceTimeline.currentlyUpdating = false;
+                }
+         });
     }
 
-    initRessource(data) {
+    initRessource(data, firstReload) {
         this.data = data;
-        this.reloadTimeline(true);
+        this.reloadTimeline(firstReload);
     }
 
     createServiceDefItem(label, serviceName, counter) {
         var listItem = document.createElement('li');
+        listItem.setAttribute('id', 'service-item-filter-' + serviceName);
         listItem.setAttribute('onfocus','serviceTimeline.selectService(this, true)');
         listItem.setAttribute('onclick','serviceTimeline.selectService(this, true)');
         listItem.setAttribute('value', serviceName);
@@ -44,17 +52,25 @@ class ServiceTimeline {
 
         var statuses = document.createElement('div');
         statuses.setAttribute('class','statuses float-right');
-        statuses.appendChild(this.createBadge(counter, 'dark'));
+        statuses.appendChild(this.createBadge(counter, 'dark instanceCounter'));
         listItem.prepend(statuses);
         return listItem;
     }
 
+    reloadDataFromJSON(){
+        if (document.getElementById('autorefresh-check').checked) {
+            if (serviceTimeline.currentlyUpdating == false) {
+                serviceTimeline.currentlyUpdating = true;
+                serviceTimeline.fetchRessource(false);
+            }
+        }
+    }
+
     reloadTimeline(firstReload) {
         if (!this.data) {
           console.log("No data to display");
+          serviceTimeline.currentlyUpdating = false;
         }
-        this.serviceList.html('');
-        this.serviceFilterCount = 0;
         var servicesPerName = {};
         var numberOfEvents = this.data.length;
         for (var i = 0 ; i < numberOfEvents; i++) {
@@ -68,17 +84,22 @@ class ServiceTimeline {
         }
         var sorted = Object.keys(servicesPerName).sort();
         var serviceListItems = this.serviceList[0];
-        var allServices = this.createServiceDefItem('All', '', numberOfEvents);
-        allServices.setAttribute('id', 'anyService');
-        serviceListItems.appendChild(allServices);
+        $('#allServicesCount').html(numberOfEvents)
         this.presentServices = servicesPerName;
         for (var i = 0 ; i < sorted.length; i++) {
             var serviceName = sorted[i];
             var counter = servicesPerName[serviceName];
-            var listItem = this.createServiceDefItem(serviceName, serviceName, counter);
-            serviceListItems.appendChild(listItem);
+            var existing = $('#service-item-filter-' + serviceName);
+            if (existing.length > 0) {
+                $('#service-item-filter-' + serviceName+ ' .instanceCounter').html(counter);
+            } else {
+                var listItem = this.createServiceDefItem(serviceName, serviceName, counter);
+                serviceListItems.appendChild(listItem);
+            }
+            
         }
-        this.displayEvents();
+        this.displayEvents(firstReload);
+        serviceTimeline.currentlyUpdating = false;
         if (firstReload) {
             var sT = this;
             setTimeout(function(){
@@ -111,7 +132,10 @@ class ServiceTimeline {
                 if (!found) {
                     sT.selectService($('#anyService', false));
                 }
+                setInterval(sT.reloadDataFromJSON, 10000);
             }, 150);
+        } else {
+            this.doFilter();
         }
     }
 
@@ -146,8 +170,7 @@ class ServiceTimeline {
       return span;
     }
 
-    doFilter() {
-        var filterValue = $('#instance-filter')[0].value;
+    performFiltering(filterValue) {
         this.refreshTimeout = null;
         var matcher;
         try {
@@ -199,6 +222,16 @@ class ServiceTimeline {
         }
     }
 
+    doFilter() {
+        var filterValue = $('#instance-filter')[0].value;
+        if (this.refreshTimeout) {
+            clearTimeout(this.refreshTimeout);
+        }
+        this.refreshTimeout = window.setTimeout(function(){
+            serviceTimeline.performFiltering(filterValue);
+        }, 16);
+    }
+
     selectService(source, updateUrl) {
         $(this.selectedService).removeClass('active');
         var serviceName = $(source).find(".service-name").html()
@@ -236,7 +269,6 @@ class ServiceTimeline {
           console.log("Failed to compile regexp for '" + serviceVal + "', using strict lookup due to: " + e);
           filter = new RegExp(safeReg);
         }
-        serviceTimeline.serviceFilterCount = 0;
         var showProxiesInList = this.showProxiesInList;
         serviceTimeline.serviceList.children('.serviceListItem').each(function (){
           var ui = $(this);
@@ -250,17 +282,50 @@ class ServiceTimeline {
         });
       }
 
-    displayEvents() {
+    displayEvents(firstReload) {
         //$("#service-title").html(service['name']);
         var tableBody = $('#all-events > tbody');
-        tableBody.html("");
+        var startIndex = 0;
+        if (firstReload || this.lastEntryLoaded == null) {
+            tableBody.html("");
+        } else {
+            // We first try to find new entries...
+            var o = this.lastEntryLoaded;
+            for (var i = 0 ; i < this.data.length; i++) {
+                var e = this.data[i];
+                if (o.ts == e.ts && o.instance == e.instance) {
+                    startIndex = i + 1;
+                    console.log('Resuming at ', startIndex, " with ", e);
+                    break;
+                }
+            }
+        }
         var tbody = tableBody[0];
         var filter = "";
-        for (var i = 0 ; i < this.data.length; i++) {
+        var lastEntryFound = null;
+        for (var i = startIndex ; i < this.data.length; i++) {
             var e = this.data[i];
+            lastEntryFound = e;
             var row = document.createElement('tr');
             row.setAttribute("class", 'srv-' + e.service);
-            this.buildCell(row, 'td', 'ts', this.appChild('time', document.createTextNode(e.ts)));
+            var timestamp;
+            var fullTimestamp;
+            try {
+                var tsMs = Date.parse(e.ts);
+                if (isNaN(tsMs)) {
+                    timestamp = e.ts;
+                    fullTimestamp = e.ts;
+                } else {
+                    fullTimestamp = new Date(tsMs);
+                    timestamp = formatDate(fullTimestamp);
+                }
+            } catch (err){ console.log("Failed parsing date", e.ts, err);}
+            {
+              var timeElement = this.appChild('time', document.createTextNode(timestamp));
+              timeElement.setAttribute('datetime', fullTimestamp);
+              timeElement.setAttribute('title', fullTimestamp);
+              this.buildCell(row, 'td', 'ts', timeElement);
+            }
             this.buildCell(row, 'td', 'lookup serviceName serviceCol', document.createTextNode(e.service));
             var text = e.instance;
             if (e.instance_info && e.instance_info.node) {
@@ -272,39 +337,38 @@ class ServiceTimeline {
             var instanceCell = this.buildCell(row, 'td', 'lookup instance', document.createTextNode(text));
             instanceCell.setAttribute("title", e.instance);
             {
-                var checksCell = document.createElement("div")
-                this.buildCell(row, 'td', 'lookup checks', checksCell);
-                for (var j = 0; j < e.checks.length; j++) {
-                    var c = e.checks[j];
-                    var statusSpan = document.createElement('div');
-                    statusSpan.setAttribute('class', 'checkTransition');
-                    statusSpan.appendChild(this.createBadge(c['old']));
-                    statusSpan.appendChild(document.createTextNode('→'));
-                    var newBadge = this.createBadge(c['new']);
-                    newBadge.setAttribute('title', c['output']);
-                    statusSpan.appendChild(newBadge);
-                    checksCell.appendChild(statusSpan);
-                    var checkName = document.createElement('div');
-                    checkName.setAttribute('class', 'lookup checkName');
-                    checkName.setAttribute('title', c['id']);
-                    checkName.appendChild(document.createTextNode(c['name']));
-                    checksCell.appendChild(checkName);
+                var checksCell;
+                if (e.checks.length == 0) {
+                    checksCell = this.createBadge('No check modified', 'primary');
+                } else {
+                    checksCell = document.createElement("div");
+                    for (var j = 0; j < e.checks.length; j++) {
+                        var c = e.checks[j];
+                        var statusSpan = document.createElement('div');
+                        statusSpan.setAttribute('class', 'checkTransition');
+                        statusSpan.appendChild(this.createBadge(c['old']));
+                        statusSpan.appendChild(document.createTextNode('→'));
+                        var newBadge = this.createBadge(c['new']);
+                        statusSpan.appendChild(newBadge);
+                        checksCell.appendChild(statusSpan);
+                        var checkName = document.createElement('div');
+                        checkName.setAttribute('class', 'lookup checkName');
+                        checkName.setAttribute('data-toggle', 'tooltip');
+                        checkName.setAttribute('title', c['id']+'\n\n' + c.output);
+                        checkName.appendChild(document.createTextNode(c['name']));
+                        checksCell.appendChild(checkName);
+                    }
                 }
+                this.buildCell(row, 'td', 'lookup checks', checksCell);
             }
             {
-                var statusSpan = document.createElement('span');
-                statusSpan.appendChild(this.createBadge(e['old_state']));
-                statusSpan.appendChild(document.createTextNode('→'));
-                statusSpan.appendChild(this.createBadge(e['new_state']));
-                this.buildCell(row, 'td', 'status', statusSpan);
+                var td = this.buildCell(row, 'td', 'service-status', this.createBadge(e['old_state']));
+                td.appendChild(document.createTextNode('→'));
+                td.appendChild(this.createBadge(e['new_state']));
             }
             {
-                var allInstances = document.createElement('span');
                 var nSuccess = e['stats']['passing'];
-                if (nSuccess > 0) {
-                    var success = this.createBadge(nSuccess, 'success');
-                    allInstances.appendChild(success);
-                }
+                var allInstances = this.buildCell(row, 'td', 'all-instances', this.createBadge(nSuccess, 'success'));
                 var nWarnings = e['stats']['warning'];
                 if (nWarnings > 0) {
                     var elem = this.createBadge(nWarnings, 'warning');
@@ -325,10 +389,10 @@ class ServiceTimeline {
                 } else if (percent < 50) {
                     clazz = 'warning';
                 }
-                allInstances.appendChild(this.createBadge(percent + " %", clazz));
-                row.appendChild(allInstances);
+                this.buildCell(row, 'td', 'ipercents', this.createBadge(percent + " %", clazz));
             }
             tbody.prepend(row)
         }
+        this.lastEntryLoaded = lastEntryFound;
     }
 }

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

@@ -12,6 +12,15 @@ function buildServiceStatus(service) {
   return serviceStatus;
 }
 
+function padDateUnit(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());
+}
+
+
 function nodeState(checks) {
   status='passing';
   for (var checkKey in checks) {

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

@@ -1,13 +1,10 @@
 <%
 require 'json'
+services_blacklist = (ENV['EXCLUDE_SERVICES'] || 'consul-agent-http,mesos-slave,mesos-agent-watcher,mesos-exporter-slave').split(',')
 
-@current_time = Time.now.utc
+@current_time = Time.now.utc.iso8601
 cur_state = services.map do |service_name, _tags|
-  next if service_name.match?(/^lbl7-/)
-  next if service_name.match?(/^wmi-/)
-  next if service_name.match?(/collectd-/)
-  next if service_name.match?(/-(eu|as|us)$/)
-  next if service_name.match?(/-admin$/)
+  next if services_blacklist.include?(service_name)
 
   snodes = service(service_name)
   cur_stats = {
@@ -79,7 +76,7 @@ def diff(old, new)
   diff
 end
 
-@events = RingBuffer.new(max_size: (ENV['CONSUL_TIMELINE_BUFFER'] || 1000).to_i) unless @events
+@events = RingBuffer.new(max_size: (ENV['CONSUL_TIMELINE_BUFFER'] || 10000).to_i) unless @events
 
 def log_event(line)
   puts "#{Time.now.to_i} #{line}" if ENV['DEBUG_TIMELINE']

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: consul-templaterb
 version: !ruby/object:Gem::Version
-  version: 1.8.2
+  version: 1.8.3
 platform: ruby
 authors:
 - SRE Core Services
@@ -231,7 +231,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.7
+rubygems_version: 2.7.8
 signing_key: 
 specification_version: 4
 summary: Implementation of Consul template using Ruby and .erb templating language