<ol class="breadcrumb">
  <li><a class="badge badge-type" href="#">Master</a></li>
  <li class="active">
    <span class="badge badge-type">Frameworks</span>
  </li>
</ol>

<table m-table table-content="frameworks" title="Active Frameworks"
  class="table table-striped table-bordered table-condensed">
  <thead>
    <tr>
      <th data-key="id">ID</th>
      <th data-key="hostname">Host</th>
      <th data-key="user">User</th>
      <th data-key="name">Name</th>
      <th data-key="tasks.length">Active Tasks</th>
      <th data-key="resources.cpus">CPUs</th>
      <th data-key="resources.mem">Mem</th>
      <th data-key="max_share">Max Share</th>
      <th data-key="registered_time">Registered</th>
      <th data-key="reregistered_time">Re-Registered</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="framework in $data">
      <td>
        <a href="{{'#/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.hostname}}</td>
      <td>{{framework.user}}</td>
      <td>{{framework.name}}</td>
      <td>{{framework.tasks.length}}</td>
      <td>{{framework.resources.cpus | number}}</td>
      <td>{{framework.resources.mem * (1024 * 1024) | dataSize}}</td>
      <td>{{framework.max_share * 100 | number}}%</td>
      <td>
        <m-timestamp value="{{framework.registered_time * 1000}}"></m-timestamp>
      </td>
      <td ng-show="!framework.reregistered_time">-</td>
      <td ng-show="framework.reregistered_time">
        <m-timestamp value="{{framework.reregistered_time * 1000}}"></m-timestamp>
      </td>
    </tr>
  </tbody>
</table>

<table m-table table-content="completed_frameworks" title="Terminated Frameworks"
  class="table table-striped table-bordered table-condensed">
  <thead>
    <tr>
      <th data-key="id">ID</th>
      <th data-key="hostname">Host</th>
      <th data-key="user">User</th>
      <th data-key="name">Name</th>
      <th data-key="registered_time">Registered</th>
      <th data-key="unregistered_time">Unregistered</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="framework in $data">
      <td>
        <a href="{{'#/frameworks/' + framework.id}}" title="{{framework.id}}">
          {{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>{{framework.hostname}}</td>
      <td>{{framework.user}}</td>
      <td>{{framework.name}}</td>
      <td>
        <m-timestamp value="{{framework.registered_time * 1000}}"></m-timestamp>
      </td>
      <td>
        <m-timestamp value="{{framework.unregistered_time * 1000}}"></m-timestamp>
      </td>
    </tr>
  </tbody>
</table>