consul-templaterb 1.0.9 → 1.0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0d408d6a635426874369831aa3c7f12890ebec2c7b5bb7d571b76bdbef9da041
-  data.tar.gz: 93af5f9b70790a9c9665bea3d13ae3d6322f7a3b5ff703d132a890cdc37ed6f6
+  metadata.gz: 03d2d0aa9f8c3d39ce100425d7b8a2907eea8e0362383a34e41917af4fc8e2b2
+  data.tar.gz: e1c0f7dd9bb50d8c10e5be073a00cc52e7de82b0541c8efb973929834b70c48a
 SHA512:
-  metadata.gz: 2237575069b92c50374adc5f91587f1737f0cf42a634acb9b469b6cc076175dbdb48e8d944df8de91ccf8b5ebaf089dca4cdb088d4cb46fe07fcb2dbebbabf54
-  data.tar.gz: 7ad73644600bc5130306c2a9190e092ae59ca08a529e75097b26da91907353a2a50d17fb249a040f8758856917463f035372fb5899728c8ae7f03630b1ee6895
+  metadata.gz: 2bf4ff3ce92344d9e79ba00035072753ec95d860bb143f39b0c858038119adf89014e8b3f7e294b4095158840fe43198252da1626a561f49dce796cd94f8549c
+  data.tar.gz: d53f88ea95908908aced0200a2afb98d30a156bc4a3f9c0ce66412c1ae6fc4f22f591137bce031fb85e840d7dc7b0116702f891d5a027f44f818e24631b7f116

data/CHANGELOG.md

@@ -4,7 +4,14 @@
 
 IMPROVEMENTS:
 
-## 1.0.8 (March 18, 2018)
+# 1.0.10
+
+IMPROVEMENTS:
+
+ * [samples/nodes.html.erb](samples/nodes.html.erb) now also displays the services
+ * Added dynamic UI with JSON in directory [samples/consul-ui](samples/consul-ui)
+
+## 1.0.9 (March 20, 2018)
 
 IMPROVEMENTS:
 

data/TemplateAPI.md

@@ -14,27 +14,135 @@ thus the application will display a warning if the template is invalid and won't
 
 Have a look to [samples/](samples/) directory to start writing your own templates.
 
