awx/awx/ui/client/src/workflow-results/workflow-results.partial.html

<div class="tab-pane" id="workflow-results">
    <div ng-cloak
        id="htmlTemplate"
        class="WorkflowResults"
        ng-class="{'fullscreen': stdoutFullScreen}">
        <div ui-view></div>

        <!-- LEFT PANE -->
        <div class="WorkflowResults-leftSide"
            ng-class="{'WorkflowResults-stdoutActionButton--active': stdoutFullScreen}">
            <div class="Panel"
                ng-show="!stdoutFullScreen">

                <!-- LEFT PANE HEADER -->
                <div class="WorkflowResults-panelHeader">
                    <div
                        class="WorkflowResults-panelHeaderText">
                        {{ strings.details.HEADER }}
                    </div>

                    <!-- LEFT PANE HEADER ACTIONS -->
                    <div>

                        <!-- RELAUNCH ACTION -->
                        <button class="List-actionButton"
                            data-placement="top"
                            mode="all"
                            ng-click="relaunchJob()"
                            aw-tool-tip="{{ strings.tooltips.RELAUNCH }}"
                            data-original-title=""
                            title="">
                            <i class="icon-launch"></i>
                        </button>

                        <!-- CANCEL ACTION -->
                        <button class="List-actionButton
                                List-actionButton--delete"
                            data-placement="top"
                            ng-click="cancelJob()"
                            ng-show="workflow.status == 'running' ||
                                workflow.status=='pending' "
                            aw-tool-tip="{{ strings.tooltips.CANCEL }}"
                            data-original-title="" title="">
                            <i class="fa fa-minus-circle"></i>
                        </button>

                        <!-- DELETE ACTION -->
                        <button class="List-actionButton
                                List-actionButton--delete"
                            data-placement="top"
                            ng-click="deleteJob()"
                            ng-hide="workflow.status == 'running' ||
                                workflow.status == 'pending' "
                            aw-tool-tip="{{ strings.tooltips.DELETE }}"
                            data-original-title=""
                            title="">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                </div>

                <!-- LEFT PANE DETAILS GROUP -->
                <div>

                    <!-- STATUS DETAIL -->
                    <div class="WorkflowResults-resultRow">
                        <label class="WorkflowResults-resultRowLabel">
                             {{strings.labels.STATUS}}
                         </label>
                         <div class="WorkflowResults-resultRowText">
                             <i	class="WorkflowResults-statusResultIcon
                                     fa
                                     icon-job-{{ workflow.status }}">
                             </i> {{ workflow.statusLabel }}
                         </div>
                     </div>

                    <!-- EXPLANATION DETAIL -->
                    <div class="WorkflowResults-resultRow" ng-show="workflow.job_explanation">
                        <label class="WorkflowResults-resultRowLabel">
                            {{ strings.labels.JOB_EXPLANATION }}
                        </label>

                        <div class="WorkflowResults-resultRowText"
                            ng-show="!job_explanation.showMore">
                            {{ job_explanation.less }}
                            <span ng-show="job_explanation.hasMoreToShow">...</span>
                            <span ng-show="job_explanation.hasMoreToShow"
                                class="WorkflowResults-seeMoreLess"
                                ng-click="job_explanation.showMore = true">
                                {{ strings.details.SHOW_MORE }}
                            </span>
                        </div>

                        <div class="WorkflowResults-resultRowText"
                            ng-show="job_explanation.showMore">
                            {{ job_explanation.more }}
                            <span class="WorkflowResults-seeMoreLess"
                                ng-click="job_explanation.showMore = false">
                                {{ strings.details.SHOW_LESS }}
                            </span>
                        </div>
                    </div>

                    <!-- START TIME DETAIL -->
                    <div class="WorkflowResults-resultRow"
                        ng-show="workflow.started">
                        <label class="WorkflowResults-resultRowLabel">
                            {{ strings.labels.STARTED }}
                        </label>
                        <div class="WorkflowResults-resultRowText">
                            {{ (workflow.started | longDate) || strings.details.NOT_STARTED }}
                        </div>
                    </div>

                    <!-- FINISHED TIME DETAIL -->
                    <div class="WorkflowResults-resultRow"
                        ng-show="workflow.started">
                        <label class="WorkflowResults-resultRowLabel">
                            {{ strings.labels.FINISHED }}
                        </label>
                        <div class="WorkflowResults-resultRowText">
                            {{ (workflow.finished |
                                longDate) || strings.details.NOT_FINISHED }}
                        </div>
                    </div>

                    <!-- INVENTORY DETAIL -->
                    <div class="WorkflowResults-resultRow"
                        ng-show="workflow.summary_fields.inventory">
                        <label class="WorkflowResults-resultRowLabel">
                            {{ strings.labels.INVENTORY }}
                        </label>
                        <div class="WorkflowResults-resultRowText">
                            <a href="{{ inventory_link }}"
                                aw-tool-tip="{{ strings.tooltips.EDIT_WORKFLOW }}"
                                data-placement="top">
                                {{ workflow.summary_fields.inventory.name }}
                            </a>
                        </div>
                    </div>

                    <!-- TEMPLATE DETAIL -->
                    <div class="WorkflowResults-resultRow"
                        ng-show="workflow.summary_fields.workflow_job_template.name">
                        <label class="WorkflowResults-resultRowLabel">
                            {{ strings.labels.TEMPLATE }}
                        </label>
                        <div class="WorkflowResults-resultRowText">
                            <a href="{{ workflow_job_template_link }}"
                                aw-tool-tip="{{ strings.tooltips.EDIT_WORKFLOW }}"
                                data-placement="top">
                                {{ workflow.summary_fields.workflow_job_template.name }}
                            </a>
                        </div>
                    </div>

                    <!-- CREATED BY DETAIL -->
                    <div class="WorkflowResults-resultRow"
                        ng-show="workflow.summary_fields.created_by.username">
                        <label class="WorkflowResults-resultRowLabel">
                            {{ strings.labels.LAUNCHED_BY }}
                        </label>
                        <div class="WorkflowResults-resultRowText">
                            <a href="{{ created_by_link }}"
                                aw-tool-tip="{{ strings.tooltips.EDIT_USER }}"
                                data-placement="top">
                                {{ workflow.summary_fields.created_by.username }}
                            </a>
                        </div>
                    </div>

                    <!-- SCHEDULED BY DETAIL -->
                    <div class="WorkflowResults-resultRow toggle-show"
                        ng-show="workflow.summary_fields.schedule.name">
                        <label
                            class="WorkflowResults-resultRowLabel">
                            {{ strings.labels.LAUNCHED_BY }}
                        </label>
                        <div class="WorkflowResults-resultRowText">
                            <a href="{{ scheduled_by_link }}"
                                aw-tool-tip="{{ strings.tooltips.EDIT_SCHEDULE }}"
                                data-placement="top">
                                {{ workflow.summary_fields.schedule.name }}
                            </a>
                        </div>
                    </div>

                  <!-- SLIIIIIICE -->
                  <div class="WorkflowResults-resultRow"
                      ng-show="workflow.summary_fields.job_template.name">
                      <label
                          class="WorkflowResults-resultRowLabel">
                          {{ strings.labels.SLICE_TEMPLATE }}
                      </label>
                      <div class="WorkflowResults-resultRowText">
                          <a href="{{ slice_job_template_link }}"
                              aw-tool-tip="{{ strings.tooltips.EDIT_SLICE_TEMPLATE }}"
                              data-placement="top">
                              {{ workflow.summary_fields.job_template.name }}
                            </a>
                        </div>
                    </div>

                    <!-- SOURCE WORKFLOW JOB DETAIL -->
                    <div class="WorkflowResults-resultRow"
                        ng-if="workflow.summary_fields.source_workflow_job">
                        <label class="WorkflowResults-resultRowLabel">
                            {{ strings.labels.SOURCE_WORKFLOW_JOB }}
                        </label>
                        <div class="WorkflowResults-resultRowText">
                            <a href="{{ source_workflow_job_link }}"
                            aw-tool-tip="{{ strings.tooltips.SOURCE_WORKFLOW_JOB }}"
                            data-placement="top">
                                {{ workflow.summary_fields.source_workflow_job.name }}
                            </a>
                        </div>
                    </div>

                    <!-- EXTRA VARIABLES DETAIL -->
                    <at-code-mirror
                        ng-if="variables"
                        variables="{{ variables }}"
                        tooltip="{{ varsTooltip }}"
                        label="{{ varsLabel }}"
                        label-class="WorkflowResults-extraVarsLabel"
                        disabled="disabled">
                    </at-code-mirror>

                    <!-- LABELS DETAIL -->
                    <div class="WorkflowResults-resultRow"
                        ng-show="labels && labels.length > 0">
                        <div class="WorkflowResults-resultRow">
                            <a class="WorkflowResults-resultRowLabel
                                WorkflowResults-resultRowLabel--fullWidth"
                                ng-show="lessLabels"
                                href=""
                                ng-click="toggleLessLabels()">
                                    {{ strings.labels.LABELS }}
                                <i class="WorkflowResults-expandArrow
                                    fa fa-caret-right"></i>
                            </a>
                            <a class="WorkflowResults-resultRowLabel
                                WorkflowResults-resultRowLabel--fullWidth"
                                ng-show="!lessLabels"
                                href=""
                                ng-click="toggleLessLabels()">
                                    {{ strings.labels.LABELS }}
                                <i class="WorkflowResults-expandArrow
                                    fa fa-caret-down"></i>
                            </a>
                        </div>
                        <div id="workflow-results-labels" class="LabelList
                            WorkflowResults-resultRowText
                            WorkflowResults-resultRowText--fullWidth">
                            <div ng-repeat="label in labels"
                                class="LabelList-tagContainer">
                                <div class="LabelList-tag">
                                    <div class="LabelList-name">
                                        {{ label }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end of labels-->

                </div>

            </div>
        </div>

        <!-- RIGHT PANE -->
        <div class="WorkflowResults-rightSide">
            <div class="Panel">

                <!-- RIGHT PANE HEADER -->
                <div class="StandardOut-panelHeader WorkflowResults-panelRightTitle">
                    <div class="StandardOut-panelHeaderText WorkflowResults-panelRightTitleText">
                        <i class="WorkflowResults-statusResultIcon
                            fa icon-job-{{ workflow.status }}"
                            ng-show="stdoutFullScreen"
                            aw-tool-tip="{{ strings.tooltips.STATUS }}"
                            aw-tip-placement="top"
                            data-original-title>
                        </i>
                        {{ workflow.name }}
                    </div>
                    <div class="WorkflowResults-badgeAndActionRow">
                        <!-- HEADER COUNTS -->
                        <div class="WorkflowResults-badgeRow">
                            <!-- PLAYS COUNT -->
                            <div class="WorkflowResults-badgeTitle">
                                {{ strings.results.TOTAL_JOBS }}
                            </div>
                            <span class="badge List-titleBadge">
                                {{ workflow_nodes.length || 0}}
                            </span>

                            <!-- ELAPSED TIME -->
                            <div class="WorkflowResults-badgeTitle">
                                {{ strings.results.ELAPSED }}
                            </div>
                            <span class="badge List-titleBadge">
                                {{ workflow.elapsed * 1000 | duration: "hh:mm:ss"}}
                            </span>
                        </div>

                        <!-- HEADER ACTIONS -->
                        <div class="StandardOut-panelHeaderActions">

                            <!-- FULL-SCREEN TOGGLE ACTION -->
                            <button class="StandardOut-actionButton"
                                aw-tool-tip="{{ strings.tooltips.TOGGLE_STDOUT_FULLSCREEN }}"
                                data-tip-watch="strings.tooltips.TOGGLE_STDOUT_FULLSCREEN"
                                data-placement="top"
                                ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}"
                                ng-click="toggleStdoutFullscreen()">
                                <i class="fa fa-arrows-alt"></i>
                            </button>

                        </div>
                    </div>
                </div>
                <workflow-status-bar></workflow-status-bar>
                <div class="WorkflowLegend-details">
                    <div class="WorkflowLegend-details--left">
                        <i ng-class="{{ keyClassList }}" class="fa fa-key Key-menuIcon" ng-click="toggleKey()"></i>
                        <ul ng-show="showKey" class="Key-list noselect">
                            <li class="Key-listItem">
                                <p class="Key-heading">{{strings.legend.KEY}}</p>
                            </li>
                            <li class="Key-listItem">
                                <div class="Key-icon Key-icon--success"></div>
                                <p class="Key-listItemContent">{{strings.legend.ON_SUCCESS}}</p>
                            </li>
                            <li class="Key-listItem">
                                <div class="Key-icon Key-icon--fail"></div>
                                <p class="Key-listItemContent">{{strings.legend.ON_FAILURE}}</p>
                            </li>
                            <li class="Key-listItem">
                                <div class="Key-icon Key-icon--always"></div>
                                <p class="Key-listItemContent">{{strings.legend.ALWAYS}}</p>
                            </li>
                            <li class="Key-listItem">
                                <div class="Key-icon Key-icon--circle Key-icon--default">P</div>
                                <p class="Key-listItemContent Key-listItemContent--circle">{{strings.legend.PROJECT_SYNC}}</p>
                            </li>
                            <li class="Key-listItem">
                                <div class="Key-icon Key-icon--circle Key-icon--default">I</div>
                                <p class="Key-listItemContent Key-listItemContent--circle">{{strings.legend.INVENTORY_SYNC}}</p>
                            </li>
                            <li class="Key-listItem">
                                <div class="Key-icon Key-icon--circle Key-icon--default">W</div>
                                <p class="Key-listItemContent Key-listItemContent--circle">{{strings.legend.WORKFLOW}}</p>
                            </li>
                        </ul>
                    </div>
                    <div class="WorkflowLegend-details--right">
                        <i ng-class="{'WorkflowMaker-manualControlsIcon--active': showManualControls}" class="fa fa-cog WorkflowMaker-manualControlsIcon" aria-hidden="true" alt="Controls" ng-click="toggleManualControls()"></i>
                        <div ng-show="showManualControls" class="WorkflowLegend-manualControls noselect">
                            <workflow-controls class="WorkflowControls" pan-chart="panChart(direction)" zoom-chart="zoomChart(zoom)" reset-chart="resetChart()" zoom-to-fit-chart="zoomToFitChart()"></workflow-controls>
                        </div>
                    </div>
                </div>
                <workflow-chart tree-data="treeData.data" workflow-zoomed="workflowZoomed(zoom)" can-add-workflow-job-template="canAddWorkflowJobTemplate" mode="details" class="WorkflowMaker-chart"></workflow-chart>
            </div>

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