<!--
  #%L
  thinkbig-ui-operations-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  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.
  #L%
  -->
<card-layout class="centered">
  <header-section layout="row">
    <span class="card-title kpi-header">Feed Statistics</span>
    <span flex></span>

    <div layout="column">
      <span class="hint">{{vm.lastRefreshTime | date:'HH:mm:ss'}}</span>
      <span class="md-caption">Last Refreshed</span>
    </div>
  </header-section>


  <body-section>
    <div ng-if="vm.dataLoaded" layout-padding>
      <div layout="row">
        <md-input-container class="md-block layout-padding-top-bottom">
          <label class="md-container-ignore label-small layout-padding-top">Time Frame</label>
          <md-select ng-model="vm.timeFrame" ng-change="vm.onTimeFrameChange()" aria-label="Rule Type">
            <md-option value="{{opt.value}}" ng-repeat="opt in vm.timeFrameOptions track by opt.value">{{ opt.label }}</md-option>
          </md-select>
        </md-input-container>
        <span flex></span>
        <div flex="20" class="md-block layout-padding-top-bottom" ng-if="vm.showProcessorChartLoading || vm.showFeedTimeChartLoading">
          <div layout="column">
            <span style="padding-top:30px;">&nbsp;</span>
            <md-progress-linear md-mode="indeterminate"></md-progress-linear>
          </div>

        </div>
      </div>

      <nvd3 flex options="vm.statusPieChartOptions" data="vm.statusPieChartData" api="vm.statusPieChartApi"></nvd3>
      <div layout="row" flex>
        <div layout="column" flex="25">
          <span class="hint">{{vm.flowsStarted}}</span>
          <span class="md-caption">Flows Started</span>
        </div>
        <div layout="column" flex="25">
          <span class="hint">{{vm.flowsFinished}}</span>
          <span class="md-caption">Flows Finished</span>
        </div>
        <div layout="column" flex="25">
          <span class="hint">{{vm.flowsFailed}}</span>
          <span class="md-caption">Flows Failed</span>
        </div>
        <div layout="column" flex="25">
          <span class="hint">{{vm.avgFlowDuration}}</span>
          <span class="md-caption">Flows Job Duration (sec)</span>
        </div>
      </div>

      <nvd3 options="vm.feedChartOptions" data="vm.feedChartData" api="vm.feedChartApi"></nvd3>


      <md-input-container class="md-block layout-padding-top-bottom">
        <label class="md-container-ignore label-small layout-padding-top">Processor Metric</label>
        <md-select ng-model="vm.selectedProcessorStatisticFunction" ng-change="vm.onProcessorChartFunctionChanged()" aria-label="Rule Type">
          <md-option value="{{opt}}" ng-repeat="opt in vm.processorStatsFunctions">{{ opt }}</md-option>
        </md-select>
      </md-input-container>
      <div flex layout="row" layout-align="start end">
        <span flex>Sum {{vm.selectedProcessorStatisticFunction}} is {{vm.totalProcessorSelectedFunctionValue}}</span>
        <span flex="20" ng-if="vm.showProcessorChartLoading">
          <md-progress-linear md-mode="indeterminate"></md-progress-linear>
        </span>
      </div>
      <nvd3 flex options="vm.processorDurationChartOptions" data="vm.processorDurationChartData" api="vm.chartApi" config="{deepWatchOptions:true}"></nvd3>
    </div>
    <div ng-if="!vm.dataLoaded" class="kpi-loading">
      <md-progress-circular md-mode="indeterminate" md-diameter="96"></md-progress-circular>
    </div>

  </body-section>
</card-layout>
