{{template "header.tpl" .}}
{{template "server/navbar.tpl" .}}
{{template "server/sidebar.tpl" .}}

<div class="main">

  <div class="container-fluid" style="padding: 1rem">

    <div class="row">
      <div class="col-12">
        <h3>Locks</h3>
      </div>
    </div>

    <div class="row" style="margin-top: 1rem">
      <div class="col-sm-12">
        <div class="d-flex flex-wrap align-items-start align-content-start">
          <div id="idc-notgranted" class="gcard gcard-1"></div><a class="ca" id="chart-notgranted"></a>
          <div id="idc-alllocks" class="gcard gcard-1"></div><a class="ca" id="chart-alllocks"></a>
        </div>
      </div>
    </div>
  
    <div class="row" style="margin-top: 2rem">
      <div class="col-12">
        <h4>Blocked Queries</h4>
        <div class="d-flex justify-content-between">

          <div><!-- lhs -->
            <form class="form-inline">
              <div class="form-group mb-2">
                <label>
                  <small>In the database</small>
                  <select id="id-db" class="form-control form-control-sm mx-2">
                  </select>
                </label>
                <label>
                  <small>between</small>
                  <input type="text" style="width: 20rem; text-align: center" class="form-control form-control-sm ml-2" id="id-blocksat">
                  <button type="button" id="id-go" class="btn btn-sm btn-secondary ml-2">Go</button>
                </label>
                <div id="id-spinner" style="display: none" class="text-secondary ml-2 spinner-border spinner-border-sm" role="status"></div>
              </div>
            </form>
          </div><!-- /lhs -->

          <div><!-- rhs -->
            <form class="form-inline">
              <div class="form-group">
                <input style="width: 3rem" type="text" readonly class="form-control-plaintext" value="View:">
              </div>
              <div class="form-check form-check-inline">
                <input checked autocomplete="off" class="form-check-input" name="view" type="radio" id="id-vwfor">
                <label class="form-check-label" for="id-vwfor">Waiting For</label>
              </div>
              <div class="form-check form-check-inline">
                <input autocomplete="off" class="form-check-input" name="view" type="radio" id="id-vblockers">
                <label class="form-check-label" for="id-vblockers">Blockers</label>
              </div>
            </form>
          </div><!-- rhs -->
        </div>

        <div id="id-errmsg" role="alert" style="font-size: 0.9rem; margin: 1rem 0; width: 50%; display: none" class="alert alert-danger">
          An error occured while fetching the information.
        </div>

        <table id="id-blockedq" class="table table-sm lockspg" cellspacing="0">
          <thead>
            <tr>
              <th>PID</th>
              <th>User</th>
              <th>Application</th>
              <th>Client</th>
              <th>Waiting Since</th>
              <th>Query</th>
            </tr>
          </thead>
          <tbody id="idtb-blockedq">
          </tbody>
        </table>

        <table id="id-blockers" class="table table-sm lockspg" cellspacing="0" style="display: none">
          <thead>
            <tr>
              <th>PID</th>
              <th>User</th>
              <th>Application</th>
              <th>Client</th>
              <th>Lock Type</th>
              <th>Relation</th>
              <th>Query</th>
            </tr>
          </thead>
          <tbody id="idtb-blockers">
          </tbody>
        </table>
      </div>
    </div>

    <div class="row" style="margin-top: 2rem">
      <div class="col-12">
        <h4>Deadlocks</h4>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <form class="form-inline">
          <div class="form-group">
            <label>
              <small>Show deadlocks between</small>
              <input type="text" style="width: 20rem; text-align: center" class="form-control form-control-sm ml-2" id="id-dlrange">
              <button type="button" id="id-dlgo" class="btn btn-sm btn-secondary ml-2">Go</button>
            </label>
            <div id="id-dlspinner" style="display: none" class="text-secondary ml-2 spinner-border spinner-border-sm" role="status"></div>
          </div>
        </form>
      </div>
    </div>

    <div class="row" style="margin-bottom: 4rem">

      {{if not .HasDeadlockInfo}}
      <div class="col-10">
        <div class="alert alert-warning alert-dismissible show" role="alert" style="font-size: 0.9rem">
          To see recent deadlocks upgrade to the latest <a href="https://github.com/rapidloop/pgmetrics/releases">pgmetrics</a> &amp; <a href="https://github.com/rapidloop/pgdash/releases/">pgdash CLI</a>
          releases and collect PostgreSQL log information.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
      {{else}}

      <div class="col-12">
        <div id="id-dlerrmsg" role="alert" style="font-size: 0.9rem; margin: 1rem 0; width: 50%; display: none" class="alert alert-danger">
          An error occured while fetching the information.
        </div>

        <table id="id-dltable" class="table table-sm lockspg" cellspacing="0">
          <thead>
            <tr>
              <th>At</th>
              <th>Detail</th>
            </tr>
          </thead>
          <tbody id="idtb-dl">
          </tbody>
        </table>
      </div>
      {{end}}

    </div>

  </div>

</div>

<div class="modal fade" id="idd-query" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Query</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="qfull" id="id-queryfull"></p>
      </div>
      <div class="modal-footer">
        <a href="#" id="id-copysql" class="text-decoration-none mx-2">copy to clipboard</a>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{{template "server/delete-modal.tpl" .}}
{{template "server/sharing-modal.tpl" .}}

{{template "footer-pre.tpl" .}}
{{template "server/common-vars.tpl" .}}
<script type="text/javascript">
  var gName={{.Name}}, gSlug={{.Slug}}, gExtURLPath={{.ExtURLPath}}, gBlockers={{.Blockers}},
    gFrom={{.From}}, gTo={{.To}}, gDeadlocks={{.Deadlocks}}, gDLFrom={{.DLFrom}},
    gDLTo={{.DLTo}};
</script>
<script src="{{asset "linegraph.min.js"}}" type="text/javascript"></script>
<script src="{{asset "server-common.min.js"}}" type="text/javascript"></script>
<script src="{{asset "server-locks.min.js"}}" type="text/javascript"></script>
<link rel="stylesheet" href="{{asset "solarized-light.css"}}">
{{template "footer-post.tpl" .}}