<%
const metricNames = ["CPU", "Memory", "GPU", "GPU Mem", "Disk", "Ethernet"];
const idPrefixes = ["cpu", "mem", "gpu", "gpumem", "disk", "eth"];
%>

<section class='content-header'><%= breadcrumb({ breadcrumbTitle: "Hardware Utilization" }) %></section>

<section class='content'>
<div class='box'>
  <div class='box-body'>
    <table id='hardware-table' class='table table-bordered table-hover table-condensed' style='vertical-align:middle'>
      <thead>
        <tr>
          <th>IP Address</th>
          <th>Machine Name</th>
<%
          for (let i = 0; i < metricNames.length; i++) {
%>
            <th class='metric-cell'><%= metricNames[i] %></th>
<%
          }
%>
        </tr>
      </thead>
      <tbody>
<%
        for (let i = 0; i < machineMetaData.data.result.length; i++) {
          const metric = machineMetaData.data.result[i].metric;
          const ipAddress = metric.instance.split(":")[0];
          const nodeViewUrl = "/cluster-view/hardware/detail.html?instance=" + ipAddress;
          const machineName = metric.nodename;
          const idSuffix = ":" + ipAddress;
%>
          <tr>
            <td><a href='<%= nodeViewUrl %>'><%= ipAddress %></a></td>
            <td><%= machineName %></td>
<%
            for (let j = 0; j < idPrefixes.length; j++) {
              const id = idPrefixes[j] + idSuffix;
%>
              <td id='<%= id %>' class='metric-cell'>
                <span title=\"-1\"/>
                <i class='fa fa-spinner fa-pulse fa-fw metric-icon-loading' title='Loading...'></i>
              </td>
<%
            }
%>
          </tr>
<%
        }
%>
      </tbody>
    </table>
  </div>
</div>
</section>
