consul-templaterb 1.1.1 → 1.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f41bf7bc42201458abf40795cba80f42f871464d1c40a9e5617e109f37ee54d
-  data.tar.gz: 6efd87a693e69e426c3c58fca95778a0d10ed07380c9d98cb62d9c69fcc11800
+  metadata.gz: feb7928f78cdbbfae6a96b7b6150c569addb523d94db80024c4493989cf1df4c
+  data.tar.gz: 93be5f37da47ebfefdfe40e836e28d0f5f440a5481da2db38c708c245d64769a
 SHA512:
-  metadata.gz: bf254e910bb560f414d1740a09445f796c83ca3cf89a597940d8068c0ef717bd646cb5ef226c4e871661863e881c78d7dda63f473ef5c71310fb80151f225be1
-  data.tar.gz: 416ee5c54b94a719fabd516355b0adc495ab3b80f351c75b8283a18a3ab73f8794e5081e6b9eab4d3f8a480cfae22732961fd3a938a9c1c10c2f2eaa7dc4d8fb
+  metadata.gz: d475a88889816f29899ec899c13614af8841bc984fb86ff864f6a6a8f9d50f31507244b2954a7e2c374b40d75412c39a90b218b9d11355e9af51d0258ea7975d
+  data.tar.gz: 0f52de542d465e7a962a81025c226111df1725f4bafdc53f591827607a08bc5345e8160e2b791517135b2fbaad27b23309c71acb91ac406cb480fa8c3ab9d8df

data/CHANGELOG.md

@@ -4,9 +4,18 @@
 
 IMPROVEMENTS:
 
+## 1.1.2 (May 17, 2018)
+
+IMPROVEMENTS:
+
+ * samples/consul-ui now display number of instances passing/warning/critical
+ * samples/consul-ui allow to filter per status, tags or instance name
+ * samples/consul-ui now display tags in list
+
 ## 1.1.1 (May 15, 2018)
 
 IMPROVEMENTS:
+
  * Use 60 seconds of cleanup to avoid over-cleaning up endpoints
  * Use same environment variables to filter services in nodes.html.erb
 

data/README.md

@@ -243,7 +243,24 @@ templates. Also have a look to [samples/](samples/) directory to have full worki
 
 ## Development
 
+### Quick start
+
 We recommend using bundle using `bundle install`, you can now run `bundle exec bin/consul-templaterb`.
+Help is available running `bundle exec bin/consul-templaterb --help`
+
+The following example will generate static HTML pages and JSON data for `consul-ui`:
+```
+bundle exec bin/consul-templaterb -c your.consul.agent:8500 samples/consul-ui/*.erb
+```
+
+If you need remote calls, you need an HTTP server. A simple way to have one is using Python's simple HTTP
+server. Example for `consul-ui`:
+```
+cd samples/consul-ui
+python -m SimpleHTTPServer
+```
+
+### Installation
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the
 version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version,

data/lib/consul/async/version.rb

@@ -1,5 +1,5 @@
 module Consul
   module Async
-    VERSION = '1.1.1'.freeze
+    VERSION = '1.1.2'.freeze
   end
 end

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

@@ -7,7 +7,7 @@
       <div class="row mx-0">
         <div id="filter-menu" class="col-4 col-m-3 px-4 pt-4">
           <div class="form-group">
-            <input id="service-filter" type="text" placeholder="filter" class="form-control" >
+            <input id="service-filter" type="text" placeholder="filter by name or tags" class="form-control" >
           </div>
           <div id="service-wrapper" >
             <ul id="service-list" class="list-group">

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

@@ -41,11 +41,13 @@
     attributes = "#{attributes} weight #{w}" if w.positive?
   end
   backends = {}
+  tags_per_service = {}
   services(tag: service_tag_filter).each do |service_name, tags|
     if !services_blacklist.include?(service_name) && (instance_must_tag.nil? || tags.include?(instance_must_tag))
+      tags_per_service[service_name] = tags.sort
       the_backends = []
       service(service_name).sort {|a,b| a['Node']['Node'] <=> b['Node']['Node'] }.each do |snode|
-        tags_of_instance = snode['Service']['Tags']
+        tags_of_instance = snode['Service']['Tags'].sort
         if (instance_must_tag.nil? || tags_of_instance.include?(instance_must_tag)) && !tags_of_instance.include?(instance_exclude_tag)
           the_backends << snode if snode['Service']['Port']
         end
@@ -60,14 +62,15 @@
     service = {
       name:      service_name,
       count:     nodes.count,
-      instances: []
+      tags: tags_per_service[service_name],
+      instances: [],
     }
     json_backends[service_name] = service
     nodes.each do |snode|
       checks = []
       snode['Checks'].each do |ncheck|
         check = {}
-        check['checkid'] = ncheck['CheckID']
+        check['checkid'] = ncheck['ID'] || ncheck['CheckID']
         check['name'] = ncheck['Name']
         check['output'] = ncheck['Output']
         check['status'] = ncheck['Status']
@@ -77,6 +80,7 @@
       server = { frontend_id: "backend_http__#{service_name}",
                  id:     snode['Service']['ID'],
                  name:   snode['Node']['Node'],
+                 sMeta:  snode['Service']['Meta'],
                  addr:   snode['Node']['Address'],
                  port:   snode['Service']['Port'],
                  tags:   snode['Service']['Tags'],

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

@@ -12,6 +12,17 @@
   border-color: rgba(0,0,0,.125);
 }
 