+## Common structure of returned objects
+
+All objects returned by those functions described below all share the same structure:
+
+* `.result` : handle the result
+* `.endpoint` : get technical information about how data was retrieved and statistics
+
+## Common re-implemented functions for all objects
+
+Most objects returned by all those functions are contained within a `.result` object. However, in order
+to avoid having to write .result in all templates, some shortcuts have been added:
+* `[]` allow to either access values for map-based data or arrays
+* for all objects: `.each`, `sort`, `.select`, `.each_value`, `.count`, `.empty?`
+* additionnaly, for map based results, the following methods are available: `.keys`,  `.values`, `.each_pair`,
+  `.each_value`
+
+See [lib/consul/async/consul_template.rb:230](lib/consul/async/consul_template.rb#L230) and
+[lib/consul/async/consul_template.rb:260](lib/consul/async/consul_template.rb#L260) for up to date list of
+all those methods.
+
 ## datacenters()
 
 [Get the list of datacenters as string array](https://www.consul.io/api/catalog.html#list-datacenters).
 
+<details><summary>Examples</summary>
+<div class="samples">
+
+### List all datacenters in a text list and count services and nodes within
+
+```erb
+<% datacenters.each do |dc| %>
+  * <%= dc %> with <%= services(dc:dc).keys.count %> services, <%= nodes(dc:dc).count %> nodes
+<% end %>
+```
+
+Full example: [samples/consul_template.txt.erb](samples/consul_template.txt.erb)
+
+</div>
+</details>
+
 ## services([dc: datacenter], [tag: tagToFilterWith])
 
 [List the services matching the optional tag filter](https://www.consul.io/api/catalog.html#list-services),
 if tag is not specified, will match all the services. Note that this endpoint performs client side tag
 filtering for services to ease templates development since this feature is not available on Consul's endpoint.
 
+<details><summary>Examples</summary>
+<div class="samples">
+
+### List all services in default datacenter and display its tags
+
+```erb
+<% services.each do |service_name, tags|
+ %>  * <%= service_name %> [ <%= tags %> ]
+<% end %>
+```
+
+Full example: [samples/consul_template.txt.erb](samples/consul_template.txt.erb)
+
+### List all services in all datacenters having tag  `http`
+
+```erb
+<%
+  datacenters.each do |dc| %>
+  * Datacenter <%= dc %>
+  <%
+    services(dc:dc, tag:'http').each do |service_name, tags|
+    %>
+    - service <%= service_name %> <%= tags.sort %><%
+    end
+  end
+%>
+```
+
+</div>
+</details>
+
 ## service(serviceName, [dc: datacenter], [tag: tagToFilterWith], [passing: true])
 
 [List the instances](https://www.consul.io/api/health.html#list-nodes-for-service) of a service having the given
 optional tag. If no tag is specified, will return all instances of service. By default, it will return all the
 well services that are passing or not. An optional argument passing might be used to retrieve only passing instances.
 
+<details><summary>Examples</summary>
+<div class="samples">
+
+### List all services instances with http tag on current DC, instances sorted by node name
+
+```erb
+<% services.each do |service_name, tags|
+     if tags.include? 'http'
+%>  ++ Service <%= service_name %>
+<%     service(service_name, tag:'http').sort {|a,b| a['Node']['Node'] <=> b['Node']['Node'] }.each do |snode|
+%>  * <%= service_name %> -> <%=
+  snode['Node']['Node'] %>:<%= snode['Service']['Port'] %>  <%=
+  snode['Service']['Tags'] %> status: <%
+  snode['Checks'].each do |c| %> <%= c['Status']
+  %><% end if snode['Checks'] %>
+<%     end
+     end
+   end %>
+```
+
+Full example: [samples/consul_template.txt.erb](samples/consul_template.txt.erb)
+
+</div>
+</details>
+
 ## nodes([dc: datacenter])
 
 [List all the nodes of selected datacenter](https://www.consul.io/api/catalog.html#list-nodes). No filtering is
 applied.
 
+<details><summary>Examples</summary>
+<div class="samples">
+
+### List all nodes for DC, sorted by name
+
+```erb
+<% nodes.sort {|a,b| a['Node'] <=> b['Node'] }.each do |snode|
+%>  * <%= snode['Address'].ljust(16) %> <%= snode['Node'] %>
+<% end %>
+```
+
+Full example: [samples/consul_template.txt.erb](samples/consul_template.txt.erb)
+
+</div>
+</details>
+
 ## node(nodeNameOrId, [dc: datacenter])
 
 [List all the services of a given Node](https://www.consul.io/api/catalog.html#list-services-for-node) using its

data/lib/consul/async/consul_template.rb

@@ -227,7 +227,7 @@ module Consul
 
     class ConsulTemplateAbstract
       extend Forwardable
-      def_delegators :result_delegate, :each, :[], :sort, :each_value, :count, :empty?
+      def_delegators :result_delegate, :each, :[], :sort, :select, :each_value, :count, :empty?
       attr_reader :result, :endpoint, :seen_at
       def initialize(consul_endpoint)
         @endpoint = consul_endpoint

data/lib/consul/async/version.rb

@@ -1,5 +1,5 @@
 module Consul
   module Async
-    VERSION = '1.0.9'.freeze
+    VERSION = '1.0.10'.freeze
   end
 end

data/samples/consul-ui/common/header.html.erb

@@ -0,0 +1,38 @@
+<%
+  # This template can be configure the following way with environment variables
+  # CONSUL_TOOLS_SUFFIX: suffix for the address of consul tools
+  # CONSUL_TOOLS_PREFIX: prefix for the address of consul tools
+  # CONSUL_TOOLS: comma sperated list of consul tools
+  tools = (ENV['CONSUL_TOOLS'] || 'services').split(",")
+  suffix = ENV['CONSUL_TOOLS_PREFIX'] || '-ui.html'
+  prefix = ENV['CONSUL_TOOLS_SUFFIX'] || 'consul-'
+%><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+    <meta name="description" content="Display Consul information"/>
+    <meta name="author" content="Criteo"/>
+    <meta http-equiv="refresh" content="<%= param('refresh', ENV['REFRESH'] || '600') %>"/>
+    <title><%= param('title', 'Consul Real Time information') %></title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/style.css">
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-md navbar-dark bg-secondary">
+      <a class="navbar-brand" href="#">Consul</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-brand">Consul</span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <% tools.each do |tool| %>
+          <li class="nav-item">
+            <a class="nav-link" href="<%= prefix + tool + suffix %>"><%= tool.gsub('_', ' ').capitalize %></a>
+          </li>
+          <% end %>
+        </ul>
+      </div>
+    </nav>

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

@@ -0,0 +1,31 @@
+<% datasource = ENV['SERVICE_DATASOURCE'] || 'consul-template.json' %>
+<%= render_file('common/header.html.erb', title: 'Services') %>
+    <div class="main">
+      <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" >
+          </div>
+          <div id="service-wrapper" >
+            <ul id="service-list" class="list-group">
+            </ul>
+          </div>
+        </div>
+        <div class="col-8 col-m-9">
+          <h2 class="text-center" id="service-title"></h2>
+          <div id="instances-wrapper">
+            <div id="instances-list" class="list-group"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  <!-- Optional JavaScript -->
+  <!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+  <script src="js/service.js"></script>
+  <script type="text/javascript">
+    consulService = new ConsulService('<%= datasource %>');
+  </script>
+  </body>
+</html>

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

@@ -0,0 +1,89 @@
+<%
+# 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'] || 'http'
+  instance_must_tag = ENV['INSTANCE_MUST_TAG'] || service_tag_filter
+  instance_exclude_tag = ENV['INSTANCE_EXCLUDE_TAG'] || 'canary'
+
+  # Services to hide
+  services_blacklist = (ENV['EXCLUDE_SERVICES'] || 'consul-agent-http,mesos-slave,mesos-agent-watcher,mesos-exporter-slave').split(',')
+  # Compute the health of a Service
+  def compute_state(snode)
+    states = ['passing', []]
+    snode['Checks'].each do |chk|
+      st = chk['Status']
+      states[1] << st
+      if st == 'critical'
+        states[0] = st
+      elsif st == 'warning' && states[0] == 'passing'
+        states[0] = st
+      end
+    end
+    states
+  end
+  def compute_attributes(snode)
+    w = 100
+    snode['Service']['Tags'].each do |tag|
+      match = /^weight-([1-9][0-9])*$/.match(tag)
+      w = match[1].to_i if match
+    end
+    attributes = ""
+    states = compute_state(snode)
+    attributes = "#{attributes} disabled" if states[0] == 'critical'
+    if states[0] == 'warning'
+      w = w / 8
+    end
+    attributes = "#{attributes} weight #{w}" if w.positive?
+  end
+  backends = {}
+  services(tag: service_tag_filter).each do |service_name, tags|
+    if !services_blacklist.include?(service_name) && tags.include?(instance_must_tag)
+      the_backends = []
+      service(service_name).sort {|a,b| a['Node']['Node'] <=> b['Node']['Node'] }.each do |snode|
+        tags_of_instance = snode['Service']['Tags']
+        if tags_of_instance.include?(instance_must_tag) && !tags_of_instance.include?(instance_exclude_tag)
+          the_backends << snode if snode['Service']['Port']
+        end
+      end
+      # We add the backend ONLY if at least one valid instance does exists
+      backends[service_name] = the_backends
+    end
+  end
+%><%
+  json_backends = {}
+  backends.each_pair do |service_name, nodes|
+    service = {
+      name:      service_name,
+      count:     nodes.count,
+      instances: []
+    }
+    json_backends[service_name] = service
+    nodes.each do |snode|
+      checks = []
+      snode['Checks'].each do |ncheck|
+        check = {}
+        check['checkid'] = ncheck['CheckID']
+        check['name'] = ncheck['Name']
+        check['output'] = ncheck['Output']
+        check['status'] = ncheck['Status']
+        check['notes'] = ncheck['Notes']
+        checks.push(check)
+      end
+      server = { frontend_id: "backend_http__#{service_name}",
+                 id:     snode['Service']['ID'],
+                 name:   snode['Node']['Node'],
+                 addr:   snode['Node']['Address'],
+                 port:   snode['Service']['Port'],
+                 tags:   snode['Service']['Tags'],
+                 checks: checks,
+      }
+      service[:instances] << server
+    end
+  end
+  json = { services: json_backends}
+%><%= JSON.pretty_generate(json) %>

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

@@ -0,0 +1,57 @@
+.btn:focus, .btn:active, button {
+   outline: none !important;
+   box-shadow: none;
+}
+
+#service-wrapper, #instances-wrapper {
+  overflow: scroll;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-style: solid;
+  border-width: 1px 1px 1px 1px;
+  border-color: rgba(0,0,0,.125);
+}
+
+#service-wrapper  .list-group-item:last-child, #instances-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 {
+  border-top-width: 0px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+#service-wrapper  .list-group-item, #instances-wrapper .list-group-item {
+  border-left: 0px;
+  border-right: 0px;
+}
+
+h2 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+h2 .fas {
+  cursor: pointer;
+  color: rgba( 0, 0, 0, 0.5);
+  font-size: 1.5rem;
+  transition: color .16s linear
+}
+
+h2 .fas:hover {
+  cursor: pointer;
+  color: #007bff;
+  opacity: 1;
+  font-size: 1.5rem;
+}
+
+.custom-links {
+  background-color: #EEEEEE;
+  color: #333333;
+  margin: 3px;
+  padding: 5px;
+  padding-left: 10px;
+}

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

@@ -0,0 +1,206 @@
+class ConsulService {
+  constructor(ressourceURL) {
+    this.ressourceURL = ressourceURL;
+    this.fetchRessource();
+    this.serviceList = $("#service-list");
+    this.serviceFilter = $("#service-filter");
+    this.serviceFilter.keyup(this.filterService)
+  }
+
+  fetchRessource() {
+    $.ajax({url: "consul_template.json", cache: false, dataType: "json", sourceObject: this, success: function(result){
+      if(this.sourceObject.data) {
+        // For autoupdate
+      } else {
+        this.sourceObject.initRessource(result);
+      }
+    }});
+  }
+
+  initRessource(data) {
+    this.data = data;
+    this.reloadServiceList();
+    var urlParam = new URL(location.href).searchParams.get('service')
+    if(urlParam) {
+      var nodes = document.getElementById('service-list').childNodes;
+      for(var i in nodes) {
+        if($(nodes[i]).html() == urlParam) {
+          this.selectService(nodes[i]);
+          break;
+        }
+      }
+    } else {
+      this.selectService(document.getElementById('service-list').firstElementChild);
+    }
+  }
+
+  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;
+      listItem += '</button>';
+      this.serviceList.append(listItem);
+    }
+    resizeWrapper('service-wrapper', 'service-list');
+  }
+
+  filterService(e) {
+    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');
+      } else {
+        $(this).removeClass('d-block');
+        $(this).addClass('d-none');
+      }
+    })
+  }
+
+  onClickServiceName(source) {
+    this.selectService(source);
+    this.updateURL();
+  }
+
+  updateURL() {
+    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
+    newUrl += '?service=' + $(this.selectedService).html();
+    window.history.pushState({},"",newUrl);
+  }
+
+  selectService(source) {
+    if (this.selectedService) {
+      $(this.selectedService).removeClass('active');
+    }
+    this.selectedService = source;
+    $(this.selectedService).addClass('active');
+
+    var serviceName = $(source).html();
+
+    this.displayService(this.data.services[serviceName]);
+  }
+
+  displayService(service) {
+    $("#service-title").html(service['name']);
+    $("#instances-list").html("")
+
+    for (var key in service['instances']) {
+      var instance = service['instances'][key];
+      var serviceHtml = document.createElement('div');
+      serviceHtml.setAttribute('class','list-group-item');
+
+      serviceHtml.appendChild(serviceTitleGenerator(instance));
+      serviceHtml.appendChild(tagsGenerator(instance));
+      serviceHtml.appendChild(checksStatusGenerator(instance));
+
+      $("#instances-list").append(serviceHtml);
+    }
+
+    resizeWrapper('instances-wrapper', 'instances-list');
+    $('#instances-list .list-group-item').resize(resizeAll);
+  }
+}
+
+function serviceTitleGenerator(instance) {
+  var protocol = 'http://';
+  if(instance.tags.includes('https')) {
+    protocol = 'https://';
+  }
+
+  var htmlTitle = document.createElement('h5');
+
+  var instanceLink = document.createElement('a');
+  instanceLink.setAttribute('href',  protocol + instance.name + ':' + 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 + ': '));
+      td2.appendChild(document.createTextNode(instance.checks[checkKey][dataToDisplay[index]]));
+      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();

