IGNITE-5635 Web Console: Added spinning wheel for execute, scan and export actions on Queries screen.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/f992386e Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/f992386e Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/f992386e Branch: refs/heads/ignite-zk Commit: f992386e25e643f329b219ec2d0f877e50920b40 Parents: 8c278ca Author: alexdel <verba...@yandex.ru> Authored: Wed Nov 15 19:35:30 2017 +0700 Committer: Alexey Kuznetsov <akuznet...@apache.org> Committed: Wed Nov 15 19:35:30 2017 +0700 ---------------------------------------------------------------------- .../frontend/app/modules/sql/sql.controller.js | 28 ++++++- .../frontend/public/stylesheets/style.scss | 10 +++ .../web-console/frontend/views/sql/sql.tpl.pug | 84 ++++++++++++++++++-- 3 files changed, 112 insertions(+), 10 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/f992386e/modules/web-console/frontend/app/modules/sql/sql.controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/modules/sql/sql.controller.js b/modules/web-console/frontend/app/modules/sql/sql.controller.js index 8d27d30..b4c8a6f 100644 --- a/modules/web-console/frontend/app/modules/sql/sql.controller.js +++ b/modules/web-console/frontend/app/modules/sql/sql.controller.js @@ -59,6 +59,9 @@ class Paragraph { self.maxPages = 0; self.filter = ''; self.useAsDefaultSchema = false; + self.localQueryMode = false; + self.csvIsPreparing = false; + self.scanningInProgress = false; _.assign(this, paragraph); @@ -200,6 +203,14 @@ class Paragraph { chartTimeLineEnabled() { return _.nonEmpty(this.chartKeyCols) && _.eq(this.chartKeyCols[0], TIME_LINE); } + + executionInProgress(showLocal = false) { + return this.loading && (this.localQueryMode === showLocal); + } + + checkScanInProgress(showLocal = false) { + return this.scanningInProgress && (this.localQueryMode === showLocal); + } } // Controller for SQL notebook screen. @@ -1409,6 +1420,8 @@ export default ['$rootScope', '$scope', '$http', '$q', '$timeout', '$interval', const enforceJoinOrder = !!paragraph.enforceJoinOrder; const lazy = !!paragraph.lazy; + paragraph.localQueryMode = local; + $scope.queryAvailable(paragraph) && _chooseNode(paragraph.cacheName, local) .then((nid) => { Notebook.save($scope.notebook) @@ -1506,8 +1519,12 @@ export default ['$rootScope', '$scope', '$http', '$q', '$timeout', '$interval', const filter = paragraph.filter; const pageSize = paragraph.pageSize; + paragraph.localQueryMode = local; + $scope.scanAvailable(paragraph) && _chooseNode(cacheName, local) .then((nid) => { + paragraph.scanningInProgress = true; + Notebook.save($scope.notebook) .catch(Messages.showError); @@ -1537,7 +1554,8 @@ export default ['$rootScope', '$scope', '$http', '$q', '$timeout', '$interval', paragraph.setError(err); _showLoading(paragraph, false); - }); + }) + .then(() => paragraph.scanningInProgress = false); }); }; @@ -1664,6 +1682,8 @@ export default ['$rootScope', '$scope', '$http', '$q', '$timeout', '$interval', }; $scope.exportCsvAll = (paragraph) => { + paragraph.csvIsPreparing = true; + const args = paragraph.queryArgs; return Promise.resolve(args.localNid || _chooseNode(args.cacheName, false)) @@ -1672,7 +1692,11 @@ export default ['$rootScope', '$scope', '$http', '$q', '$timeout', '$interval', : agentMgr.querySqlGetAll(nid, args.cacheName, args.query, !!args.nonCollocatedJoins, !!args.enforceJoinOrder, false, !!args.localNid, !!args.lazy)) .then((res) => _export(exportFileName(paragraph, true), paragraph.gridOptions.columnDefs, res.columns, res.rows)) .catch(Messages.showError) - .then(() => paragraph.ace && paragraph.ace.focus()); + .then(() => { + paragraph.csvIsPreparing = false; + + return paragraph.ace && paragraph.ace.focus(); + }); }; // $scope.exportPdfAll = function(paragraph) { http://git-wip-us.apache.org/repos/asf/ignite/blob/f992386e/modules/web-console/frontend/public/stylesheets/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index b259f1d..8433747 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -2201,3 +2201,13 @@ html,body,.splash-screen { .demo-mode { padding-top: 30px; } + +// Fix for injecting svg icon into BS btn +.btn--with-icon { + display: flex; + align-items: center; + + span { + margin-left: 5px; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/f992386e/modules/web-console/frontend/views/sql/sql.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/sql/sql.tpl.pug b/modules/web-console/frontend/views/sql/sql.tpl.pug index 7ee966d..b324622 100644 --- a/modules/web-console/frontend/views/sql/sql.tpl.pug +++ b/modules/web-console/frontend/views/sql/sql.tpl.pug @@ -123,8 +123,17 @@ mixin query-settings span Lazy result set mixin query-actions - button.btn.btn-primary(ng-disabled='!queryAvailable(paragraph)' ng-click='execute(paragraph)') Execute - button.btn.btn-primary(ng-disabled='!queryAvailable(paragraph)' ng-click='execute(paragraph, true)') Execute on selected node + button.btn.btn-primary(ng-disabled='!queryAvailable(paragraph)' ng-click='execute(paragraph)') + div + i.fa.fa-fw.fa-play(ng-hide='paragraph.executionInProgress(false)') + i.fa.fa-fw.fa-refresh.fa-spin(ng-show='paragraph.executionInProgress(false)') + span.tipLabelExecute Execute + button.btn.btn-primary(ng-disabled='!queryAvailable(paragraph)' ng-click='execute(paragraph, true)') + div + i.fa.fa-fw.fa-play(ng-hide='paragraph.executionInProgress(true)') + i.fa.fa-fw.fa-refresh.fa-spin(ng-show='paragraph.executionInProgress(true)') + span.tipLabelExecute Execute on selected node + a.btn.btn-default(ng-disabled='!queryAvailable(paragraph)' ng-click='explain(paragraph)' data-placement='bottom' bs-tooltip='' data-title='{{queryTooltip(paragraph, "explain query")}}') Explain @@ -141,8 +150,35 @@ mixin table-result-heading-query +result-toolbar .col-xs-4 .pull-right - -var options = [{ text: "Export", click: 'exportCsv(paragraph)' }, { text: 'Export all', click: 'exportCsvAll(paragraph)' }] - +btn-group('paragraph.loading', options, '{{ queryTooltip(paragraph, "export query results") }}') + .btn-group.panel-tip-container + button.btn.btn-primary.btn--with-icon( + ng-click='exportCsv(paragraph)' + + ng-disabled='paragraph.loading' + + bs-tooltip='' + ng-attr-title='{{ queryTooltip(paragraph, "export query results") }}' + + data-trigger='hover' + data-placement='bottom' + ) + svg(ignite-icon='csv' ng-if='!paragraph.csvIsPreparing') + i.fa.fa-fw.fa-refresh.fa-spin(ng-if='paragraph.csvIsPreparing') + span Export + + -var options = [{ text: "Export", click: 'exportCsv(paragraph)' }, { text: 'Export all', click: 'exportCsvAll(paragraph)' }] + button.btn.dropdown-toggle.btn-primary( + ng-disabled='paragraph.loading' + + bs-dropdown=`${JSON.stringify(options)}` + + data-toggle='dropdown' + data-container='body' + data-placement='bottom-right' + ) + span.caret + + mixin table-result-heading-scan .total.row @@ -157,8 +193,34 @@ mixin table-result-heading-scan +result-toolbar .col-xs-4 .pull-right - -var options = [{ text: "Export", click: 'exportCsv(paragraph)' }, { text: 'Export all', click: 'exportCsvAll(paragraph)' }] - +btn-group('paragraph.loading', options, '{{ scanTooltip(paragraph) }}') + .btn-group.panel-tip-container + // TODO: replace this logic for exporting under one component + button.btn.btn-primary.btn--with-icon( + ng-click='exportCsv(paragraph)' + + ng-disabled='paragraph.loading' + + bs-tooltip='' + ng-attr-title='{{ scanTooltip(paragraph) }}' + + data-trigger='hover' + data-placement='bottom' + ) + svg(ignite-icon='csv' ng-if='!paragraph.csvIsPreparing') + i.fa.fa-fw.fa-refresh.fa-spin(ng-if='paragraph.csvIsPreparing') + span Export + + -var options = [{ text: "Export", click: 'exportCsv(paragraph)' }, { text: 'Export all', click: 'exportCsvAll(paragraph)' }] + button.btn.dropdown-toggle.btn-primary( + ng-disabled='paragraph.loading' + + bs-dropdown=`${JSON.stringify(options)}` + + data-toggle='dropdown' + data-container='body' + data-placement='bottom-right' + ) + span.caret mixin table-result-body .grid(ui-grid='paragraph.gridOptions' ui-grid-resize-columns ui-grid-exporter) @@ -197,9 +259,15 @@ mixin paragraph-scan .col-sm-12.sql-controls button.btn.btn-primary(ng-disabled='!scanAvailable(paragraph)' ng-click='scan(paragraph)') - | Scan + div + i.fa.fa-fw.fa-play(ng-hide='paragraph.checkScanInProgress(false)') + i.fa.fa-fw.fa-refresh.fa-spin(ng-show='paragraph.checkScanInProgress(false)') + span.tipLabelExecute Scan + button.btn.btn-primary(ng-disabled='!scanAvailable(paragraph)' ng-click='scan(paragraph, true)') - | Scan on selected node + i.fa.fa-fw.fa-play(ng-hide='paragraph.checkScanInProgress(true)') + i.fa.fa-fw.fa-refresh.fa-spin(ng-show='paragraph.checkScanInProgress(true)') + span.tipLabelExecute Scan on selected node .col-sm-12.sql-result(ng-if='paragraph.queryExecuted()' ng-switch='paragraph.resultType()') .error(ng-switch-when='error') Error: {{paragraph.error.message}}
