consul-services-ui.html.erb

<% datasource = ENV['SERVICE_DATASOURCE'] || 'consul_services.json'
   # Time to wait before reloading configuration again in seconds (0 = never)
   refresh = ENV['REFRESH'] || '3600' %><%= 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">
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <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" class="form-check-input" />
                Show Connect Proxies
              </label>
            </div>

            <div class="input-group">
              <input id="service-filter" type="text" placeholder="filter services by name or tags" class="form-control" />
              <div class="input-group-append">
                <span class="input-group-text" id="service-counter"></span>
              </div>
            </div>
          </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 class="row mb-2">
            <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" 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>
          </div>
        </div>
      </div>
    </div>
  <!-- Optional JavaScript -->
  <!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="decorators.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/types.js"></script>
  <script src="js/service.js"></script>
  <script type="text/javascript">
    consulManager = new ConsulServiceManager('<%= datasource %>');
  </script>
  <script src="vendors/highlight/highlight.pack.js"></script>
  <%= render_file('common/footer.html.erb') %>