<!--
* 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="CubeAdvanceSettingCtrl">
    <ng-form name="forms.cube_setting_form">
      <div>
        <div class="form-group">
          <h3 style="margin-left:42px;">Aggregation Groups </h3>
          <div style="margin-left:22px;">
            <div class="box-body">
              <div class="col-xs-12">
                Visit <a href="http://kylin.apache.org/blog/2016/02/18/new-aggregation-group" target="_blank">aggregation group</a> for more about aggregation group.
              </div>
            </div>
          </div>
          <table style="margin-left:42px; width:92%"
                 ng-if="cubeMetaFrame.aggregation_groups.length > 0"
                 class="table table-hover list">
            <tr class="row">
              <th class="col-xs-1">ID</th>
              <th class="col-xs-3">
                <span>Aggregation Groups</span>
                <span style="margin-left:42px">
                  <i kylinpopover placement="left" title="Max Dimension Combination" template="dimCapTip.html" class="fa fa-info-circle"></i>
                  Max Dimension Combination:
                  <input onInput="this.value=this.value.replace(/[^0-9]/g, '')" type="text" ng-model="dim_cap" ng-change="changeDimCap(dim_cap)" ng-disabled="state.mode !== 'edit'" style="margin-left:5px; width:20px;">
                </span>
              </th>
              <th></th>
              <th ng-if="state.mode=='edit'" class="col-xs-1"></th>
            </tr>

            <tr ng-repeat="aggregation_group in cubeMetaFrame.aggregation_groups track by $index" ng-init="rowIndex = $index" class="row">
              <td class="col-xs-1">
                <!-- ID -->
                <b>{{($index + 1)}}</b>
              </td>
              <td class="col-xs-11">
                <table class="table">
                  <tr class="row">
                    <td class="col-xs-3" style="min-width:130px;">
                      Includes
                    </td>
                    <td class="col-xs-8">
                      <!-- Dimensions -->

                      <ui-select
                        autofocus="true"
                        close-on-select="false"    ng-disabled="instance.status=='READY'"
                        on-select="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"
                        on-remove="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"
                        ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="aggregation_group.includes">
                        <ui-select-match placeholder="Select Column...">{{$item.column}}</ui-select-match>
                        <ui-select-choices
                          repeat="rowkey_column.column as rowkey_column in cubeMetaFrame.rowkey.rowkey_columns | filter:$select.search">
                          {{rowkey_column.column}}
                        </ui-select-choices>
                      </ui-select>
                      <p ng-if="state.mode=='view'">
                        {{aggregation_group.includes}}</p>
                    </td>
                    <td class="col-xs-1">
                    </td>
                  </tr>
                  <tr class="row">
                    <td class="col-xs-3">
                      Mandatory Dimensions
                    </td>
                    <td class="col-xs-8">
                      <ui-select
                        close-on-select="false"
                        autofocus="true"       ng-disabled="instance.status=='READY'"
                        on-select="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"
                        on-remove="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"
                        ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="aggregation_group.select_rule.mandatory_dims">
                        <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match>
                        <ui-select-choices
                          repeat="column in aggregation_group.includes | filter:$select.search">
                          {{column}}
                        </ui-select-choices>
                      </ui-select>

                      <p ng-if="state.mode=='view'">
                        {{aggregation_group.select_rule.mandatory_dims}}</p>
                    </td>
                    <td class="col-xs-1">
                    </td>
                  </tr>
                  <tr class="row">
                    <td class="col-xs-3">
                      Hierarchy Dimensions
                    </td>
                    <td class="col-xs-9">
                      <table class="table">
                        <tr class="row" ng-repeat="hierarchyDims in aggregation_group.select_rule.hierarchy_dims">
                          <td class="col-xs-10">
                            <ui-select
                              close-on-select="false"
                              autofocus="true"      ng-disabled="instance.status=='READY'"
                              on-select="refreshAggregationHierarchy(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,hierarchyDims)"
                              on-remove="refreshAggregationHierarchy(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,hierarchyDims)"
                              ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="hierarchyDims">
                              <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match>
                              <ui-select-choices
                                repeat="column in aggregation_group.includes | filter:$select.search">
                                {{column}}
                              </ui-select-choices>
                            </ui-select>
                            <p ng-if="state.mode=='view'">
                              {{hierarchyDims}}</p>
                          </td>
                          <td class="col-xs-2">
                            <button class="btn btn-sm btn-info"  ng-disabled="instance.status=='READY'"
                                    ng-click="removeHierarchy(aggregation_group,hierarchyDims)"
                                    ng-show="state.mode=='edit'"><i class="fa fa-minus"></i>
                            </button>
                          </td>
                        </tr>
                        <tr class="row">
                          <td class="col-xs-12">
                            <button class="btn btn-sm btn-info"     ng-disabled="instance.status=='READY'"
                                    ng-click="addNewHierarchy(aggregation_group)" ng-show="state.mode=='edit'">New Hierarchy<i class="fa fa-plus"></i>
                            </button>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr class="row">
                    <td class="col-xs-3">
                      Joint Dimensions
                    </td>
                    <td class="col-xs-9">
                      <table class="table">
                        <tr class="row" ng-repeat="jointDims in aggregation_group.select_rule.joint_dims">
                          <td class="col-xs-10">
                            <!-- Dimensions -->
                            <ui-select
                              close-on-select="false"
                              autofocus="true"    ng-disabled="instance.status=='READY'"
                              on-select="refreshAggregationJoint(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,jointDims)"
                              on-remove="refreshAggregationJoint(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,jointDims)"
                              ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="jointDims">
                              <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match>
                              <ui-select-choices
                                repeat="column in aggregation_group.includes | filter:$select.search">
                                {{column}}
                              </ui-select-choices>
                            </ui-select>
                            <p ng-if="state.mode=='view'">
                              {{jointDims}}</p>
                          </td>
                          <td class="col-xs-2">
                            <button class="btn btn-sm btn-info"   ng-disabled="instance.status=='READY'"
                                    ng-click="removeJointDims(aggregation_group,jointDims)"
                                    ng-show="state.mode=='edit'"><i class="fa fa-minus"></i>
                            </button>
                          </td>
                        </tr>
                        <tr class="row">
                          <td class="col-xs-12">
                            <button class="btn btn-sm btn-info"      ng-disabled="instance.status=='READY'"
                                    ng-click="addNewJoint(aggregation_group)" ng-show="state.mode=='edit'">New Joint<i class="fa fa-plus"></i>
                            </button>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
              <td ng-if="state.mode=='edit'" class="col-xs-1">
                <button class="btn btn-xs btn-info"   ng-disabled="instance.status=='READY'"
                        ng-click="removeElement(cubeMetaFrame.aggregation_groups, aggregation_group)"><i
                  class="fa fa-minus"></i>
                </button>
              </td>
            </tr>
          </table>
          <button class="btn btn-sm btn-info" style="margin-left:42px" ng-click="addNewAggregationGroup()"  ng-disabled="instance.status=='READY'"
                  ng-show="state.mode=='edit'">New Aggregation Group<i class="fa fa-plus"></i>
          </button>
        </div>
        <div class="form-group large-popover" >
          <h3 style="margin-left:42px">Rowkeys  <i kylinpopover placement="right" title="Rowkey" template="rowkeyTip.html" class="fa fa-info-circle"></i></h3>
          <div style="padding: 0 42px; word-break: normal;">
            <b>Important: </b>Dimension's position(Rowkey) has impact on query performance. You can drag and drop to adjust the sequence. In short, put filtering dimension before non-filtering dimension, and put high cardinality dimension before low cardinality dimension.
          </div>
          <div style="margin-left:42px">
              <div class="box-body">
                <table style="width:92%;position:relative"
                       ng-if="cubeMetaFrame.rowkey.rowkey_columns.length > 0"
                       class="table table-hover table-bordered list">
                  <thead>
                  <tr>
                    <th>ID</th>
                    <th class="col-xs-5">Column</th>
                    <th>Shard By</th>
                    <th>Cardinality</th>
                  </tr>
                  </thead>

                  <tbody ng-if="state.mode!=='edit'" ng-model="convertedRowkeys">
                <!--<tbody ng-if="state.mode!='edit'" ng-model="convertedRowkeys">-->

                <tr ng-repeat="rowkey_column in convertedRowkeys track by $index">

                  <td>
                    <!-- ID -->
                    <span class="ng-binding">{{($index + 1)}}</span>
                  </td>

                  <td>
                    <!--Column Name -->
                    <span>{{rowkey_column.column}}</span>
                  </td>

                  <td>
                   <span>{{rowkey_column.isShardBy}}</span>
                  </td>

                  <td>
                    <span>{{rowkey_column.cardinality | number}}</span>
                  </td>
                </tr>
                </tbody>


                  <tbody ng-show="state.mode=='edit'" ui-sortable="sortableOptions" ng-model="convertedRowkeys">
                  <!--<tbody ng-if="state.mode!='edit'" ng-model="convertedRowkeys">-->

                  <tr ng-repeat="rowkey_column in convertedRowkeys track by $index"
                      class="sort-item">

                    <td>
                      <!-- ID -->
                      <span class="ng-binding badge">{{($index + 1)}}</span>
                    </td>
                    <td>
                      <!--Column Name -->
                      <input type="text" class="form-control" placeholder="Column Name.."
                             ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column)"  ng-disabled="true"
                             tooltip="rowkey column name.." tooltip-trigger="focus"
                             ng-model="rowkey_column.column" class="form-control">
                    </td>

                    <td>
                      <select  style="width:180px;"
                              chosen ng-model="rowkey_column.isShardBy"
                              tooltip="false by default"     ng-disabled="instance.status=='READY'"
                              data-placeholder="false by default"
                              ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column,true)"
                              ng-options="dt as dt for dt in cubeConfig.rowKeyShardOptions">
                        <option value=""></option>
                      </select>
                      <small class="help-block red" ng-show="state.mode=='edit' && rule.shardColumnAvailable==false && rowkey_column.isShardBy == true">at most one 'shard by' column is allowed.</small>
                    </td>
                  </tr>

                  <td>
                    <span>{{rowkey_column.cardinality | number}}</span>
                  </td>
                  </tbody>
                </table>
              </div>
          </div>
        </div>
        <!--Edit Mandatory Cuboids-->
        <div class="form-group large-popover" ng-if="state.mode=='edit' || (cubeMetaFrame.mandatory_dimension_set_list.length > 0 && state.mode!=='edit')">
          <h3 style="margin-left:42px">Mandatory Cuboids</h3>
          <div style="margin-left:42px;">
            <div class="box-body">
              <!-- view mode-->
              <table ng-if="cubeMetaFrame.mandatory_dimension_set_list.length > 0 && state.mode!=='edit'" class="table table-hover table-bordered list" style="table-layout: fixed;width:92%;">
                <thead>
                  <tr>
                    <th>Cuboids</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="dimensionSet in cubeMetaFrame.mandatory_dimension_set_list">
                    <td>
                      <p>{{dimensionSet}}</p>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- edit mode-->
              <table ng-if="state.mode=='edit'" class="table table-hover table-bordered list" style="table-layout: fixed;width:92%;">
                <thead>
                  <tr>
                    <th>Cuboids</th>
                    <th style="width:5%"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="dimensionSet in cubeMetaFrame.mandatory_dimension_set_list">
                    <td>
                      <ui-select multiple ng-model="dimensionSet" theme="bootstrap" sortable="true" close-on-select="false" class="form-control">
                        <ui-select-match placeholder="Select Dimension...">{{$item.column}}</ui-select-match>
                        <ui-select-choices repeat="dimension.column as dimension in cubeMetaFrame.rowkey.rowkey_columns | filter:$select.search">
                          <div ng-bind-html="dimension.column | highlight: $select.search"></div>
                        </ui-select-choices>
                      </ui-select>
                    </td>
                    <td>
                      <button class="btn btn-xs btn-info" ng-click="removeDimensionSet($index)"><i class="fa fa-minus"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <ui-select multiple ng-model="mandatoryDimensionSet.select" theme="bootstrap" sortable="true" close-on-select="false" class="form-control">
                        <ui-select-match placeholder="Select Dimension...">{{$item.column}}</ui-select-match>
                        <ui-select-choices repeat="dimension.column as dimension in cubeMetaFrame.rowkey.rowkey_columns | filter:$select.search">
                          <div ng-bind-html="dimension.column | highlight: $select.search"></div>
                        </ui-select-choices>
                      </ui-select>
                    </td>
                    <td>
                      <button class="btn btn-xs btn-info" ng-click="addDimensionSet()"><i class="fa fa-plus"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <label>Import cuboids from file:</label>
                      <input type="file" name="cuboids" id="cuboids" style="display: inline;"/>
                      <button class="btn btn-xs btn-info" ng-click="uploadMandatoryDimensionSetList()">Upload</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--Cube Engine-->
        <div class="form-group large-popover" style="margin-bottom:30px;">
          <h3 style="margin-left:42px;margin-bottom:30px;">Cube Engine  <i kylinpopover placement="right" title="Cube Engine" template="CubeEngineTip.html" class="fa fa-info-circle"></i></h3>
          <div class="row" style="margin-left:42px">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Engine Type :</b></label>
            <div class="col-xs-12 col-sm-6">
              <select style="width: 100%" chosen
                      ng-model="cubeMetaFrame.engine_type"
                      ng-if="state.mode=='edit'"
                      ng-options="et.value as et.name for et in cubeConfig.engineType | filter: isAvailableEngine">
                <option value="">--Select Engine Type--</option>
              </select>
              <span ng-if="state.mode=='view'&&cubeMetaFrame.engine_type==2">MapReduce</span>
              <span ng-if="state.mode=='view'&&cubeMetaFrame.engine_type==4">Spark</span>
              <span ng-if="state.mode=='view'&&cubeMetaFrame.engine_type==6">Spark</span>
              <span ng-if="state.mode=='view'&&cubeMetaFrame.engine_type==5">Flink</span>
            </div>
          </div>
        </div>
