ah-dashboard-plugin/public/dashboard/app/components/tasks/tasks.html

Plugin for an ActionHero Dashboard with many functionalities

<div class="row">
    <div class="col-md-2">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Actions</h3>
            </div>
            <div class="box-body">
                <a class="btn btn-app" ng-click="reloadAllTasks();" >
                    <i class="fa fa-repeat"></i> Refresh
                </a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="box box-warning">
            <div class="box-header">
                <h3 class="box-title">Running Jobs ({{runningJobs.length}})</h3>
               <!-- <div class="box-tools pull-right">
                    <button class="btn btn-primary btn-xs" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div> -->
            </div>
            <div class="box-body">
                <div ng-bind-html="error"></div>
                <table class="table table-bordered">
                    <tbody><tr>
                        <th>JobName</th>
                        <th>Started at</th>
                        <th>Queue</th>
                        <th>Worker</th>
                        <th>Arguments</th>
                    </tr>
                    <tr ng-repeat="runningJob in runningJobs">
                        <td>{{runningJob.payload.class}}</td>
                        <td>{{runningJob.run_at | date:'medium'}}</td>
                        <td>{{runningJob.queue}}</td>
                        <td>{{runningJob.worker}}</td>
                        <td><pre>{{runningJob.payload.args | json}}</pre></td>
                    </tr>
                    </tbody></table>
            </div><!-- /.box-body -->
            <div ng-hide="loadingDone" class="overlay"></div>
            <div ng-hide="loadingDone" class="loading-img"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header">
                <h3 class="box-title">Delayed Jobs ({{delayedJobs.length}})</h3>
               <!-- <div class="box-tools pull-right">
                    <button class="btn btn-primary btn-xs" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div> -->
            </div>
            <div class="box-body">
                <div ng-bind-html="error"></div>
                <table class="table table-bordered">
                    <tbody><tr>
                        <th>JobName</th>
                        <th>Delayed at</th>
                        <th>Queue</th>
                        <th>Arguments</th>
                    </tr>
                    <tr ng-repeat="delayedJob in delayedJobs">
                        <td>{{delayedJob.class}}</td>
                        <td>{{delayedJob.delayedAt*1000 | date:'medium'}}</td>
                        <td>{{delayedJob.queue}}</td>
                        <td><pre>{{delayedJob.args | json}}</pre></td>
                    </tr>
                    </tbody></table>
            </div><!-- /.box-body -->
            <div ng-hide="loadingDone" class="overlay"></div>
            <div ng-hide="loadingDone" class="loading-img"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="box box-danger">
            <div class="box-header">
                <h3 class="box-title">Failed Jobs ({{failedJobs.length}})</h3>
               <!-- <div class="box-tools pull-right">
                    <button class="btn btn-primary btn-xs" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div> -->               
            </div>
            <div class="box-body">
                <div ng-bind-html="error"></div>
                <table class="table table-bordered">
                    <tbody><tr>
                        <th>JobName</th>
                        <th>Failed at</th>
                        <th>Queue</th>
                        <th>Params</th>
                        <th>Error</th>
                        <th>Reenqueue</th>
                    </tr>
                    <tr ng-repeat="failedJob in failedJobs">
                        <td>{{failedJob.payload.class}}</td>
                        <td>{{failedJob.failed_at}}</td>
                        <td>{{failedJob.queue}}</td>
                        <td><pre>{{failedJob.payload.args | json}}</pre></td>
                        <td>{{failedJob.exception}} - {{failedJob.error}}</td>
                        <td><button ng-click="reEnqueueTask(failedJob);" class="btn btn-primary btn-sm">Reenqueue Task</button></td>
                    </tr>
                    </tbody></table>
            </div><!-- /.box-body -->
            <div ng-hide="loadingDone" class="overlay"></div>
            <div ng-hide="loadingDone" class="loading-img"></div>
        </div>
    </div>
</div>