<!--
* 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="container">
  <div class="row" style="margin-top:22px">
    <div class="col-sm-4 col-sm-offset-8 text-right" style="margin-bottom: 10px;">
      <a ng-href="http://{{receiverServer}}:9090/kylin/api/system/threadDump" target="_blank"><button type="button" class="btn  btn-primary btn-xs"><i tooltip="ThreadDump" class="fa fa-camera"></i> Thread Dump</button></a>
      <a ng-href="http://{{receiverServer}}:9090/kylin/logs" target="_blank"><button type="button" class="btn btn-primary btn-xs"><i tooltip="log" class="fa fa-history"></i> Logs</button></a>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4" ng-repeat="(cubeName, assignment) in receiverStats.assignments">
      <div class="box box-solid box-primary">
        <div class="box-header with-border" style="padding:5px">
          <h3 class="box-title">{{cubeName | limitTo: 20}}{{cubeName > 20 ? '...' : ''}}</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" style="padding: 3px 5px;" ng-click="moreDetails(receiverStats.cube_stats[cubeName], cubeName)">
              <i class="fa fa-info-circle"></i>
            </button>
          </div>
        </div>
        <div class="box-body">
          <div class="row" ng-if="receiverStats.cube_stats[cubeName]">
            <div class="col-sm-12" ng-if="receiverStats.cube_stats[cubeName].consumer_stats" ng-init="consumerStats = receiverStats.cube_stats[cubeName].consumer_stats">
              <div class="col-sm-4 text-right">
                State: 
              </div>
              <div class="col-sm-8">
                <i ng-if="consumerStats.stopped" class="fa fa-stop"></i>
                <i ng-if="!consumerStats.stopped && consumerStats.paused" class="fa fa-pause text-gray"></i>
                <i ng-if="!consumerStats.stopped && !consumerStats.paused" class="fa fa-play text-light-blue"></i>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="col-sm-4 text-right">
                Assignment: 
              </div>
              <div class="col-sm-8">
                <span class="label label-primary" style="margin-right: 5px; display: inline-block;" ng-repeat="partitionBaseInfo in assignment">{{partitionBaseInfo.partition_id}}</span>
              </div>
            </div>
          </div>
          <div class="row" ng-if="receiverStats.cube_stats[cubeName]">
            <div class="col-sm-12" ng-if="receiverStats.cube_stats[cubeName].consumer_stats" ng-init="consumerStats = receiverStats.cube_stats[cubeName].consumer_stats">
              <div class="col-sm-4 text-right">
                Partition:
              </div>
              <div class="col-sm-8">
                <a ng-repeat="(partitionId, partitionInfo) in consumerStats.partition_consume_stats" href="javascript:void(0);" kylinpopover placement="left" title="Partition Info" trigger="focus" content="Partition Id: {{partitionId}}</br>Offset Info: {{consumerStats[partitionId]}}</br>1 Minute Rate: {{partitionInfo.one_min_rate | number:0}} msg/s</br>5 Minute Rate: {{partitionInfo.five_min_rate | number:0}} msg/s</br>15 Minute Rate: {{partitionInfo.fifteen_min_rate | number:0}} msg/s</br>AVG Rate: {{partitionInfo.avg_rate | number:0}} msg/s</br>Total Consume: {{partitionInfo.total_consume}}"><i class="fa fa-list-ul" style="color:#3c8dbc; margin-right: 5px;"></i></a>
              </div>
            </div>
          </div>
          <div class="row" ng-if="receiverStats.cube_stats[cubeName]">
            <div ng-if="receiverStats.cube_stats[cubeName].segment_stats" ng-init="segmentStats = receiverStats.cube_stats[cubeName].segment_stats" class="col-sm-12">
              <div class="col-sm-4 text-right">
                Segment:
              </div>
              <div class="col-sm-8">
                <a href="javascript:void(0);" ng-repeat="(segmentName, segmentInfo) in segmentStats" kylinpopover placement="top" class="segment" title="Segment Info" trigger="focus" content="segment name: {{segmentName}}</br>segment state: {{segmentInfo.segment_state}}</br>fragment number: {{segmentInfo.store_stats.num_fragments}}</br>row number in memory: {{segmentInfo.store_stats.num_rows_in_mem}}</br>last event time: {{segmentInfo.store_stats.latest_event_time | reverseToGMT0}}</br>latest event latency: {{segmentInfo.store_stats.latest_event_latency}}ms"><i class="fa fa-database" style="color: #86bad8; margin-right: 5px;" ng-class="{'active': segmentInfo.segment_state === 'ACTIVE'}"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/ng-template" id="receiverCubeDetails.html">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" ng-click="cancel()">
      <i class="fa fa-close"></i>
    </button>
    <h4 class="modal-title">{{cubeName}}</h4>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-sm-12">
        Ingest Info:
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-3 text-right">
          Total Ingest:
        </div>
        <div class="col-sm-3">
          {{receiverCubeStats.total_ingest}}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-3 text-right">
          Total Exception Events:
        </div>
        <div class="col-sm-3">
          {{receiverCubeStats.consumer_stats.total_exception_events}}
        </div>
        <div class="col-sm-3 text-right">
          Total Incoming Events:
        </div>
        <div class="col-sm-3">
          {{receiverCubeStats.consumer_stats.total_incoming_events}}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-3 text-right">
          Latest Event Time:
        </div>
        <div class="col-sm-3">
          {{receiverCubeStats.latest_event_time | reverseToGMT0}}
        </div>
        <div class="col-sm-3 text-right">
          Latest Event Ingest Time:
        </div>
        <div class="col-sm-3">
          {{receiverCubeStats.latest_event_ingest_time | reverseToGMT0}}
        </div>
      </div>
    </div>
    <hr ng-if="receiverCubeStats.long_latency_info">
    <div class="row" ng-if="receiverCubeStats.long_latency_info">
      <div class="col-sm-12">
        Latency Info:
      </div>
    </div>
    <hr ng-if="receiverCubeStats.long_latency_info">
    <div class="row" ng-if="receiverCubeStats.long_latency_info" ng-init="longLatencyInfo = receiverCubeStats.long_latency_info">
      <div class="col-sm-12">
        <div class="col-sm-3 text-right">
          Total Long Latency Events:
        </div>
        <div class="col-sm-3">
          {{longLatencyInfo.total_long_latency_events}}
        </div>
      </div>
    </div>
    <div class="row" ng-if="receiverCubeStats.long_latency_info" ng-init="longLatencyInfo = receiverCubeStats.long_latency_info">
      <div class="col-sm-12" ng-repeat="(segmentName, latencyEventNumber) in longLatencyInfo.long_latency_segment_events">
        <div class="col-sm-3 text-right" ng-if="!$even">
          {{segmentName}}
        </div>
        <div class="col-sm-3" ng-if="!$even">
          {{latencyEventNumber}}
        </div>
        <div class="col-sm-3 text-right" ng-if="$even">
          {{segmentName}}
        </div>
        <div class="col-sm-3" ng-if="$even">
          {{latencyEventNumber}}
        </div>
      </div>
    </div>
  </div>
</script>