<!--        <div class="form-group large-popover">-->
<!--          <h3 style="margin-left:42px">Advanced Dictionaries  <i kylinpopover placement="right" title="Advanced Dictionaries" template="AdvancedDictionariesTip.html" class="fa fa-info-circle"></i></h3>-->
<!--          <div style="margin-left:42px">-->
<!--            <div class="box-body">-->
<!--              <br/>-->
<!--              <table class="table table-striped table-hover">-->
<!--                <thead>-->
<!--                <tr>-->
<!--                  <th>Column</th>-->
<!--                  <th>Builder Class</th>-->
<!--                  <th>Reuse</th>-->
<!--                  <th ng-if="state.mode=='edit'">Actions</th>-->
<!--                </tr>-->
<!--                </thead>-->
<!--                <tbody>-->
<!--                  <tr ng-repeat="dictionaries in cubeMetaFrame.dictionaries | filter: state.measureFilter track by $index">-->
<!--                    <td>-->
<!--                      &lt;!&ndash;Column &ndash;&gt;-->
<!--                      <span>{{dictionaries.column}}</span>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                      &lt;!&ndash;Builder&ndash;&gt;-->
<!--                      <span>{{dictionaries.builder}}</span>-->
<!--                    </td>-->
<!--                    <td>-->
<!--                      &lt;!&ndash;Reuse&ndash;&gt;-->
<!--                      <span>{{dictionaries.model}}.{{dictionaries.cube}}.{{dictionaries.reuse}}</span>-->
<!--                    </td>-->
<!--                    <td ng-if="state.mode=='edit'">-->
<!--                      &lt;!&ndash;Edit Button &ndash;&gt;-->
<!--                      <button class="btn btn-xs btn-info" ng-click="addNewDictionaries(dictionaries, $index)" ng-disabled="instance.status=='READY'">-->
<!--                        <i class="fa fa-pencil"></i>-->
<!--                      </button>-->
<!--                      &lt;!&ndash;Remove Button &ndash;&gt;-->
<!--                      <button class="btn btn-xs  btn-danger" ng-click="removeElement(cubeMetaFrame.dictionaries, dictionaries)" ng-disabled="instance.status=='READY'">-->
<!--                        <i class="fa fa-trash-o"></i>-->
<!--                      </button>-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                </tbody>-->
<!--              </table>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <!--Add Dictionaries Button-->
<!--        <div class="form-group" style="margin-left:42px;">-->
<!--          <button class="btn btn-sm btn-info" ng-click="addNewDictionaries()" ng-show="state.mode=='edit' && !addNew" ng-disabled="instance.status=='READY'">-->
<!--            <i class="fa fa-plus"></i> Dictionaries-->
<!--          </button>-->
<!--       </div>-->
       <!--Edit Dictionary-->
