<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>
    <%= cluster_id %>: Cluster GPU utilization for One Week
  </title>
</head>

<body itemscope="" itemtype="http://schema.org/EmailMessage"
  style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 16px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.6em; width: 100% !important; background-color: #f6f6f6; margin: 0; padding: 0;">
  <h3 style="text-align:center">Cluster GPU utilization for One Week</h3>
  <table style="font-size: 16px; width: 100%; margin: 0;">
    <% alerts.filter( element=> typeof element.labels.cluster_usage !== 'undefined').forEach(function(alert){ %>
      <tr>
        <th>Cluster GPU utilization</th>
        <td>
          <%= alert.labels.cluster_usage %>
        </td>
      </tr>
      <% }); %>
  </table>
  <br />
  <br />
  <h3 style="text-align:center">User GPU Utilization for One Week</h3>
  <table style="font-size: 16px; width: 100%;margin: 0;text-align:center;">
    <tr>
      <th>User name</th>
      <th>Resources occupied (GPU*hour)</th>
      <th>GPU utilization</th>
    </tr>
    <% alerts.filter( element=> typeof element.labels.username !== 'undefined' && typeof element.labels.usage !==
      'undefined').forEach(function(alert){ %>
      <tr>
        <td>
          <%= alert.labels.username %>
        </td>
        <td>
          <%= alert.labels.resources_occupied %>
        </td>
        <td>
          <%= alert.labels.usage %>
        </td>
      </tr>
      <% }); %>
  </table>
  <br />
  <br />
  <h3 style="text-align:center">Job GPU Utilization for One Week (Top 10 Resources Occupied)</h3>
  <table style="font-size: 16px; width: 100%; margin: 0; text-align:center;">
    <tr>
      <th>Job name</th>
      <th>Resources occupied (GPU*hour)</th>
      <th>GPU number</th>
      <th>GPU utilization</th>
      <th>Job duration</th>
      <th>Job start time</th>
      <th>Job status</th>
    </tr>
    <% alerts.filter( element=> typeof element.labels.job_name !== 'undefined' && typeof element.labels.usage !==
      'undefined').forEach(function(alert){ %>
      <tr>
        <td>
          <%= alert.labels.job_name %>
        </td>
        <td>
          <%= alert.labels.resources_occupied %>
        </td>
        <td>
          <%= alert.labels.gpu_number %>
        </td>
        <td>
          <%= alert.labels.usage %>
        </td>
        <td>
          <%= alert.labels.duration %>
        </td>
        <td>
          <%= alert.labels.start_time %>
        </td>
        <td>
          <%= alert.labels.status %>
        </td>
      </tr>
      <% }); %>
  </table>
</body>

</html>
