KYLIN-1708 GUI friendly tips for terms in kylin
Project: http://git-wip-us.apache.org/repos/asf/kylin/repo Commit: http://git-wip-us.apache.org/repos/asf/kylin/commit/5f0ed10e Tree: http://git-wip-us.apache.org/repos/asf/kylin/tree/5f0ed10e Diff: http://git-wip-us.apache.org/repos/asf/kylin/diff/5f0ed10e Branch: refs/heads/1.5.x-CDH5.7 Commit: 5f0ed10e603ad8b5c1c88e44ce174b3a62ee5592 Parents: 682a2f1 Author: Jason <jiat...@163.com> Authored: Thu May 19 11:18:31 2016 +0800 Committer: Jason <jiat...@163.com> Committed: Thu May 19 11:18:31 2016 +0800 ---------------------------------------------------------------------- webapp/app/js/controllers/cubeEdit.js | 7 + webapp/app/js/controllers/modelEdit.js | 12 + webapp/app/js/controllers/modelSchema.js | 21 +- webapp/app/js/directives/directives.js | 23 ++ webapp/app/js/model/cubeConfig.js | 3 +- webapp/app/less/app.less | 33 +++ .../cubeDesigner/advanced_settings.html | 198 +++++++++------- webapp/app/partials/cubeDesigner/info.html | 52 ++-- webapp/app/partials/cubeDesigner/measures.html | 40 ++-- .../partials/cubeDesigner/refresh_settings.html | 28 ++- .../modelDesigner/conditions_settings.html | 237 +++++++++---------- .../app/partials/modelDesigner/model_info.html | 31 +-- 12 files changed, 396 insertions(+), 289 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/js/controllers/cubeEdit.js ---------------------------------------------------------------------- diff --git a/webapp/app/js/controllers/cubeEdit.js b/webapp/app/js/controllers/cubeEdit.js index b1aa08a..b6fc875 100755 --- a/webapp/app/js/controllers/cubeEdit.js +++ b/webapp/app/js/controllers/cubeEdit.js @@ -666,6 +666,13 @@ KylinApp.controller('CubeEditCtrl', function ($scope, $q, $routeParams, $locatio } }); + $scope.removeNotificationEvents = function(){ + if($scope.cubeMetaFrame.status_need_notify.indexOf('ERROR') == -1){ + $scope.cubeMetaFrame.status_need_notify.unshift('ERROR'); + } + } + + $scope.$on('DimensionsEdited', function (event) { if ($scope.cubeMetaFrame) { http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/js/controllers/modelEdit.js ---------------------------------------------------------------------- diff --git a/webapp/app/js/controllers/modelEdit.js b/webapp/app/js/controllers/modelEdit.js index 903b584..a916aad 100644 --- a/webapp/app/js/controllers/modelEdit.js +++ b/webapp/app/js/controllers/modelEdit.js @@ -77,6 +77,9 @@ KylinApp.controller('ModelEditCtrl', function ($scope, $q, $routeParams, $locati project:$scope.projectModel.selectedProject }; + $scope.partitionColumn ={ + "hasSeparateTimeColumn" : false + } // ~ init if ($scope.isEdit = !!$routeParams.modelName) { @@ -84,6 +87,9 @@ KylinApp.controller('ModelEditCtrl', function ($scope, $q, $routeParams, $locati ModelDescService.query({model_name: modelName}, function (model) { if (model) { modelsManager.selectedModel = model; + if($scope.modelsManager.selectedModel.partition_desc.partition_time_column){ + $scope.partitionColumn.hasSeparateTimeColumn = true; + } modelsManager.selectedModel.project = ProjectModel.getProjectByCubeModel(modelName); if(!ProjectModel.getSelectedProject()){ @@ -101,6 +107,12 @@ KylinApp.controller('ModelEditCtrl', function ($scope, $q, $routeParams, $locati } + $scope.toggleHasSeparateColumn = function(){ + if($scope.partitionColumn.hasSeparateTimeColumn == false){ + $scope.modelsManager.selectedModel.partition_desc.partition_time_column = null; + } + } + $scope.prepareModel = function () { // generate column family $scope.state.project = modelsManager.selectedModel.project; http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/js/controllers/modelSchema.js ---------------------------------------------------------------------- diff --git a/webapp/app/js/controllers/modelSchema.js b/webapp/app/js/controllers/modelSchema.js index 7885758..e309873 100644 --- a/webapp/app/js/controllers/modelSchema.js +++ b/webapp/app/js/controllers/modelSchema.js @@ -28,6 +28,22 @@ KylinApp.controller('ModelSchemaCtrl', function ($scope, QueryService, UserServi $scope.forms = {}; + // ~ init + if (!$scope.state) { + $scope.state = {mode: "view"}; + } + + if(!$scope.partitionColumn){ + $scope.partitionColumn ={ + "hasSeparateTimeColumn" : false + } + } + + if($scope.state.mode !== "edit" && $scope.modelsManager.selectedModel.partition_desc.partition_time_column){ + $scope.partitionColumn.hasSeparateTimeColumn = true; + } + + $scope.wizardSteps = [ {title: 'Model Info', src: 'partials/modelDesigner/model_info.html', isComplete: false, form: 'model_info_form'}, @@ -54,11 +70,6 @@ KylinApp.controller('ModelSchemaCtrl', function ($scope, QueryService, UserServi $scope.curStep = $scope.wizardSteps[0]; - - // ~ init - if (!$scope.state) { - $scope.state = {mode: "view"}; - } //init modelsManager if ($scope.state.mode == "edit") { var defer = $q.defer(); http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/js/directives/directives.js ---------------------------------------------------------------------- diff --git a/webapp/app/js/directives/directives.js b/webapp/app/js/directives/directives.js index a3b7bf2..ae90c82 100644 --- a/webapp/app/js/directives/directives.js +++ b/webapp/app/js/directives/directives.js @@ -332,4 +332,27 @@ KylinApp.directive('kylinPagination', function ($parse, $q) { }; } }; +}).directive('kylinpopover', function ($compile,$templateCache) { + return { + restrict: "A", + link: function (scope, element, attrs) { + var popOverContent; + var dOptions = { + placement : 'right' + } + popOverContent = $templateCache.get(attrs.template); + + var placement = attrs.placement? attrs.placement : dOptions.placement; + var title = attrs.title; + + var options = { + content: popOverContent, + placement: placement, + trigger: "hover", + title: title, + html: true + }; + $(element).popover(options); + } + }; }); http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/js/model/cubeConfig.js ---------------------------------------------------------------------- diff --git a/webapp/app/js/model/cubeConfig.js b/webapp/app/js/model/cubeConfig.js index 3f97254..784b081 100644 --- a/webapp/app/js/model/cubeConfig.js +++ b/webapp/app/js/model/cubeConfig.js @@ -88,7 +88,8 @@ KylinApp.constant('cubeConfig', { ], partitionDateFormatOpt:[ 'yyyy-MM-dd', - 'yyyyMMdd' + 'yyyyMMdd', + 'yyyy-MM-dd HH:mm:ss' ], partitionTimeFormatOpt:[ 'HH:mm:ss', http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/less/app.less ---------------------------------------------------------------------- diff --git a/webapp/app/less/app.less b/webapp/app/less/app.less index 238e72e..8380800 100644 --- a/webapp/app/less/app.less +++ b/webapp/app/less/app.less @@ -792,3 +792,36 @@ input:-moz-placeholder { .panel-group .panel{ overflow: auto !important; } + +.middle-popover .popover{ + width: 360px; + max-width: 360px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.428571429; + color:#808080; + background-color: #ffffff; +} + +.middle-popover .popover-content, .large-popover .popover-content{ + font-size: 13px; + font-weight: normal; + line-height: 18px; + display: inline-flex; + display: -webkit-inline-flex; + word-break: normal; +} + +.middle-popover .popover-content ol, .large-popover .popover-content ol{ + -webkit-padding-start: 20px; + padding-start: 20px; +} +.large-popover .popover{ + width: 600px; + max-width: 600px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + color:#808080; + line-height: 1.428571429; + background-color: #ffffff; +} http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/partials/cubeDesigner/advanced_settings.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/cubeDesigner/advanced_settings.html b/webapp/app/partials/cubeDesigner/advanced_settings.html index d59ad0c..0e1f972 100755 --- a/webapp/app/partials/cubeDesigner/advanced_settings.html +++ b/webapp/app/partials/cubeDesigner/advanced_settings.html @@ -21,9 +21,16 @@ <ng-form name="forms.cube_setting_form"> <div> - <div class="form-group"> - <h4 style="margin-left:42px">Aggregation Groups</h4> + <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"> @@ -200,85 +207,97 @@ </div> - <div class="form-group"> - <h4 style="margin-left:42px">Rowkeys</h4> - <table style="margin-left:42px; width:92%" - ng-if="cubeMetaFrame.rowkey.rowkey_columns.length > 0" - class="table table-hover table-bordered list" - > - <thead> - <tr> - <th>ID</th> - <th style="width:200px;">Column</th> - <th>Encoding</th> - <th>Length</th> - <th>Shard By</th> - <th ng-if="state.mode=='edit'"></th> - </tr> - </thead> + <div class="form-group large-popover"> + <!--<h4 style="margin-left:42px">--> + <!--Rowkeys <i class="fa fa-info-circle" style="white-space:pre-wrap" popover-trigger="mouseenter" popover=" 'dict' encoding will try to build a dictionary for the dimension. 'fixed_length' encoding will encode the dimension vlaues by fixed length bytes with padding. 'int' encoding uses variable integer to encode integers"></i>--> + <!--</h4>--> + <h3 style="margin-left:42px">Rowkeys <i kylinpopover placement="right" title="Rowkey" template="rowkeyTip.html" class="fa fa-info-circle"></i></h3> + + <div style="margin-left:42px"> + <div class="box-body"> + <br/> + + + <table style="margin-left:width:92%" + ng-if="cubeMetaFrame.rowkey.rowkey_columns.length > 0" + class="table table-hover table-bordered list"> + <thead> + <tr> + <th>ID</th> + <th style="width:200px;">Column</th> + <th>Encoding</th> + <th>Length</th> + <th>Shard By</th> + <th ng-if="state.mode=='edit'"></th> + </tr> + </thead> - <tbody ui-sortable="{update:resortRowkey()}" ng-model="convertedRowkeys"> + <tbody ui-sortable="{update:resortRowkey()}" ng-model="convertedRowkeys"> - <tr ng-repeat="rowkey_column in convertedRowkeys track by $index" - ng-class="state.mode=='edit'?'sort-item':''"> + <tr ng-repeat="rowkey_column in convertedRowkeys track by $index" + ng-class="state.mode=='edit'?'sort-item':''"> - <td> - <!-- ID --> - <span class="ng-binding" ng-class="state.mode=='edit'?'badge':''">{{($index + 1)}}</span> - </td> - <td> - <!--Column Name --> - <input type="text" class="form-control" placeholder="Column Name.." ng-if="state.mode=='edit'" - ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column)" - tooltip="rowkey column name.." tooltip-trigger="focus" - ng-model="rowkey_column.column" class="form-control"> - - <span ng-if="state.mode=='view'">{{rowkey_column.column}}</span> - </td> - <td> - <select ng-if="state.mode=='edit'" style="width:180px;" - chosen ng-model="rowkey_column.encoding" - ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column);" - ng-options="dt as dt for dt in store.supportedEncoding"> - <option value=""></option> - </select> - <span ng-if="state.mode=='view'">{{rowkey_column.encoding}}</span> + <td> + <!-- ID --> + <span class="ng-binding" ng-class="state.mode=='edit'?'badge':''">{{($index + 1)}}</span> + </td> + <td> + <!--Column Name --> + <input type="text" class="form-control" placeholder="Column Name.." ng-if="state.mode=='edit'" + ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column)" + tooltip="rowkey column name.." tooltip-trigger="focus" + ng-model="rowkey_column.column" class="form-control"> + + <span ng-if="state.mode=='view'">{{rowkey_column.column}}</span> + </td> + <td> + <select ng-if="state.mode=='edit'" style="width:180px;" + chosen ng-model="rowkey_column.encoding" + ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column);" + ng-options="dt as dt for dt in store.supportedEncoding"> + <option value=""></option> + </select> + <span ng-if="state.mode=='view'">{{rowkey_column.encoding}}</span> - </td> - <td> - <!--Column Length --> - <input type="text" class="form-control" placeholder="Column Length.." ng-if="state.mode=='edit'" - tooltip="rowkey column length.." tooltip-trigger="focus" - ng-disabled="rowkey_column.encoding=='dict'" - ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column);" - ng-model="rowkey_column.valueLength" class="form-control"> - - <small class="help-block red" ng-show="state.mode=='edit' && rowkey_column.encoding=='int' && (rowkey_column.valueLength>8 || rowkey_column.valueLength<1)">int encoding column length should between 1 and 8</small> - <span ng-if="state.mode=='view'">{{rowkey_column.valueLength}}</span> - </td> + </td> + <td> + <!--Column Length --> + <input type="text" class="form-control" placeholder="Column Length.." ng-if="state.mode=='edit'" + tooltip="rowkey column length.." tooltip-trigger="focus" + ng-disabled="rowkey_column.encoding=='dict'" + ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column);" + ng-model="rowkey_column.valueLength" class="form-control"> + + <small class="help-block red" ng-show="state.mode=='edit' && rowkey_column.encoding=='int' && (rowkey_column.valueLength>8 || rowkey_column.valueLength<1)">int encoding column length should between 1 and 8</small> + <span ng-if="state.mode=='view'">{{rowkey_column.valueLength}}</span> + </td> - <td> - <select ng-if="state.mode=='edit'" style="width:180px;" - chosen ng-model="rowkey_column.isShardBy" - tooltip="false by default" - 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> - <span ng-if="state.mode=='view'">{{rowkey_column.isShardBy}}</span> - </td> + <td> + <select ng-if="state.mode=='edit'" style="width:180px;" + chosen ng-model="rowkey_column.isShardBy" + tooltip="false by default" + 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> + <span ng-if="state.mode=='view'">{{rowkey_column.isShardBy}}</span> + </td> + + <td ng-if="state.mode=='edit'"> + <button class="btn btn-xs btn-info" + ng-click="removeRowkey(convertedRowkeys, $index,rowkey_column)"><i + class="fa fa-minus"></i> + </button> + </td> + </tr> + </tbody> + </table> - <td ng-if="state.mode=='edit'"> - <button class="btn btn-xs btn-info" - ng-click="removeRowkey(convertedRowkeys, $index,rowkey_column)"><i - class="fa fa-minus"></i> - </button> - </td> - </tr> - </tbody> - </table> + + </div> + </div> <button class="btn btn-sm btn-info" style="margin-left:42px" ng-click="addNewRowkeyColumn()" ng-show="state.mode=='edit'">New Rowkey Column<i class="fa fa-plus"></i> @@ -287,13 +306,28 @@ </div> - <div class="box box-solid" 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> </ng-form> </div> + +<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>RowKey Encoding</h4> + <ol> + <li> + "dict" encoding will try to build a dictionary for the dimension + </li> + <li> + "fixed_length" encoding will encode the dimension vlaues by fixed length bytes with padding + </li> + <li> + "int" encoding uses variable integer to encode integers + </li> + </ol> + </div> +</script> http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/partials/cubeDesigner/info.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/cubeDesigner/info.html b/webapp/app/partials/cubeDesigner/info.html index ec9fc49..d2bc235 100644 --- a/webapp/app/partials/cubeDesigner/info.html +++ b/webapp/app/partials/cubeDesigner/info.html @@ -17,12 +17,12 @@ --> <div class="row"> - <div class="col-xs-8"> + <div class="col-xs-12"> <ng-form name="forms.cube_info_form" novalidate> <!--Project--> <div class="form-group" ng-class="{'required':state.mode=='edit'}"> <div class="row"> - <label class="col-xs-12 col-sm-3 control-label no-padding-right"> + <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"> <b>Model Name</b> </label> <div class="col-xs-12 col-sm-6" ng-class="{'has-error':forms.cube_info_form.model_name.$invalid && (forms.cube_info_form.model_name.$dirty||forms.cube_info_form.model_name.$submitted)}"> @@ -49,10 +49,10 @@ </div> <!--Cube Name--> - <div class="form-group" ng-class="{'required':state.mode=='edit'}"> + <div class="form-group middle-popover" ng-class="{'required':state.mode=='edit'}"> <div class="row"> <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"> - <b>Cube Name</b> + <b>Cube Name</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Cube Name" template="cubeNameTip.html"></i> </label> <div class="col-xs-12 col-sm-6" ng-class="{'has-error':forms.cube_info_form.cube_name.$invalid && (forms.cube_info_form.cube_name.$dirty||forms.cube_info_form.cube_name.$submitted)}"> <input ng-if="state.mode=='edit'" ng-disabled="{{isEdit}}" name="cube_name" type="text" class="form-control" @@ -71,7 +71,7 @@ <div class="form-group"> <div class="row"> <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"> - <b>Notification List</b> + <b>Notification Email List</b> </label> <div class="col-xs-12 col-sm-6"> <input type="text" class="form-control" placeholder="Comma Separated" @@ -82,15 +82,16 @@ </div> <div class="form-group"> - <div class="row"> + <div class="row middle-popover"> <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"> - <b>Notification Status</b> + <b>Notification Events</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Notification Events" template="notificationEventsTip.html"></i> </label> <div class="col-xs-12 col-sm-6"> <ui-select autofocus="true" close-on-select="false" + on-remove="removeNotificationEvents()" ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="cubeMetaFrame.status_need_notify"> <ui-select-match placeholder="Select Status...">{{$item}}</ui-select-match> <ui-select-choices @@ -120,24 +121,21 @@ </ng-form> </div> - <!--Tips--> - <div class="col-xs-4"> - <div class="box box-solid"> - <div class="box-header widget-header-flat"> - <h4 class="box-title">Tips</h4> - </div> - <div class="box-body"> - <div class="row"> - <div class="col-xs-12"> - <ol class="text-info"> - <li>Cube name is unique name of entire system</li> - <li>Can not edit cube name after created</li> - <li>Cube must belong to project which you have privilege to create</li> - <li>Error status will notify by default</li> - </ol> - </div> - </div> - </div> - </div> - </div> </div> + +<script id="tip-cube-name.html" type="text/ng-template"> + <strong>HTML</strong> allowed.<br /> + Binding allowed: {{ value }}<br /> + <button ng-click="value = 2">Test</button> +</script> + +<script type="text/ng-template" id="cubeNameTip.html">â¨â¨ +<ol> + <li>Cube name is unique name of entire system.</li> + <li>Can not edit cube name after created.</li> +</ol> +</script> + +<script type="text/ng-template" id="notificationEventsTip.html">â¨â¨ + <p>ERROR status will trigger a notification anyway.</p> +</script> http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/partials/cubeDesigner/measures.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/cubeDesigner/measures.html b/webapp/app/partials/cubeDesigner/measures.html index f0ae86f..9f12317 100755 --- a/webapp/app/partials/cubeDesigner/measures.html +++ b/webapp/app/partials/cubeDesigner/measures.html @@ -97,9 +97,9 @@ </div> </div> <!--Expression--> - <div class="form-group"> + <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>Expression</b></label> + <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Expression</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Expression" template="expressionTip.html"></i></label> <div class="col-xs-12 col-sm-6"> <select class="form-control" ng-init="newMeasure.function.expression = (!!newMeasure.function.expression)?newMeasure.function.expression:cubeConfig.dftSelections.measureExpression" chosen ng-model="newMeasure.function.expression" required @@ -130,12 +130,12 @@ </div> </div> <!--Param Value--> - <div class="form-group"> + <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>Param Value</b> + <b>Param Value</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Param Value" template="paramvalueTip.html"></i> <!--tip for top_n--> - <small ng-if="newMeasure.function.expression == 'TOP_N'" class="help-block" style="color:#b94a48">(SUM|ORDER BY Column for TOP_N)</small> + <small ng-if="newMeasure.function.expression == 'TOP_N'" class="help-block" style="color:#3a87ad">(SUM|ORDER BY Column for TOP_N)</small> </label> @@ -232,25 +232,6 @@ </div> </div> - <!--Tips--> - <div class="col-xs-4"> - <div class="box box-solid"> - <div class="box-header"> - <h4 class="box-title">Tips</h4> - </div> - <div class="box-body"> - <div class="row"> - <div class="col-xs-12"> - <ol class="text-info"> - <li>All cubes have to contain one measure for Count(1), suggest use "_Count_" as name (Has been generated automatically)</li> - <li>Only accept single column in param value with "Column" type</li> - <li>Distinct Count is approximate, please indicate Error Rate, higher accuracy degree accompanied with larger storage size and longer build time</li> - </ol> - </div> - </div> - </div> - </div> - </div> </div> </div> <div class="box-footer"> @@ -339,3 +320,14 @@ <button class="btn btn-primary" ng-click="cancel()">Close</button> </div> </script> + +<script type="text/ng-template" id="expressionTip.html">â¨â¨ + <p>All cubes have to contain one measure for Count(1), suggest use "_Count_" as name (Has been generated automatically)</p> +</script> + +<script type="text/ng-template" id="paramvalueTip.html">â¨â¨ + <ol> + <li>Only accept single column in param value with "Column" type</li> + <li>Distinct Count is approximate, please indicate Error Rate, higher accuracy degree accompanied with larger storage size and longer build time</li> + </ol> +</script> http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/partials/cubeDesigner/refresh_settings.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/cubeDesigner/refresh_settings.html b/webapp/app/partials/cubeDesigner/refresh_settings.html index 814c453..4c18639 100755 --- a/webapp/app/partials/cubeDesigner/refresh_settings.html +++ b/webapp/app/partials/cubeDesigner/refresh_settings.html @@ -28,9 +28,11 @@ <td> <!--Cube Size--> <div class="form-group"> - <div class="row"> - <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Auto Merge Time - Ranges(days)</b></label> + <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--> @@ -71,7 +73,7 @@ </table> <button class="btn btn-xs btn-info" ng-show="state.mode=='edit'" ng-click="addNewMergeTimeRange()"> - New Merge Range<i class="fa fa-plus"></i> + New Thresholds <i class="fa fa-plus"></i> </button> </div> <div class="row" ng-if="state.mode=='view'"> @@ -96,18 +98,16 @@ <td> <!--Cube Size--> <div class="form-group"> - <div class="row"> - <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Retention - Range(days)</b></label> + <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'"> - <small class="help-block text-red" ng-show="state.mode=='edit'">(by default it's '0',which will keep - all historic cube segments ,or will keep latest [Retention Range] days cube segments ) - </small> <span ng-if="state.mode=='view'">{{cubeMetaFrame.retention_range | millisecondsToDay}}</span> </div> </div> @@ -154,3 +154,11 @@ </div> </ng-form> </div> + +<script type="text/ng-template" id="autoMergeThresholdsTip.html">â¨â¨ + <p>The thresholds will be checked ascendingly to see if any consectuive segments' time range has exceeded it. For example the [7 days, 30 days] will result in daily incremental segments being merged every 7 days, and the 7-days segments will get merged every 30 days.</p> +</script> + +<script type="text/ng-template" id="retentionTip.html">â¨â¨ +<p>By default it's '0',which will keep all historic cube segments ,or will keep latest [Retention Threshold] days cube segments.</p> +</script> http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/partials/modelDesigner/conditions_settings.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/modelDesigner/conditions_settings.html b/webapp/app/partials/modelDesigner/conditions_settings.html index 2a46698..d000aab 100644 --- a/webapp/app/partials/modelDesigner/conditions_settings.html +++ b/webapp/app/partials/modelDesigner/conditions_settings.html @@ -17,121 +17,119 @@ --> <div class="row"> - <div class="col-xs-8"> + <div class="col-xs-12"> <ng-form name="forms.model_setting_form" novalidate> + + <h3>Partition</h3> + <div class="box-body"> <!--Cube Partition Type--> - <div class="form-group" ng-hide="true"> - <div class="row"> - <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Type</b></label> - <div class="col-xs-12 col-sm-6"> - <select class="form-control" - ng-if="state.mode=='edit'" - chosen ng-model="modelsManager.selectedModel.partition_desc.partition_type" - ng-options="ddt as ddt for ddt in cubeConfig.cubePartitionTypes"> - <option value=""></option> - </select> - <span ng-if="state.mode=='view'">{{modelsManager.selectedModel.partition_desc.partition_type}}</span> - </div> - </div> - </div> + <div class="form-group" ng-hide="true"> + <div class="row"> + <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Type</b></label> + <div class="col-xs-12 col-sm-6"> + <select class="form-control" + ng-if="state.mode=='edit'" + chosen ng-model="modelsManager.selectedModel.partition_desc.partition_type" + ng-options="ddt as ddt for ddt in cubeConfig.cubePartitionTypes"> + <option value=""></option> + </select> + <span ng-if="state.mode=='view'">{{modelsManager.selectedModel.partition_desc.partition_type}}</span> + </div> + </div> + </div> - <!--Partition Column--> - <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 Date Column</b></label> - <div class="col-xs-12 col-sm-6"> + <!--Partition Column--> + <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>Partition Date Column</b> <i kylinpopover placement="right" title="Partition Date Column" template="partitionTip.html" class="fa fa-info-circle"></i></label> + <div class="col-xs-12 col-sm-6"> - <select style="width: 100%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT" - ng-model="modelsManager.selectedModel.partition_desc.partition_date_column" - ng-if="state.mode=='edit'" - data-placement="" - ng-options="modelsManager.selectedModel.fact_table+'.'+columns.name as modelsManager.selectedModel.fact_table+'.'+columns.name for columns in getPartitonColumns(modelsManager.selectedModel.fact_table)" > - <option value="">--Select Partition Column--</option> - </select> - <small class="help-block text-red" ng-show="state.mode=='edit'">(Column Type should be DATE or TIMESTAMP Type)</small> - - <span ng-if="state.mode=='view'"> - {{!!(modelsManager.selectedModel.partition_desc.partition_date_column)?modelsManager.selectedModel.partition_desc.partition_date_column: ''}}</span> - </div> - </div> - </div> + <select style="width: 100%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT" + ng-model="modelsManager.selectedModel.partition_desc.partition_date_column" + ng-if="state.mode=='edit'" + data-placement="" + ng-options="modelsManager.selectedModel.fact_table+'.'+columns.name as modelsManager.selectedModel.fact_table+'.'+columns.name for columns in getPartitonColumns(modelsManager.selectedModel.fact_table)" > + <option value="">--Select Partition Column--</option> + </select> + <!--<small class="text-info" ng-show="state.mode=='edit'">(Column Type should be DATE or TIMESTAMP Type)</small>--> - <!--Date Format--> - <div class="form-group"> - <div class="row"> - <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Date Format</b></label> - <div class="col-xs-12 col-sm-6"> - <select style="width: 100%" chosen - ng-required="modelsManager.selectedModel.partition_desc.partition_date_format" - ng-model="modelsManager.selectedModel.partition_desc.partition_date_format" - ng-if="state.mode=='edit'" - data-placement="" - ng-options="ddt as ddt for ddt in cubeConfig.partitionDateFormatOpt"> - <option value="">--Select Date Format--</option> - </select> - <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_date_column">{{(modelsManager.selectedModel.partition_desc.partition_date_format)}}</span> - </div> + <span ng-if="state.mode=='view'"> + {{!!(modelsManager.selectedModel.partition_desc.partition_date_column)?modelsManager.selectedModel.partition_desc.partition_date_column: ''}}</span> + </div> + </div> </div> - </div> - <!--Partition Time Column--> - <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 Time Column</b></label> - <div class="col-xs-12 col-sm-6"> - - <select style="width: 100%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT" - ng-model="modelsManager.selectedModel.partition_desc.partition_time_column" - ng-if="state.mode=='edit'" - data-placement="" - ng-options="modelsManager.selectedModel.fact_table+'.'+columns.name as modelsManager.selectedModel.fact_table+'.'+columns.name for columns in getPartitonTimeColumns(modelsManager.selectedModel.fact_table)" > - <option value="">--Select Partition Column--</option> - </select> - <small class="help-block text-red" ng-show="state.mode=='edit'">(Column Type should be TIME Type)</small> - - <span ng-if="state.mode=='view'"> - {{!!(modelsManager.selectedModel.partition_desc.partition_time_column)?modelsManager.selectedModel.partition_desc.partition_time_column: ''}}</span> + <!--Date Format--> + <div class="form-group"> + <div class="row"> + <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Date Format</b></label> + <div class="col-xs-12 col-sm-6"> + <select style="width: 100%" chosen + ng-required="modelsManager.selectedModel.partition_desc.partition_date_format" + ng-model="modelsManager.selectedModel.partition_desc.partition_date_format" + ng-if="state.mode=='edit'" + data-placement="" + ng-options="ddt as ddt for ddt in cubeConfig.partitionDateFormatOpt"> + <option value="">--Select Date Format--</option> + </select> + <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_date_column">{{(modelsManager.selectedModel.partition_desc.partition_date_format)}}</span> + </div> </div> </div> - </div> - <!--Time Format--> - <div class="form-group"> - <div class="row"> - <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Time Format</b></label> - <div class="col-xs-12 col-sm-6"> - <select style="width: 100%" chosen - ng-required="modelsManager.selectedModel.partition_desc.partition_time_format" - ng-model="modelsManager.selectedModel.partition_desc.partition_time_format" - ng-if="state.mode=='edit'" - data-placement="" - ng-options="ddt as ddt for ddt in cubeConfig.partitionTimeFormatOpt"> - <option value="">--Select Time Format--</option> - </select> - <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_time_column">{{(modelsManager.selectedModel.partition_desc.partition_time_format)}}</span> + <!--Date Format--> + <div class="form-group middle-popover"> + <div class="row"> + <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Has a separate "time of the day" column ?</b> <i kylinpopover placement="right" title="Separate Time Column" template="separateTimeColumnTip.html" class="fa fa-info-circle"></i></label> + <div class="col-xs-12 col-sm-6"> + <toggle-switch on-label="Yes" off-label="No" ng-disabled="state.mode!=='edit'" ng-click="toggleHasSeparateColumn()" ng-model="partitionColumn.hasSeparateTimeColumn"></toggle-switch> + </div> </div> </div> - </div> + <!--Partition Time Column--> + <div class="form-group" ng-if="partitionColumn.hasSeparateTimeColumn == true"> + <div class="row middle-popover"> + <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Time Column</b> <i kylinpopover placement="right" title="Partition Time Column" template="partitionTimeTip.html" class="fa fa-info-circle"></i></label> + <div class="col-xs-12 col-sm-6"> - <div class="form-group" ng-show="userService.hasRole('ROLE_ADMIN')"> - <div class="row"> - <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Cube Size</b></label> - <div class="col-xs-12 col-sm-6"> - <select class="form-control" - ng-if="state.mode=='edit'" - chosen ng-model="modelsManager.selectedModel.capacity" - ng-options="ddt as ddt for ddt in cubeConfig.cubeCapacities"> - <option value=""></option> - </select> - <span ng-if="state.mode=='view'">{{modelsManager.selectedModel.capacity}}</span> - </div> + <select style="width: 100%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT" + ng-model="modelsManager.selectedModel.partition_desc.partition_time_column" + ng-if="state.mode=='edit'" + data-placement="" + ng-options="modelsManager.selectedModel.fact_table+'.'+columns.name as modelsManager.selectedModel.fact_table+'.'+columns.name for columns in getPartitonTimeColumns(modelsManager.selectedModel.fact_table)" > + <option value="">--Select Partition Column--</option> + </select> + <!--<small class="text-info" ng-show="state.mode=='edit'">(Column Type should be TIME Type)</small>--> + + <span ng-if="state.mode=='view'"> + {{!!(modelsManager.selectedModel.partition_desc.partition_time_column)?modelsManager.selectedModel.partition_desc.partition_time_column: ''}}</span> </div> + </div> </div> + <!--Time Format--> + <div class="form-group" ng-if="partitionColumn.hasSeparateTimeColumn == true"> + <div class="row"> + <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Time Format</b></label> + <div class="col-xs-12 col-sm-6"> + <select style="width: 100%" chosen + ng-required="modelsManager.selectedModel.partition_desc.partition_time_format" + ng-model="modelsManager.selectedModel.partition_desc.partition_time_format" + ng-if="state.mode=='edit'" + data-placement="" + ng-options="ddt as ddt for ddt in cubeConfig.partitionTimeFormatOpt"> + <option value="">--Select Time Format--</option> + </select> + <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_time_column">{{(modelsManager.selectedModel.partition_desc.partition_time_format)}}</span> + </div> + </div> + </div> + </div> + <h3>Filter</h3> <!--Filter Condition--> - <div class="form-group"> + <div class="form-group box-body middle-popover"> <div class="row"> - <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Filter</b></label> + <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Filter</b> <i kylinpopover placement="right" title="Filter" template="filterTip.html" class="fa fa-info-circle"></i></label> <div class="col-xs-12 col-sm-6"> <!--edit mode--> @@ -161,26 +159,27 @@ </div> </ng-form> </div> - - <div class="col-xs-4"> - <div class="box box-solid"> - <div class="box-header"> - <h4 class="box-title">Tips</h4> - </div> - <div class="box-body"> - <div class="row"> - <div class="col-xs-12"> - <ol class="text-info"> - <li>Partition date column not required,leave as default if cube always need full build</li> - <li>Partition date column will select 'date' type column from fact table</li> - <li>Where clause to filter data from source</li> - <li>Do not include date column which will be used for incremental refresh</li> - <li>Do not include "Where"</li> - <li>Please verify SQL when finish cube design from SQL view of cube</li> - </ol> - </div> - </div> - </div> - </div> - </div> </div> + +<script type="text/ng-template" id="partitionTip.html"> + <ol> + <li>Partition date column not required,leave as default if cube always need full build</Li> + <li>Column should contain date value (type can be Date, Timestamp, String, VARCHAR, etc.)</li> + </ol> +</script> + +<script type="text/ng-template" id="partitionTimeTip.html">â¨â¨ + <p>Column should contain time value (type can be Timestamp, String, VARCHAR, etc.)</p> +</script> + +<script typ type="text/ng-template" id="filterTip.html">â¨â¨ + <ol> + <li>Where clause to filter data from source</li> + <li>Do not include date column which will be used for incremental refresh</li> + <li>Do not include "Where"</li> + </ol> +</script> + +<script type="text/ng-template" id="separateTimeColumnTip.html">â¨â¨ +<p>For cases where fact table saves date and hour at two columns (KYLIN-1427)</p> +</script> http://git-wip-us.apache.org/repos/asf/kylin/blob/5f0ed10e/webapp/app/partials/modelDesigner/model_info.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/modelDesigner/model_info.html b/webapp/app/partials/modelDesigner/model_info.html index a6ad300..cab710b 100644 --- a/webapp/app/partials/modelDesigner/model_info.html +++ b/webapp/app/partials/modelDesigner/model_info.html @@ -17,15 +17,15 @@ --> <div class="row"> - <div class="col-xs-8"> + <div class="col-xs-12"> <!--Project--> <ng-form name="forms.model_info_form" novalidate> <!--Model Name--> - <div class="form-group" ng-class="{'required':state.mode=='edit'}"> + <div class="form-group middle-popover" ng-class="{'required':state.mode=='edit'}"> <div class="row"> <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"> - <b>Model Name</b> + <b>Model Name</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Model Name" template="modelNameTip.html"></i> </label> <div class="col-xs-12 col-sm-6" ng-class="{'has-error':forms.model_info_form.model_name.$invalid && (forms.model_info_form.model_name.$dirty||forms.model_info_form.$submitted)}"> @@ -61,24 +61,6 @@ </ng-form> </div> - <!--Tips--> - <div class="col-xs-4"> - <div class="box box-solid"> - <div class="box-header widget-header-flat"> - <h4 class="box-title">Tips</h4> - </div> - <div class="box-body"> - <div class="row"> - <div class="col-xs-12"> - <ol class="text-info"> - <li>Model must belong to project which you have privilege to create</li> - <li>Model name is unique name of entire system</li> - </ol> - </div> - </div> - </div> - </div> - </div> </div> <div class="row" ng-hide="true"> @@ -97,3 +79,10 @@ </div> </div> </div> + +<script type="text/ng-template" id="modelNameTip.html">â¨â¨ +<ol> + <li>Model name is unique name of entire system.</li> + <li>Can not edit model name after created.</li> +</ol> +</script>