<!--       <ng-form name="edit_mes_form" style="margin-left:42px;">-->
<!--         <div class="box box-solid"  ng-if="addNew" style="margin-left:42px;">-->
<!--           <div class="box-header">-->
<!--             <h4 class="box-title text-info">Edit Dictionaries</h4>-->
<!--           </div>-->
<!--           <div class="box-body">-->
<!--             <div class="row">-->
<!--               <div class="col-xs-12">-->
<!--                 &lt;!&ndash;Column&ndash;&gt;-->
<!--                 <div class="form-group middle-popover">-->
<!--                   <div class="row">-->
<!--                     <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Column</b></label>-->
<!--                     <div class="col-xs-12 col-sm-6">-->
<!--                       <select class="form-control" chosen-->
<!--                               ng-model="newDictionaries.column"-->
<!--                               ng-change="measureReturnTypeUpdate();"-->
<!--                               ng-options="column as column for column in getFactColumns()" required>-->
<!--                         <option value="">&#45;&#45; Select a Column &#45;&#45;</option>-->
<!--                       </select>-->
<!--                     </div>-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 <div class="form-group">-->
<!--                   <div class="row" style="margin-left:5px;">-->
<!--                     <label class="radio-inline ng-binding ng-scope">-->
<!--                       <input type="radio" name="reuse" ng-value=1 ng-model="isReuse"  ng-change="change('builder')"/><b>Builder Class</b>-->
<!--                     </label>-->
<!--                     <label class="radio-inline ng-binding ng-scope">-->
<!--                       <input type="radio" name="reuse"  ng-value=2 ng-model="isReuse" ng-change="change('reuse')"/><b>Reuse Self</b>-->
<!--                     </label>-->
<!--                     &lt;!&ndash; tiretree add&ndash;&gt;-->
<!--                     <label class="radio-inline ng-binding ng-scope">-->
<!--                       <input type="radio" name="reuse"  ng-value=3 ng-model="isReuse" ng-change="change('domain')"/><b>Reuse Global Domain</b>-->
<!--                     </label>-->
<!--                     &lt;!&ndash; tiretree end&ndash;&gt;-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 &lt;!&ndash;Builder&ndash;&gt;-->
<!--                 <div class="form-group" ng-if="isReuse==1" >-->
<!--                   <div class="row">-->
<!--                     <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Builder Class</b></label>-->
<!--                     <div class="col-xs-12 col-sm-6">-->
<!--                       <select class="form-control" chosen-->
<!--                               ng-model="newDictionaries.builder"-->
<!--                               ng-options="item.value as item.name for item in cubeConfig.buildDictionaries"-->
<!--                               required>-->
<!--                         <option value="">&#45;&#45; Select a builder class&#45;&#45;</option>-->
<!--                       </select>-->
<!--                     </div>-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 &lt;!&ndash;Reuse&ndash;&gt;-->
<!--                 <div class="form-group middle-popover" ng-if="isReuse==2" >-->
<!--                   <div class="row">-->
<!--                     <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Reuse</b></label>-->
<!--                     <div class="col-xs-12 col-sm-6">-->
<!--                       <select class="form-control" chosen-->
<!--                               ng-model="newDictionaries.reuse"-->
<!--                               ng-change="measureReturnTypeUpdate();"-->
<!--                               ng-options="column as column for column in getFactColumns()" required>-->
<!--                         <option value="">&#45;&#45; Select a Column &#45;&#45;</option>-->
<!--                       </select>-->
<!--                     </div>-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 &lt;!&ndash; Tiretree global dic model cube table.colname start&ndash;&gt;-->
<!--                 <div class="form-group middle-popover" ng-if="isReuse==3" >-->
<!--                   <div class="row">-->
<!--                     <label class="col-xs-6 col-sm-4 control-label no-padding-right" ng-class="{'has-error':newDictionaries.model==''}">-->
<!--                       <b ng-if="state.mode=='view'">{{dictionaries.model}}</b>-->
<!--                       <input ng-model="newDictionaries.model" placeholder="Reuse Model Name"  required class="form-control" ng-if="state.mode=='edit'"/>-->
<!--                       <small style="font-weight: normal !important;" class="help-block" ng-show="newDictionaries.model==''">Reuse Model Name is required.</small>-->
<!--                     </label>-->
<!--                     <div class="col-xs-6 col-sm-4" ng-class="{'has-error':newDictionaries.cube==''}">-->
<!--                       <input ng-model="newDictionaries.cube" placeholder="Reuse Cube Name" class="form-control" ng-if="state.mode=='edit'" required/>-->
<!--                       <small class="help-block" ng-show="newDictionaries.cube==''">Reuse Cube Name is required.</small>-->
<!--                       <span ng-if="state.mode=='view'">{{dictionaries.cube}}</span>-->
<!--                     </div>-->
<!--                     <div class="col-xs-12 col-sm-4" ng-class="{'has-error':newDictionaries.reuse==''}">-->
<!--                       <input ng-model="newDictionaries.reuse" placeholder="Reuse table.column" class="form-control" ng-if="state.mode=='edit'" required/>-->
<!--                       <small class="help-block" ng-show="newDictionaries.reuse==''">Reuse table.column is required.</small>-->
<!--                       <span ng-if="state.mode=='view'">{{dictionaries.reuse}}</span>-->
<!--                     </div>-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 &lt;!&ndash;end &ndash;&gt;-->
<!--               </div>-->
<!--             </div>-->
<!--           </div>-->
<!--           <div class="box-footer">-->
<!--             <button class="btn btn-sm btn-info" ng-disabled="edit_mes_form.$invalid"-->
<!--                     ng-click="saveNewDictionaries()" ng-show="state.mode=='edit'">OK</button>-->
<!--             <button class="btn btn-link" ng-click="clearNewDictionaries()">Cancel</button>-->
<!--           </div>-->
<!--         </div>-->
<!--         &lt;!&ndash; Advanced Lookup Table&ndash;&gt;-->
<!--         <div class="form-group large-popover" style="margin-bottom:30px;">-->
<!--           <h3 style="margin-left:42px;margin-bottom:30px;">Advanced Snapshot Table  <i kylinpopover placement="right" title="Advanced Snapshot Table" template="AdvanceSnapshotTableTip.html" class="fa fa-info-circle"></i></h3>-->
<!--           <div style="margin-left:42px">-->
<!--             <div class="box-body">-->
<!--               <br/>-->
<!--               <table class="table table-striped table-hover">-->
<!--                 <thead>-->
<!--                 <tr>-->
<!--                   <th>Snapshot Table</th>-->
<!--                   <th>Type</th>-->
<!--                   <th>Global</th>-->
<!--                   <th ng-if="state.mode=='edit'">Actions</th>-->
<!--                 </tr>-->
<!--                 </thead>-->
<!--                 <tbody>-->
<!--                   <tr ng-repeat="snapshotTable in cubeMetaFrame.snapshot_table_desc_list track by $index">-->
<!--                     <td>-->
<!--                       <p>{{snapshotTable.table_name}}</p>-->
<!--                     </td>-->
<!--                     <td>-->
<!--                       <p>{{snapshotTable.storage_type}}</p>-->
<!--                     </td>-->
<!--                     <td>-->
<!--                       <input type="checkbox" ng-model="snapshotTable.global" disabled="true">-->
<!--                     </td>-->
<!--                     <td ng-if="state.mode=='edit'">-->
<!--                       <button class="btn btn-xs btn-info" ng-click="addNewSnapshot(snapshotTable, $index)" ng-disabled="instance.status=='READY'">-->
<!--                         <i class="fa fa-pencil"></i>-->
<!--                       </button>-->
<!--                       <button class="btn btn-xs  btn-danger" ng-click="removeSnapshotTable($index)" ng-disabled="instance.status=='READY'">-->
<!--                         <i class="fa fa-trash-o"></i>-->
<!--                       </button>-->
<!--                     </td>-->
<!--                   </tr>-->
<!--                 </tbody>-->
<!--               </table>-->
<!--             </div>-->
<!--           </div>-->
           <!-- Add  Snapshot-->
