<ol class="breadcrumb">
  <li class="active">
    <span class="badge badge-type">Master</span>
    {{state.id}}
  </li>
</ol>

<div class="row">
  <div class="col-sm-5 col-md-4 col-lg-3">
    <div class="well">
      <dl class="inline inline-toggle clearfix">
        <dt>Cluster:</dt>
        <dd>
          <span ng-show="clusterNamed">{{state.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>Leader:</dt>
        <dd>
          <a ng-show="state.leader_info"
             href="//{{state.leader_info.hostname}}:{{state.leader_info.port}}">
            {{state.leader_info.hostname + ':' + state.leader_info.port}}
          </a>
          <span ng-show="!state.leader_info">(Unknown)</span>
        </dd>
        <dt>Version:</dt>
        <dd>{{state.version}}</dd>
        <dt>Built:</dt>
        <dd>
          <m-timestamp value="{{state.build_time * 1000}}">
            by <i>{{state.build_user}}</i>
          </m-timestamp>
        </dd>
        <dt>Started:</dt>
        <dd>
          <m-timestamp value="{{state.start_time * 1000}}"></m-timestamp>
        </dd>
        <dt>Elected:</dt>
        <dd>
          <m-timestamp value="{{state.elected_time * 1000}}"></m-timestamp>
        </dd>
      </dl>

      <p ng-if="log_file_attached">
        <b>Leading Master Log:</b>
        <span class="btn-group">
          <!-- Links can look like buttons using Bootstrap classes. -->
          <a class="btn btn-xs btn-default" href="{{leader_url_prefix}}/files/download?path=/master/log">
            Download
          </a>
          <button class="btn btn-xs btn-default" ng-click="streamLogs($event)">
            View
          </button>
        </span>
      </p>

      <h4>Agents</h4>
      <table class="table table-condensed">
        <tbody>
          <tr>
            <td>Activated</td>
            <td class="text-right">{{activated_agents | number}}</td>
          </tr>
          <tr>
            <td>Deactivated</td>
            <td class="text-right">{{deactivated_agents | number}}</td>
          </tr>
          <tr>
            <td>Unreachable</td>
            <td class="text-right">{{unreachable_agents | number}}</td>
          </tr>
        </tbody>
      </table>

      <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>Unreachable</td>
            <td class="text-right">{{unreachable_tasks.length | 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">CPUs</td>
            <td class="text-right">GPUs</td>
            <td class="text-right">Mem</td>
            <td class="text-right">Disk</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Total</td>
            <td class="text-right">{{total_cpus | decimalFloat}}</td>
            <td class="text-right">{{total_gpus | decimalFloat}}</td>
            <td class="text-right">{{total_mem * (1024 * 1024) | dataSize}}</td>
            <td class="text-right">{{total_disk * (1024 * 1024) | dataSize}}</td>
          </tr>
          <tr>
            <td>Allocated</td>
            <td class="text-right">{{used_cpus | decimalFloat}}</td>
            <td class="text-right">{{used_gpus | decimalFloat}}</td>
            <td class="text-right">{{used_mem * (1024 * 1024) | dataSize}}</td>
            <td class="text-right">{{used_disk * (1024 * 1024) | dataSize}}</td>
          </tr>
          <tr>
            <td>Offered</td>
            <td class="text-right">{{offered_cpus | decimalFloat}}</td>
            <td class="text-right">{{offered_gpus | decimalFloat}}</td>
            <td class="text-right">{{offered_mem * (1024 * 1024) | dataSize}}</td>
            <td class="text-right">{{offered_disk * (1024 * 1024) | dataSize}}</td>
          </tr>
          <tr>
            <td>Idle</td>
            <td class="text-right">{{idle_cpus | decimalFloat}}</td>
            <td class="text-right">{{idle_gpus | decimalFloat}}</td>
            <td class="text-right">{{idle_mem * (1024 * 1024) | dataSize}}</td>
            <td class="text-right">{{idle_disk * (1024 * 1024) | dataSize}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="col-sm-7 col-md-8 col-lg-9">
    <table m-table table-content="active_tasks" title="Active Tasks"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="framework_id">Framework ID</th>
          <th data-key="id">Task ID</th>
          <th data-key="name">Task Name</th>
          <th data-key="role">Role</th>
          <th data-key="state">State</th>
          <th data-key="healthy">Health</th>
          <th data-key="start_time" data-sort>Started</th>
          <th data-key="host">Host</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr data-ng-if="active_tasks.length === 0">
          <td colspan="8">No active tasks.</td>
        </tr>
        <tr ng-repeat="task in $data">
          <td>
            <a href="#/frameworks/{{task.framework_id}}/">
              {{task.framework_id | truncateMesosID}}
            </a>
            <button class="btn btn-xs btn-toggle btn-default"
                    clipboard
                    data-clipboard-text="{{task.framework_id}}"
                    tooltip="Copy ID"
                    tooltip-placement="right"
                    tooltip-trigger="clipboardhover">
            </button>
          </td>
          <td>
            <a href="#/agents/{{task.slave_id}}/frameworks/{{task.framework_id}}/executors/{{task.executor_id}}">
              {{task.id}}
            </a>
          </td>
          <td>{{task.name}}</td>
          <td>{{task.role}}</td>
          <td>{{task.state | truncateMesosState}}</td>
          <td class="task-{{task.healthy | taskHealth}}">{{task.healthy | taskHealth}}</td>
          <td>
            <m-timestamp value="{{task.start_time}}"></m-timestamp>
          </td>
          <td>
            <span data-ng-show="agents[task.slave_id]">
              {{agents[task.slave_id].hostname}}
            </span>
            <span class="text-muted" data-ng-show="!agents[task.slave_id]">
              Agent offline
            </span>
          </td>
          <td>
            <a data-ng-show="agents[task.slave_id]" href="#/agents/{{task.slave_id}}/frameworks/{{task.framework_id}}/executors/{{task.executor_id}}/tasks/{{task.id}}/browse">
              Sandbox
            </a>
            <span class="text-muted" data-ng-show="!agents[task.slave_id]">
              Agent offline
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    <table m-table table-content="unreachable_tasks" title="Unreachable Tasks"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="framework_id">Framework ID</th>
          <th data-key="id">Task ID</th>
          <th data-key="name">Task Name</th>
          <th data-key="role">Role</th>
          <th data-key="start_time" data-sort>Started</th>
          <th data-key="agent_id">Agent ID</th>
        </tr>
      </thead>
      <tbody>
        <tr data-ng-if="unreachable_tasks.length === 0">
          <td colspan="8">No unreachable tasks.</td>
        </tr>
        <tr ng-repeat="task in $data">
          <td>
            <a href="#/frameworks/{{task.framework_id}}/">
              {{task.framework_id | truncateMesosID}}
            </a>
            <button class="btn btn-xs btn-toggle btn-default"
                    clipboard
                    data-clipboard-text="{{task.framework_id}}"
                    tooltip="Copy ID"
                    tooltip-placement="right"
                    tooltip-trigger="clipboardhover">
            </button>
          </td>
          <td>{{task.id}}</td>
          <td>{{task.name}}</td>
          <td>{{task.role}}</td>
          <td>
            <m-timestamp value="{{task.start_time}}"></m-timestamp>
          </td>
          <td>{{task.slave_id}}</td>
        </tr>
      </tbody>
    </table>

    <table m-table table-content="completed_tasks" title="Completed Tasks"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="framework_id">Framework ID</th>
          <th data-key="id">Task ID</th>
          <th data-key="name">Task Name</th>
          <th data-key="role">Role</th>
          <th data-key="state">State</th>
          <th data-key="start_time" data-sort>Started</th>
          <th data-key="finish_time">Stopped</th>
          <th data-key="host">Host</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr data-ng-if="completed_tasks.length === 0">
          <td colspan="8">No completed tasks.</td>
        </tr>
        <tr ng-repeat="task in $data">
         <td>
            <a href="#/frameworks/{{task.framework_id}}/">
              {{task.framework_id | truncateMesosID}}
            </a>
            <button class="btn btn-xs btn-toggle btn-default"
                    clipboard
                    data-clipboard-text="{{task.framework_id}}"
                    tooltip="Copy ID"
                    tooltip-placement="right"
                    tooltip-trigger="clipboardhover">
            </button>
          </td>
          <td>{{task.id}}</td>
          <td>{{task.name}}</td>
          <td>{{task.role}}</td>
          <td>{{task.state | truncateMesosState}}</td>
          <td>
            <m-timestamp value="{{task.start_time}}"></m-timestamp>
          </td>
          <td>
            <m-timestamp value="{{task.finish_time}}"></m-timestamp>
          </td>
          <td>
            <a data-ng-show="_.has(agents, task.slave_id)"
                href="#/agents/{{task.slave_id}}/frameworks/{{task.framework_id}}/executors/{{task.executor_id}}">
              {{agents[task.slave_id].hostname}}
            </a>
            <span class="text-muted" data-ng-show="!_.has(agents, task.slave_id)">
              Agent offline
            </span>
          </td>
          <td>
            <a data-ng-show="agents[task.slave_id]" href="#/agents/{{task.slave_id}}/frameworks/{{task.framework_id}}/executors/{{task.executor_id}}/tasks/{{task.id}}/browse">
              Sandbox
            </a>
            <span class="text-muted" data-ng-show="!agents[task.slave_id]">
              Agent offline
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>