consul-templaterb 1.18.5 → 1.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 395c9514652523bda8cc32eb9ae1f7c0b0d19941c2df9cb3c09654e5dcc63d9c
-  data.tar.gz: 5f444cf5c5dbc03ca4ca4515646882365f9e5a6347c083b2b590f2893944bcf8
+  metadata.gz: c205b2067eaf6526b4885b4303c580e2b52d4e770371db3d9678908c013b19fd
+  data.tar.gz: 0fe4a33a112ff1801391d4c6df928d0f63a7bc606cd0b2aa57f1907bbb3a50d1
 SHA512:
-  metadata.gz: 41d34ad14160c153fb02a256d23bd5fd858f30d0593afe551d50738fdd60bea6009ef8e86f2d04e4220891db3ef19492906250d5fa34ed29a3e44ede30e082ef
-  data.tar.gz: 81b45b14001c436a710a1ab766811cbae0671087bce17bd29aff06512545889a0fb6e317eaf9c6eac9239aaf08062e64f15fa3e086605b4ff5af939714734e15
+  metadata.gz: abef2e2b0cf9dec0ab94aaa04ad3377c0f13171cc9ffc8fa83a47a99c6a99ff229834c76c4209d1ca3d854d8006450fd8bb745f7cb594b444e2c83fc7711ec61
+  data.tar.gz: 6c818a568ed87d660545a03f3308c4b97cd5b3e17a80d7d7d38c1c79453fd20e73a8912b6a1da9b259b368124fab3abad7c7930cca10f6eabc1dd0475874309a

data/.travis.yml

@@ -3,11 +3,16 @@ rvm:
 - 2.4.7
 - 2.5.6
 - 2.6.4
-deploy:
-  provider: rubygems
-  api_key:
-    secure: l78H6Ow9HCeEz0hcAP2XCXaGGBNRXZ/QLFPNzwyNmHToko9WqZj6mbiNIcVwZ8aCcZEzFmtcB7m1lC1l+mvot3Snfh4OUErK7EXMLiNxUWybtA4qJqmsb2J8JGS69pTohPKagi1YyRbyVs2tJpM5OVazcNxEQDAVkWVxJuPVz6tsn4rXZsL77nTSVyB6YGKgguRGhtS/3M0ufk1ymOpuk8pxXKaotlYGRXmht2OHW+FDQczTMgqu6jiZubjWlNHVxtYn+CsLYNj1BswzD6fF1uous6nchV0if2QW5N4OJVyZCx3yEQ0RswfI8G1kG/Jm8wd2lSknY2wpnd1qkRnAcFlKBpUv8aQd6SdbSO84GTAOvucgK7Mcf0LRvYSE2FyagaAPFSfMybWd+GS26g5AuRPpkhtsS9ijfdIzpudiF18pvnJ+wQj+hWM/THWowYNyKv9NeckxdrULaHPisA346r5eM/EADOhyEUtPm11PFgcheGjff1H4qXGc9gcm50u6mNNHkWv38oGhAPpRk/bU7qybTKqRKNGWGP0MiT4WVIFXp62/JMY7AmufOdJx5Ca5JVsaWoN4fsS9r3+R+FxvRtV9NOrRJVKKaQhzi4UHEUDQ2hQjpLDijD5L0vUsl6arl+nufTt5G5jp9QvdY7fhYT1mpGgWj0hTBd8Pxsl3N8U=
-  gem: consul-templaterb
-  on:
-    tags: true
-    repo: criteo/consul-templaterb
+jobs:
+  include:
+    - stage: Gem release
+      rvm: 2.5.6
+      script: echo "Publishing consul-templaterb on rubygems.org ..."
+      deploy:
+        provider: rubygems
+        api_key:
+          secure: l78H6Ow9HCeEz0hcAP2XCXaGGBNRXZ/QLFPNzwyNmHToko9WqZj6mbiNIcVwZ8aCcZEzFmtcB7m1lC1l+mvot3Snfh4OUErK7EXMLiNxUWybtA4qJqmsb2J8JGS69pTohPKagi1YyRbyVs2tJpM5OVazcNxEQDAVkWVxJuPVz6tsn4rXZsL77nTSVyB6YGKgguRGhtS/3M0ufk1ymOpuk8pxXKaotlYGRXmht2OHW+FDQczTMgqu6jiZubjWlNHVxtYn+CsLYNj1BswzD6fF1uous6nchV0if2QW5N4OJVyZCx3yEQ0RswfI8G1kG/Jm8wd2lSknY2wpnd1qkRnAcFlKBpUv8aQd6SdbSO84GTAOvucgK7Mcf0LRvYSE2FyagaAPFSfMybWd+GS26g5AuRPpkhtsS9ijfdIzpudiF18pvnJ+wQj+hWM/THWowYNyKv9NeckxdrULaHPisA346r5eM/EADOhyEUtPm11PFgcheGjff1H4qXGc9gcm50u6mNNHkWv38oGhAPpRk/bU7qybTKqRKNGWGP0MiT4WVIFXp62/JMY7AmufOdJx5Ca5JVsaWoN4fsS9r3+R+FxvRtV9NOrRJVKKaQhzi4UHEUDQ2hQjpLDijD5L0vUsl6arl+nufTt5G5jp9QvdY7fhYT1mpGgWj0hTBd8Pxsl3N8U=
+        gem: consul-templaterb
+        on:
+          tags: true
+          repo: criteo/consul-templaterb

