IGNITE-1716 Reworked sql metadata dialog.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/048fca3b Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/048fca3b Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/048fca3b Branch: refs/heads/ignite-843-rc1 Commit: 048fca3b1a2d75f66b3050cfcf8fbe2dbf2ca122 Parents: 0a79ecd Author: Andrey <[email protected]> Authored: Mon Nov 9 14:52:03 2015 +0700 Committer: Andrey <[email protected]> Committed: Mon Nov 9 14:52:03 2015 +0700 ---------------------------------------------------------------------- .../src/main/js/controllers/sql-controller.js | 55 ++++++------- .../src/main/js/public/stylesheets/style.scss | 44 +++++++--- .../src/main/js/routes/agent.js | 86 +++++++++++--------- .../src/main/js/views/sql/cache-metadata.jade | 32 +++++--- .../src/main/js/views/sql/sql.jade | 3 +- 5 files changed, 129 insertions(+), 91 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/048fca3b/modules/control-center-web/src/main/js/controllers/sql-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/sql-controller.js b/modules/control-center-web/src/main/js/controllers/sql-controller.js index 42181c8..c2fcbf8 100644 --- a/modules/control-center-web/src/main/js/controllers/sql-controller.js +++ b/modules/control-center-web/src/main/js/controllers/sql-controller.js @@ -44,7 +44,11 @@ consoleModule.controller('sqlController', $scope.exportDropdown = [{ 'text': 'Export all', 'click': 'exportAll(paragraph)'}]; - $scope.treeOptions = { + $scope.metadata = []; + + $scope.metaFilter = ""; + + $scope.metaOptions = { nodeChildren: 'children', dirSelectable: true, injectClasses: { @@ -213,7 +217,7 @@ consoleModule.controller('sqlController', var _setActiveCache = function () { if ($scope.caches.length > 0) _.forEach($scope.notebook.paragraphs, function (paragraph) { - if (!paragraph.cacheName || !_.find($scope.caches, {name: paragraph.cacheName})) + if (!_.find($scope.caches, {name: paragraph.cacheName})) paragraph.cacheName = $scope.caches[0].name; }); }; @@ -431,17 +435,8 @@ consoleModule.controller('sqlController', function getTopology(caches, onSuccess) { onSuccess(); - var oldCaches = $scope.caches; - $scope.caches = _.sortBy(caches, 'name'); - _.forEach(caches, function (cache) { - var old = _.find(oldCaches, { name: cache.name }); - - if (old && old.metadata) - cache.metadata = old.metadata; - }); - _setActiveCache(); } @@ -668,7 +663,7 @@ consoleModule.controller('sqlController', type: "QUERY", query: paragraph.query, pageSize: paragraph.pageSize, - cacheName: paragraph.cacheName + cacheName: paragraph.cacheName || undefined }; $http.post('/agent/query', paragraph.queryArgs) @@ -705,7 +700,7 @@ consoleModule.controller('sqlController', type: "EXPLAIN", query: 'EXPLAIN ' + paragraph.query, pageSize: paragraph.pageSize, - cacheName: paragraph.cacheName + cacheName: paragraph.cacheName || undefined }; $http.post('/agent/query', paragraph.queryArgs) @@ -731,7 +726,7 @@ consoleModule.controller('sqlController', paragraph.queryArgs = { type: "SCAN", pageSize: paragraph.pageSize, - cacheName: paragraph.cacheName + cacheName: paragraph.cacheName || undefined }; $http.post('/agent/scan', paragraph.queryArgs) @@ -1274,7 +1269,7 @@ consoleModule.controller('sqlController', } $scope.actionAvailable = function (paragraph, needQuery) { - return $scope.caches.length > 0 && paragraph.cacheName && (!needQuery || paragraph.query) && !paragraph.loading; + return $scope.caches.length > 0 && (!needQuery || paragraph.query) && !paragraph.loading; }; $scope.actionTooltip = function (paragraph, action, needQuery) { @@ -1282,7 +1277,7 @@ consoleModule.controller('sqlController', return; if (paragraph.loading) - return 'Wating for server response'; + return 'Waiting for server response'; return 'To ' + action + ' query select cache' + (needQuery ? ' and input query' : ''); }; @@ -1304,21 +1299,21 @@ consoleModule.controller('sqlController', }, 1); }; - $scope.tryLoadMetadata = function (cache) { - if (!cache.metadata) { - $loading.start('loadingCacheMetadata'); + $scope.loadMetadata = function () { + $loading.start('loadingCacheMetadata'); - $http.post('/agent/cache/metadata', {cacheName: cache.name}) - .success(function (metadata) { - cache.metadata = _.sortBy(metadata, 'name'); - }) - .error(function (errMsg) { - $common.showError(errMsg); - }) - .finally(function() { - $loading.finish('loadingCacheMetadata'); - }); - } + $scope.metadata = []; + + $http.post('/agent/cache/metadata') + .success(function (metadata) { + $scope.metadata = _.sortBy(metadata, 'name'); + }) + .error(function (errMsg) { + $common.showError(errMsg); + }) + .finally(function() { + $loading.finish('loadingCacheMetadata'); + }); }; $scope.showResultQuery = function (paragraph) { http://git-wip-us.apache.org/repos/asf/ignite/blob/048fca3b/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 95f9ce5..9e0e243 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 @@ -1015,25 +1015,33 @@ button.form-control { .popover-title { color: black; - line-height: $line-height-base; + line-height: 27px; - padding: 8px 20px 8px 10px; + padding: 3px 5px 3px 10px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; + + .close { + float: right; + top: 0; + right: 0; + position: relative; + margin-left: 10px; + line-height: 27px; + } } > .popover-content { - overflow: scroll; + overflow: auto; + + white-space: nowrap; min-height: 400px; max-height: 400px; - min-width: 300px; - max-width: 300px; - .content-empty { display: block; text-align: center; @@ -1043,9 +1051,7 @@ button.form-control { } } - label.clickable { - cursor: pointer; - } + .clickable { cursor: pointer; } } .theme-line .popover.validation-error { @@ -1695,15 +1701,29 @@ treecontrol.tree-classic { padding: 0; } - li.tree-expanded i.tree-branch-head, li.tree-collapsed i.tree-branch-head { - background: none; - padding-left: 0; + li { + padding-left: 17px; + } + + + li.tree-expanded i.fa, li.tree-collapsed i.fa, li.tree-leaf i.fa { + background: none no-repeat; + padding: 1px 5px 1px 1px; + } + + li.tree-leaf i.tree-leaf-head { + background: none no-repeat; + padding: 0; } li .tree-selected { background-color: white; font-weight: normal; } + + span { + margin-right: 10px; + } } .docs-content { http://git-wip-us.apache.org/repos/asf/ignite/blob/048fca3b/modules/control-center-web/src/main/js/routes/agent.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/routes/agent.js b/modules/control-center-web/src/main/js/routes/agent.js index 786c867..9782899 100644 --- a/modules/control-center-web/src/main/js/routes/agent.js +++ b/modules/control-center-web/src/main/js/routes/agent.js @@ -87,7 +87,7 @@ router.post('/topology', function (req, res) { var client = _client(req, res); if (client) { - client.ignite().cluster().then(function (clusters) { + client.ignite().cluster(false).then(function (clusters) { var caches = clusters.map(function (cluster) { return Object.keys(cluster._caches).map(function (key) { return {name: key, mode: cluster._caches[key]} @@ -207,59 +207,71 @@ router.post('/cache/metadata', function (req, res) { var client = _client(req, res); if (client) { - client.ignite().cache(req.body.cacheName).metadata().then(function (meta) { - var tables = meta.types.map(function (typeName) { - var fields = meta.fields[typeName]; + client.ignite().cache(req.body.cacheName).metadata().then(function (caches) { + var types = []; - var showSystem = fields.length == 2 && fields["_KEY"] && fields["_VAL"]; + for (var meta of caches) { + var cacheTypes = meta.types.map(function (typeName) { + var cacheName = meta.cacheName ? meta.cacheName : '<default>'; - var columns = []; + var fullTypeName = '"' + (meta.cacheName ? meta.cacheName : "") + '".' + typeName; - for (var fieldName in fields) - if (showSystem || fieldName != "_KEY" && fieldName != "_VAL") { + var fields = meta.fields[typeName]; + + var columns = []; + + for (var fieldName in fields) { var fieldClass = _compact(fields[fieldName]); columns.push({ type: 'field', name: fieldName, - fullName: typeName + '.' + fieldName, - clazz: fieldClass + clazz: fieldClass, + system: fieldName == "_KEY" || fieldName == "_VAL", + cacheName: cacheName, + typeName: typeName }); } - var indexes = []; - - for (var index of meta.indexes[typeName]) { - fields = []; - - for (var field of index.fields) { - fields.push({ - type: 'index-field', - name: field, - fullName: typeName + '.' + index.name + '.' + field, - order: index.descendings.indexOf(field) < 0, - unique: index.unique - }); + var indexes = []; + + for (var index of meta.indexes[typeName]) { + fields = []; + + for (var field of index.fields) { + fields.push({ + type: 'index-field', + name: field, + order: index.descendings.indexOf(field) < 0, + unique: index.unique, + cacheName: cacheName, + typeName: typeName + }); + } + + if (fields.length > 0) + indexes.push({ + type: 'index', + name: index.name, + children: fields, + cacheName: cacheName, + typeName: typeName + }); } - if (fields.length > 0) - indexes.push({ - type: 'index', - name: index.name, - fullName: typeName + '.' + index.name, - children: fields - }); - } + columns = _.sortBy(columns, 'name'); - columns = _.sortBy(columns, 'name'); + if (!_.isEmpty(indexes)) + columns = columns.concat({type: 'indexes', name: 'Indexes', cacheName: cacheName, typeName: typeName, children: indexes }); - if (indexes.length > 0) - columns = columns.concat({type: 'indexes', name: 'Indexes', fullName: typeName + '.indexes', children: indexes }); + return {type: 'type', name: cacheName + '.' + typeName, fullName: fullTypeName, children: columns }; + }); - return {type: 'type', name: typeName, fullName: '"' + req.body.cacheName + '".' +typeName, children: columns }; - }); + if (!_.isEmpty(cacheTypes)) + types = types.concat(cacheTypes); + } - res.json(tables); + res.json(types); }, function (err) { res.status(500).send(err); }); http://git-wip-us.apache.org/repos/asf/ignite/blob/048fca3b/modules/control-center-web/src/main/js/views/sql/cache-metadata.jade ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/views/sql/cache-metadata.jade b/modules/control-center-web/src/main/js/views/sql/cache-metadata.jade index dd3fd88..994cf20 100644 --- a/modules/control-center-web/src/main/js/views/sql/cache-metadata.jade +++ b/modules/control-center-web/src/main/js/views/sql/cache-metadata.jade @@ -11,16 +11,26 @@ 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. -.popover.cache-metadata(tabindex='-1' dw-loading='loadingCacheMetadata' dw-loading-options='{text: ""}' ng-init='tryLoadMetadata(cache)') - h3.popover-title Metadata for: <b>{{cache.name}}</b></br>Cache mode: <b>{{cache.mode}}</b> - button.close(id='cache-metadata-close' ng-click='$hide()') × - .popover-content(ng-if='cache.metadata && cache.metadata.length > 0') - treecontrol.tree-classic(tree-model='cache.metadata' options='treeOptions') - label.clickable(ng-if='node.type == "type"' ng-dblclick='dblclickMetadata(paragraph, node)') {{node.name}} - label.clickable(ng-if='node.type == "field"' ng-dblclick='dblclickMetadata(paragraph, node)') {{node.name}} [{{node.clazz}}] - label(ng-if='node.type == "indexes"') {{node.name}} - label(ng-if='node.type == "index"') {{node.name}} - label.clickable(ng-if='node.type == "index-field"' ng-dblclick='dblclickMetadata(paragraph, node)') {{node.name}} [{{node.order ? 'ASC' : 'DESC'}}] - .popover-content(ng-if='!cache.metadata || cache.metadata.length == 0') +.popover.cache-metadata(tabindex='-1' dw-loading='loadingCacheMetadata' dw-loading-options='{text: ""}' ng-init='loadMetadata()') + h3.popover-title + label.labelField Metadata for caches: + button.close(id='cache-metadata-close' ng-click='$hide()') × + .input-tip + input.form-control(type='text' ng-model='metaFilter' placeholder='Filter matadata...') + .popover-content(ng-if='metadata && metadata.length > 0') + treecontrol.tree-classic(tree-model='metadata' options='metaOptions' filter-expression="metaFilter") + span(ng-switch='' on='node.type') + span(ng-switch-when='type' ng-dblclick='dblclickMetadata(paragraph, node)') + i.fa.fa-table + label.clickable {{node.name}} + span(ng-switch-when='field' ng-dblclick='dblclickMetadata(paragraph, node)') + i.fa(ng-class='node.system ? "fa-file-text-o" : "fa-file-o"') + label.clickable {{node.name}} [{{node.clazz}}] + label(ng-switch-when='indexes') {{node.name}} + label(ng-switch-when='index') {{node.name}} + span(ng-switch-when='index-field' ng-dblclick='dblclickMetadata(paragraph, node)') + i.fa(ng-class='node.order ? "fa-sort-amount-asc" : "fa-sort-amount-desc"') + label.clickable {{node.name}} + .popover-content(ng-if='!metadata || metadata.length == 0') label.content-empty No types found h3.popover-footer Double click to paste into editor http://git-wip-us.apache.org/repos/asf/ignite/blob/048fca3b/modules/control-center-web/src/main/js/views/sql/sql.jade ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/views/sql/sql.jade b/modules/control-center-web/src/main/js/views/sql/sql.jade index 895a213..f34d57e 100644 --- a/modules/control-center-web/src/main/js/views/sql/sql.jade +++ b/modules/control-center-web/src/main/js/views/sql/sql.jade @@ -130,6 +130,7 @@ block container .col-xs-4.col-sm-3 div(ng-show='caches.length > 0' style='padding: 5px 10px' st-table='displayedCaches' st-safe-src='caches') lable.labelField.labelFormField Caches: + i.fa.fa-database.tipField(bs-popover data-template-url='cache-metadata', data-placement='bottom', data-trigger='click') .input-tip input.form-control(type='text' st-search placeholder='Filter caches...') table.links @@ -137,7 +138,7 @@ block container tr(ng-repeat='cache in displayedCaches track by cache.name') td(style='width: 100%') input.labelField(type='radio' value='{{cache.name}}') - a(bs-popover data-template-url='cache-metadata', data-placement='bottom', data-trigger='click') {{cache.name}} + label {{cache.name || "<default>"}} .empty-caches(ng-show='displayedCaches.length == 0 && caches.length != 0') label Wrong caches filter .empty-caches(ng-show='caches.length == 0')
