zeppelin-web/src/app/jobmanager/jobmanager.html

<!--
Licensed 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 id="job-manager-header" class="job-manager-header">
  <div class="header">
    <div class="row">
      <div class="col-md-12">
        <h3 class="new_h3">
          Job
        </h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        You can monitor the status of notebook and navigate to note or paragraph.
      </div>
    </div>
  </div>

  <hr style="margin-top: 15px; margin-bottom: 15px;" />

  <div class="row">
    <!-- search tools (input, drop-down, sorting) -->
    <div class="job-search-tool">
      <div class="form-inline">
        <span class="btn-group">
          <!-- search tool: input -->
          <div class="input-group search-input">
            <input class="form-control btn-xs"
                   placeholder="&#xf002 Search jobs..."
                   type="text"
                   ng-model="filterConfig.noteNameFilterValue"
                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 300, 'blur': 0 } }"
                   ng-change="filterJobs(jobs, filterConfig)" />
          </div>

          <!-- search tool: default interpreter dropdown -->
          <div class="btn btn-default dropdown-toggle"
               data-toggle="dropdown">
            <span>
              <span class="dropdown-text-desc">Interpreter: </span>
              <span class="dropdown-text-value">{{filterValueToName(filterConfig.interpreterFilterValue)}}</span>
              <span class="caret" style="margin-top: 8px; float: right;"></span>
              <span style="clear: both;"></span>
            </span>
          </div>
          <ul class="dropdown-menu dropdown-menu-right search-tool-dropdown-content" role="menu">
           <li ng-repeat="interpreter in defaultInterpreters">
             <a ng-click="setFilterValue(interpreter.value)"
                ng-style="(filterValueToName(interpreter.value) === 'ALL' || filterValueToName(interpreter.value) === 'NONE') ? { 'font-weight': 500 } : {}"
                class="dropdown-list-value">
               {{filterValueToName(interpreter.value)}}
             </a>
           </li>
          </ul>

        </span>

        <span class="btn-group">
          <!-- search tool: date dropdown -->
          <div class="date-sort-button btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span>
              <span class="dropdown-text-desc">Sort: </span>
              <span class="dropdown-text-value">{{sorter.currentDateSorter}}</span>
              <span class="caret" style="margin-top: 8px; float: right;"></span>
              <span style="clear: both;"></span>
            </span>
          </div>
          <ul class="dropdown-menu dropdown-menu-right search-tool-dropdown-content" role="menu">
           <li ng-repeat="dateSorter in sorter.availableDateSorter">
             <a ng-click="setJobDateSorter(dateSorter)" class="dropdown-list-value">
               {{dateSorter}}
             </a>
           </li>
          </ul>
        </span>
        <span class="job-counter">
          <span class="job-counter-label">Total: </span>
          <span class="job-counter-value">{{filteredJobs.length}}</span>
        </span>
      </div>
    </div>

    <!-- job icon descriptions -->
    <div class="job-icon-desc-container hidden-xs hidden-sm hidden-md">
      <span ng-repeat="jobStatus in ['READY', 'FINISHED', 'ABORT', 'ERROR','PENDING','RUNNING']">
        <span style="margin-right: 2px;">
          <i class="job-desc-icon"
             ng-style="{'color': getJobColorByStatus(jobStatus)}"
             ng-class="getJobIconByStatus(jobStatus)" ></i>
          {{jobStatus}}
        </span>
      </span>
    </div>

    <div style="clear: both;"></div>

  </div>
</div>

<div>
  <div class="note-jump"></div>
  <div ng-if="!isFilterLoaded" class="paragraph-col">
    <div class="job-space box job-margin text-center">
      <i style="color: blue" class="fa fa-spinner spinAnimation"></i>
      Loading...
    </div>
  </div>
  <div ng-if="filteredJobs.length > 0"
       ng-repeat="note in getJobsInCurrentPage(filteredJobs)"
       class="paragraph-col">
    <div class="job-space box job-margin">
      <job note="note"></job>
    </div>
  </div>
  <div ng-if="isFilterLoaded === false && filteredJobs.length <= 0"
       class="paragraph-col">
    <div class="job-space box job-margin text-center">No Job found</div>
  </div>

  <!-- pagination -->
  <div class="job-pagination-container">
    <ul uib-pagination class="pagination-sm"
        total-items="filteredJobs.length"
        ng-model="pagination.currentPage"
        items-per-page="pagination.itemsPerPage"
        boundary-links="true" rotate="false"
        max-size="pagination.maxPageCount"
        previous-text="&lsaquo;" next-text="&rsaquo;"
        first-text="&laquo;" last-text="&raquo;"></ul>
  </div>

</div>