<!--           <div class="form-group" style="margin-left:42px;">-->
<!--             <button class="btn btn-sm btn-info" ng-click="addNewSnapshot()" ng-show="state.mode=='edit' && !addNewSanpshot" ng-disabled="instance.status=='READY'">-->
<!--               <i class="fa fa-plus"></i> Snapshot Table-->
<!--             </button>-->
<!--           </div>-->
           <!--Edit Snapshot-->
<!--           <div class="box box-solid"  ng-if="addNewSanpshot" style="margin-left:42px;">-->
<!--             <div class="box-header">-->
<!--               <h4 class="box-title text-info">Edit Snapshot</h4>-->
<!--             </div>-->
<!--             <div class="box-body">-->
<!--               <div class="row">-->
<!--                 <div class="col-xs-8">-->
<!--                   &lt;!&ndash;Column&ndash;&gt;-->
<!--                   <div class="form-group middle-popover">-->
<!--                     <div class="row">-->
<!--                       <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Snapshot Table</b></label>-->
<!--                       <div class="col-xs-12 col-sm-6">-->
<!--                         <select style="width:95%" chosen ng-model="newSnapshot.select.table_name"-->
<!--                              ng-options="tableName as tableName for tableName in cubeLookups">-->
<!--                         <option value=""></option>-->
<!--                       </select>-->
<!--                       </div>-->
<!--                     </div>-->
<!--                   </div>-->
<!--                   <div class="form-group">-->
<!--                     <div class="row">-->
<!--                       <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Type</b></label>-->
<!--                       <div class="col-xs-12 col-sm-6">-->
<!--                         <select style="width:95%" chosen ng-model="newSnapshot.select.storage_type"-->
<!--                              ng-change="changeSnapshotStorage(newSnapshot.select)"-->
<!--                              ng-options="storageType.value as storageType.name for storageType in cubeConfig.snapshotStorageTypes">-->
<!--                           <option value=""></option>-->
<!--                         </select>-->
<!--                       </div>-->
<!--                     </div>-->
<!--                   </div>-->
<!--                   &lt;!&ndash;Builder&ndash;&gt;-->
<!--                   <div class="form-group" ng-if="!isReuse" >-->
<!--                     <div class="row">-->
<!--                       <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Global</b></label>-->
<!--                       <div class="col-xs-12 col-sm-6">-->
<!--                         <input type="checkbox" ng-model="newSnapshot.select.global" ng-disabled="(newSnapshot.select.storage_type == 'hbase')">-->
<!--                       </div>-->
<!--                     </div>-->
<!--                   </div>-->
<!--                 </div>-->
<!--               </div>-->
<!--             </div>-->
<!--             <div class="box-footer">-->
<!--               <button class="btn btn-sm btn-info"-->
<!--                     ng-click="addSnapshot(newSnapshot.select)" ng-show="state.mode=='edit'">OK</button>-->
<!--               <button class="btn btn-link" ng-click="cancelEditSnapshot()">Cancel</button>-->
<!--             </div>-->
<!--           </div>-->
<!--         </div>-->
         <!--Edit ColumnFamily-->
