consul-templaterb 1.18.5 → 1.19.0

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

@@ -1,387 +1,363 @@
-class ConsulService {
-  constructor(resourceURL, refresh) {
-    this.resourceURL = resourceURL;
-    this.fetchRessource();
-    this.serviceList = $("#service-list");
-    this.serviceFilter = $("#service-filter");
-    this.serviceFilter.keyup(debounce(this.filterService, 250));
-    this.instanceFilter = $("#instance-filter");
-    this.instanceFilter.keyup(debounce(this.filterInstances, 250));
-    this.refresh = parseInt(refresh);
-    this.filterStatus = null;
-    this.serviceFilterCounter = $("#service-counter");
-    this.serviceFilterCount = 0;
-    this.showProxiesInList = false;
-    this.selectedServiceName = new URL(location.href).searchParams.get('service');
-    this.serviceFilterValue = new URL(location.href).searchParams.get('filter');
-    var cs = this
-    this.loadFavorites();
-    window.setTimeout(function(){
-      cs.showTags($('#showTagsInList:checked').length > 0);
-      cs.showProxies($('#showProxiesInList:checked').length > 0);
-    }, 100);
-    
-  }
-
-  initFilterValue() {
-    if (this.serviceFilterValue) {
-      this.serviceFilter.val(this.serviceFilterValue);
-      this.filterService()
-    }
-  }
-
-  showTags(enableTags) {
-    var stylesheet = document.getElementById('css-states');
-    stylesheet.textContent = '.service-tags { display: ' + (enableTags? 'block':'none') + '!important ;}';
-  }
-
-  showProxies(showProxies) {
-    if (showProxies != this.showProxiesInList) {
-      this.showProxiesInList = showProxies;
-      console.log("showProxies:= "+this.showProxiesInList+", reloading list")
-      this.reloadServiceList();
-    }
-  }
-
-  async fetchRessource() {
-    const response = await fetch(this.resourceURL);
-    const result = await response.json();
-    await this.initRessource(result);
-  }
-
-  async initRessource(data) {
-    this.data = data;
-    await this.reloadServiceList();
-    console.log('Data generated at: ' + data['generated_at']);
-
-    var urlParam = this.selectedServiceName
-    if (urlParam) {
-      var nodes = document.getElementById('service-list').childNodes;
-      for (const node of nodes) {
-        if($(node).find(".service-name").html() == urlParam) {
-          var selectedElement = $(node);
-          this.selectService(selectedElement);
-          selectedElement.focus();
-          break;
-        }
-      }
-    } else {
-      var servicePrefix = '#service_';
-      if (location.hash.startsWith(servicePrefix)) {
-        urlParam = location.hash.substr(servicePrefix.length);
-      }
-      this.selectService(document.getElementById('service-list').firstElementChild);
+class ConsulServiceManager extends ConsulUIManager {
+    constructor(resourceURL) {
+        super(resourceURL);
+        var flags = {};
+        this.mainSelector = new ServiceMainSelector(
+            $("#service-title"),
+            $("#instances-list"),
+            $("#instance-filter"),
+            $("#instance-counter"),
+            $("#max-display-selector"),
+            "node_filter",
+            "node_status_filter"
+        );
+        this.sideSelector = new ServiceSideSelector(
+            this.mainSelector,
+            flags,
+            $("#service-filter"),
+            $("#service-list"),
+            $("#service-counter"),
+            "filter",
+            "service"
+        );
+        var obj = this;
+        flags["showTags"] = new DisplayFlag(
+            $("#showTagsInList").get(0),
+            function () {
+                obj.sideSelector.prepareData();
+                obj.sideSelector.refreshList();
+            }
+        );
+        flags["showConnectProxies"] = new DisplayFlag(
+            $("#showProxiesInList").get(0),
+            function () {
+                obj.sideSelector.refreshList();
+            }
+        );
+        this.fetchResource();
     }
-    if(this.refresh > 0) {
-      setTimeout(this.fetchRessource, this.refresh * 1000);
+
+    async initResource(data) {
+        this.mainSelector.nodes = data["nodes"];
+        this.sideSelector.data = data["services"];
+        this.sideSelector.prepareData();
+        this.sideSelector.refreshList();
     }
-    this.initFilterValue();
-  }
-
-  async reloadServiceList() {
-    this.serviceList.html('');
-    this.serviceFilterCount = 0;
-
-    if (!this.data || !this.data.services) {
-      console.log("No data to display");
-    } else {
-      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));
+class ServiceSideSelector extends SideSelector {
+    constructor(
+        mainSelector,
+        flags,
+        filterElement,
+        listElement,
+        counterElement,
+        URLLabelFilter,
+        URLLabelSelected
+    ) {
+        super(
+            filterElement,
+            listElement,
+            counterElement,
+            URLLabelFilter,
+            URLLabelSelected,
+            true
+        );
+        this.mainSelector = mainSelector;
+        this.flags = flags;
     }
 
-    this.serviceFilterCounter.html(this.serviceFilterCount);
-    resizeWrapper('service-wrapper', 'service-list');
-  }
+    matchElement(serviceName, service, filter) {
+        if (
+            service["kind"] != undefined &&
+            !this.flags["showConnectProxies"].state
+        ) {
+            return false;
+        }
 
-  appendService(service, index) {
-    var serviceName = service.name;
-    var serviceStatus = buildServiceStatus(service);
+        if (service.name.match(filter)) {
+            return true;
+        }
 
-    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';
+        for (var i in service.tags) {
+            if (service.tags[i].match(filter)) {
+                return true;
+            }
+        }
 
-    var statuses = document.createElement('div');
-    statuses.setAttribute('class','statuses float-right');
+        for (var status in service.status) {
+            if (status.match(filter)) {
+                return true;
+            }
+        }
 
-    if (!!serviceStatus['passing']) {
-      statuses.appendChild(createBadge('badge-success passing', serviceStatus['passing']));
-      listItem.setAttribute('status', 'passing');
+        return false;
     }
 
-    if (!!serviceStatus['warning']) {
-      statuses.appendChild(createBadge('badge-warning warning', serviceStatus['warning']));
-      listItem.setAttribute('status', 'warning');
-    }
+    elementGenerator(serviceName, service) {
+        var element = document.createElement("li");
+        var CSSClass = "service-list-item list-group-item list-group-item-action";
 
-    if (!!serviceStatus['critical']) {
-      statuses.appendChild(createBadge('badge-danger critical', serviceStatus['critical']));
-      listItem.setAttribute('status', 'critical');
-    }
+        var obj = this;
+        element.addEventListener("focus", function () {
+            obj.onClickElement(this, serviceName);
+        });
+        element.addEventListener("click", function () {
+            obj.onClickElement(this, serviceName);
+        });
 
-    statuses.appendChild(createBadge('badge-dark', (serviceStatus['total'] || 0)));
+        element.setAttribute("value", serviceName);
 
-    statuses.append(this.buildFavButton(serviceName));
+        element.appendChild(this.generateStatuses(service));
 
-    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 (!!service["kind"]) {
+            var kind = document.createElement("div");
+            kind.setAttribute("class", "kind float-right");
+            kind.appendChild(createBadge("badge-info kind", service["kind"]));
+            element.appendChild(kind);
+            CSSClass += " kind-" + service["kind"];
+        }
+        element.setAttribute("class", CSSClass);
 
-    var serviceNameItem = document.createElement('div');
-    serviceNameItem.setAttribute('class', 'service-name');
-    serviceNameItem.appendChild(document.createTextNode(serviceName));
-    listItem.appendChild(serviceNameItem);
+        var serviceNameItem = document.createElement("div");
+        serviceNameItem.setAttribute("class", "service-name");
+        serviceNameItem.appendChild(document.createTextNode(serviceName));
+        element.appendChild(serviceNameItem);
 
-    var serviceTagsItem = document.createElement('div');
-    serviceTagsItem.setAttribute('class', 'service-tags');
+        if (this.flags["showTags"].state) {
+            element.appendChild(this.generateServiceTags(service));
+        }
 
-    for (var i = 0; i < service.tags.length; i++) {
-      serviceTagsItem.appendChild(createBadge('float-right badge-' + (i%2?'secondary':'info') , service.tags[i]));
+        return element;
     }
 
-    listItem.appendChild(serviceTagsItem);
+    generateStatuses(service) {
+        var serviceStatus = buildServiceStatus(service);
+        var statuses = document.createElement("div");
+        statuses.setAttribute("class", "statuses float-right");
+
+        if (!!serviceStatus["passing"]) {
+            statuses.appendChild(
+                createBadge("badge-success passing", serviceStatus["passing"])
+            );
+        }
+
+        if (!!serviceStatus["warning"]) {
+            statuses.appendChild(
+                createBadge("badge-warning warning", serviceStatus["warning"])
+            );
+        }
 
-    this.serviceList.append(listItem);
+        if (!!serviceStatus["critical"]) {
+            statuses.appendChild(
+                createBadge("badge-danger critical", serviceStatus["critical"])
+            );
+        }
 
-    this.serviceFilterCount += 1;
-  }
+        statuses.appendChild(
+            createBadge("badge-dark", serviceStatus["total"] || 0)
+        );
 
-  filterService() {
-    var filter;
-    var filterValue = consulService.serviceFilter.val();
-    try {
-      filter = new RegExp(filterValue);
-    } catch (e) {
-      var safeReg = filterValue.replace(/[-[\]{}()*+?.,\\^$|]/g, "\\$&")
-      console.log("Failed to compile regexp for '" + filterValue + "', using strict lookup due to: " + e);
-      filter = new RegExp(safeReg);
+        if (this.activateFavorite) {
+            statuses.append(this.favorites.buildButton(service.name));
+        }
+
+        return statuses;
     }
-    consulService.serviceFilterValue = filterValue
-    consulService.updateURL()
-    consulService.serviceFilterCount = 0;
-    var showProxiesInList = consulService.showProxiesInList;
-    consulService.serviceList.children('.serviceListItem').each(function (){
-      var ui = $(this);
-      if(serviceMatcher(this, filter, showProxiesInList)) {
-        ui.removeClass('d-none');
-        ui.addClass('d-block');
-        consulService.serviceFilterCount += 1;
-        consulService.serviceFilterCounter.html(consulService.serviceFilterCount);
-      } else {
-        ui.removeClass('d-block');
-        ui.addClass('d-none');
-      }
-    })
-  }
-
-  onClickServiceName(source) {
-    this.selectService(source);
-    this.selectedServiceName = $(source).find(".service-name").html()
-    this.updateURL();
-  }
-
-  onClickFilter(source) {
-    var status = $(source).attr('status');
-    this.filterStatus = (this.filterStatus == status) ? null : status;
-    this.filterInstances();
-  }
-
-  filterInstances() {
-    updateFilterDisplay(consulService.filterStatus);
-    var filter = new RegExp(consulService.instanceFilter.val());
-    $('#instances-list').children('div').each(function() {
-      var status = $(this).attr('status');
-      if(instanceMatcher(this, filter)) {
-        if (consulService.filterStatus == null) {
-          $(this).removeClass('d-none');
-          $(this).addClass('d-block');
-        } else if (consulService.filterStatus == status) {
-          $(this).removeClass('d-none');
-          $(this).addClass('d-block');
-        } else {
-          $(this).removeClass('d-block');
-          $(this).addClass('d-none');
+
+    generateServiceTags(service) {
+        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]
+                )
+            );
         }
-      } else {
-        $(this).removeClass('d-block');
-        $(this).addClass('d-none');
-      }
-    })
-  }
-
-  updateURL() {
-    var newUrl = new URL(location.href);
-    if (this.selectedServiceName) {
-      newUrl.searchParams.set('service', this.selectedServiceName);
-    } else {
-      newUrl.searchParams.delete('service')
+        return serviceTagsItem;
     }
-    if (this.serviceFilterValue) {
-      newUrl.searchParams.set('filter', this.serviceFilterValue);
-    } else {
-      newUrl.searchParams.delete('filter')
-    }  
-    window.history.pushState({},"",newUrl);
-  }
-
-  selectService(source) {
-    if (this.selectedService) {
-      $(this.selectedService).removeClass('active');
+
+    selectItem(element, service) {
+        super.selectItem(element, service);
+        this.mainSelector.initSelector(this.data[service]);
     }
-    var serviceName = $(source).find(".service-name").html()
-    this.selectedService = source.closest('li');
-    $(this.selectedService).addClass('active');
-
-    this.displayService(this.data.services[serviceName], this.data.nodes);
-  }
-
-  displayService(service, nodes) {
-    var titleText = service['name'] + ' <a href="consul-timeline-ui.html?service=' + service['name'] + '">timeline</a>';
-    $("#service-title").html(titleText);
-    $("#instances-list").html("");
-
-    var serviceStatus = buildServiceStatus(service);
-
-    for (var key in service['instances']) {
-      var instance = service['instances'][key];
-      var serviceHtml = document.createElement('div');
-      serviceHtml.setAttribute('class','list-group-item service-instance');
-      var state = nodeState(instance.checks);
-      serviceHtml.appendChild(weightsGenerator(instance.weights, state));
-      serviceHtml.appendChild(serviceTitleGenerator(instance));
-      var node_info = nodes[instance.name];
-      if (node_info != null) {
-        node_info = node_info.meta;
-        serviceHtml.appendChild(nodeMetaGenerator(node_info));
-        serviceHtml.appendChild(document.createElement('hr'));
-      }
-      if (instance.tags && instance.tags.length > 0) {
-        serviceHtml.appendChild(tagsGenerator(instance.tags));
-        serviceHtml.appendChild(document.createElement('hr'));
-      }
-      serviceHtml.appendChild(serviceMetaGenerator(instance.sMeta));
-      serviceHtml.appendChild(connectGenerator(instance));
-      serviceHtml.appendChild(checksStatusGenerator(instance, instance.name));
-      serviceHtml.setAttribute('status', state);
-      $("#instances-list").append(serviceHtml);
+}
+
+class ServiceMainSelector extends MainSelector {
+    constructor(
+        titleElement,
+        listElement,
+        filterElement,
+        counterElement,
+        maxDisplayed,
+        URLLabelFilter,
+        URLLabelStatus
+    ) {
+        super(listElement, filterElement, counterElement, maxDisplayed, URLLabelFilter, URLLabelStatus);
+        this.titleElement = titleElement;
+        this.passingStatusBarElement = $("#service-progress-passing");
+        this.warningStatusBarElement = $("#service-progress-warning");
+        this.criticalStatusBarElement = $("#service-progress-critical");
+        this.passingStatusButtonElement = $("#service-status-passing");
+        this.warningStatusButtonElement = $("#service-status-warning");
+        this.criticalStatusButtonElement = $("#service-status-critical");
+        this.totalStatusButtonElement = $("#service-status-total");
+        this.initStatusButtons();
+        this.initStatusBar();
     }
 
-    $('#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);
-    this.filterInstances();
-    $('pre code').each(function(i, block) {
-      hljs.highlightBlock(block);
-    });
-  }
-
-  loadFavorites() {
-    const all = (localStorage.getItem('favorite_services') || '').split(',').filter(e => e != '');
-    this.favorites = {}
-    for (var i in all) {
-      this.favorites[all[i]] = true;
+    initStatusButtons() {
+        var obj = this;
+        this.passingStatusButtonElement
+            .get(0)
+            .addEventListener("click", function () {
+                obj.onClickFilter(this, "passing");
+            });
+        this.warningStatusButtonElement
+            .get(0)
+            .addEventListener("click", function () {
+                obj.onClickFilter(this, "warning");
+            });
+        this.criticalStatusButtonElement
+            .get(0)
+            .addEventListener("click", function () {
+                obj.onClickFilter(this, "critical");
+            });
+        this.totalStatusButtonElement.get(0).addEventListener("click", function () {
+            obj.onClickFilter(this, null);
+        });
     }
-  }
-
-  saveFavorites() {
-    let str = "";
-    for (var i in this.favorites) {
-      if (!this.favorites[i]) {
-        continue;
-      }
-      str == "" || (str += ",");
-      str += i;
+
+    initStatusBar() {
+        var obj = this;
+        this.passingStatusBarElement.get(0).addEventListener("click", function () {
+            obj.onClickFilter(this, "passing");
+        });
+        this.warningStatusBarElement.get(0).addEventListener("click", function () {
+            obj.onClickFilter(this, "warning");
+        });
+        this.criticalStatusBarElement.get(0).addEventListener("click", function () {
+            obj.onClickFilter(this, "critical");
+        });
     }
-    localStorage.setItem('favorite_services', str);
-  }
 
-  buildFavButton(serviceName) {
-    const btn = document.createElement('button');
-    btn.className = 'favorite';
-    btn.setAttribute('title', 'Add/Remove from favorites');
+    initSelector(service) {
+        if (service) {
+          super.initSelector(service.instances);
+          this.generateTitle(service.name);
+        }
+    }
 
-    if (this.favorites[serviceName]) {
-      btn.className += ' favorited';
+    updateStatusCounters() {
+        updateStatusItem(this.selectorStatus);
+        this.passingStatusBarElement.css(
+            "width",
+            ((this.selectorStatus["passing"] || 0) / this.selectorStatus["total"]) *
+            100 +
+            "%"
+        );
+        this.passingStatusBarElement.html(
+            "passing (" + (this.selectorStatus["passing"] || 0) + ")"
+        );
+        this.warningStatusBarElement.css(
+            "width",
+            ((this.selectorStatus["warning"] || 0) / this.selectorStatus["total"]) *
+            100 +
+            "%"
+        );
+        this.warningStatusBarElement.html(
+            "warning (" + (this.selectorStatus["warning"] || 0) + ")"
+        );
+        this.criticalStatusBarElement.css(
+            "width",
+            ((this.selectorStatus["critical"] || 0) / this.selectorStatus["total"]) *
+            100 +
+            "%"
+        );
+        this.criticalStatusBarElement.html(
+            "critical (" + (this.selectorStatus["critical"] || 0) + ")"
+        );
     }
 
-    $(btn).click(e => {
-      this.toggleFav(serviceName, !this.favorites[serviceName]);
-    });
-    return btn;
-  }
+    generateTitle(serviceName) {
+        var titleText =
+            serviceName +
+            ' <a href="consul-timeline-ui.html?service=' +
+            serviceName +
+            '">timeline</a>';
+        this.titleElement.html(titleText);
+        resizeAll();
+    }
 
-  toggleFav(serviceName, fav) {
-    this.favorites[serviceName] = fav;
+    elementGenerator(instance) {
+        var element = document.createElement("div");
+        element.setAttribute("class", "list-group-item service-instance");
+        var state = nodeState(instance.checks);
+        element.appendChild(weightsGenerator(instance.weights, state));
+        element.appendChild(serviceTitleGenerator(instance));
+        var node_info = this.nodes[instance.name];
+        if (node_info != null) {
+            node_info = node_info.meta;
+            element.appendChild(nodeMetaGenerator(node_info));
+            element.appendChild(document.createElement("hr"));
+        }
+        if (instance.tags && instance.tags.length > 0) {
+            element.appendChild(tagsGenerator(instance.tags));
+            element.appendChild(document.createElement("hr"));
+        }
+        element.appendChild(serviceMetaGenerator(instance.sMeta));
+        element.appendChild(connectGenerator(instance));
+        element.appendChild(checksStatusGenerator(instance, instance.name));
+        element.setAttribute("status", state);
 
-    let el = this.serviceList.find('[value="' + serviceName + '"]');
-    if (!el.length) {
-      return;
+        return element;
     }
 
-    if (fav) {
-      el.find('.favorite').addClass('favorited');
-    } else {
-      el.find('.favorite').removeClass('favorited');
-    }
-    el.attr('data-fav', fav ? 1 : 0);
-
-    const elIdx = parseInt(el.attr('data-index'));
-
-    let prev = fav ? null : this.serviceList.find('[data-fav="1"]').last();
-    const others = this.serviceList.find('[data-fav="' + (fav ? 1 : 0) + '"]');
-    for (var i = 0; i < others.length; i++) {
-      const idx = parseInt($(others[i]).attr("data-index"));
-      if (idx < elIdx) {
-        prev = $(others[i]);
-      } else if (idx > elIdx) {
-        break;
-      }
-    };
-
-    if (!prev || !prev.length) {
-      this.serviceList.prepend(el);
-    } else {
-      prev.after(el);
+    getStatus(instance) {
+        return nodeState(instance["checks"]);
     }
 
-    // if favorited, scroll to element new position
-    if (fav) {
-      const container = $('#service-wrapper');
-      const top = el.position().top;
-      const scroll = container.scrollTop();
-      container.scrollTop(scroll + el.offset().top - container.offset().top);
-    }
+    matchElement(instance, filter) {
+        if (
+            this.statusFilter != null &&
+            nodeState(instance["checks"]) != this.statusFilter
+        ) {
+            return false;
+        }
+
+        if (instance.name.match(filter)) {
+            return true;
+        }
+
+        if (instance.addr.match(filter)) {
+            return true;
+        }
 
-    this.saveFavorites();
-  }
+        for (var i in instance.tags) {
+            if (instance.tags[i].match(filter)) {
+                return true;
+            }
+        }
+
+        for (var key in instance.sMeta) {
+            if (key.match(filter) || instance.sMeta[key].match(filter)) {
+                return true;
+            }
+        }
+
+        var node = this.nodes[instance.name];
+        for (var key in node.meta) {
+            if ((key + ":" + node.meta[key]).match(filter)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
 }
 
-$( window ).resize(resizeAll);
-resizeAll();
+$(window).resize(resizeAll);
+resizeAll();