| <ol class="breadcrumb"> |
| <li> |
| <a class="badge badge-type" href="#">Master</a> |
| </li> |
| <li> |
| <a class="badge badge-type" href="#/agents/{{agent_id}}" title="{{agent_id}}"> |
| Agent</a> |
| </li> |
| <li class="active"> |
| <span class="badge badge-type">Framework</span> |
| {{framework.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>Name:</dt><dd>{{framework.name}}</dd> |
| <dt>Master:</dt><dd>{{state.master_hostname}}</dd> |
| <!-- TODO(bmahler): Consider having a break between each role |
| in order to increase readability. Also, 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). --> |
| <dt>Roles:</dt><dd>{{framework.roles.toString()}}</dd> |
| </dl> |
| |
| <dl class="inline clearfix"> |
| <dt>Active Tasks:</dt> |
| <dd>{{framework.num_tasks | number}}</dd> |
| </dl> |
| |
| <h4>Resources</h4> |
| <table class="table table-condensed"> |
| <thead> |
| <tr> |
| <td></td> |
| <td class="text-right">Used</td> |
| <td class="text-right">Allocated</td> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>CPUs</td> |
| <td class="text-right"> |
| {{monitor.frameworks[framework.id].statistics.cpus_total_usage | number}} |
| </td> |
| <td class="text-right">{{framework.cpus | number}}</td> |
| </tr> |
| <tr> |
| <td>GPUs</td> |
| <td class="text-right"> |
| N/A |
| </td> |
| <td class="text-right">{{framework.gpus | number}}</td> |
| </tr> |
| <tr> |
| <td>Memory</td> |
| <td class="text-right"> |
| {{monitor.frameworks[framework.id].statistics.mem_rss_bytes | dataSize}} |
| </td> |
| <td class="text-right"> |
| {{framework.mem * (1024 * 1024) | dataSize}} |
| </td> |
| </tr> |
| <tr> |
| <td>Disk</td> |
| <td class="text-right">-</td> |
| <td class="text-right"> |
| {{(framework.disk || 0) * (1024 * 1024) | dataSize}} |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| <div class="col-md-9"> |
| <table m-table table-content="framework.executors" title="Executors" |
| class="table table-striped table-bordered table-condensed"> |
| <thead> |
| <tr> |
| <th data-key="id">ID</th> |
| <th data-key="name">Name</th> |
| <th data-key="source">Source</th> |
| <th data-key="role">Role</th> |
| <th data-key="tasks.length">Active Tasks</th> |
| <th data-key="queued_tasks.length">Queued Tasks</th> |
| <th data-key="resources.cpus">CPUs (Used / Allocated)</th> |
| <th data-key="resources.gpus">GPUs (Used / Allocated)</th> |
| <th data-key="resources.mem">Mem (Used / Allocated)</th> |
| <th data-key="resources.disk">Disk (Used / Allocated)</th> |
| <th></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr ng-repeat="executor in $data"> |
| <td> |
| <a href="{{'#/agents/' + agent_id + '/frameworks/' + framework.id + '/executors/' + executor.id}}"> |
| {{executor.id}} |
| </a> |
| </td> |
| <td>{{executor.name}}</td> |
| <td>{{executor.source}}</td> |
| <td>{{executor.role}}</td> |
| <td>{{executor.tasks.length | number}}</td> |
| <td>{{executor.queued_tasks.length | number}}</td> |
| <td>{{monitor.frameworks[framework.id].executors[executor.id].statistics.cpus_total_usage | number}} / |
| {{executor.resources.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].executors[executor.id].statistics.mem_rss_bytes | dataSize}} / |
| {{executor.resources.mem * (1024 * 1024) | dataSize}}</td> |
| <td>{{monitor.frameworks[framework.id].executors[executor.id].statistics.disk_used_bytes | dataSize}} / |
| {{executor.resources.disk * (1024 * 1024) | dataSize}}</td> |
| <td> |
| <a href="{{'#/agents/' + agent_id + '/browse?path=' + |
| encodeURIComponent(executor.directory)}}"> |
| Sandbox |
| </a> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <table m-table table-content="framework.completed_executors" title="Completed Executors" |
| class="table table-striped table-bordered table-condensed"> |
| <thead> |
| <tr> |
| <th data-key="id">ID</th> |
| <th data-key="name">Name</th> |
| <th data-key="source">Source</th> |
| <th data-key="role">Role</th> |
| <th data-key="sandbox">Sandbox</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr ng-repeat="completed_executor in $data"> |
| <td> |
| <a href="{{'#/agents/' + agent_id + '/frameworks/' + framework.id + '/executors/' + completed_executor.id}}"> |
| {{completed_executor.id}} |
| </a> |
| </td> |
| <td>{{completed_executor.name}}</td> |
| <td>{{completed_executor.source}}</td> |
| <td>{{completed_executor.role}}</td> |
| <td> |
| <a href="{{'#/agents/' + agent_id + '/browse?path=' + |
| encodeURIComponent(completed_executor.directory)}}"> |
| browse |
| </a> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |