awx/awx/ui/static/partials/job_detail.html

<div class="tab-pane" id="jobs-detail">
    <div ng-cloak id="htmlTemplate">
        
        <div class="row">
            <div id="breadcrumb-container" class="col-md-12" style="position: relative;">
                <div class="nav-path">
                    <ul class="breadcrumb" id="breadcrumb-list">
                        <li><a href="/#/jobs">Jobs</a></li>
                        <li><strong>{{ job_id }}</strong> - <a href="{{ job_template_url }}" aw-tool-tip="View the job template" data-placement="top">{{ job_template_name }}</a></li>
                    </ul>
                </div>
            </div>
            </div>
        </div>
        
        <div class="row" style="position: relative;">
            <div id="job-detail-container">
                <div id="summary-button" style="display: hidden;">
                    <a href="" class="btn btn-xs btn-default" ng-click="toggleSummary()" aw-tool-tip="View hosts summary" data-placement="top"><i class="fa fa-arrow-circle-left fa-lg"></i></a>
                </div>
                <div class="job_well">
                    <div class="row status-row">
                        <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Status</div>
                        <div class="col-lg-11 col-md-11 col-sm-10 col-xs-10 status-column"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }} {{ job_status.explanation }}</div>
                    </div>

                    <div class="row status-row">
                        <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Started</div>
                        <div ng-show="job_status.started" class="col-lg-5 col-md-5 col-sm-4 col-xs-4">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>
                        <div ng-show="!job_status.started" class="col-lg-5 col-md-5 col-sm-4 col-xs-4">Not Started</div>
                        <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Elapsed</div>
                        <div ng-show="job_status.finished" class="col-lg-5 col-md-5 col-sm-4 col-xs-4">{{ job_status.elapsed }}</div>
                        <div ng-show="!job_status.finished" class="col-lg-5 col-md-5 col-sm-4 col-xs-4">00:00:00</div>
                    </div>

                    <div class="row status-row">
                        <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Project</div>
                        <div class="col-lg-5 col-md-5 col-sm-4 col-xs-4"><a href="{{ project_url }}" aw-tool-tip="View the project" data-placement="top">{{ project_name }}</a></div>
                        <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Inventory</div>
                        <div class="col-lg-5 col-md-5 col-sm-4 col-xs-4"><a href="{{ inventory_url }}" aw-tool-tip="View the inventory" data-placement="top">{{ inventory_name }}</a></div>
                    </div>

                    <div id="job-detail-tables">
                        <div id="play-section" class="section">
                            <h5>Plays</h5>
                            <div class="table-header">
                                <div class="row">
                                    <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</div>
                                    <div class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</div>
                                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">Name</div>
                                </div>
                            </div>
                            <div id="plays-table-detail" aw-custom-scroll class="table-detail">
                                <div class="row cursor-pointer" ng-repeat="play in plays"  ng-class="play.playActiveClass" ng-click="selectPlay(play.id)">
                                    <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ play.created | date: 'HH:mm:ss' }}</div>
                                    <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
                                        data-placement="top">{{ play.elapsed }}
                                    </div>
                                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 status-column">
                                        <i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
                                    </div>
                                </div>
                            </div>
                        </div><!-- section -->

                        <div id="task-section" class="section">
                            <h5>Tasks</h5>
                            <div class="table-header">
                                <div class="row">
                                    <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</div>
                                    <div class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</div>
                                    <div class="col-lg-5 col-md-5 col-sm-10 col-xs-12">Name</div>
                                    <div class="col-lg-5 col-md-5 hidden-xs hidden-sm">Host Status</div>
                                </div>
                            </div>
                            <div id="tasks-table-detail" aw-custom-scroll class="table-detail">
                                <div class="row cursor-pointer" ng-repeat="task in tasks | filter:{ play_id: activePlay }" ng-class="task.taskActiveClass"
                                    ng-click="selectTask(task.id)">
                                    <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div>
                                    <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
                                            data-placement="top">{{ task.elapsed }}
                                    </div>
                                    <div class="col-lg-5 col-md-5 col-sm-10 col-xs-12 status-column" aw-tool-tip="Event Id: {{ task.id }} Status: {{ task.status }}" data-placement="top">
                                            <i class="fa icon-job-{{  task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }}
                                    </div>
                                    <div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
                                        <div class="status-bar">
                                            <div class="successful-hosts inner-bar" aw-tool-tip="{{ task.successfulCount}} hosts OK" aw-tip-watch="task.successfulCount" data-placement="top" ng-style="{{ task.successfulStyle }}">{{ task.successfulCount }}</div>
                                            <div class="changed-hosts inner-bar" aw-tool-tip="{{ task.changedCount}} hosts changed" aw-tip-watch="task.changedCount" data-placement="top" ng-style="{{ task.changedStyle }}">{{ task.changedCount }}</div>
                                            <div class="skipped-hosts inner-bar" aw-tool-tip="{{ task.skippedCount}} hosts skipped" aw-tip-watch="task.skippedCount" data-placement="top" ng-style="{{ task.skippedStyle }}">{{ task.skippedCount }}</div> 
                                            <div class="failed-hosts inner-bar" aw-tool-tip="{{ task.failedCount}} hosts failed" aw-tip-watch="task.failedCount" data-placement="top" ng-style="{{ task.failedStyle }}">{{ task.failedCount }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- section -->

                        <div id="task-hosts-section" class="section">
                            <div class="header">
                                <div class="title">Hosts</div>
                                <div class="search-field">
                                    <input type="text" ng-model="task_host_name" placeholder="Search" ng-keypress="taskHostNameKeyPress($event)" />
                                    <a class="search-icon" ng-show="searchTaskHostsEnabled" ng-click="searchTaskHosts()"><i class="fa fa-search"></i></a>
                                    <a class="search-icon" ng-show="!searchTaskHostsEnabled" ng-click="task_host_name=''; searchTaskHosts()"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div id="hosts-table-detail" aw-custom-scroll data-on-total-scroll="HostDetailOnTotalScroll"
                                data-on-total-scroll-back="HostDetailOnTotalScrollBack" class="table-detail">
                                <div id="hosts-table-detail-inner">
                                    <div class="row" ng-repeat="result in hostResults | filter:{ task_id: activeTask }">
                                        <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 status-column">
                                            <a href="" ng-click="doSomething()" aw-tool-tip="Event Id: {{ result.id }} Status: {{ result.status }}. Click for details" data-placement="top"><i class="fa icon-job-{{ result.status }}"></i> {{ result.name }}</a>
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                            {{ result.msg }}
                                        </div>
                                    </div>
                                    <div class="row" ng-show="hostResults.length === 0">
                                        <div class="col-lg-12">
                                            <div class="loading-info">No records matched your search.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- section -->

                    </div><!-- job-detail-tables -->
                
                </div><!-- well -->

            </div><!-- job-detail-container -->

            <div id="job-summary-container">
                <div class="job_well">
                    <div id="hide-summary-button" style="display: hidden;">
                        <a href="" class="btn btn-xs btn-default" ng-click="toggleSummary('hide')" aw-tool-tip="Hide hosts summary" data-placement="top"><i class="fa fa-arrow-circle-right fa-lg"></i></a>
                    </div>
                    <div id="hosts-summary-section" class="section job_summary">
                        <div class="header">
                            <div class="title">Host Summary</div>
                            <div class="search-field">
                                <input type="text" ng-model="summary_host_name" placeholder="Search" ng-keypress="summaryHostNameKeyPress($event)" />
                                <a class="search-icon" ng-show="searchSummaryHostsEnabled" ng-click="searchSummaryHosts()"><i class="fa fa-search"></i></a>
                                <a class="search-icon" ng-show="!searchSummaryHostsEnabled" ng-click="summary_host_name=''; searchSummaryHosts()"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="table-header">
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">Host</div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">OK</div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Change</div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Dark</div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Fail</div>
                            </div>
                        </div>
                        <div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll"
                                data-on-total-scroll-back="HostSummaryOnTotalScrollBack">
                            <div class="row" ng-repeat="host in hosts" id="{{ host.id }}">
                                <div class="name col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/#/home/hosts/?id={{ host.id }}"
                                    aw-tool-tip="View host" data-placement="top">{{ host.name }}</a></div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.ok }}</div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.changed }}</div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.unreachable }}</div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.failed }}</div>
                            </div>
                            <div class="row" ng-show="hosts.length === 0">
                                <div class="col-lg-12">
                                    <div class="loading-info">No records matched your search.</div>
                                </div>
                            </div>
                        </div>
                    </div><!-- section -->
                </div>
            </div><!-- col-md-5 -->

        </div>
    </div>
</div>