<!--         <div class="form-group large-popover" >-->
<!--           <h3 style="margin-left:42px">Advanced ColumnFamily  <i kylinpopover placement="right" title="Advanced ColumnFamily" template="AdvancedColumnFamilyTip.html" class="fa fa-info-circle"></i></h3>-->
<!--           <div style="margin-left:42px">-->
<!--             <div class="box-body">-->
<!--               &lt;!&ndash; VIEW MODE &ndash;&gt;-->
<!--               <div class="row"  ng-if="state.mode=='view'&& cubeMetaFrame.hbase_mapping.column_family.length > 0">-->
<!--                 <table class="table table-striped table-hover">-->
<!--                   <thead>-->
<!--                   <tr>-->
<!--                     <th class="col-xs-1">CF</th>-->
<!--                     <th class="col-xs-11">Measures</th>-->
<!--                   </tr>-->
<!--                   </thead>-->
<!--                   <tbody class="cube-dimension">-->
<!--                   <tr ng-repeat="colFamily in cubeMetaFrame.hbase_mapping.column_family | filter:dimState.filter track by $index">-->
<!--                     &lt;!&ndash;ID &ndash;&gt;-->
<!--                     <td class="col-xs-1">-->
<!--                       <b>{{colFamily.name}}</b>-->
<!--                     </td>-->
<!--                     &lt;!&ndash;Name &ndash;&gt;-->
<!--                     <td class="col-xs-11">-->
<!--                       <span>{{colFamily.columns[0].measure_refs}}</span>-->
<!--                     </td>-->
<!--                   </tr>-->
<!--                   </tbody>-->
<!--                 </table>-->
<!--               </div>-->