data/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## (UNRELEASED)
 
+## 1.19.0 (October 14, 2019)
+
+IMPROVEMENTS:
+
+* Refactor JS code in consul-ui
+* Removed old samples not used anymore
+
+NEW FEATURES:
+
+* Added new function `checks_for_node`
+
+BUGFIXs:
+
+* Avoid try publishing several times Gem on rubygems.org
+
 ## 1.18.5 (September 30, 2019)
 
 IMPROVEMENTS:

data/README.md

@@ -251,19 +251,17 @@ by consul-templaterb.
 Have a look into the [samples/](samples/) directory to browse example files which contains those
 examples:
 
-1. [List all nodes on Cluster](samples/nodes.html.erb)
-2. [Show all services in Cluster](samples/services.html.erb)
-3. [Show all Service Checks and their output](samples/checks.html.erb)
-4. [Show all Key/Values nicely](samples/keys.html.erb)
-5. [Show Choregraphies  - work on content of K/V with JSON](samples/criteo_choregraphies.html.erb)
-6. [Services in XML](samples/consul_template.xml.erb)
-7. [Services in JSON](samples/consul_template.json.erb)
-8. [Generate HaProxy Configuration](samples/ha_proxy.cfg.erb)
-9. [Export Consul Statistics to Prometheus](samples/metrics.erb) : count all services, their state,
+1. [List all nodes on Cluster](samples/consul-ui/consul_nodes.json.erb)
+2. [Show all services in Cluster](samples/consul-ui/consul_services.json.erb)
+3. [Show all Key/Values nicely](samples/consul-ui/consul_keys.json.erb)
+4. [Services in XML](samples/consul_template.xml.erb)
+5. [Services in JSON](samples/consul_template.json.erb)
+6. [Generate HaProxy Configuration](samples/ha_proxy.cfg.erb)
+7. [Export Consul Statistics to Prometheus](samples/metrics.erb) : count all services, their state,
    datacenters and nodes and export it to prometheus easily to trigger alerts.
-10. [List all services/Nodes with their statuses for all datacenters](samples/all_services.txt.erb)
-11. [Show all services/instances not passing on all DCs](samples/tools/find_all_failing_services.txt.erb)
-12. [List all rubygems consul versions from remote server JSON](samples/list_ruby_versions_from_rubygems.txt.erb)
+8. [List all services/Nodes with their statuses for all datacenters](samples/all_services.txt.erb)
+9. [Show all services/instances not passing on all DCs](samples/tools/find_all_failing_services.txt.erb)
+10. [List all rubygems consul versions from remote server JSON](samples/list_ruby_versions_from_rubygems.txt.erb)
 
 If you want to test it quickly, you might try with (assuming your consul agent is listening on
 `http://localhost:8500`):

