awx/awx/ui/client/src/job-detail/job-detail.partial.html

<div class="tab-pane" id="jobs-detail">
    <div ng-cloak id="htmlTemplate" class="JobDetail" ng-class="{'fullscreen': stdoutFullScreen}">
    <div ui-view></div>
        <!--beginning of job-detail-container (left side) -->
        <div id="job-detail-container" class="JobDetail-leftSide" ng-class="{'JobDetail-stdoutActionButton--active': stdoutFullScreen}">
            <!--beginning of results-->
            <div id="job-results-panel" class="JobDetail-resultsContainer Panel" ng-show="!stdoutFullScreen">
                <div class="JobDetail-panelHeader">
                    <div class="JobDetail-expandContainer">
                        <a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()">
                            RESULTS<i class="JobDetail-expandArrow fa fa-caret-right"></i>
                        </a>
                        <a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">
                            RESULTS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
                        </a>
                    </div>
                    <div class="JobDetail-actions">
                        <button id="relaunch-job-button" class="List-actionButton JobDetail-launchButton" data-placement="top" mode="all" ng-click="relaunchJob()" aw-tool-tip="Relaunch using the same parameters" data-original-title="" title=""><i class="icon-launch"></i> </button>
                        <button id="cancel-job-button" class="List-actionButton List-actionButton--delete JobDetail-launchButton" data-placement="top" ng-click="deleteJob()" ng-show="job_status.status == 'running' || job_status.status=='pending' " aw-tool-tip="Cancel" data-original-title="" title=""><i class="fa fa-minus-circle"></i> </button>
                        <button id="delete-job-button" class="List-actionButton List-actionButton--delete JobDetail-launchButton" data-placement="top" ng-click="deleteJob()" ng-hide="job_status.status == 'running' || job_status.status == 'pending' " aw-tool-tip="Delete" data-original-title="" title=""><i class="fa fa-trash-o"></i> </button>
                    </div>
                </div>

                <div class="form-horizontal JobDetail-resultsDetails" role="form" id="job-status-form">
                    <div class="form-group JobDetail-resultRow toggle-show">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Status</label>
                        <div class="JobDetail-resultRowText"><i class="JobDetail-statusIcon--results fa icon-job-{{ job_status.status }}"></i> {{ job_status.status_label }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.explanation">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 col-xs-12">Explanation</label>
                        <div class="JobDetail-resultRowText col-lg-10 col-md-10 col-sm-10 col-xs-9  job_status_explanation"
                        ng-show="!previousTaskFailed" ng-bind-html="job_status.explanation"></div>
                        <div class="JobDetail-resultRowText col-lg-10 col-md-10 col-sm-10 col-xs-9 job_status_explanation"
                        ng-show="previousTaskFailed">Previous Task Failed
                            <a
                                href=""
                                id="explanation_help"
                                aw-pop-over="{{ task_detail }}"
                                aw-pop-over-watch="task_detail"
                                data-placement="bottom"
                                data-container="body" class="help-link" over-title="Failure Detail"
                                title=""
                                tabindex="-1">
                                    <i class="fa fa-question-circle">
                                    </i>
                            </a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.traceback">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-12 col-sm-12 col-xs-12">Results Traceback</label>
                        <div class="JobDetail-resultRowText col-lg-10 col-md-12 col-sm-12 col-xs-12  job_status_traceback" ng-bind-html="job_status.traceback"></div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_template_name">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
                        <div class="JobDetail-resultRowText">
                            <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.started">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Started</label>
                        <div class="JobDetail-resultRowText">{{ job_status.started | longDate }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_type">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Type</label>
                        <div class="JobDetail-resultRowText">{{ job_type }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.started">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Finished</label>
                        <div class="JobDetail-resultRowText">{{ job_status.finished | longDate }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="created_by">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Launched By</label>
                        <div class="JobDetail-resultRowText">
                            <a href="{{ users_url }}" aw-tool-tip="Edit the User" data-placement="top">{{ created_by }}</a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.started">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Elapsed</label>
                        <div class="JobDetail-resultRowText">{{ job_status.elapsed }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="scheduled_by">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Launched By</label>
                        <div class="JobDetail-resultRowText">
                            <a href aw-tool-tip="Edit the Schedule" data-placement="top" ng-click="editSchedule()">{{scheduled_by}}</a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="inventory_name">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
                        <div class="JobDetail-resultRowText">
                            <a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="project_name">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
                        <div class="JobDetail-resultRowText">
                            <a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job.playbook">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Playbook</label>
                        <div class="JobDetail-resultRowText">{{ job.playbook }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="credential_name">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Machine Credential</label>
                        <div class="JobDetail-resultRowText JobDetail-resultRowText">
                            <a href="{{ credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ credential_name }}</a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="cloud_credential_name">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Cloud Credential</label>
                        <div class="JobDetail-resultRowText">
                            <a href="{{ cloud_credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ cloud_credential_name }}</a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="network_credential_name">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Network Credential</label>
                        <div class="JobDetail-resultRowText">
                            <a href="{{ network_credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ network_credential_name }}</a>
                        </div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="job.forks">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Forks</label>
                        <div class="JobDetail-resultRowText">{{ job.forks }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show"  ng-show="job.limit">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Limit</label>
                        <div class="JobDetail-resultRowText">{{ job.limit }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show" ng-show="verbosity">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Verbosity</label>
                        <div class="JobDetail-resultRowText">{{ verbosity }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show"  ng-show="job.job_tags">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Tags</label>
                        <div class="JobDetail-resultRowText">{{ job.job_tags }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow toggle-show"  ng-show="job.skip_tags">
                        <label class="JobDetail-resultRowLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Skip Tags</label>
                        <div class="JobDetail-resultRowText">{{ job.skip_tags }}</div>
                    </div>

                    <div class="form-group JobDetail-resultRow JobDetail-resultRow--variables toggle-show" ng-show="variables">
                        <label class="JobDetail-resultRowLabel JobDetail-extraVarsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Extra Variables</label>
                            <textarea rows="6" ng-model="variables" name="variables" class="JobDetail-extraVars" id="pre-formatted-variables"></textarea>
                    </div>

                </div>
            </div>
            <!--- end of results-->

            <!--beginning of details-->
            <div id="job-detail-panel" class="JobDetail-resultsContainer Panel" ng-show="!stdoutFullScreen">
                <div class="JobDetail-panelHeader">
                    <div class="JobDetail-expandContainer">
                        <a class="JobDetail-panelHeaderText" ng-show="lessDetail" href="" ng-click="toggleLessDetail()">
                            DETAILS<i class="JobDetail-expandArrow fa fa-caret-right"></i>
                        </a>
                        <a class="JobDetail-panelHeaderText" ng-show="!lessDetail" href="" ng-click="toggleLessDetail()">
                            DETAILS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
                        </a>
                    </div>
                </div>

                <div id="job-detail-details">
                    <div id="play-section">
                        <div class="JobDetail-instructions"><span class="badge">1</span> Please select from a play below to view its associated tasks.</div>
                        <div class="JobDetail-searchHeaderRow">
                            <div class="JobDetail-searchContainer form-group">
                                <div class="search-name">
                                    <input type="text" class="JobDetail-searchInput form-control List-searchInput" id="search_play_name" ng-model="search_play_name" placeholder="Play Name" ng-keypress="searchPlaysKeyPress($event)" >
                                            <a class="List-searchInputIcon search-icon" ng-show="searchPlaysEnabled" ng-click="searchPlays()"><i class="fa fa-search"></i></a>
                                            <a class="List-searchInputIcon search-icon" ng-show="!searchPlaysEnabled" ng-click="search_play_name=''; searchPlays()"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="JobDetail-tableToggleContainer form-group">
                                <div class="btn-group" aw-toggle-button data-after-toggle="filterPlayStatus">
                                    <button class="JobDetail-tableToggle btn btn-xs btn-primary active">All</button>
                                    <button class="JobDetail-tableToggle btn btn-xs btn-default">Failed</button>
                                </div>
                            </div>
                        </div>


                        <div id="plays-table-header" class="table-header" ng-show="plays.length !== 0">
                            <table class="table table-condensed">
                                <thead>
                                    <tr>
                                        <th class="List-tableHeader col-lg-7 col-md-6 col-sm-6 col-xs-4">Plays</th>
                                        <th class="List-tableHeader col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
                                        <th class="List-tableHeader JobDetail-tableHeader col-lg-2 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div id="plays-table-detail" class="table-detail" lr-infinite-scroll="playsScrollDown"
                            scroll-threshold="10" time-threshold="500">
                            <table class="table" ng-class="{'JobDetails-table--noResults': plays.length === 0}">
                                <tbody>
                                    <tr class="List-tableRow cursor-pointer" ng-repeat="play in plays" ng-class-odd="'List-tableRow--oddRow'" ng-class-even="'List-tableRow--evenRow'" ng-class="play.playActiveClass" ng-click="selectPlay(play.id, $event)">
                                        <td class="List-tableCell col-lg-7 col-md-6 col-sm-6 col-xs-4 status-column" aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top"><i class="JobDetail-statusIcon fa icon-job-{{ play.status }}"></i>{{ play.name }}</td>
                                        <td class="List-tableCell col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ play.created | date: 'HH:mm:ss' }}</td>
                                        <td class="List-tableCell col-lg-2 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="{{ play.finishedTip }}" data-tip-watch="play.finishedTip"
                                            data-placement="top">{{ play.elapsed }}</td>

                                    </tr>
                                    <tr ng-show="plays.length === 0 && waiting">
                                        <td colspan="4" class="col-lg-12 loading-info">Waiting...</td>
                                    </tr>
                                    <tr ng-show="plays.length === 0 && playsLoading && !waiting">
                                        <td colspan="4" class="col-lg-12 loading-info">Loading...</td>
                                    </tr>
                                    <tr ng-show="plays.length === 0 && !playsLoading && !waiting">
                                        <td colspan="4" class="col-lg-12 loading-info">No matching plays</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="scroll-spinner" id="playsMoreRows">
                            <i class="fa fa-cog fa-spin"></i>
                        </div>
                    </div>
                    <!-- end of plays section of details-->

                    <div id="task-section" class="section JobDetail-tasks" >
                        <div class="JobDetail-instructions"><span class="badge">2</span> Please select a task below to view its associated hosts</div>
                        <div class="JobDetail-searchHeaderRow">
                            <div class="JobDetail-searchContainer form-group">
                                <div class="search-name">
                                    <input type="text" class="JobDetail-searchInput form-control List-searchInput" id="search_task_name" ng-model="search_task_name" placeholder="Task Name" ng-keypress="searchTasksKeyPress($event)" >
                                        <a class="List-searchInputIcon search-icon" ng-show="searchTasksEnabled" ng-click="searchTasks()"><i class="fa fa-search"></i></a>
                                        <a class="List-searchInputIcon search-icon" ng-show="!searchTasksEnabled" ng-click="search_task_name=''; searchTasks()"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="JobDetail-tableToggleContainer form-group">
                                <div class="btn-group" aw-toggle-button data-after-toggle="filterTaskStatus">
                                    <button class="JobDetail-tableToggle btn btn-xs btn-primary active">All</button>
                                    <button class="JobDetail-tableToggle btn btn-xs btn-default">Failed</button>
                                </div>
                            </div>
                        </div>

                        <div class="table-header">
                            <table id="tasks-table-header" class="table table-condensed" ng-show="taskList.length !== 0">
                                <thead>
                                    <tr>
                                        <th class="List-tableHeader col-lg-3 col-md-3 col-sm-6 col-xs-4">Tasks</th>
                                        <th class="List-tableHeader col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
                                        <th class="List-tableHeader col-lg-2 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
                                        <th class="List-tableHeader JobDetail-tableHeader col-lg-4 col-md-3 hidden-xs hidden-sm">Host Status</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div id="tasks-table-detail" class="table-detail" lr-infinite-scroll="tasksScrollDown"
                            scroll-threshold="10" time-threshold="500">
                            <table class="table" ng-class="{'JobDetails-table--noResults': taskList.length === 0}">
                                <tbody>
                                    <tr class="List-tableRow cursor-pointer" ng-class-odd="'List-tableRow--oddRow'" ng-class-even="'List-tableRow--evenRow'" ng-repeat="task in taskList = (tasks) track by $index" ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
                                        <td class="List-tableCell col-lg-3 col-md-3 col-sm-6 col-xs-4 status-column" aw-tool-tip="{{ task.status_tip }}"
                                            data-tip-watch="task.status_tip" data-placement="top"><i class="JobDetail-statusIcon fa icon-job-{{  task.status }}"></i>{{ task.name }}</td>
                                        <td class="List-tableCell col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ task.created | date: 'HH:mm:ss' }}</td>
                                        <td class="List-tableCell col-lg-2 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="{{ task.finishedTip }}" data-tip-watch="task.finishedTip"
                                                data-placement="top">{{ task.elapsed }}</td>

                                        <td class="List-tableCell col-lg-4 col-md-3 hidden-sm hidden-xs">
                                            <div>

                                                <a href="" id="{{ task.id }}-successful-bar" aw-tool-tip="{{ task.successfulCountTip }}" data-tip-watch="task.successfulCountTip" data-placement="top" ng-style="task.successfulStyle">
                                                    <span class="badge successful-hosts">{{ task.successfulCount }}</span>
                                                </a>
                                                <a href="" id="{{ task.id }}-changed-bar" aw-tool-tip="{{ task.changedCountTip }}" data-tip-watch="task.changedCountTip" data-placement="top" ng-style="task.changedStyle">
                                                    <span class="badge changed-hosts">{{ task.changedCount }}</span>
                                                </a>
                                                <a href="" id="{{ task.id }}-skipped-bar" aw-tool-tip="{{ task.skippedCountTip }}" data-tip-watch="task.skippedCountTip" data-placement="top" ng-style="task.skippedStyle">
                                                    <span class="badge skipped-hosts">{{ task.skippedCount }}</span>
                                                </a>
                                                <a href="" id="{{ task.id }}-failed-bar" aw-tool-tip="{{ task.failedCountTip }}" data-tip-watch="task.failedCountTip" data-placement="top" ng-style="task.failedStyle">
                                                    <span class="badge failed-hosts">{{ task.failedCount }}</span>
                                                </a>
                                                <a href="" id="{{ task.id }}-unreachable-bar" aw-tool-tip="{{ task.unreachableCountTip }}" data-tip-watch="task.unreachableCountTip" data-placement="top" ng-style="task.unreachableStyle">
                                                    <span class="badge unreachable-hosts">{{ task.unreachableCount }}</span>
                                                </a>
                                                <a href="" id="{{ task.id }}-missing-bar" aw-tool-tip="{{ task.missingCountTip }}" data-tip-watch="task.missingCountTip" data-placement="top" ng-style="task.missingStyle">
                                                    <span class="badge missing-hosts">{{ task.missingCount }}</span>
                                                </a>
                                                <div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found." data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">
                                                    No matching hosts.
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr ng-show="taskList.length === 0 && waiting">
                                        <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
                                    </tr>
                                    <tr ng-show="taskList.length === 0 && tasksLoading && !waiting">
                                        <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
                                    </tr>
                                    <tr ng-show="taskList.length === 0 && !tasksLoading && !waiting">
                                        <td colspan="5" class="col-lg-12 loading-info">No matching tasks</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="scroll-spinner" id="tasksMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                    </div><!-- section -->
                    <!--end of tasks section of details-->

                    <div id="task-hosts-section" class="section">
                        <div class="JobDetail-instructions"><span class="badge">3</span> Please select a host below to view associated task details.</div>
                        <div class="JobDetail-searchHeaderRow">
                            <div class="JobDetail-searchContainer form-group">
                                <div class="search-name">
                                    <input type="text" class="JobDetail-searchInput form-control List-searchInput" id="search_host_name" ng-model="search_host_name" placeholder="Host Name" ng-keypress="searchHostsKeyPress($event)" >
                                            <a class="List-searchInputIcon search-icon" ng-show="searchHostsEnabled" ng-click="searchHosts()"><i class="fa fa-search"></i></a>
                                            <a class="List-searchInputIcon search-icon" ng-show="!searchHostsEnabled" ng-click="search_host_name=''; searchHosts()"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="JobDetail-tableToggleContainer form-group">
                                    <div class="btn-group" aw-toggle-button data-after-toggle="filterHostStatus">
                                        <button class="JobDetail-tableToggle btn btn-xs btn-primary active">All</button>
                                        <button class="JobDetail-tableToggle btn btn-xs btn-default">Failed</button>
                                    </div>
                                </div>
                            </div>
                        <div class="table-header" id="hosts-table-header">
                            <table class="table table-condensed" ng-show="results.length !== 0">
                                <thead>
                                    <tr>
                                        <th class="List-tableHeader col-lg-4 col-md-3 col-sm-3 col-xs-3">Hosts</th>
                                        <th class="List-tableHeader col-lg-3 col-md-4 col-sm-3 col-xs-3">Item</th>
                                        <th class="List-tableHeader JobDetail-tableHeader col-lg-3 col-md-4 col-sm-3 col-xs-3">Message</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                        <div id="hosts-table-detail" class="table-detail" lr-infinite-scroll="hostResultsScrollDown" scroll-threshold="10" time-threshold="500">
                            <table class="table" ng-class="{'JobDetails-table--noResults': results.length === 0}">
                                <tbody>
                                    <tr class="List-tableRow cursor-pointer" ng-class-odd="'List-tableRow--oddRow'" ng-class-even="'List-tableRow--evenRow'" ng-repeat="result in results = (hostResults) track by $index">
                                        <td class="List-tableCell col-lg-4 col-md-3 col-sm-3 col-xs-3 status-column">
                                        <a ui-sref="jobDetail.host-event.details({eventId: result.id, taskId: selectedTask})" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-tip-watch="result.tip" data-placement="top"><i ng-show="result.status_text != 'Unreachable'" class="JobDetail-statusIcon fa icon-job-{{ result.status }}"></i><span ng-show="result.status_text != 'Unreachable'">{{ result.name }}</span><i ng-show="result.status_text == 'Unreachable'" class="JobDetail-statusIcon fa icon-job-unreachable"></i><span ng-show="result.status_text == 'Unreachable'">{{ result.name }}</span></a>
                                        </td>
                                        <td class="List-tableCell col-lg-3 col-md-4 col-sm-3 col-xs-3 item-column">{{ result.item }}</td>
                                        <td class="List-tableCell col-lg-3 col-md-4 col-sm-3 col-xs-3">{{ result.msg }}</td>
                                    </tr>
                                    <tr ng-show="results.length === 0 && waiting">
                                        <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
                                    </tr>
                                    <tr ng-show="results.length === 0 && hostResultsLoading && !waiting">
                                        <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
                                    </tr>
                                    <tr ng-show="results.length === 0 && !hostResultsLoading && !waiting">
                                        <td colspan="5" class="col-lg-12 loading-info">No matching host events</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="scroll-spinner" id="hostResultsMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                    </div>
                    <!--end of hosts section of details-->
                </div>
            </div>
            <!--end of details-->

            <!--beginning of events summary-->
            <div id="events-summary-panel" class="JobDetail-resultsContainer Panel" ng-show="!stdoutFullScreen">
                    <div class="JobDetail-panelHeader">
                        <div class="JobDetail-expandContainer">
                            <a class="JobDetail-panelHeaderText" ng-show="lessEvents" ui-sref="jobDetail.host-summary" ng-click="toggleLessEvents()">
                                EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-right"></i>
                            </a>
                            <a class="JobDetail-panelHeaderText" ng-show="!lessEvents" ui-sref="jobDetail" ng-click="toggleLessEvents()">
                                EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-down"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Host Summary view -->
                     <div id="events-summary" ng-hide="lessEvents">
                        <div ui-view="host-summary"></div>
                     </div>
            </div>
            <!-- end of events summary-->


        </div>
        <!--end of job-detail-container (left side)-->

        <!--beginning of stdout-->
        <div class="JobDetail-rightSide">
            <div class="JobDetail-stdoutPanel Panel">
                <div class="StandardOut-panelHeader">
                    <div class="StandardOut-panelHeaderText">STANDARD OUT</div>
                    <div class="StandardOut-panelHeaderActions">
                        <button class="StandardOut-actionButton" aw-tool-tip="Toggle Output" data-placement="top" ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}" ng-click="toggleStdoutFullscreen()">
                            <i class="fa fa-arrows-alt"></i>
                        </button>
                        <a ng-show="job_status.status === 'failed' || job_status.status === 'successful' || job_status.status === 'canceled'" href="/api/v1/jobs/{{ job.id }}/stdout?format=txt_download&token={{ token }}">
                            <button class="StandardOut-actionButton" aw-tool-tip="Download Output" data-placement="top">
                                <i class="fa fa-download"></i>
                            </button>
                        </a>
                    </div>
                </div>
                <standard-out-log stdout-endpoint="job.related.stdout"></standard-out-log>
            </div>
        </div>
        <!--end of stdout-->
    </div>
</div>

   <div id="host-modal-dialog" style="display: none;" class="dialog-content"></div>

</div>