<!--               &lt;!&ndash; EDIT MODE &ndash;&gt;-->
<!--               <div  ng-if="state.mode=='edit'" class="form-group " style="width: 100%">-->
<!--                 <table ng-if="cubeMetaFrame.hbase_mapping.column_family.length > 0"-->
<!--                        class="table table-hover">-->

<!--                   <tr class="row">-->
<!--                     <th class="col-xs-1">CF</th>-->
<!--                     <th class="col-xs-10">Measures</th>-->
<!--                     <th class="col-xs-1">Actions</th>-->
<!--                   </tr>-->

<!--                   <tr ng-repeat="colFamily in cubeMetaFrame.hbase_mapping.column_family" ng-init="rowIndex = $index" class="row">-->
<!--                     <td class="col-xs-1">-->
<!--                       <b>{{colFamily.name}}</b>-->
<!--                     </td>-->

<!--                     <td class="col-xs-10">-->
<!--                       <ui-select-->
<!--                         style="width: 100%"-->
<!--                         close-on-select="false"-->
<!--                         on-select="refreshColumnFamily(cubeMetaFrame.hbase_mapping.column_family, rowIndex, colFamily)"-->
<!--                         on-remove="refreshColumnFamily(cubeMetaFrame.hbase_mapping.column_family, rowIndex, colFamily)"-->
<!--                         ng-model="colFamily.columns[0].measure_refs"-->
<!--                         multiple>-->
<!--                         <ui-select-match placeholder="Select Measure...">{{$item}}</ui-select-match>-->
<!--                         <ui-select-choices repeat="measure in getAllMeasureNames() | filter:$select.search |assignedMeasureNames:getAssignedMeasureNames()">-->
<!--                           {{measure}}-->
<!--                         </ui-select-choices>-->
<!--                       </ui-select>-->
<!--                     </td>-->