data/TemplateAPI.md

@@ -226,6 +226,10 @@ Full example: [samples/consul_template.txt.erb](samples/consul_template.txt.erb)
 [List all the services of a given Node](https://www.consul.io/api/catalog.html#list-services-for-node) using its
 name or its ID. If DC is specified, will lookup for given node in another datacenter.
 
+## checks_for_node(name, dc: nil, passing: false, tag: nil)
+
+[Find all the checks](https://www.consul.io/api/health.html#list-checks-for-node) of a given node name.
+
 ## checks_for_service(name, dc: nil, passing: false, tag: nil)
 
 [Find all the checks](https://www.consul.io/api/health.html#list-checks-for-service) of a given service.

data/lib/consul/async/consul_template.rb

@@ -133,6 +133,16 @@ module Consul
         create_if_missing(path, query_params) { ConsulTemplateChecks.new(ConsulEndpoint.new(consul_conf, path, true, query_params, '[]')) }
       end
 
+      # https://www.consul.io/api/health.html#list-checks-for-node
+      def checks_for_node(name, dc: nil, passing: false)
+        raise 'You must specify a name for a service' if name.nil?
+        path = "/v1/health/node/#{name}"
+        query_params = {}
+        query_params[:dc] = dc if dc
+        query_params[:passing] = passing if passing
+        create_if_missing(path, query_params) { ConsulTemplateChecks.new(ConsulEndpoint.new(consul_conf, path, true, query_params, '[]')) }
+      end
+
       # https://www.consul.io/api/catalog.html#list-nodes
       def nodes(dc: nil)
         path = '/v1/catalog/nodes'

data/lib/consul/async/version.rb

@@ -1,5 +1,5 @@
 module Consul
   module Async
-    VERSION = '1.18.5'.freeze
+    VERSION = '1.19.0'.freeze
   end
 end

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

@@ -36,12 +36,6 @@
     <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">
     <link rel="stylesheet" href="vendors/highlight/atom-one-dark.css">
-    <style id="css-states">
-      .service-tags { display: none; }
-    </style>
-    <style id="serviceCol">
-      .service-tags { display: none; }
-    </style>
   </head>
   <body>
     <nav class="navbar navbar-expand-md navbar-dark bg-secondary">

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

@@ -30,10 +30,11 @@
   <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/utils.js"></script>
+  <script src="js/types.js"></script>
   <script src="js/keys.js"></script>
   <script src="vendors/highlight/highlight.pack.js"></script>
   <script type="text/javascript">
-    consulKeys = new ConsulKeys('<%= datasource %>','<%= refresh %>');
+    consulKeysManager = new ConsulKeysManager('<%= datasource %>');
   </script>
   </body>
 </html>

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

@@ -6,14 +6,20 @@
         <div class="col-12 col-m-12">
           <h2 class="text-center" id="service-title"></h2>
           <div class="row mb-2">
-            <div class="input-group float-left col-10">
-              <input id="instance-filter" type="text" placeholder="filter nodes by name, service or tags" class="form-control" />
+            <div class="input-group float-left col-7">
+              <input id="instance-filter" type="text" placeholder="filter nodes by name, service or tags" class="form-control" >
             </div>
-            <div id="instance-statuses" class="col-2">
-              <span id="service-status-passing"  status="passing" onclick="consulNodes.onClickFilter(this)" class="badge mx-1 badge-success passing service-status">0</span>
-              <span id="service-status-warning"  status="warning" onclick="consulNodes.onClickFilter(this)" class="badge mx-1 badge-warning warning service-status">0</span>
-              <span id="service-status-critical" status="critical" onclick="consulNodes.onClickFilter(this)" class="badge mx-1 badge-danger critical service-status">0</span>
-              <span id="service-status-total" status="total" onclick="consulNodes.onClickFilter(this)" class="badge mx-1 badge-dark service-status">0</span>
+            <select id="max-display-selector" class="form-control col-2">
+              <option selected="selected" value="100">Show 100</option>
+              <option value="500">Show 500</option>
+              <option value="1000">Show 1000</option>
+              <option value="all">All</option>
+            </select>
+            <div id="instance-statuses" class="float-right col-3">
+              <span id="service-status-passing"  status="passing" class="badge mx-1 badge-success passing service-status">0</span>
+              <span id="service-status-warning"  status="warning" class="badge mx-1 badge-warning warning service-status">0</span>
+              <span id="service-status-critical" status="critical" class="badge mx-1 badge-danger critical service-status">0</span>
+              <span id="service-status-total" status="total" class="badge mx-1 badge-dark service-status">0</span>
             </div>
           </div>
           <div id="instances-wrapper">
@@ -27,9 +33,10 @@
   <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/utils.js"></script>
+  <script src="js/types.js"></script>
   <script src="js/nodes.js"></script>
   <script type="text/javascript">
-    consulNodes = new ConsulNodes('<%= datasource %>','<%= refresh %>');
+    consulNodesManager = new ConsulNodesManager('<%= datasource %>');
   </script>
   </body>
 </html>

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

@@ -7,13 +7,13 @@
           <div class="form-group">
             <div class="form-check form-check-inline">
               <label class="form-check-label">
-                <input id="showTagsInList" type="checkbox" title="show tags" onclick="consulService.showTags(this.checked)" class="form-check-input" />
+                <input id="showTagsInList" type="checkbox" title="show tags" class="form-check-input" />
                 Show Tags
               </label>
             </div>
             <div class="form-check form-check-inline">
               <label class="form-check-label">
-                <input id="showProxiesInList" type="checkbox" title="show Consul Connect Proxies" onclick="consulService.showProxies(this.checked)" class="form-check-input" />
+                <input id="showProxiesInList" type="checkbox" title="show Consul Connect Proxies" class="form-check-input" />
                 Show Connect Proxies
               </label>
             </div>
@@ -32,14 +32,26 @@
         <div class="col-8 col-m-9">
           <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" />
+            <div class="input-group float-left col-7">
+              <input id="instance-filter" type="text" placeholder="filter nodes by name, service or tags" class="form-control" >
+            </div>
+            <select id="max-display-selector" class="form-control  col-2">
+              <option selected="selected" value="100">Show 100</option>
+              <option value="500">Show 500</option>
+              <option value="1000">Show 1000</option>
+              <option value="all">All</option>
+            </select>
+            <div id="instance-statuses" class="float-right col-3">
+              <span id="service-status-passing"  status="passing" class="badge mx-1 badge-success passing service-status">0</span>
+              <span id="service-status-warning"  status="warning" class="badge mx-1 badge-warning warning service-status">0</span>
+              <span id="service-status-critical" status="critical" class="badge mx-1 badge-danger critical service-status">0</span>
+              <span id="service-status-total" status="total" class="badge mx-1 badge-dark service-status">0</span>
             </div>
           </div>
           <div class="progress">
-            <div id="service-progress-passing" status="passing" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-success" role="progressbar" style="width: 100%">passing</div>
-            <div id="service-progress-warning" status="warning" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-warning" role="progressbar" style="width: 0%">warning</div>
-            <div id="service-progress-critical" status="critical" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-danger" role="progressbar" style="width: 0%">critical</div>
+            <div id="service-progress-passing" status="passing" class="progress-status progress-bar bg-success" role="progressbar" style="width: 100%">passing</div>
+            <div id="service-progress-warning" status="warning" class="progress-status progress-bar bg-warning" role="progressbar" style="width: 0%">warning</div>
+            <div id="service-progress-critical" status="critical" class="progress-status progress-bar bg-danger" role="progressbar" style="width: 0%">critical</div>
           </div>
           <div id="instances-wrapper">
             <div id="instances-list" class="list-group"></div>
@@ -52,9 +64,10 @@
   <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/utils.js"></script>
+  <script src="js/types.js"></script>
   <script src="js/service.js"></script>
   <script type="text/javascript">
-    consulService = new ConsulService('<%= datasource %>','<%= refresh %>');
+    consulServiceManager = new ConsulServiceManager('<%= datasource %>');
   </script>
   <script src="vendors/highlight/highlight.pack.js"></script>
   </body>

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

@@ -91,7 +91,6 @@ td.serviceName {
 
 #service-wrapper .list-group-item:last-child, #instances-wrapper .list-group-item:last-child,
 #keys-wrapper .list-group-item:last-child {
-  border-bottom-width: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
@@ -239,10 +238,15 @@ pre, code {
   margin-bottom: 0px;
 }
 
-.connect-enabled{
+.service-list-item {
+  cursor: pointer;
+}
+
+.connect-enabled {
   float:right;
   border: 1px #ccc solid;
 }
-.connect-disabled{
+
+.connect-disabled {
   display: none;
 }

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

@@ -1,132 +1,88 @@
-class ConsulKeys {
-  constructor(ressourceURL, refresh) {
-    this.ressourceURL = ressourceURL;
-    this.fetchRessource();
-    this.keysList = $("#keys-list");
-    this.keysFilter = $("#keys-filter");
-    this.keysFilter.keyup(debounce(this.filterService, 250));
-    this.refresh = parseInt(refresh);
-    this.keysFilterCounter = $("#keys-counter");
-    this.keysFilterCount = 0;
-  }
-
-  fetchRessource() {
-    $.ajax({url: this.ressourceURL, cache: false, dataType: "json", sourceObject: this, success: function(result){
-      consulKeys.initRessource(result);
-    }});
-  }
-
-  initRessource(data) {
-    this.data = data;
-    this.reloadKeysList();
-    console.log('Data generated at: ' + data['generated_at']);
+class ConsulKeysManager extends ConsulUIManager {
+    constructor(resourceURL) {
+        super(resourceURL);
+        this.codeDisplayer = new CodeDisplayer(
+            $("#kv-data"),
+            $("#kv-title"),
+        )
+        this.sideSelector = new KeySideSelector(
+            this.codeDisplayer,
+            $("#keys-filter"),
+            $("#keys-list"),
+            $("#keys-counter"),
+            "filter",
+            "key"
+        );
+        this.fetchResource();
+    }
 
-    var urlParam = new URL(location.href).searchParams.get('key');
-    if (urlParam) {
-      var nodes = document.getElementById('keys-list').childNodes;
-      for(var i in nodes) {
-        if($(nodes[i]).find(".key-name").html() == urlParam) {
-          var selectedElement = $(nodes[i])
-          this.selectKey(selectedElement);
-          selectedElement.focus()
-          break;
-        }
-      }
-    } else {
-      this.selectKey(document.getElementById('keys-list').firstElementChild);
+    async initResource(data) {
+        this.sideSelector.data = data["kv"];
+        this.sideSelector.prepareData();
+        this.sideSelector.refreshList();
     }
+}
 
-    if(this.refresh > 0) {
-      setTimeout(this.fetchRessource, this.refresh * 1000);
+class KeySideSelector extends SideSelector {
+    constructor(
+        codeDisplayer,
+        filterElement,
+        listElement,
+        counterElement,
+        URLLabelFilter,
+        URLLabelSelected
+    ) {
+        super(
+            filterElement,
+            listElement,
+            counterElement,
+            URLLabelFilter,
+            URLLabelSelected,
+            false
+        );
+        this.codeDisplayer = codeDisplayer
     }
-  }
 
-  reloadKeysList() {
-    this.keysList.html('');
-    this.keysFilterCount = 0;
+    matchElement(key, keyData, filter) {
+        return key.match(filter);
+    }
 
-    for (var key in this.data.kv) {
+    elementGenerator(key, data) {
+        var element = document.createElement("li");
 
-      var listItem = document.createElement('button');
-      listItem.setAttribute('type','button');
-      listItem.setAttribute('onfocus','consulKeys.onClickServiceName(this)');
-      listItem.setAttribute('onclick','consulKeys.onClickServiceName(this)');
-      listItem.setAttribute('value',key);
-      listItem.setAttribute('class','list-group-item list-group-item-action');
+        var CSSClass = "service-list-item list-group-item list-group-item-action";
 
-      var serviceNameItem = document.createElement('div');
-      serviceNameItem.setAttribute('class', 'key-name');
-      serviceNameItem.appendChild(document.createTextNode(key));
-      listItem.appendChild(serviceNameItem);
+        var obj = this;
+        element.addEventListener("focus", function () {
+            obj.onClickElement(this, key);
+        });
+        element.addEventListener("click", function () {
+            obj.onClickElement(this, key);
+        });
 
-      this.keysFilterCount += 1;
-      this.keysList.append(listItem);
-    }
-    this.keysFilterCounter.html(this.keysFilterCount);
-    resizeWrapper('keys-wrapper', 'keys-list');
-    this.filterService();
-  }
+        element.setAttribute("value", key);
 
-  filterService() {
-    var filter = new RegExp(consulKeys.keysFilter.val());
-    consulKeys.keysFilterCount = 0;
-    consulKeys.keysList.children('button').each(function (){
-      var ui = $(this);
-      if(keyMatcher(this, filter)) {
-        ui.removeClass('d-none');
-        ui.addClass('d-block');
-        consulKeys.keysFilterCount += 1;
-        consulKeys.keysFilterCounter.html(consulKeys.keysFilterCount);
-      } else {
-        ui.removeClass('d-block');
-        ui.addClass('d-none');
-      }
-    })
-  }
+        element.setAttribute("class", CSSClass);
 
-  onClickServiceName(source) {
-    this.selectKey(source);
-    this.selectedKeyName = $(source).find(".key-name").html()
-    this.updateURL();
-  }
+        var nameItem = document.createElement("div");
+        nameItem.setAttribute("class", "service-name");
+        nameItem.appendChild(document.createTextNode(key));
+        element.appendChild(nameItem);
 
-  updateURL() {
-    var newUrl = new URL(location.href);
-    if (this.selectedKeyName) {
-      newUrl.searchParams.set('key', this.selectedKeyName);
-    } else {
-      newUrl.searchParams.delete('key')
+        return element;
     }
-    window.history.pushState({},"",newUrl.href);
-  }
 
-  selectKey(source) {
-    if (this.selectedKey) {
-      $(this.selectedKey).removeClass('active');
-    }
-    var serviceName = $(source).find(".key-name").html()
-    this.selectedKey = source.closest( "button" );
-    $(this.selectedKey).addClass('active');
-    this.displayKey([serviceName]);
-  }
-
-  displayKey(key) {
-    $("#kv-title").html(key);
-    if(this.data.kv[key] != null) {
-      var dataToDisplay = atob(this.data.kv[key]);
-    } else {
-      var dataToDisplay = 'NO DATA';
+    selectItem(element, key) {
+        super.selectItem(element, key);
+        if (this.data[key] != null) {
+            var dataToDisplay = atob(this.data[key]);
+        } else {
+            var dataToDisplay = 'NO DATA';
+        }
+        this.codeDisplayer.displayData(key, dataToDisplay);
     }
-
-    $("#kv-data").text(dataToDisplay);
-    $("#kv-data").removeClass();
-
-    $('pre code').each(function(i, block) {
-      hljs.highlightBlock(block);
-    });
-    resizeWrapper('data-wrapper', 'kv-data');
-  }
 }
 
-$( window ).resize(resizeData);
-resizeData();
+
+$(window).resize(resizeData);
+resizeData();