<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="roles">Roles</th>
      <th data-key="principal">Principal</th>
      <th data-key="tasks.length">Active Tasks</th>
      <th data-key="used_resources.cpus">CPUs</th>
      <th data-key="used_resources.gpus">GPUs</th>
      <th data-key="used_resources.mem">Mem</th>
      <th data-key="used_resources.disk">Disk</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  | filter: { active: true }">
      <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 ng-switch="!!framework.webui_url">
        <a ng-href="{{framework.webui_url}}" ng-switch-when="true">{{framework.hostname}}</a>
        <span ng-switch-when="false">{{framework.hostname}}</span>
      </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.principal}}</td>
      <td>{{framework.tasks.length}}</td>
      <td>{{framework.used_resources.cpus | number}}</td>
      <td>{{framework.used_resources.gpus | number}}</td>
      <td>{{framework.used_resources.mem * (1024 * 1024) | dataSize}}</td>
      <td>{{framework.used_resources.disk * (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="frameworks" title="Inactive 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="roles">Roles</th>
    <th data-key="principal">Principal</th>
    <th data-key="tasks.length">Active Tasks</th>
    <th data-key="used_resources.cpus">CPUs</th>
    <th data-key="used_resources.gpus">GPUs</th>
    <th data-key="used_resources.mem">Mem</th>
    <th data-key="used_resources.disk">Disk</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  | filter: { active: false }">
    <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 ng-switch="!!framework.webui_url">
      <a ng-href="{{framework.webui_url}}" ng-switch-when="true">{{framework.hostname}}</a>
      <span ng-switch-when="false">{{framework.hostname}}</span>
    </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.principal}}</td>
    <td>{{framework.tasks.length}}</td>
    <td>{{framework.used_resources.cpus | number}}</td>
    <td>{{framework.used_resources.gpus | number}}</td>
    <td>{{framework.used_resources.mem * (1024 * 1024) | dataSize}}</td>
    <td>{{framework.used_resources.disk * (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="Completed 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="roles">Roles</th>
      <th data-key="principal">Principal</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>
      <!-- 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.principal}}</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>