<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div class="cube-detail" ng-if="state.selectedJob">
    <ul class="timeline">
        <li>
            <i class="fa fa-star bg-blue"></i>
            <div class="timeline-item">
                <div class="timeline-header">
                    <i class="ace-icon fa fa-sort-amount-asc"></i>
                    Detail Information
                    <i class="fa fa-minus-square fa-lg pull-right" ng-click="state.showSteps= false; refreshJobs()" tooltip="Collapse"></i>
                </div>
                <div class="timeline-body">
                    <table class="table table-striped table-bordered">
                        <tr>
                            <td><b>Job Name</b></td>
                            <td style="max-width: 180px;word-wrap: break-word;word-break: normal;">
                                {{state.selectedJob.name}}
                            </td>
                        </tr>
                        <tr>
                            <td><b>Job ID</b></td>
                            <td style="max-width: 180px;word-wrap: break-word;word-break: normal;">
                                {{state.selectedJob.uuid}}
                            </td>
                        </tr>
                        <tr>
                            <td><b>Status</b></td>
                            <td>
                                <span class="label"
                                        ng-class="{
                                        'label label-default' : state.selectedJob.job_status=='PENDING',
                                        'label bg-aqua' : state.selectedJob.job_status=='RUNNING',
                                        'label label-success' : state.selectedJob.job_status=='FINISHED',
                                        'label label-danger' : state.selectedJob.job_status=='ERROR',
                                        'label bg-navy' : state.selectedJob.job_status=='DISCARDED'}"
                                >{{state.selectedJob.job_status}}</span>
                            </td>
                        </tr>
                        <tr>
                          <td><b>Built By</b></td>
                          <td>{{state.selectedJob.build_instance}}</td>
                        </tr>
                        <tr>
                            <td><b>Duration</b></td>
                            <td>{{(state.selectedJob.duration/60 | number:2) + ' mins'}}</td>
                        </tr>
                        <tr>
                            <td><b>MapReduce Waiting</b></td>
                            <td>{{(state.selectedJob.mr_waiting/60 | number:2) + ' mins'}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </li>

        <!--Start Label-->
        <li class="time-label">
            <span class="bg-blue">
                <b>Start &nbsp;&nbsp;{{state.selectedJob.steps[0].exec_start_time !=0 ? (state.selectedJob.steps[0].exec_start_time | utcToConfigTimeZone) :''}}</b>
            </span>
        </li>

        <li ng-repeat="step in state.selectedJob.steps">
            <i style="cursor: pointer"
                tooltip-placement="left"
                tooltip-html-unsafe="<div style='text-align:left;font-size: 10pt'>
                    SequenceID: {{step.sequence_id}}<br>
                    Status: {{step.step_status}}<br>
                    Duration: {{step.exec_start_time != 0 ?  (step.exec_end_time != 0 ? ((step.exec_end_time - step.exec_start_time)/1000/60 | number:2) + ' mins' : '0 seconds') : '0 seconds'}}<br>
                    Waiting: {{(step.exec_wait_time > 60)? (step.exec_wait_time/60 | number:2) + ' mins': step.exec_wait_time + ' seconds'}}<br>
                    Start At: {{step.exec_start_time !=0 ? (step.exec_start_time | utcToConfigTimeZone) :''}}<br>
                    End At: {{step.exec_end_time !=0 ? (step.exec_end_time | utcToConfigTimeZone) :''}}<br>
                    {{step.info.hdfs_bytes_written ? ('Data Size: ' + dataSize(step.info.hdfs_bytes_written) +'<br>') : ''}}
                    {{step.info.mr_job_id ? ('MR Job: <br>' + step.info.mr_job_id + '<br>') :''}}</div>"
                ng-class="{
                    'fa fa-ellipsis-h bg-gray' : step.step_status=='PENDING',
                    'fa fa-spinner fa-spin bg-aqua' : step.step_status=='WAITING' || step.step_status=='RUNNING',
                    'fa fa-check bg-green' : step.step_status=='FINISHED',
                    'fa fa-warning bg-red' : step.step_status=='ERROR',
                    'fa fa-ban bg-navy' : step.step_status=='DISCARDED'
                }">
            </i>
            <div class="timeline-item">
                <div class="timeline-header">
                    <i class="ace-icon fa fa-clock-o bigger-110"></i>
                    {{step.exec_start_time !=0 ? (step.exec_start_time | utcToConfigTimeZone):''}}
                </div>
                <div class="timeline-body">
                    <span style="color: #4383B4">#{{$index+1}} Step Name: </span>{{step.name}}<br>
                    <div ng-if="step.info.hdfs_bytes_written">
                        <span style="color: #4383B4" >Data Size: </span>
                        {{dataSize(step.info.hdfs_bytes_written)}}
                        <br>
                    </div>
                    <span style="color: #4383B4">Duration: </span>
                    {{step.exec_start_time != 0 ?  (step.exec_end_time != 0 ? ((step.exec_end_time - step.exec_start_time)/1000/60 | number:2) + ' mins' : '0 seconds') : '0 seconds'}}
                    <span style="color: #4383B4">Waiting: </span>
                    {{(step.exec_wait_time > 60)? (step.exec_wait_time/60 | number:2) + ' mins': step.exec_wait_time + ' seconds'}}<br>
                </div>
                <div class="timeline-footer">
                    <a ng-if="step.exec_cmd && userService.hasRole('ROLE_ADMIN')"
                       ng-click="state.selectedStep = step; state.stepAttrToShow = 'cmd'; openModal()"
                       tooltip="Parameters">
                        <i class="ace-icon fa fa-key green bigger-120"></i>
                    </a>
                    <a ng-if="step.step_status!='PENDING'"
                       ng-click="state.selectedStep = step; state.stepAttrToShow = 'output'; openModal()"
                       tooltip="Log">
                        <i class="ace-icon fa fa-file-text-o blue bigger-120"></i>
                    </a>

                    <a ng-if="step.info.yarn_application_tracking_url"
                       href="{{step.info.yarn_application_tracking_url}}" target="_blank"
                       tooltip="MRJob">
                        <i class="ace-icon fa fa-tasks yellow bigger-110"></i>
                    </a>
                    <a ng-if="config.reference_links && config.reference_links['diagnostic'].link" href="{{config.reference_links['diagnostic'].link + step.info.mr_job_id}}" target="_blank"
                       tooltip="Monitoring">
                        <i class="ace-icon fa fa-chain grey bigger-110"></i>
                    </a>
                </div>
            </div>
        </li>

        <li class="time-label">
            <span class="bg-blue">
                <b>End &nbsp;&nbsp; {{state.selectedJob.steps[state.selectedJob.steps.length-1].exec_end_time !=0 ? (state.selectedJob.steps[state.selectedJob.steps.length-1].exec_end_time | utcToConfigTimeZone):''}}</b>
            </span>
        </li>
    </ul>
</div>

<div ng-if="!state.selectedJob">
    <div no-result text="No Job Selected."></div>
</div>

<script type="text/ng-template" id="jobStepDetail.html">
    <div class="modal-header">
        <h4>{{stepAttrToShow == 'cmd' ? 'Parameters' : 'Output'}}
            <i ng-if="stepAttrToShow == 'output' && step.loadingOp" class="fa fa-spinner fa-spin"></i></h4>
    </div>
    <div class="modal-body">
        <pre>{{stepAttrToShow == 'cmd' ? step.exec_cmd : (step.loadingOp ? "Loading..." : !!(step.cmd_output)?step.cmd_output:'No Data Available')}}</pre>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="cancel()">Close</button>
    </div>
</script>
