web/mrmonitor/app/views/job.html

<div class="row-fluid job-progress-header">
    <h2>Job Progress</h2>
    <span ng-show="activeJobId"><span class="job-label">Job Id:</span> {{activeJobId}}</span>
    <span class="alert" ng-hide="activeJobId">Please select a job to monitor</span>
</div>

<div class="row-fluid job-progress" ng-controller="JobGridController">
    <div class="span12">
        <table class="table" style="width:500px">
            <thead>
            <tr>
                <th>Task</th>
                <th>Complete</th>
                <th>Running</th>
                <th>Total</th>
                <th>Progress</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Map</td>
                <td>{{jobProgress.map.complete}}</td>
                <td>{{jobProgress.map.running}}</td>
                <td>{{jobProgress.map.total}}</td>
                <td>{{jobProgress.map.progress | percentage}}</td>
                <td>
                    <progress percent="jobProgress.map.progress" class="progress-striped"
                            ng-class="{'active': jobProgress.map.active}" />
                </td>
            </tr>
            <tr>
                <td>Reduce</td>
                <td>{{jobProgress.reduce.complete}}</td>
                <td>{{jobProgress.reduce.running}}</td>
                <td>{{jobProgress.reduce.total}}</td>
                <td>{{jobProgress.reduce.progress | percentage}}</td>
                <td>
                    <progress percent="jobProgress.reduce.progress" class="progress-striped"
                            ng-class="{'active': jobProgress.reduce.active}" />
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="row-fluid">
    <div class="span6" ng-controller="MapLineChartController">
        <h2>Map Progress History</h2>
        <line-chart chart="chart" class="line-chart"></line-chart>
    </div><!--/span-->
    <div class="span6" ng-controller="ReduceLineChartController">
        <h2>Reduce Progress History</h2>
        <line-chart chart="chart" class="line-chart"></line-chart>
    </div><!--/span-->
</div><!--/row-->

<div class="row-fluid counters" ng-controller="CounterController">
    <h2>Counters</h2>

    <select ng-model="counterGroupName" ng-options="name for name in counterGroupNames"></select>

    <div class="table-container">
        <table class="table">
            <thead>
            <tr>
                <th class="counter-col">&nbsp;</th>
                <th ng-repeat="counter in counterGroup.counter">{{counter.name}}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td class="counter-col">Total</td>
                <td ng-repeat="counter in counterGroup.counter">{{counter.totalCounterValue}}</td>
            </tr>
            <tr>
                <td class="counter-col">Map</td>
                <td ng-repeat="counter in counterGroup.counter">{{counter.mapCounterValue}}</td>
            </tr>
            <tr>
                <td>Reduce</td>
                <td ng-repeat="counter in counterGroup.counter">{{counter.reduceCounterValue}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


<div class="row-fluid">
    <div class="span6 grid-container" ng-controller="MapGridController">
        <h2>Map Tasks</h2>
        <div ng-grid="gridOptions" class="task-progress-grid"></div>
    </div>
    <div class="span6 grid-container" ng-controller="ReduceGridController">
        <h2>Reduce Tasks</h2>
        <div ng-grid="gridOptions" class="task-progress-grid"></div>
    </div>
</div>