Repository: incubator-ignite Updated Branches: refs/heads/ignite-843 a275f4daf -> 8d8e0fab3
IGNITE-843 Added firts version of java class names compaction. Project: http://git-wip-us.apache.org/repos/asf/incubator-ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-ignite/commit/8d8e0fab Tree: http://git-wip-us.apache.org/repos/asf/incubator-ignite/tree/8d8e0fab Diff: http://git-wip-us.apache.org/repos/asf/incubator-ignite/diff/8d8e0fab Branch: refs/heads/ignite-843 Commit: 8d8e0fab3cb5d40a8909d9d42c6cfee92f6818bc Parents: a275f4d Author: AKuznetsov <akuznet...@gridgain.com> Authored: Tue Aug 11 16:32:26 2015 +0700 Committer: AKuznetsov <akuznet...@gridgain.com> Committed: Tue Aug 11 16:32:26 2015 +0700 ---------------------------------------------------------------------- .../main/js/controllers/caches-controller.js | 6 +- .../src/main/js/controllers/common-module.js | 180 ++++++++++++++++++- .../main/js/controllers/metadata-controller.js | 16 ++ .../main/js/controllers/models/metadata.json | 10 +- .../src/main/js/public/stylesheets/style.scss | 5 +- .../src/main/js/views/configuration/caches.jade | 2 +- .../main/js/views/configuration/metadata.jade | 4 +- .../src/main/js/views/includes/controls.jade | 8 +- 8 files changed, 215 insertions(+), 16 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/8d8e0fab/modules/control-center-web/src/main/js/controllers/caches-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/caches-controller.js b/modules/control-center-web/src/main/js/controllers/caches-controller.js index b421953..667e283 100644 --- a/modules/control-center-web/src/main/js/controllers/caches-controller.js +++ b/modules/control-center-web/src/main/js/controllers/caches-controller.js @@ -15,7 +15,8 @@ * limitations under the License. */ -controlCenterModule.controller('cachesController', ['$scope', '$http', '$common', '$focus', '$confirm', '$copy', '$table', function ($scope, $http, $common, $focus, $confirm, $copy, $table) { +controlCenterModule.controller('cachesController', ['$scope', '$http', '$common', '$focus', '$confirm', '$copy', '$table', + function ($scope, $http, $common, $focus, $confirm, $copy, $table) { $scope.joinTip = $common.joinTip; $scope.getModel = $common.getModel; $scope.javaBuildInClasses = $common.javaBuildInClasses; @@ -36,6 +37,9 @@ controlCenterModule.controller('cachesController', ['$scope', '$http', '$common' $scope.tablePairSave = $table.tablePairSave; $scope.tablePairSaveVisible = $table.tablePairSaveVisible; + $scope.availableWidth = $common.availableWidth; + $scope.compactJavaName = $common.compactJavaName; + $scope.atomicities = $common.mkOptions(['ATOMIC', 'TRANSACTIONAL']); $scope.modes = $common.mkOptions(['PARTITIONED', 'REPLICATED', 'LOCAL']); http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/8d8e0fab/modules/control-center-web/src/main/js/controllers/common-module.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/common-module.js b/modules/control-center-web/src/main/js/controllers/common-module.js index a9d4a0c..4ee69ce 100644 --- a/modules/control-center-web/src/main/js/controllers/common-module.js +++ b/modules/control-center-web/src/main/js/controllers/common-module.js @@ -143,6 +143,142 @@ controlCenterModule.service('$common', ['$alert', function ($alert) { return true; } + var context = null; + + /** + * Calculate width of specified text in body's font. + * + * @param text Text to calculate width. + * @returns {Number} Width of text in pixels. + */ + function measureText(text) { + if (!context) { + var canvas = document.createElement('canvas'); + + context = canvas.getContext('2d'); + + var style = window.getComputedStyle(document.getElementsByTagName('body')[0]); + + context.font = style.fontSize + ' ' + style.fontFamily; + } + + return context.measureText(text).width; + } + + /** + * Compact java full class name by max number of characters. + * + * @param s Class name to cut. + * @param maxLength Max available width in characters. + * @returns {*} Compacted class name. + */ + function compactByMaxCharts(s, maxLength) { + if (s.length <= maxLength) + return s; + + var totalLength = s.length; + + var packages = s.split('.'); + + var packageCnt = packages.length - 1; + + for (var i = 0; i < packageCnt && totalLength > maxLength; i ++) { + if (packages[i].length > 0) { + totalLength -= packages[i].length - 1; + + packages[i] = packages[i][0]; + } + } + + if (totalLength > maxLength) { + var className = packages[packageCnt]; + + var classNameLen = className.length; + + var remains = Math.min(maxLength - totalLength + classNameLen, classNameLen); + + if (remains < 3) + remains = Math.min(3, classNameLen); + + packages[packageCnt] = className.substring(0, remains) + '...'; + } + + var result = packages[0]; + + for (i = 1; i < packages.length; i ++) + result += '.' + packages[i]; + + return result + } + + /** + * Compact java full class name by max number of pixels. + * + * @param s Class name to cut. + * @param maxWidth Maximum available width in pixels. + * @returns {*} Compacted class name. + */ + function compactByMaxPixels(s, maxWidth) { + var totalLength = measureText(s); + + if (totalLength <= maxWidth) + return s; + + var packages = s.split('.'); + + var packageCnt = packages.length - 1; + + for (var i = 0; i < packageCnt && totalLength > maxWidth; i++) { + if (packages[i].length > 1) { + totalLength -= measureText(packages[i].substring(2, packages[i].length)); + + packages[i] = packages[i][0]; + } + } + + var shortPackage = ''; + + for (i = 0; i < packageCnt; i++) + shortPackage += packages[i] + '.'; + + var className = packages[packageCnt]; + + var classLen = className.length; + + var minLen = Math.min(classLen, 3); + + totalLength = measureText(shortPackage + className); + + // Compact class name if shorten package path is very long. + if (totalLength > maxWidth) { + var maxLen = classLen; + + var middleLen = (minLen + (maxLen - minLen) / 2 ) | 0; + + var minLenPx = measureText(shortPackage + className.substr(0, minLen) + '...'); + var maxLenPx = totalLength; + + while (middleLen != minLen && middleLen != maxLen) { + var middleLenPx = measureText(shortPackage + className.substr(0, middleLen) + '...'); + + if (middleLenPx > maxWidth) { + maxLen = middleLen; + maxLenPx = middleLenPx; + } + else { + minLen = middleLen; + minLenPx = middleLenPx; + } + + middleLen = (minLen + (maxLen - minLen) / 2 ) | 0; + } + + return shortPackage + className.substring(0, middleLen) + '...'; + } + + return shortPackage + className; + } + return { getModel: function (obj, field) { var path = field.path; @@ -230,7 +366,49 @@ controlCenterModule.service('$common', ['$alert', function ($alert) { return true; }, - JDBC_TYPES: JDBC_TYPES + JDBC_TYPES: JDBC_TYPES, + /** + * Calculate available width for text in link to edit element. + * + * @param id Id of contains link table. + * @returns {*[]} First element is length of class for single value, second element is length for pair vlaue. + */ + availableWidth: function (id) { + var div = $('#' + id).find('div')[0]; + var width = div.clientWidth; + + if (width > 0) { + var children = div.childNodes; + + for (var i = 1; i < children.length; i++) { + var child = children[i]; + + if ('offsetWidth' in child) + width -= children[i].offsetWidth; + } + + width -= measureText('99) '); + } + + return [ width | 0, (width > 0 ? (width - measureText(' / ')) / 2 | 0 : width) | 0 ]; + }, + /** + * Cut class name by width in pixel or width in symbol count. + * + * @param s Class name to cut. + * @param maxLength Maximum length in symbols. + * @param maxWidth Maximum length in pixels. + * @returns Cutted class name. + */ + compactJavaName: function (s, maxLength, maxWidth) { + try { + // HTML5 calculation of showed message width. + return compactByMaxPixels(s, maxWidth) + } + catch (err) { + return compactByMaxCharts(s, maxLength) + } + } } }]); http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/8d8e0fab/modules/control-center-web/src/main/js/controllers/metadata-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/metadata-controller.js b/modules/control-center-web/src/main/js/controllers/metadata-controller.js index dfe7c26..e484c7f 100644 --- a/modules/control-center-web/src/main/js/controllers/metadata-controller.js +++ b/modules/control-center-web/src/main/js/controllers/metadata-controller.js @@ -38,6 +38,9 @@ controlCenterModule.controller('metadataController', [ $scope.tablePairSave = $table.tablePairSave; $scope.tablePairSaveVisible = $table.tablePairSaveVisible; + $scope.availableWidth = $common.availableWidth; + $scope.compactJavaName = $common.compactJavaName; + $scope.databases = [ {value: 'oracle', label: 'Oracle database'}, {value: 'db2', label: 'IBM DB2'}, @@ -243,6 +246,19 @@ controlCenterModule.controller('metadataController', [ ] }]; + $scope.activePanels = [0, 1]; + + $scope.ensureActivePanel = function (pnlIdx) { + if (!$scope.activePanels || $scope.activePanels.length < 1) + $scope.activePanels = [pnlIdx]; + else if (!_.contains($scope.activePanels, pnlIdx)) { + var newActivePanels = $scope.activePanels.slice(); + newActivePanels.push(pnlIdx); + + $scope.activePanels = newActivePanels; + } + }; + $scope.metadatas = []; $scope.isJavaBuildInClass = function () { http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/8d8e0fab/modules/control-center-web/src/main/js/controllers/models/metadata.json ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/models/metadata.json b/modules/control-center-web/src/main/js/controllers/models/metadata.json index 14ce429..63b2202 100644 --- a/modules/control-center-web/src/main/js/controllers/models/metadata.json +++ b/modules/control-center-web/src/main/js/controllers/models/metadata.json @@ -67,7 +67,7 @@ "tip": [], "fields": [ { - "label": "Query fields", + "label": "Not indexed fields", "type": "queryFieldsFirst", "model": "queryFields", "keyName": "name", @@ -80,7 +80,7 @@ ] }, { - "label": "Ascending fields", + "label": "Ascending indexed fields", "type": "queryFields", "model": "ascendingFields", "keyName": "name", @@ -93,7 +93,7 @@ ] }, { - "label": "Descending fields", + "label": "Descending indexed fields", "type": "queryFields", "model": "descendingFields", "keyName": "name", @@ -106,7 +106,7 @@ ] }, { - "label": "Text fields", + "label": "Text indexed fields", "type": "table-simple", "model": "textFields", "placeholder": "Field name", @@ -121,7 +121,7 @@ ] }, { - "label": "Groups", + "label": "Group indexes", "type": "queryGroups", "model": "groups", "addTip": "Add new group.", http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/8d8e0fab/modules/control-center-web/src/main/js/public/stylesheets/style.scss ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/public/stylesheets/style.scss b/modules/control-center-web/src/main/js/public/stylesheets/style.scss index d0db23a..447122d 100644 --- a/modules/control-center-web/src/main/js/public/stylesheets/style.scss +++ b/modules/control-center-web/src/main/js/public/stylesheets/style.scss @@ -22,6 +22,7 @@ $ignite-block-callout-left: #248fb2; $ignite-block-callout-left-background: #f4f8fa; $ignite-block-callout-right: #50af51; $ignite-block-callout-right-background: #f3f8f3; +$ignite-block-callout-gradient-to: #ffffff; hr { margin: 20px 0; @@ -1226,7 +1227,7 @@ a { .block-callout-left { @extend .block-callout; - background-color: $ignite-block-callout-left-background; + background: linear-gradient(to right, $ignite-block-callout-left-background, $ignite-block-callout-gradient-to); border-color: $ignite-block-callout-left; i { @@ -1241,7 +1242,7 @@ a { .block-callout-right { @extend .block-callout; - background-color: $ignite-block-callout-right-background; + background: linear-gradient(to right, $ignite-block-callout-right-background, $ignite-block-callout-gradient-to); border-color: $ignite-block-callout-right; i { http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/8d8e0fab/modules/control-center-web/src/main/js/views/configuration/caches.jade ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/views/configuration/caches.jade b/modules/control-center-web/src/main/js/views/configuration/caches.jade index c0cd1ec..fe3f987 100644 --- a/modules/control-center-web/src/main/js/views/configuration/caches.jade +++ b/modules/control-center-web/src/main/js/views/configuration/caches.jade @@ -52,7 +52,7 @@ block content .advanced-options i.fa.fa-chevron-circle-up(ng-click='toggleExpanded()') a(ng-click='toggleExpanded()') {{ui.expanded ? 'Hide advanced settings...' : 'Show advanced settings...'}} - .panel-group(bs-collapse data-allow-multiple='true' data-start-collapsed='true') + .panel-group(bs-collapse data-allow-multiple='true' data-start-collapsed='true' ng-click='triggerDigest = true') .panel.panel-default(ng-repeat='group in advanced') .panel-heading h3 http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/8d8e0fab/modules/control-center-web/src/main/js/views/configuration/metadata.jade ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/views/configuration/metadata.jade b/modules/control-center-web/src/main/js/views/configuration/metadata.jade index b8d4d25..9d96515 100644 --- a/modules/control-center-web/src/main/js/views/configuration/metadata.jade +++ b/modules/control-center-web/src/main/js/views/configuration/metadata.jade @@ -36,11 +36,11 @@ block content td(ng-class='{active: row._id == selectedItem._id}') a(event-focus='defaultFocusId' ng-click='selectItem(row)') {{$index + 1}}) {{row.name}} .padding-top-dflt - button.btn.btn-primary(event-focus='defaultFocusId' ng-click='panels.activePanel = [0]; createItem()') Add metadata + button.btn.btn-primary(ng-click='ensureActivePanel(0); createItem();' event-focus='defaultFocusId') Add metadata button.btn.btn-primary(ng-click='loadFromDb()') Load from database hr form.form-horizontal(name='inputForm' ng-if='backupItem' novalidate) - .panel-group(bs-collapse data-allow-multiple='true') + .panel-group(bs-collapse ng-model='activePanels' data-allow-multiple='true' ng-click='triggerDigest = true') .panel.panel-default(ng-repeat='group in metadata') .panel-heading h3 http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/8d8e0fab/modules/control-center-web/src/main/js/views/includes/controls.jade ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/views/includes/controls.jade b/modules/control-center-web/src/main/js/views/includes/controls.jade index c62802b..86db992 100644 --- a/modules/control-center-web/src/main/js/views/includes/controls.jade +++ b/modules/control-center-web/src/main/js/views/includes/controls.jade @@ -86,12 +86,12 @@ mixin table-pair(header, tblMdl, keyFld, valFld, keyPlaceholder, valPlaceholder, +tipLabel('field.tip') +btn-add('tableNewItem(field)', 'field.addTip', 'newKey{{::field.focusId}}') .fieldset-content(ng-show='(#{tblMdl} && #{tblMdl}.length > 0) || tableNewItemActive(field)') - table.col-sm-12.links-edit(st-table=tblMdl) + table.col-sm-12.links-edit(id='{{::field.model}}' st-table=tblMdl) tbody tr(ng-repeat='item in #{tblMdl}') td.col-sm-12 div(ng-show='!tableEditing(field, $index)') - a.labelFormField(event-focus='curKey{{::field.focusId}}' ng-click='curPair = tableStartEdit(backupItem, field, $index); curKey = curPair.#{keyFld}; curValue = curPair.#{valFld}') {{$index + 1}}) {{item.#{keyFld}}} / {{item.#{valFld}}} + a.labelFormField(event-focus='curKey{{::field.focusId}}' ng-click='curPair = tableStartEdit(backupItem, field, $index); curKey = curPair.#{keyFld}; curValue = curPair.#{valFld}') {{$index + 1}}) {{compactJavaName(item.#{keyFld}, 25, availableWidth(field.model)[1])}} / {{compactJavaName(item.#{valFld}, 25, availableWidth(field.model)[1])}} +btn-remove('tableRemove(backupItem, field, $index)', 'field.removeTip') div(ng-if='tableEditing(field, $index)') +table-pair-edit('curKey', 'curValue', keyPlaceholder, valPlaceholder, keyJavaBuildInTypes, valueJavaBuildInTypes, '{{::field.focusId}}', '$index') @@ -323,12 +323,12 @@ mixin form-row-custom(lblClasses, fieldClasses, dataSource) +tipLabel('field.tableTip') +btn-add('tableNewItem(field)', 'field.addTip', 'new{{::field.focusId}}') .fieldset-content(ng-show='(#{fieldMdl} && #{fieldMdl}.length > 0) || tableNewItemActive(field)') - table.col-sm-12.links-edit(st-table='#{fieldMdl}') + table.col-sm-12.links-edit(id='{{::field.model}}' st-table='#{fieldMdl}') tbody tr(ng-repeat='item in #{fieldMdl} track by $index') td div(ng-show='!tableEditing(field, $index)') - a.labelFormField(event-focus='cur{{::field.focusId}}' ng-click='curValue = tableStartEdit(backupItem, field, $index)') {{$index + 1}}) {{item | compact}} + a.labelFormField(event-focus='cur{{::field.focusId}}' ng-click='curValue = tableStartEdit(backupItem, field, $index)') {{$index + 1}}) {{compactJavaName(item, 55, availableWidth(field.model)[0])}} +btn-remove('tableRemove(backupItem, field, $index)', 'field.removeTip') +btn-down('field.reordering && tableSimpleDownVisible(backupItem, field, $index)', 'tableSimpleDown(backupItem, field, $index)') +btn-up('field.reordering && $index > 0', 'tableSimpleUp(backupItem, field, $index)')