<!--                     <td class="col-xs-1">-->
<!--                       &lt;!&ndash;Remove Button &ndash;&gt;-->
<!--                       <button ng-if="colFamily.columns[0].measure_refs.length == 0" class="btn btn-xs btn-info" ng-click="removeElement(cubeMetaFrame.hbase_mapping.column_family, colFamily)">-->
<!--                         <i class="fa fa-minus"></i>-->
<!--                       </button>-->
<!--                     </td>-->

<!--                   </tr>-->
<!--                 </table>-->
<!--               </div>-->

<!--               <div class="form-group" >-->
<!--                 <button class="btn btn-sm btn-info" ng-click="addColumnFamily()" ng-show="state.mode=='edit'">-->
<!--                   <i class="fa fa-plus"></i> ColumnFamily-->
<!--                 </button>-->
<!--               </div>-->

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

<script type="text/ng-template" id="dimCapTip.html">
  <div>
    <ol style="font-size:12px;">
      <li>Dimension limitations mean max dimensions may be contained within a group of SQL queries.</li>
      <li>In a set of queries, if each query required the number of dimensions is not more than five, you can set 5 here.</li>
    </ol>
  </div>
</script>
<script type="text/ng-template" id="rowkeyTip.html">
  <div>
    <h4>Shard By this column?</h4>
    <p>
      If specified as "true", cube data will be sharded according to its value.
    </p>

    <h4>Encoding</h4>
    <p>
        Dimension encoding will be delegated to Parquet.
    </p>
  </div>