data/samples/nodes.html.erb

@@ -1,14 +1,45 @@
-<%= render_file('common/header.html.erb', title: 'Nodes') %>
+<%= render_file('common/header.html.erb', title: 'Nodes') %><%
+service_per_node = {}
+services.each do |service_name, tags|
+  service(service_name, tag:'http').sort {|a,b| a['Node']['Node'] <=> b['Node']['Node'] }.each do |snode|
+  node_services = service_per_node[snode['Node']['Node']] || []
+  node_services.push(snode)
+  service_per_node[snode['Node']['Node']] = node_services
+  end
+end %>
+
 <h1 id="nodes">List all nodes for DC, sorted by name</h1>
-<ul>
+<ul class="list-group">
 <% nodes.sort {|a,b| a['Node'] <=> b['Node'] }.each do |snode|
-%><li id="node_<%= snode['ID'] %>"><a href="ssh://<%= snode['Address']%>"><%= snode['Address'] %></a> <%= snode['Node'] %><%
+%><li id="node_<%= snode['ID'] %>" class="list-group-item">
+    <a href="ssh://<%= snode['Address']%>"><%= snode['Address'] %></a> <%= snode['Node'] %><%
   snode['Meta'].each do |k,v|
     if v && !v.empty?
 %><span class="badge badge-pill badge-primary float-right"><%= k %>:&nbsp;<%= v%></span><%
     end
   end if snode['Meta']
