<ol class="breadcrumb">
  <li>
    <a class="badge badge-type" href="#">Master</a>
  </li>
  <li class="active">
    <span class="badge badge-type">Agent</span>
    {{agent_id}}
  </li>
</ol>

<div class="alert alert-error hidden" id="alert">
  <button class="close" data-dismiss="alert">×</button>
  <strong>{{alert_message}}</strong>
</div>

<div class="row" id="agent">
  <div class="col-md-3">
    <div class="well">
      <dl class="inline clearfix">
        <dt>Cluster:</dt>
        <dd>
          <span ng-show="clusterNamed">{{cluster}}</span>
          <span ng-show="!clusterNamed">
            (Unnamed)
            <i class="icon-info-sign"
              tooltip="To name this cluster, set the --cluster flag when starting the master."
              tooltip-placement="right"></i>
          </span>
        </dd>
        <dt>Agent:</dt>
        <dd>{{state.hostname}}</dd>
        <dt>Version:</dt>
        <dd>{{state.version}}</dd>
        <dt>Built:</dt>
        <dd>
          <m-timestamp value="{{state.build_time * 1000}}"></m-timestamp>
        </dd>
        <dt>Started:</dt>
        <dd>
          <m-timestamp value="{{state.start_time * 1000}}"></m-timestamp>
        </dd>
        <dt>Master:</dt>
        <dd>{{state.master_hostname}}</dd>
      </dl>
      <p><a href="" ng-click="log($event)">LOG</a></p>

      <h4>Tasks</h4>
      <table class="table table-condensed">
        <tbody>
          <tr>
            <td>Staging</td>
            <td class="text-right">{{staging_tasks | number}}</td>
          </tr>
          <tr>
            <td>Starting</td>
            <td class="text-right">{{starting_tasks | number}}</td>
          </tr>
          <tr>
            <td>Running</td>
            <td class="text-right">{{running_tasks | number}}</td>
          </tr>
          <tr>
            <td>Killing</td>
            <td class="text-right">{{killing_tasks | number}}</td>
          </tr>
          <tr>
            <td>Finished</td>
            <td class="text-right">{{finished_tasks | number}}</td>
          </tr>
          <tr>
            <td>Killed</td>
            <td class="text-right">{{killed_tasks | number}}</td>
          </tr>
          <tr>
            <td>Failed</td>
            <td class="text-right">{{failed_tasks | number}}</td>
          </tr>
          <tr>
            <td>Lost</td>
            <td class="text-right">{{lost_tasks | number}}</td>
          </tr>
        </tbody>
      </table>

      <h4>Resources</h4>
      <table class="table table-condensed">
        <thead>
          <tr>
            <td></td>
            <td class="text-right">Used</td>
            <td class="text-right">Allocated</td>
            <td class="text-right">Available</td>
            <td class="text-right">Total</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>CPUs</td>
            <td class="text-right">
              {{monitor.statistics.cpus_total_usage | number}}
            </td>
            <td class="text-right">
              {{state.allocated_resources.cpus | number}}
            </td>
            <td class="text-right">
              {{state.resources.cpus - state.allocated_resources.cpus | number}}
            </td>
            <td class="text-right">
              {{state.resources.cpus | number}}
            </td>
          </tr>
          <tr>
            <td>GPUs</td>
            <td class="text-right">
              N/A
            </td>
            <td class="text-right">
              {{state.allocated_resources.gpus | number}}
            </td>
            <td class="text-right">
              {{state.resources.gpus - state.allocated_resources.gpus | number}}
            </td>
            <td class="text-right">
              {{state.resources.gpus | number}}
            </td>
          </tr>
          <tr>
            <td>Memory</td>
            <td class="text-right">
              {{monitor.statistics.mem_rss_bytes | dataSize}}
            </td>
            <td class="text-right">
              {{state.allocated_resources.mem * (1024 * 1024) | dataSize}}
            </td>
            <td class="text-right">
              {{(state.resources.mem - state.allocated_resources.mem) * (1024 * 1024) | dataSize}}
            </td>
            <td class="text-right">
              {{state.resources.mem * (1024 * 1024) | dataSize}}
            </td>
          </tr>
          <tr>
            <td>Disk</td>
            <td class="text-right">
              {{monitor.statistics.disk_used_bytes | dataSize}}
            </td>
            <td class="text-right">
              {{state.allocated_resources.disk * (1024 * 1024) | dataSize}}
            </td>
            <td class="text-right">
              {{(state.resources.disk - state.allocated_resources.disk) * (1024 * 1024) | dataSize}}
            </td>
            <td class="text-right">
              {{state.resources.disk * (1024 * 1024) | dataSize}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
  <div class="col-md-9">
    <table m-table table-content="agent.reserved_resources_as_array" title="Resource Reservations"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="role">Reservation Role</th>
          <th data-key="cpus">CPUs (Allocated / Total)</th>
          <th data-key="gpus">GPUs (Allocated / Total)</th>
          <th data-key="mem">Mem (Allocated / Total)</th>
          <th data-key="disk">Disk (Allocated / Total)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><em>Unreserved</em></td>
          <td>{{state.unreserved_resources_allocated.cpus | number}} / {{state.unreserved_resources.cpus | number}}</td>
          <td>{{state.unreserved_resources_allocated.gpus | number}} / {{state.unreserved_resources.gpus | number}}</td>
          <td>{{state.unreserved_resources_allocated.mem * (1024 * 1024) | dataSize}} / {{state.unreserved_resources.mem * (1024 * 1024) | dataSize}}</td>
          <td>{{state.unreserved_resources_allocated.disk * (1024 * 1024) | dataSize}} / {{state.unreserved_resources.disk * (1024 * 1024) | dataSize}}</td>
        </tr>
        <tr ng-repeat="reservation in $data">
          <td>{{reservation.role}}</td>
          <td>{{(state.reserved_resources_allocated[reservation.role].cpus || 0) | number}} / {{reservation.cpus | number}}</td>
          <td>{{(state.reserved_resources_allocated[reservation.role].gpus || 0) | number}} / {{reservation.gpus | number}}</td>
          <td>{{(state.reserved_resources_allocated[reservation.role].mem * (1024 * 1024) || 0) | dataSize}} / {{reservation.mem * (1024 * 1024) | dataSize}}</td>
          <td>{{(state.reserved_resources_allocated[reservation.role].disk * (1024 * 1024) || 0) | dataSize}} / {{reservation.disk * (1024 * 1024) | dataSize}}</td>
        </tr>
      </tbody>
    </table>

    <table m-table table-content="agent.frameworks" title="Frameworks"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="id">ID</th>
          <th data-key="user">User</th>
          <th data-key="name">Name</th>
          <th data-key="roles">Roles</th>
          <th data-key="num_tasks">Active Tasks</th>
          <th data-key="cpus">CPUs (Used / Allocated)</th>
          <th data-key="gpus">GPUs (Used / Allocated)</th>
          <th data-key="mem">Mem (Used / Allocated)</th>
          <th data-key="disk">Disk (Used / Allocated)</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="framework in $data">
          <td>
            <a href="{{'#/agents/' + agent_id + '/frameworks/' + framework.id}}">
              {{(framework.id | truncateMesosID) || framework.name}}</a>
            <button class="btn btn-xs btn-toggle btn-default"
              clipboard
              data-clipboard-text="{{framework.id}}"
              tooltip="Copy ID"
              tooltip-placement="right"
              tooltip-trigger="clipboardhover">
            </button>
          </td>
          <td>{{framework.user}}</td>
          <td>{{framework.name}}</td>
          <!-- TODO(bmahler): This doesn't display well when there are a lot
               of roles (e.g. a large organization with a lot of teams &
               services, using roles like /engineering/frontend/webserver, etc).
               Figure out a way to display this without bloating the table. -->
          <td>{{framework.roles.toString()}}</td>
          <td>{{framework.num_tasks | number}}</td>
          <td>{{monitor.frameworks[framework.id].statistics.cpus_total_usage | number}} / {{framework.cpus | number}}</td>
          <!-- TODO(haosdent): We need to show statistics for gpu once it is provided in monitor endpoint. -->
          <td>N/A</td>
          <td>{{monitor.frameworks[framework.id].statistics.mem_rss_bytes | dataSize}} / {{framework.mem * (1024 * 1024) | dataSize}}</td>
          <td>{{monitor.frameworks[framework.id].statistics.disk_used_bytes | dataSize}} / {{framework.disk * (1024 * 1024) | dataSize}}</td>
        </tr>
      </tbody>
    </table>

    <table m-table table-content="agent.completed_frameworks" title="Completed Frameworks"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="id">ID</th>
          <th data-key="user">User</th>
          <th data-key="name">Name</th>
          <th data-key="roles">Roles</th>
          <th data-key="tasks.length">Active Tasks</th>
          <th data-key="resources.cpus">CPUs</th>
          <th data-key="resources.gpus">GPUs</th>
          <th data-key="resources.mem">Mem</th>
          <th data-key="resources.disk">Disk</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="completed_framework in $data">
          <td>
            <a href="{{'#/agents/' + agent_id + '/frameworks/' + completed_framework.id}}">
              {{completed_framework.id | truncateMesosID}}</a>
            <button class="btn btn-xs btn-toggle btn-default"
              clipboard
              data-clipboard-text="{{framework.id}}"
              tooltip="Copy ID"
              tooltip-placement="right"
              tooltip-trigger="clipboardhover">
            </button>
          </td>
          <td>{{completed_framework.user}}</td>
          <td>{{completed_framework.name}}</td>
          <!-- TODO(bmahler): This doesn't display well when there are a lot
               of roles (e.g. a large organization with a lot of teams &
               services, using roles like /engineering/frontend/webserver, etc).
               Figure out a way to display this without bloating the table. -->
          <td>{{completed_framework.roles.toString()}}</td>
          <td>{{completed_framework.num_tasks | number}}</td>
          <td>{{completed_framework.cpus | number}}</td>
          <td>{{completed_framework.gpus | number}}</td>
          <td>{{completed_framework.mem * (1024 * 1024) | dataSize}}</td>
          <td>{{completed_framework.disk * (1024 * 1024) | dataSize}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>