<!--
* 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="row" style="margin-top:15px;" ng-controller="BadQueryCtrl">

  <!--No Query-->
  <div ng-if="!bqstate.loading && badQueryList.length==0">
    <div ng-if="projectModel.selectedProject==null" no-result text="No project selected"></div>
    <div ng-if="projectModel.selectedProject!==null" no-result text="No Slow Query."></div>
  </div>
  <!--Loading Queries-->
  <div ng-if="bqstate.loading">
    <loading text="Loading Queries ..."></loading>
  </div>
  <!--Queries Table Content-->
  <table ng-if="badQueryList.length>0" class="table table-striped table-bordered table-hover dataTable no-footer">
    <thead>
    <tr style="cursor: pointer">
      <th ng-repeat="queryitem in jobConfig.queryitems"
          ng-click="bqstate.filterAttr= queryitem.attr;bqstate.reverseColumn=queryitem.attr;bqstate.filterReverse=!bqstate.filterReverse; ">
        {{queryitem.name}}
        <i ng-if="bqstate.reverseColumn!= queryitem.attr"
           class="fa fa-unsorted"></i>
        <i ng-if="bqstate.reverseColumn== queryitem.attr && !bqstate.filterReverse"
           class="fa fa-sort-asc"></i>
        <i ng-if="bqstate.reverseColumn== queryitem.attr && bqstate.filterReverse"
           class="fa fa-sort-desc"></i>
      </th>
    </tr>
    </thead>
    <tbody  class="odd table table-striped table-bordered table-hover dataTable no-footer">
    <tr
      ng-repeat="bquery in badQueryList | orderObjectBy:bqstate.filterAttr:bqstate.filterReverse"
      ng-class="{accordion:true}" ng-click="bqstate.selectedQuery = bquery"
      style="cursor: pointer"
      class="{{bquery==bqstate.selectedQuery? 'tr-highlight': ''}} table-bordered">
      <td style="max-width: 200px;word-wrap: break-word;word-break: normal;">
        {{bquery.server}}
      </td>
      <td>{{bquery.user}}</td>
      <td style="max-width: 350px;word-wrap: break-word;word-break: normal;">{{bquery.sql}}</td>
      <td>
        {{bquery.adj}}
      </td>
      <td>{{bquery.running_seconds + '(s)'}}</td>
      <td>{{bquery.start_time |utcToConfigTimeZone}}</td>
      <td>
        {{bquery.last_modified |utcToConfigTimeZone}}
      </td>
      <td>
        {{bquery.thread}}
      </td>
    </tr>
    </tbody>
  </table>
</div>