-%></li>
+  %><div><%
+  if service_per_node.key?(snode['Node'])
+    service_per_node[snode['Node']].each do |service|
+      tags = service['Service']['Tags'].sort
+      addr = service['Node']['Address']
+      port_num = service['Service']['Port'].to_i
+      port = port_num && port_num > 0 ? ":#{port_num}" : ''
+      url = if tags.include? 'https'
+              "https://#{addr}#{port}"
+            elsif tags.include? 'http'
+              "http://#{addr}#{port}"
+            elsif tags.include? 'ftp'
+              "ftp://#{addr}#{port}"
+            else
+              nil
+            end
+    %> <a class="badge badge-secondary" href='<%= url %>'>
+    <%= service['Service']['Service'] %>: <%= port_num %>
+    </a>
+  <% end
+  end
+%></div></li>
 <% end %>
 </ul>
-<%= render_file 'common/footer.html.erb' %>
+<%= render_file 'common/footer.html.erb' %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: consul-templaterb
 version: !ruby/object:Gem::Version
-  version: 1.0.9
+  version: 1.0.10
 platform: ruby
 authors:
 - SRE Core Services
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-20 00:00:00.000000000 Z
+date: 2018-05-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: em-http-request
@@ -158,6 +158,11 @@ files:
 - samples/checks.html.erb
 - samples/common/footer.html.erb
 - samples/common/header.html.erb
+- samples/consul-ui/common/header.html.erb
+- samples/consul-ui/consul-services-ui.html.erb
+- samples/consul-ui/consul_template.json.erb
+- samples/consul-ui/css/style.css
+- samples/consul-ui/js/service.js
 - samples/consul_template.html.erb
 - samples/consul_template.json.erb
 - samples/consul_template.txt.erb