<!--
* 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 ng-controller="CubeRefreshCtrl">
  <ng-form name="forms.refresh_setting_form">
    <div>

      <div class="form-group">

        <table style="margin-left:42px; width:92%"
               class="table table-hover list">
          <tr>
            <td>
              <!--Cube Size-->
              <div class="form-group">
                <div class="row middle-popover">
                  <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default">
                    <b>Auto Merge Thresholds</b>
                    <i class="fa fa-info-circle" kylinpopover title="Auto Merge Thresholds" template="autoMergeThresholdsTip.html" placement="right"></i>
                  </label>

                  <div class="col-xs-12 col-sm-6">
                    <!--retention range is store in CubeInstance, will convert to cubeMetaFrame for front end-->
                    <div class="row" ng-if="state.mode=='edit'">
                      <table class="table">
                        <tbody>
                        <tr ng-repeat="timeRange in _auto_merge_time_ranges track by $index">
                          <td class="col-xs-4">
                            <select ng-if="timeRange.type=='hours'"
                                    chosen ng-model="timeRange.range"
                                    ng-options="rangeTypes as rangeTypes for rangeTypes in [0.5,1,2,4,8] "
                                    ng-change="refreshAutoMergeTimeRanges(_auto_merge_time_ranges,$index,timeRange)"
                                    style="width: 100% !important;"
                                    data-placeholder="hours range"
                                    class="chosen-select">
                            </select>
                            <input type="text" ng-if="timeRange.type=='days'"
                                   onInput="this.value=this.value.replace(/[^0-9]/g, '')"
                                   ng-change="refreshAutoMergeTimeRanges(_auto_merge_time_ranges,$index,timeRange)"
                                   class="form-control input-sm" placeholder="days range" ng-model="timeRange.range">
                          </td>
                          <td class="col-xs-4">
                            <select chosen ng-model="timeRange.type"
                                    ng-options="rangeTypes as rangeTypes for rangeTypes in ['hours','days'] "
                                    ng-change="refreshAutoMergeTimeRanges(_auto_merge_time_ranges,$index,timeRange)"
                                    style="width: 200px !important;"
                                    data-placeholder="select a project"
                                    class="chosen-select">
                            </select>
                          </td>
                          <td>
                            <button class="btn btn-xs btn-info" ng-show="state.mode=='edit'"
                                    ng-click="removeTimeRange(_auto_merge_time_ranges,$index, timeRange)">
                              <i class="fa fa-minus"></i>
                            </button>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                      <button class="btn btn-xs btn-info" ng-show="state.mode=='edit'"
                              ng-click="addNewMergeTimeRange()">
                        New Thresholds <i class="fa fa-plus"></i>
                      </button>
                    </div>
                    <div class="row" ng-if="state.mode=='view'">
                      <table class="table">
                        <tbody>
                        <tr ng-repeat="timeRange in cubeMetaFrame.auto_merge_time_ranges | orderBy:'valueOf()' track by $index ">
                          <td>
                            {{timeRange | timeRangeFormat}}
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                  </div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td>
              <!--Cube Size-->
              <div class="form-group">
                <div class="row middle-popover">
                  <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default">
                    <b>Volatile Range</b> <i class="fa fa-info-circle" title="Volatile Range" kylinpopover template="volatileRangeTip.html" placement="right"></i>
                  </label>

                  <div class="col-xs-12 col-sm-6">
                    <!--volatile range is store in CubeInstance, will convert to cubeMetaFrame for front end-->
                    <input type="text" retention-format class="form-control ng-scope ng-pristine ng-valid"
                           placeholder="how many days cube volatile" ng-model="cubeMetaFrame.volatile_range"
                           ng-if="state.mode=='edit'">
                    <span ng-if="state.mode=='view'">{{cubeMetaFrame.volatile_range | millisecondsToDay}}</span>
                  </div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td>
              <!--Cube Size-->
              <div class="form-group">
                <div class="row middle-popover">
                  <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default">
                    <b>Retention Threshold</b> <i class="fa fa-info-circle" title="Retention Threshold" kylinpopover template="retentionTip.html" placement="right"></i>
                  </label>

                  <div class="col-xs-12 col-sm-6">
                    <!--retention range is store in CubeInstance, will convert to cubeMetaFrame for front end-->
                    <input type="text" retention-format class="form-control ng-scope ng-pristine ng-valid"
                           placeholder="how many days cube retention" ng-model="cubeMetaFrame.retention_range"
                           ng-if="state.mode=='edit'">
                    <span ng-if="state.mode=='view'">{{cubeMetaFrame.retention_range | millisecondsToDay}}</span>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <div class="row">
                  <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Start Date</b></label>

                  <div class="col-xs-12 col-sm-6"
                       ng-class="metaModel.model.partition_desc.partition_date_column!=null&& cubeMetaFrame.partition_date_start==null?'has-error':''">

                    <!--<input type="text" class="form-control" datepicker-popup="yyyy-MM-dd" datepicker-timezone-->
                           <!--ng-model="cubeMetaFrame.partition_date_start" ng-if="state.mode=='edit'"-->
                           <!--placeholder="Click to choose start date..." is-open="opened"/>-->
                    <div ng-if="state.mode=='edit'" class="dropdown" >
                      <a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#" href="#">
                        <div class="input-group">
                          <input type="text" class="form-control" date-timepicker-timezone data-ng-model="cubeMetaFrame.partition_date_start" ng-disabled="instance.status=='READY'">
                          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                      </a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" ng-if="!(instance.status=='READY')">
                        <datetimepicker  data-ng-model="cubeMetaFrame.partition_date_start" data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }" />
                      </ul>
                    </div>

                    <small class="help-block"
                           ng-show="metaModel.model.partition_desc.partition_date_column!=null&& cubeMetaFrame.partition_date_start==null">
                      Please input start date when partition date column is defined in model.
                    </small>
                    <!--view model will convert use filter-->
                    <span ng-if="state.mode=='view' && metaModel.model.partition_desc.partition_date_column">{{(cubeMetaFrame.partition_date_start)|reverseToGMT0 }}</span>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>

      </div>

    </div>
  </ng-form>
</div>

<script type="text/ng-template" id="autoMergeThresholdsTip.html">
    <p>The thresholds will be checked to see if any consecutive segments' time range has reached a threshold. For example the [7 days, 30 days] will result in daily incremental segments being merged every 7 days, and five 7-days segments will get merged as they exceed 30 days.</p>
</script>

<script type="text/ng-template" id="volatileRangeTip.html">
  <p>By default it is '0', which will auto merge all possible cube segments, or 'Auto Merge' will not merge latest [Volatile Range] days cube segments.</p>
</script>

<script type="text/ng-template" id="retentionTip.html">
<p>By default it is '0', which will keep all segments, or will keep latest [Retention Threshold] days cube segments.</p>
</script>
