<% datasource = ENV['TIMELINE_DATASOURCE'] || 'timeline.json'
   # Time to wait before reloading configuration again in seconds (0 = never)
   refresh = ENV['TIMELINE_REFRESH_MS'] || '10000' %><%= render_file('common/header.html.erb', title: 'Services Timeline') %>
    <div class="main">
      <div class="row mx-0">
        <div id="filter-menu" class="col-2 col-m-3 px-4 pt-4">
          <div class="form-group">
            <div class="input-group">
              <input id="service-filter" type="search" placeholder="filter services" class="form-control" />
            </div>
          </div>
          <div id="service-wrapper" >
            <ul id="service-list" class="list-group">
            <li onfocus="serviceTimeline.selectService(this)" onclick="serviceTimeline.selectService(this, true)" value="" class="serviceListItem list-group-item list-group-item-actionn" id="anyService"><div class="statuses float-right"><span id="allServicesCount" class="lookup badge badge-pill badge-secondary">loading&hellip;</span></div><div class="service-name">All</div></li>
            </ul>
          </div>
        </div>
        <div class="col-10 col-m-9">
          <h2 class="text-center" id="service-title" style="clear:both"></h2>
          <div class="row mb-2">
            <div class="input-group float-left col-12">
              <input id="instance-filter" type="search" placeholder="filter events" class="form-control" />
              <div class="input-group-append">
                <div class="input-group-append">
                  <span class="input-group-text">
                    <input title="Auto-Refresh" id="autorefresh-check" type="checkbox" checked>&nbsp;
                    <span id="numRowsDisplayed" class="lookup badge badge-pill badge-primary">loading&hellip;</span>
                  </span>
               </div>
               <button class="btn btn-primary btn-sm" id="firstPage" title="Newest entries" disabled="disabled" onclick="serviceTimeline.firstPage()">⇤</button>
               <button class="btn btn-primary btn-sm" id="prevPage" title="Newer entries" disabled="disabled" onclick="serviceTimeline.prevPage()">←</button>
               <input id="maxRows" title="max rows to display" placeholder="max rows" style="width: 5.5em" type="number" min="25" max="<%= (ENV['CONSUL_TIMELINE_BUFFER'] || 10000) %>" step="25" value="250" class="form-control" onchange="serviceTimeline.displayEvents(false)"/>
               <button class="btn btn-primary btn-sm" id="nextPage" disabled="disabled" onclick="serviceTimeline.nextPage()">→</button>
              </div>
            </div>
          </div>
          <div id="instances-wrapper">
            <div id="events-list" class="list-group">
            <table id="all-events" class="table table-striped table-hover table-sm">
              <thead class="thead-dark">
                <tr>
                  <th scope="col">Time</th>
                  <th scope="col" class="serviceCol">Service</th>
                  <th scope="col">Instance</th>
                  <th scope="col">Check State</th>
                  <th scope="col">Service&nbsp;Status</th>
                  <th id="all-instances-header" colspan="2" scope="col">Instances</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            </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/utils.js"></script>
  <script src="js/timeline.js"></script>
  <script type="text/javascript">
    serviceTimeline = new ServiceTimeline('<%= datasource %>','<%= refresh %>');
  </script>
  <script src="vendors/highlight/highlight.pack.js"></script>
  </body>
</html>