<!--
* 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.
-->

<!--Jobs Table-->
<div class="row" style="margin-top:15px;" ng-controller="JobCtrl">

  <div ng-class="{'col-xs-8': state.showSteps, 'col-xs-12': !state.showSteps}">
    <div  class="dataTables_wrapper form-inline no-footer" >
      <!--Jobs Table Header-->
      <div class="row">

        <!--Cube Name: -->
        <div class="col-xs-3">
          <form class="" ng-submit="jobList.removeAll();reload()" style="display: inline" >
            <span><b>Cube Name:</b>
              <span class="input-icon input-icon-right nav-search" style="font-size:14px;">
                  <input type="text" placeholder="Filter ..." class="nav-search-input" ng-model="cubeName" />
                  <i class="ace-icon fa fa-search blue" ng-click="jobList.removeAll();reload()"></i>
              </span>
            </span>
          </form>
        </div>

        <!--<div class="col-xs-2"><label class="table-header-text">Jobs</label></div>-->
        <div class="col-xs-9">
          <!--STATUS-->
          <div class="pull-right">
            <!--Job History Time Filter-->
            <label>Jobs in:
              <select data-ng-model="timeFilter"
                      data-ng-options="s.name for s in jobConfig.timeFilter">
              </select>
              <select data-ng-model="searchMode"
                      data-ng-options="s.name for s in jobConfig.searchMode">
              </select>
            </label>
            <label ng-repeat="s in jobConfig.allStatus" class="checkbox-inline" >
              <input  type="checkbox"
                      value="{{s.name}}"
                      ng-checked="status.indexOf(s) > -1"
                      ng-click="toggleSelection(s);" />{{s.name}}
            </label>
            <!--Refresh Jobs-->
            <button class="btn btn-success btn-xs" style="margin-left: 10px" ng-click="jobList.removeAll();reload();"><i class="fa fa-refresh"></i></button>
          </div>
        </div>
      </div>
      <!--No Job-->
      <div ng-if="!state.loading && getLength(jobList.jobs)==0">
        <div no-result text="No Job."></div>
      </div>
      <!--Loading Jobs-->
      <div ng-if="state.loading">
        <loading text="Loading Jobs ..."></loading>
      </div>
      <!--Jobs Table Content-->
      <table ng-if="getLength(jobList.jobs)>0" class="table table-striped table-bordered table-hover dataTable no-footer">
        <thead>
        <tr style="cursor: pointer">
          <th ng-repeat="theaditem in jobConfig.theaditems"
              ng-click="state.filterAttr= theaditem.attr;state.reverseColumn=theaditem.attr;state.filterReverse=!state.filterReverse; ">
            {{theaditem.name}}
            <i ng-if="state.reverseColumn!= theaditem.attr"
               class="fa fa-unsorted"></i>
            <i ng-if="state.reverseColumn== theaditem.attr && !state.filterReverse"
               class="fa fa-sort-asc"></i>
            <i ng-if="state.reverseColumn== theaditem.attr && state.filterReverse"
               class="fa fa-sort-desc"></i>
          </th>
          <th>Actions</th>
          <th></th>
        </tr>
        </thead>
        <tbody  class="odd table table-striped table-bordered table-hover dataTable no-footer">
        <tr
          ng-repeat="(uuid,job) in jobList.jobs | orderObjectBy:state.filterAttr:state.filterReverse"
          ng-if="!job.dropped"
          ng-class="{accordion:true}" ng-click="state.selectedJob = job"
          ng-dblclick="state.showSteps= !state.showSteps; state.selectedJob = job"
          style="cursor: pointer"
          class="{{job==state.selectedJob? 'tr-highlight': ''}} table-bordered">
          <td style="max-width: 350px;word-wrap: break-word;word-break: normal;">
            {{ job.name}}
          </td>
          <td>{{ job.related_cube}}</td>
          <td>
            <div ng-switch on="job.job_status">
              <div ng-switch-when="ERROR" tooltip="ERROR">
                <progressbar class="progress-striped" value="job.progress" type="danger">
                  {{job.job_status}}
                </progressbar>
              </div>
              <div ng-switch-when="FINISHED" tooltip="FINISHED">
                <progressbar class="progress-striped" value="job.progress" type="success">
                  {{job.progress}}%
                </progressbar>
              </div>
              <div ng-switch-when="PENDING" tooltip="PENDING">
                <progressbar class="progress-striped active" value="job.progress"
                             type="pending">{{job.job_status}}
                </progressbar>
              </div>
              <div ng-switch-when="RUNNING" tooltip="RUNNING">
                <progressbar class="progress-striped active" value="job.progress"
                             type="info">{{job.progress | number:2}}%
                </progressbar>
              </div>
              <div ng-switch-when="STOPPED" tooltip="STOPPED">
                <progressbar class="progress-striped" value="job.progress"
                             type="pending">{{job.progress | number:2}}%
                </progressbar>
              </div>
              <div ng-switch-when="DISCARDED" tooltip="DISCARDED">
                <progressbar class="progress-striped" value="job.progress" type="inverse">
                  {{job.progress | number:2}}%
                </progressbar>
              </div>
            </div>
          </td>
          <td>{{ job.last_modified == 0 ? '' : (job.last_modified |utcToConfigTimeZone)}}</td>
          <td>{{(job.duration/60 | number:2) + ' mins'}}</td>
          <td>
            <div class="btn-group">
              <button type="button" class="btn btn-default btn-xs dropdown-toggle"
                      data-toggle="dropdown">
                Action <span class="ace-icon fa fa-caret-down icon-on-right"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li ng-if="job.job_status=='ERROR' || job.job_status=='STOPPED'"><a ng-click="resume(job)">Resume</a></li>
                <li ng-if="job.job_status=='RUNNING' || job.job_status=='NEW' || job.job_status=='PENDING'">
                  <a ng-click="pause(job)">Pause</a>
                </li>
                <li ng-if="job.job_status=='RUNNING' || job.job_status=='NEW' || job.job_status=='PENDING' || job.job_status=='ERROR' || job.job_status=='STOPPED'">
                  <a ng-click="cancel(job)">Discard</a>
                </li>
                <li ng-if="job.job_status=='FINISHED' || job.job_status=='DISCARDED'">
                  <a ng-click="drop(job)">Drop</a>
                </li>
                <li>
                  <a ng-click="diagnosisJob(job)" tooltip="Download Diagnosis Info For This Job">Diagnosis</a>
                </li>
              </ul>
            </div>
          </td>
          <td>
            <button class="btn btn-info btn-xs" ng-click="state.showSteps= !state.showSteps; state.selectedJob = job">
              <i class="fa fa-chevron-circle-right"></i>
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <kylin-pagination data="jobList.jobs" load-func="list" action="action"/>
  </div>
  <div class="col-xs-4" ng-if="state.showSteps">
    <div ng-include src="'partials/jobs/job_steps.html'"></div>
  </div>
</div>
