KYLIN-1786 UI for extended column
Project: http://git-wip-us.apache.org/repos/asf/kylin/repo Commit: http://git-wip-us.apache.org/repos/asf/kylin/commit/48180ec5 Tree: http://git-wip-us.apache.org/repos/asf/kylin/tree/48180ec5 Diff: http://git-wip-us.apache.org/repos/asf/kylin/diff/48180ec5 Branch: refs/heads/master Commit: 48180ec5f1d1315e952fd719ba0b640b2eab312a Parents: 95eb2ff Author: Jason <[email protected]> Authored: Mon Jul 11 23:53:53 2016 +0800 Committer: Jason <[email protected]> Committed: Tue Jul 12 20:25:25 2016 +0800 ---------------------------------------------------------------------- webapp/app/js/directives/directives.js | 43 ++++++++++++++++++ webapp/app/js/model/cubeConfig.js | 2 +- webapp/app/partials/cubeDesigner/measures.html | 49 ++++++++++++++++++--- 3 files changed, 86 insertions(+), 8 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/kylin/blob/48180ec5/webapp/app/js/directives/directives.js ---------------------------------------------------------------------- diff --git a/webapp/app/js/directives/directives.js b/webapp/app/js/directives/directives.js index ae90c82..4b83865 100644 --- a/webapp/app/js/directives/directives.js +++ b/webapp/app/js/directives/directives.js @@ -332,6 +332,29 @@ KylinApp.directive('kylinPagination', function ($parse, $q) { }; } }; +}).directive("extendedcolumntree", function($compile) { + return { + restrict: "E", + transclude: true, + scope: { + nextpara: '=' + }, + template: + '<li class="parent_li">Host Column:<b>{{nextpara.value}}</b></b></li>' + + '<li class="parent_li">Extended Column:<b>{{nextpara.next_parameter.value}}</b></li>', + compile: function(tElement, tAttr, transclude) { + var contents = tElement.contents().remove(); + var compiledContents; + return function(scope, iElement, iAttr) { + if(!compiledContents) { + compiledContents = $compile(contents, transclude); + } + compiledContents(scope, function(clone, scope) { + iElement.append(clone); + }); + }; + } + }; }).directive('kylinpopover', function ($compile,$templateCache) { return { restrict: "A", @@ -355,4 +378,24 @@ KylinApp.directive('kylinPagination', function ($parse, $q) { $(element).popover(options); } }; +}).directive('extendedColumnReturn', function() { + return { + require: 'ngModel', + link: function(scope, element, attrs, ngModelController) { + + var prefix = "extendedcolumn("; + var suffix = ")"; + ngModelController.$parsers.push(function(data) { + //convert data from view format to model format + return prefix +data+suffix; //converted + }); + + ngModelController.$formatters.push(function(data) { + //convert data from model format to view format + var prefixIndex = data.indexOf("(")+1; + var suffixIndex = data.indexOf(")"); + return data.substring(prefixIndex,suffixIndex); //converted + }); + } + } }); http://git-wip-us.apache.org/repos/asf/kylin/blob/48180ec5/webapp/app/js/model/cubeConfig.js ---------------------------------------------------------------------- diff --git a/webapp/app/js/model/cubeConfig.js b/webapp/app/js/model/cubeConfig.js index 82dfca4..88e2133 100644 --- a/webapp/app/js/model/cubeConfig.js +++ b/webapp/app/js/model/cubeConfig.js @@ -20,7 +20,7 @@ KylinApp.constant('cubeConfig', { //~ Define metadata & class measureParamType: ['column', 'constant'], - measureExpressions: ['SUM', 'MIN', 'MAX', 'COUNT', 'COUNT_DISTINCT',"TOP_N", 'RAW'], + measureExpressions: ['SUM', 'MIN', 'MAX', 'COUNT', 'COUNT_DISTINCT',"TOP_N", 'RAW','EXTENDED_COLUMN'], dimensionDataTypes: ["string", "tinyint", "int", "bigint", "date"], cubePartitionTypes: ['APPEND'], joinTypes: [ http://git-wip-us.apache.org/repos/asf/kylin/blob/48180ec5/webapp/app/partials/cubeDesigner/measures.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/cubeDesigner/measures.html b/webapp/app/partials/cubeDesigner/measures.html index 5778003..8fcefe3 100755 --- a/webapp/app/partials/cubeDesigner/measures.html +++ b/webapp/app/partials/cubeDesigner/measures.html @@ -43,8 +43,9 @@ <td> <div class="paraTree"> <ul> - <parametertree ng-if="measure.function.parameter!=null && measure.function.expression!=='TOP_N'" nextpara="measure.function.parameter"></parametertree> + <parametertree ng-if="measure.function.parameter!=null && measure.function.expression!=='TOP_N' && measure.function.expression!=='EXTENDED_COLUMN'" nextpara="measure.function.parameter"></parametertree> <topntree ng-if="measure.function.parameter!=null && measure.function.expression=='TOP_N'" nextpara="measure.function.parameter"></topntree> + <extendedcolumntree ng-if="measure.function.parameter!=null && measure.function.expression=='EXTENDED_COLUMN'" nextpara="measure.function.parameter"></extendedcolumntree> </ul> </div> <!--<span ng-if="measure.function.parameter.next_parameter!=null">{{measure.function.parameter.next_parameter |json}}</span>--> @@ -133,7 +134,8 @@ <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> <i class="fa fa-info-circle" kylinpopover placement="right" title="Param Value" template="paramvalueTip.html"></i> + <b ng-if="newMeasure.function.expression == 'EXTENDED_COLUMN'">Host Column On Fact Table</b> + <b ng-if="newMeasure.function.expression !== 'EXTENDED_COLUMN'">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:#3a87ad">(SUM|ORDER BY Column for TOP_N)</small> </label> @@ -158,7 +160,9 @@ <!--Return Type--> <div class="form-group"> <div class="row"> - <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Return Type</b></label> + <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"> + <b>Return Type</b> <i ng-if="newMeasure.function.expression == 'EXTENDED_COLUMN'" class="fa fa-info-circle" kylinpopover placement="right" title="Return Type" template="returnTypeTip.html"></i> + </label> <div class="col-xs-12 col-sm-6"> <select class="form-control" ng-if="newMeasure.function.expression == 'COUNT_DISTINCT'" @@ -174,8 +178,16 @@ ng-options="ddt.value as ddt.name for ddt in cubeConfig.topNTypes"> <option value=""></option> </select> + + <input extended-column-return + ng-if="newMeasure.function.expression == 'EXTENDED_COLUMN'" + type="text" placeholder="Return type.." class="form-control" + tooltip-trigger="focus" + ng-init="" + ng-model="newMeasure.function.returntype" required /> + <span class="font-color-default" - ng-if="newMeasure.function.expression != 'COUNT_DISTINCT' && newMeasure.function.expression != 'TOP_N'" + ng-if="newMeasure.function.expression != 'COUNT_DISTINCT' && newMeasure.function.expression != 'TOP_N' && newMeasure.function.expression != 'EXTENDED_COLUMN' " ><b> {{newMeasure.function.returntype | uppercase}}</b> </span> </div> @@ -227,6 +239,9 @@ <button class="btn btn-sm btn-info" ng-click="addNextParameter()" ng-show="newMeasure.function.expression == 'TOP_N' && nextParameters.length==0" ng-show="state.mode=='edit'"><i class="fa fa-plus"> Group by Column</i> </button> + <button class="btn btn-sm btn-info" ng-click="addNextParameter()" ng-show="newMeasure.function.expression == 'EXTENDED_COLUMN' && nextParameters.length==0" + ng-show="state.mode=='edit'"><i class="fa fa-plus"> Extended Column On Fact Table</i> + </button> </div> </div> </div> @@ -248,7 +263,7 @@ <script type="text/ng-template" id="nextParameter.html"> <div class="modal-header"> - <h4 tooltip="submit" ng-if="newmea.measure&&newmea.measure.function.expression !== 'TOP_N'">Add Parameter</h4> + <h4 tooltip="submit" ng-if="newmea.measure&&newmea.measure.function.expression == 'EXTENDED_COLUMN'">Add Extended Column</h4> <h4 tooltip="submit" ng-if="newmea.measure&&newmea.measure.function.expression == 'TOP_N'">Select Group By Column</h4> </div> <div class="modal-body" style="background-color: white"> @@ -258,7 +273,7 @@ <div class="col-md-8"> <div class="row"> <div class="form-group"> - <div class="row" ng-if="newmea.measure&&newmea.measure.function.expression !== 'TOP_N'"> + <div class="row" ng-if="newmea.measure&&newmea.measure.function.expression !== 'TOP_N' && newmea.measure.function.expression !== 'EXTENDED_COLUMN'"> <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Param Type</b></label> <div class="col-xs-12 col-sm-6"> <select class="form-control" @@ -280,7 +295,7 @@ <div class="row"> <div class="form-group"> - <div ng-if="newmea.measure&&newmea.measure.function.expression !== 'TOP_N'" class="row"> + <div ng-if="newmea.measure&&newmea.measure.function.expression !== 'TOP_N' && newmea.measure.function.expression !== 'EXTENDED_COLUMN" class="row"> <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Param Value</b></label> <!--COUNT_DISTINCT--> <div class="col-xs-12 col-sm-6"> @@ -307,6 +322,17 @@ </div> </div> + <div ng-if="newmea.measure&&newmea.measure.function.expression == 'EXTENDED_COLUMN'" ng-init="nextPara.type='column'" class="row"> + <label class="col-xs-12 col-sm-4 control-label no-padding-right font-color-default"><b>Extended Column On Fact Table</b></label> + <!--COUNT_DISTINCT--> + <div class="col-xs-12 col-sm-6"> + <select class="form-control" chosen + ng-model="nextPara.value" + ng-options="column as column for column in getCommonMetricColumns(newmea.measure)" > + <option value=""></option> + </select> + </div> + </div> </div> </div> @@ -325,7 +351,16 @@ </script> <script type="text/ng-template" id="paramvalueTip.html"> <ol> + <li>Only accept single column in param <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> + 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> + +<script type="text/ng-template" id="returnTypeTip.html"> + <ol> + </ol> </script>
