src/webui/app/roles/roles.html

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

<table m-table table-content="roles.roles" title="Roles"
  class="table table-striped table-bordered table-condensed">
  <thead>
    <tr>
      <th data-key="name" data-sort class="ascending vertically-center" rowspan="2">Role</th>
      <th data-key="weight" class="vertically-center" rowspan="2">Weight</th>
      <th data-key="frameworks.length" class="vertically-center" rowspan="2">Frameworks</th>
      <th data-key="resources.cpus" class="group-column" colspan="4">Allocation</th>
      <th data-key="resources.gpus" class="group-column" colspan="4">Guarantee</th>
      <th data-key="resources.mem" class="group-column" colspan="4">Limit</th>
    </tr>
    <tr>
      <th data-key="resources.cpus" class="begin-group-column">CPU</th>
      <th data-key="resources.gpus">GPU</th>
      <th data-key="resources.mem">Mem</th>
      <th data-key="resources.disk" class="end-group-column">Disk</th>
      <th data-key="resources.cpus" class="begin-group-column">CPU</th>
      <th data-key="resources.gpus">GPU</th>
      <th data-key="resources.mem">Mem</th>
      <th data-key="resources.disk" class="end-group-column">Disk</th>
      <th data-key="resources.cpus" class="begin-group-column">CPU</th>
      <th data-key="resources.gpus">GPU</th>
      <th data-key="resources.mem">Mem</th>
      <th data-key="resources.disk" class="end-group-column">Disk</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="role in $data">
      <td>{{role.name}}</td>
      <td>{{role.weight | number}}</td>
      <td>{{role.frameworks.length | number}}</td>
      <td class="begin-group-column">{{role.resources.cpus | decimalFloat}}</td>
      <td>{{role.resources.gpus | decimalFloat}}</td>
      <td>{{role.resources.mem * (1024 * 1024) | dataSize}}</td>
      <td class="end-group-column">{{role.resources.disk * (1024 * 1024) | dataSize}}</td>

      <td class="begin-group-column">{{(role.quota.guarantee.cpus | decimalFloat) || "-"}}</td>
      <td>{{(role.quota.guarantee.gpus | decimalFloat) || "-"}}</td>
      <td>{{(role.quota.guarantee.mem * (1024 * 1024) | dataSize) || "-"}}</td>
      <td class="end-group-column">{{(role.quota.guarantee.disk * (1024 * 1024) | dataSize) || "-"}}</td>

      <!-- TODO(ArmandGrillet): Replace by
        (role.quota.limit.<> | decimalFloat) || (role.quota.guarantee.<> | decimalFloat) || "-"
        once the limit field is introduced. -->
      <td class="begin-group-column">{{(role.quota.guarantee.cpus | decimalFloat) || "-"}}</td>
      <td>{{(role.quota.guarantee.gpus | decimalFloat) || "-"}}</td>
      <td>{{(role.quota.guarantee.mem * (1024 * 1024) | dataSize) || "-"}}</td>
      <td class="end-group-column">{{(role.quota.guarantee.disk * (1024 * 1024) | dataSize) || "-"}}</td>
    </tr>
  </tbody>
</table>