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

<div class="main">
  <div class="container-fluid" style="padding: 1rem; float: left">

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

    {{if .Enhanced}}
    <div class="row mt-4">
      <div class="col-8">
        <h4>Overview</h4>
        <table class="table table-bordered table-hover">
          <tbody>
            <tr> <th scope="row" width="24%">Database Instance ID</th><td class="tt">{{.Model.RDS.Enhanced.instanceID}}</td> </tr>
            <tr> <th scope="row">Resource ID</th><td class="tt">{{.Model.RDS.Enhanced.instanceResourceID}}</td> </tr>
            <tr> <th scope="row">VCPUs</th><td class="tt">{{.Model.RDS.Enhanced.numVCPUs}}</td> </tr>
            <tr> <th scope="row">Uptime</th><td class="tt">{{.Model.RDS.Enhanced.uptime}}</td> </tr>
            <tr> <th scope="row">Load Averages</th><td class="tt">{{.Model.RDS.Enhanced.loadAverageMinute.one}} &nbsp; {{.Model.RDS.Enhanced.loadAverageMinute.five}} &nbsp; {{.Model.RDS.Enhanced.loadAverageMinute.fifteen}}</td> </tr>
            <tr> <th scope="row">Memory Usage</th>
              <td>
                <div class="d-flex justify-content-between">
                  <div class="tt">{{.MemInfo}} <a href="#chart-memory"><i class="fas fa-chart-line"></i></a></div>
                  {{progbar .MemUsedPct (printf "%s%% used" .MemUsedPct) "resource"}}
                </div>
              </td>
            </tr>
            {{if .SwapInfo}}
            <tr> <th scope="row">Swap Usage</th>
              <td>
                <div class="d-flex justify-content-between">
                  <div class="tt">{{.SwapInfo}} <a href="#chart-swap"><i class="fas fa-chart-line"></i></a></div>
                  {{progbar .SwapUsedPct (printf "%s%% used" .SwapUsedPct) "resource"}}
                </div>
              </td>
            </tr>
            {{end}}
            <tr>
              <th scope="row">Filesystems</th>
              <td class="tt">
                <div style="display: grid; grid-template-columns: 5rem 1fr auto; grid-gap: 1rem">
                  {{range .FS}}
                  <div>{{.Name}}</div>
                  <div>{{.Used}} used of {{.Total}}</div>
                  <div>{{progbar .UsedPct (printf "%s%% used" .UsedPct) "resource"}}</div>
                  {{end}}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    {{end}}

    {{if not .Basic}}
    <div class="row mt-4">
      <div class="col-8">
        <div class="alert alert-warning alert-dismissible show" role="alert" style="font-size: 0.9rem; margin-bottom: 1rem">
          CloudWatch metrics were not collected by pgmetrics.
          <a href="intsetup">Learn more</a>.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
    {{else}}
    {{if not .Enhanced}}
    <div class="row mt-4">
      <div class="col-8">
        <div class="alert alert-warning alert-dismissible show" role="alert" style="font-size: 0.9rem; margin-bottom: 1rem">
          <a href="https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER_Monitoring.OS.html" target="_blank">Enhanced Monitoring</a>
          is disabled for this AWS RDS instance / Aurora replica.
          Consider enabling this.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
    {{end}}

    <div class="row" style="padding-top: 1rem">
      <div class="col-sm-12">
        <h4>CPU &amp; OS</h4>
        <div class="d-flex flex-wrap align-items-start align-content-start">
          {{if .Enhanced}}
          <div id="idc-loadavg" class="gcard gcard-0"></div><a class="ca" id="chart-loadavg"></a>
          {{end}}
          <div id="idc-cpuut" class="gcard gcard-0"></div><a class="ca" id="chart-cpuut"></a>
          {{if .Enhanced}}
          <div id="idc-procs" class="gcard gcard-0"></div><a class="ca" id="chart-procs"></a>
          {{end}}
        </div>
      </div>
    </div>

    {{if .Enhanced}}
    <div class="row" style="padding-top: 1rem">
      <div class="col-sm-12">
        <h4>Memory</h4>
        <div class="d-flex flex-wrap align-items-start align-content-start">
          <div id="idc-memory" class="gcard gcard-0"></div><a class="ca" id="chart-memory"></a>
          {{if .ShowSwapGraph}}
          <div id="idc-swap" class="gcard gcard-0"></div><a class="ca" id="chart-swap"></a>
          {{end}}
        </div>
      </div>
    </div>
    {{end}}

    <div class="row" style="padding-top: 1rem">
      <div class="col-sm-12">
        <h4>Disk</h4>
        <div class="d-flex flex-wrap align-items-start align-content-start">
          <div id="idc-dqd" class="gcard gcard-0"></div><a class="ca" id="chart-dqd"></a>
          <div id="idc-iops" class="gcard gcard-0"></div><a class="ca" id="chart-iops"></a>
          <div id="idc-tput" class="gcard gcard-0"></div><a class="ca" id="chart-tput"></a>
          <div id="idc-latency" class="gcard gcard-0"></div><a class="ca" id="chart-latency"></a>
          <div id="idc-diskfree" class="gcard gcard-0"></div><a class="ca" id="chart-diskfree"></a>
        </div>
      </div>
    </div>

    <div class="row" style="padding-top: 1rem">
      <div class="col-sm-12">
        <h4>Network</h4>
        <div class="d-flex flex-wrap align-items-start align-content-start">
          <div id="idc-netbw" class="gcard gcard-0"></div><a class="ca" id="chart-netbw"></a>
        </div>
      </div>
    </div>

    {{if (or .ReplicaLag .Aurora)}}
    <div class="row" style="padding-top: 1rem">
      <div class="col-sm-12">
        <h4>Replication</h4>
        <div class="d-flex flex-wrap align-items-start align-content-start">
          <div id="idc-rlag" class="gcard gcard-0"></div><a class="ca" id="chart-rlag"></a>
        </div>
      </div>
    </div>
    {{end}}

    {{if .Aurora}}
    <div class="row" style="padding-top: 1rem">
      <div class="col-sm-12">
        <h4>Commit</h4>
        <div class="d-flex flex-wrap align-items-start align-content-start">
          <div id="idc-clat" class="gcard gcard-0"></div><a class="ca" id="chart-clat"></a>
        </div>
      </div>
    </div>
    {{end}}

    {{if .Enhanced}}
    <div class="row mt-4">
      <div class="col-sm-12">
        <h4>Process List</h4>
        <table class="table table-borderless table-hover" style="border-bottom: 1px solid #cfd8dc">
          <thead>
            <tr style="border-bottom: 2px solid #cfd8dc">
              <th>Name</th>
              <th>CPU Usage</th>
              <th>Memory Usage</th>
              <th class="text-right">VIRT</th>
              <th class="text-right">RES</th>
            </tr>
          </thead>
          <tbody>
            {{range .ProcList}}
            <tr>
              <td class="tt">{{if .Indent}}&nbsp;&nbsp;{{end}}{{.Name}}</td>
              <td>{{progbar .CPU (printf "%s%%" .CPU) "resource"}}</td>
              <td>{{progbar .Mem (printf "%s%%" .Mem) "resource"}}</td>
              <td class="tt text-right">{{.Virt}}</td>
              <td class="tt text-right">{{.RSS}}</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </div>
    {{end}}
    {{end}}<!-- .Basic -->

    <div class="row" style="margin-top: 3.5rem"></div><!-- spacer -->
 
  </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}}, gShowSwapGraph={{.ShowSwapGraph}},
    gReplicaLag={{.ReplicaLag}}, gEnhanced={{.Enhanced}}, gAurora={{.Aurora}};
</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-intcw.min.js"}}" type="text/javascript"></script>
{{template "footer-post.tpl" .}}