</script>
<!--<script type="text/ng-template" id="AdvancedDictionariesTip.html">-->
<!--  <div>-->
<!--    <h4>Special settings for dictionaries.</h4>-->
<!--    <ol>-->
<!--      <li>-->
<!--        "Global Dictionary" is the default dict for precise count distinct measure, which support rollup among all segments.-->
<!--      </li>-->
<!--      <li>-->
<!--        "Segment Dictionary" is the special dict for precise count distinct measure, which is based on one segment and could not-->
<!--        support rollup among segments.-->
<!--        Specifically, if your cube isn't partitioned or you can ensure all your SQLs will group by your partition_column,-->
<!--        you could use "Segment Dictionary" instead of "Global Dictionary".-->
<!--      </li>-->
<!--    </ol>-->
<!--  </div>-->
<!--</script>-->

<!--<script type="text/ng-template" id="AdvancedColumnFamilyTip.html">-->
<!--  <div>-->
<!--    <h4>If there are more than one ultrahigh cardinality precise count distinct measures,-->
<!--        you could assign these measures to more column family.</h4>-->
<!--  </div>-->
<!--</script>-->
<script type="text/ng-template" id="CubeEngineTip.html" >
  <div>
    <h4>
       Select cube engine for building cube. In Kylin 4.X, Spark is the only build engine.
    </h4>
  </div>
</script>

<!--<script type="text/ng-template" id="AdvanceSnapshotTableTip.html">-->
<!--  <div>-->
<!--    <h4>Advance snapshot design for global lookup table and provide different storage type.</h4>-->
<!--  </div>-->
<!--</script>-->