+.service-tags {
+  overflow: scroll;
+  max-height: 2.2em !important;
+}
+
+.service-tags .badge {
+  max-width: 8em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 #service-wrapper  .list-group-item:last-child, #instances-wrapper .list-group-item:last-child {
   border-bottom-width: 0px;
   border-bottom-left-radius: 0px;

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

@@ -24,8 +24,10 @@ class ConsulService {
     if (urlParam) {
       var nodes = document.getElementById('service-list').childNodes;
       for(var i in nodes) {
-        if($(nodes[i]).html() == urlParam) {
-          this.selectService(nodes[i]);
+        if($(nodes[i]).find(".service-name").html() == urlParam) {
+          var selectedElement = $(nodes[i])
+          this.selectService(selectedElement);
+          selectedElement.focus()
           break;
         }
       }
@@ -39,9 +41,32 @@ class ConsulService {
   }
 
   reloadServiceList() {
-    for (var service in this.data.services) {
-      var listItem = '<button type="button" onclick="consulService.onClickServiceName(this)" class="list-group-item list-group-item-action">';
-      listItem += service;
+    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 globalStatus = 'dark'
+      if (!!serviceStatus['passing']) {
+        listItem += '<span class="badge badge-pill badge-success" style="margin-right:10px;">' + serviceStatus['passing'] + '</span>';
+      }
+      if (!!serviceStatus['warning']) {
+        listItem += '<span class="badge badge-pill badge-warning" style="margin-right:10px;">' + serviceStatus['warning'] + '</span>';
+        if (globalStatus == 'dark') {
+          globalStatus = 'warning'
+        }
+      }
+      if (!!serviceStatus['critical']) {
+        listItem += '<span class="badge badge-pill badge-danger" style="margin-right:10px;">' + serviceStatus['critical'] + '</span>';
+        globalStatus = 'critical'
+      }
+      listItem+= ' / <span class="badge badge-pill badge-dark">' + (serviceStatus['total'] || 0) + '</span></div>';
+      listItem += '<div class="service-name text-' + globalStatus + '">' + serviceName + '</div>';
+      listItem += '<div 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> ';
+      }
+      listItem += '</div>'
       listItem += '</button>';
       this.serviceList.append(listItem);
     }
@@ -52,18 +77,20 @@ class ConsulService {
     var filter = new RegExp(e.target.value);
     consulService.serviceList.children('button').each(function (){
       if($(this).html().match(filter)) {
-        $(this).removeClass('d-none');
-        $(this).addClass('d-block');
+        var ui = $(this).closest( "button" )
+        ui.removeClass('d-none');
+        ui.addClass('d-block');
       } else {
-        $(this).removeClass('d-block');
-        $(this).addClass('d-none');
+        var ui = $(this).closest( "button" )
+        ui.removeClass('d-block');
+        ui.addClass('d-none');
       }
     })
   }
 
   onClickServiceName(source) {
     this.selectService(source);
-    this.updateURL();
+    this.updateURL($(source).find(".service-name").html());
   }
 
   onClickFilter(source) {
@@ -98,9 +125,11 @@ class ConsulService {
     })
   }
 
-  updateURL() {
+  updateURL(link) {
     var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
-    newUrl += '?service=' + $(this.selectedService).html();
+    if (link) {
+      newUrl += '?service=' + link
+    }
     window.history.pushState({},"",newUrl);
   }
 
@@ -108,11 +137,10 @@ class ConsulService {
     if (this.selectedService) {
       $(this.selectedService).removeClass('active');
     }
-    this.selectedService = source;
+    var serviceName = $(source).find(".service-name").html()
+    this.selectedService = source.closest( "button" );
     $(this.selectedService).addClass('active');
 
-    var serviceName = $(source).html();
-
     this.displayService(this.data.services[serviceName]);
   }
 
@@ -120,7 +148,7 @@ class ConsulService {
     $("#service-title").html(service['name']);
     $("#instances-list").html("");
 
-    var serviceStatus = {};
+    var serviceStatus = buildServiceStatus(service);
 
     for (var key in service['instances']) {
       var instance = service['instances'][key];
@@ -132,21 +160,35 @@ class ConsulService {
       serviceHtml.appendChild(checksStatusGenerator(instance));
       var state = nodeState(instance);
       serviceHtml.setAttribute('status', state);
-      serviceStatus[state] = (serviceStatus[state] || 0) + 1;
-      serviceStatus['total'] = (serviceStatus['total'] || 0) + 1;
-
       $("#instances-list").append(serviceHtml);
     }
 
     $('#service-progress-passing').css('width', (serviceStatus['passing'] || 0) / serviceStatus['total'] * 100 + '%')
+    $('#service-progress-passing').html("passing (" + (serviceStatus['passing'] || 0) + ")")
     $('#service-progress-warning').css('width', (serviceStatus['warning'] || 0) / serviceStatus['total'] * 100 + '%')
+    $('#service-progress-warning').html("warning (" + (serviceStatus['warning'] || 0) +")")
     $('#service-progress-critical').css('width', (serviceStatus['critical'] || 0) / serviceStatus['total'] * 100 + '%')
+    $('#service-progress-critical').html("critical (" + (serviceStatus['critical'] || 0) + ")")
 
     resizeWrapper('instances-wrapper', 'instances-list');
     $('#instances-list .list-group-item').resize(resizeAll);
   }
 }
 
+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) {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: consul-templaterb
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: 1.1.2
 platform: ruby
 authors:
 - SRE Core Services
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-05-15 00:00:00.000000000 Z
+date: 2018-05-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: em-http-request