diff --git a/client/app/assets/less/inc/schema-browser.less b/client/app/assets/less/inc/schema-browser.less index dc18c2343f..c077e7142c 100644 --- a/client/app/assets/less/inc/schema-browser.less +++ b/client/app/assets/less/inc/schema-browser.less @@ -62,6 +62,8 @@ div.table-name { } &:hover { + background: fade(@redash-gray, 10%); + .copy-to-editor { display: flex; } diff --git a/client/app/assets/less/redash/query.less b/client/app/assets/less/redash/query.less index cc76d371d0..74c8ee73ce 100644 --- a/client/app/assets/less/redash/query.less +++ b/client/app/assets/less/redash/query.less @@ -79,7 +79,7 @@ edit-in-place p.editable:hover { } .filter-container { - margin-bottom: 5px; + margin-bottom: 10px; } .editor__control--right { diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less index e74064f537..6c4784ac25 100644 --- a/client/app/assets/less/redash/redash-newstyle.less +++ b/client/app/assets/less/redash/redash-newstyle.less @@ -73,6 +73,43 @@ body { } } +.add-widget-container { + background: #fff; + border-radius: @redash-radius; + padding: 15px; + position: fixed; + left: 15px; + bottom: 20px; + width: calc(~'100% - 30px'); + z-index: 99; + box-shadow: fade(@redash-gray, 50%) 0px 7px 29px -3px; + display: flex; + justify-content: space-between; + + h2 { + margin: 0; + font-size: 14px; + line-height: 2.1; + font-weight: 400; + + .zmdi { + margin: 0; + margin-right: 5px; + font-size: 24px; + position: absolute; + bottom: 18px; + } + + span { + padding-left: 30px; + } + } + + .btn { + align-self: center; + } +} + body { .ace-tm .ace_gutter { background: #fff; @@ -285,6 +322,11 @@ page-header, .page-header--new { .label { border-radius: 2px; padding: 3px 6px 4px; + font-weight: 500; +} + +.label-default { + background: fade(@redash-gray, 85%); } .tab-nav > li > a { @@ -295,6 +337,21 @@ page-header, .page-header--new { text-transform: none; } +.dashboard-header { + position: -webkit-sticky; // required for Safari + position: sticky; + background: #f6f7f9; + z-index: 99; + width: 100%; + top: 0; +} + +.widget-wrapper { + .parameter-container { + padding: 0 15px; + } +} + .dashboard__control { margin: 8px 0; } @@ -310,6 +367,21 @@ page-header, .page-header--new { } } +.dashboard-header { + position: -webkit-sticky; // required for Safari + position: sticky; + background: #f6f7f9; + z-index: 99; + width: 100%; + top: 0; +} + +.widget-wrapper { + .parameter-container { + padding: 0 15px; + } +} + .bg-ace { background-color: fade(@redash-gray, 12%) !important; } diff --git a/client/app/components/dashboards/edit-dashboard-dialog.html b/client/app/components/dashboards/edit-dashboard-dialog.html index ea54aceb27..e216d569a4 100644 --- a/client/app/components/dashboards/edit-dashboard-dialog.html +++ b/client/app/components/dashboards/edit-dashboard-dialog.html @@ -6,13 +6,6 @@

Dashboard name: {{$ctrl.dashboard.name}}

- -

- -

diff --git a/client/app/components/dashboards/edit-dashboard-dialog.js b/client/app/components/dashboards/edit-dashboard-dialog.js index f33b461a37..931fc387ea 100644 --- a/client/app/components/dashboards/edit-dashboard-dialog.js +++ b/client/app/components/dashboards/edit-dashboard-dialog.js @@ -8,63 +8,28 @@ const EditDashboardDialog = { dismiss: '&', }, template, - controller($rootScope, $location, $http, toastr, Events, Dashboard) { + controller($rootScope, $location, $http, toastr, Events) { 'ngInject'; this.dashboard = this.resolve.dashboard; - this.gridsterOptions = { - margins: [5, 5], - rowHeight: 100, - colWidth: 260, - columns: 2, - mobileModeEnabled: false, - swapping: true, - minRows: 1, - draggable: { - enabled: true, - }, - resizable: { - enabled: false, - }, - }; this.isFormValid = () => !isEmpty(this.dashboard.name); this.saveDashboard = () => { this.saveInProgress = true; - if (this.dashboard.id) { - const request = { - slug: this.dashboard.id, - name: this.dashboard.name, - version: this.dashboard.version, - dashboard_filters_enabled: this.dashboard.dashboard_filters_enabled, - }; - - Dashboard.save(request, (dashboard) => { - this.dashboard = dashboard; - this.saveInProgress = false; - this.close({ $value: this.dashboard }); - $rootScope.$broadcast('reloadDashboards'); - }, (error) => { - this.saveInProgress = false; - if (error.status === 403) { - toastr.error('Unable to save dashboard: Permission denied.'); - } else if (error.status === 409) { - toastr.error('It seems like the dashboard has been modified by another user. ' + - 'Please copy/backup your changes and reload this page.', { autoDismiss: false }); - } - }); - Events.record('edit', 'dashboard', this.dashboard.id); - } else { - $http.post('api/dashboards', { + $http + .post('api/dashboards', { name: this.dashboard.name, - }).success((response) => { + }) + .success((response) => { this.close(); - $location.path(`/dashboard/${response.slug}`).replace(); + $location + .path(`/dashboard/${response.slug}`) + .search('edit') + .replace(); }); - Events.record('create', 'dashboard'); - } + Events.record('create', 'dashboard'); }; }, }; diff --git a/client/app/components/dashboards/widget.js b/client/app/components/dashboards/widget.js index 5607be3c15..0faac7f8ca 100644 --- a/client/app/components/dashboards/widget.js +++ b/client/app/components/dashboards/widget.js @@ -82,11 +82,8 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser) Events.record('view', 'widget', this.widget.id); this.reload = (force) => { - let maxAge = $location.search().maxAge; - if (force) { - maxAge = 0; - } - this.queryResult = this.query.getQueryResult(maxAge); + const maxAge = $location.search().maxAge; + this.queryResult = this.widget.getQueryResult(force, maxAge); }; if (this.widget.visualization) { diff --git a/client/app/components/filters.html b/client/app/components/filters.html index 8153b59516..d19f8d7a45 100644 --- a/client/app/components/filters.html +++ b/client/app/components/filters.html @@ -1,4 +1,4 @@ -
+
diff --git a/client/app/components/parameters.html b/client/app/components/parameters.html index c33c20a1fb..d628d9ec09 100644 --- a/client/app/components/parameters.html +++ b/client/app/components/parameters.html @@ -1,4 +1,4 @@ -
diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html index 825d00bfcd..3a7b9e6dea 100644 --- a/client/app/pages/dashboards/dashboard.html +++ b/client/app/pages/dashboards/dashboard.html @@ -1,17 +1,17 @@
-
-
-

{{$ctrl.dashboard.name}} +
+
+

+ Unpublished Archived

-
+
-
-
-
+ + +
- - -
+
-
+
+ +
+ +
-
- +
+
-
+
{{$ctrl.dashboard.name}}
+ +
+

+ + +

+ Add Widget +
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js index 837ecc8717..2f3ca3a617 100644 --- a/client/app/pages/dashboards/dashboard.js +++ b/client/app/pages/dashboards/dashboard.js @@ -5,9 +5,20 @@ import shareDashboardTemplate from './share-dashboard.html'; import './dashboard.less'; function DashboardCtrl( - $rootScope, $routeParams, $location, $timeout, $q, $uibModal, - Title, AlertDialog, Dashboard, currentUser, clientConfig, Events, - dashboardGridOptions, toastr, + $rootScope, + $routeParams, + $location, + $timeout, + $q, + $uibModal, + Title, + AlertDialog, + Dashboard, + currentUser, + clientConfig, + Events, + dashboardGridOptions, + toastr, ) { this.saveInProgress = false; const saveDashboardLayout = () => { @@ -20,15 +31,16 @@ function DashboardCtrl( // Temporarily disable grid editing (but allow user to use UI controls) this.dashboardGridOptions.draggable.enabled = false; this.dashboardGridOptions.resizable.enabled = false; - return $q.all(_.map(this.dashboard.widgets, widget => widget.$save())) + return $q + .all(_.map(this.dashboard.widgets, widget => widget.$save())) .then(() => { if (showMessages) { - toastr.success('Dashboard layout saved.'); + toastr.success('Changes saved.'); } }) .catch(() => { if (showMessages) { - toastr.error('Cannot save dashboard layout.'); + toastr.error('Error saving changes.'); } }) .finally(() => { @@ -39,17 +51,14 @@ function DashboardCtrl( }); }; - this.layoutEditing = false; this.dashboardGridOptions = _.extend({}, dashboardGridOptions, { resizable: { enabled: false, handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'], - // stop: saveDashboardLayout, }, draggable: { enabled: false, - // stop: saveDashboardLayout, }, }); @@ -57,7 +66,6 @@ function DashboardCtrl( this.refreshRate = null; this.isGridDisabled = false; this.showPermissionsControl = clientConfig.showPermissionsControl; - this.currentUser = currentUser; this.globalParameters = []; this.refreshRates = [ { name: '10 seconds', rate: 10 }, @@ -75,7 +83,6 @@ function DashboardCtrl( this.isGridDisabled = gridster.isMobile; }); - this.setRefreshRate = (rate) => { this.refreshRate = rate; if (rate !== null) { @@ -88,13 +95,17 @@ function DashboardCtrl( let globalParams = {}; this.dashboard.widgets.forEach((widget) => { if (widget.getQuery()) { - widget.getQuery().getParametersDefs().filter(p => p.global).forEach((param) => { - const defaults = {}; - defaults[param.name] = _.create(Object.getPrototypeOf(param), param); - defaults[param.name].locals = []; - globalParams = _.defaults(globalParams, defaults); - globalParams[param.name].locals.push(param); - }); + widget + .getQuery() + .getParametersDefs() + .filter(p => p.global) + .forEach((param) => { + const defaults = {}; + defaults[param.name] = _.create(Object.getPrototypeOf(param), param); + defaults[param.name].locals = []; + globalParams = _.defaults(globalParams, defaults); + globalParams[param.name].locals.push(param); + }); } }); this.globalParameters = _.values(globalParams); @@ -108,23 +119,11 @@ function DashboardCtrl( }); }; - const renderDashboard = (dashboard, force) => { - Title.set(dashboard.name); - const promises = []; - - this.dashboard.widgets.forEach((widget) => { - if (widget.visualization) { - const maxAge = force ? 0 : undefined; - const queryResult = widget.getQuery().getQueryResult(maxAge); - if (!_.isUndefined(queryResult)) { - promises.push(queryResult.toPromise()); - } - } - }); + const collectFilters = (dashboard, forceRefresh) => { + const queryResultPromises = _.compact(this.dashboard.widgets.map(widget => widget.getQueryResult(forceRefresh))) + .map(queryResult => queryResult.toPromise()); - this.extractGlobalParameters(); - - $q.all(promises).then((queryResults) => { + $q.all(queryResultPromises).then((queryResults) => { const filters = {}; queryResults.forEach((queryResult) => { const queryFilters = queryResult.getFilters(); @@ -161,21 +160,36 @@ function DashboardCtrl( }); }; + const renderDashboard = (dashboard, force) => { + Title.set(dashboard.name); + this.extractGlobalParameters(); + collectFilters(dashboard, force); + }; + this.loadDashboard = _.throttle((force) => { - this.dashboard = Dashboard.get({ slug: $routeParams.dashboardSlug }, (dashboard) => { - Events.record('view', 'dashboard', dashboard.id); - renderDashboard(dashboard, force); - }, (rejection) => { - const statusGroup = Math.floor(rejection.status / 100); - if (statusGroup === 5) { - // recoverable errors - all 5** (server is temporarily unavailable - // for some reason, but it should get up soon). - this.loadDashboard(); - } else { - // all kind of 4** errors are not recoverable, so just display them - throw new PromiseRejectionError(rejection); - } - }); + this.dashboard = Dashboard.get( + { slug: $routeParams.dashboardSlug }, + (dashboard) => { + Events.record('view', 'dashboard', dashboard.id); + renderDashboard(dashboard, force); + + if ($location.search().edit === true) { + $location.search('edit', null); + this.editLayout(true); + } + }, + (rejection) => { + const statusGroup = Math.floor(rejection.status / 100); + if (statusGroup === 5) { + // recoverable errors - all 5** (server is temporarily unavailable + // for some reason, but it should get up soon). + this.loadDashboard(); + } else { + // all kind of 4** errors are not recoverable, so just display them + throw new PromiseRejectionError(rejection); + } + }, + ); }, 1000); this.loadDashboard(); @@ -243,46 +257,57 @@ function DashboardCtrl( } }; - this.editDashboard = () => { - const previousFiltersState = this.dashboard.dashboard_filters_enabled; - $uibModal.open({ - component: 'editDashboardDialog', - resolve: { - dashboard: () => this.dashboard, + this.saveName = () => { + Dashboard.save( + { slug: this.dashboard.id, version: this.dashboard.version, name: this.dashboard.name }, + (dashboard) => { + this.dashboard = dashboard; + $rootScope.$broadcast('reloadDashboards'); + }, + (error) => { + if (error.status === 403) { + toastr.error('Name update failed: Permission denied.'); + } else if (error.status === 409) { + toastr.error( + 'It seems like the dashboard has been modified by another user. ' + + 'Please copy/backup your changes and reload this page.', + { autoDismiss: false }, + ); + } }, - }).result.then((dashboard) => { - const shouldRenderDashboard = !previousFiltersState && dashboard.dashboard_filters_enabled; - this.dashboard = dashboard; + ); + }; - if (shouldRenderDashboard) { - renderDashboard(this.dashboard); - } - }); + this.updateDashboardFiltersState = () => { + // / do something for humanity. + collectFilters(this.dashboard, false); }; this.addWidget = () => { - $uibModal.open({ - component: 'addWidgetDialog', - resolve: { - dashboard: () => this.dashboard, - }, - }).result.then(() => { - this.extractGlobalParameters(); - if (this.layoutEditing) { - // Save position of newly added widget (but not entire layout) - const widget = _.last(this.dashboard.widgets); - if (_.isObject(widget)) { - return widget.$save().then(() => { - if (this.layoutEditing) { - widget.$savedPosition = _.clone(widget.options.position); - } - }); + $uibModal + .open({ + component: 'addWidgetDialog', + resolve: { + dashboard: () => this.dashboard, + }, + }) + .result.then(() => { + this.extractGlobalParameters(); + if (this.layoutEditing) { + // Save position of newly added widget (but not entire layout) + const widget = _.last(this.dashboard.widgets); + if (_.isObject(widget)) { + return widget.$save().then(() => { + if (this.layoutEditing) { + widget.$savedPosition = _.clone(widget.options.position); + } + }); + } + } else { + // Update entire layout + return saveDashboardLayout(); } - } else { - // Update entire layout - return saveDashboardLayout(); - } - }); + }); }; this.removeWidget = () => { @@ -307,15 +332,18 @@ function DashboardCtrl( Events.record('toggle_published', 'dashboard', this.dashboard.id); this.dashboard.is_draft = !this.dashboard.is_draft; this.saveInProgress = true; - Dashboard.save({ - slug: this.dashboard.id, - name: this.dashboard.name, - is_draft: this.dashboard.is_draft, - }, (dashboard) => { - this.saveInProgress = false; - this.dashboard.version = dashboard.version; - $rootScope.$broadcast('reloadDashboards'); - }); + Dashboard.save( + { + slug: this.dashboard.id, + name: this.dashboard.name, + is_draft: this.dashboard.is_draft, + }, + (dashboard) => { + this.saveInProgress = false; + this.dashboard.version = dashboard.version; + $rootScope.$broadcast('reloadDashboards'); + }, + ); }; if (_.has($location.search(), 'fullscreen')) { @@ -349,21 +377,27 @@ const ShareDashboardComponent = { if (!this.dashboard.publicAccessEnabled) { // disable - $http.delete(url).success(() => { - this.dashboard.publicAccessEnabled = false; - delete this.dashboard.public_url; - }).error(() => { - this.dashboard.publicAccessEnabled = true; - // TODO: show message - }); + $http + .delete(url) + .success(() => { + this.dashboard.publicAccessEnabled = false; + delete this.dashboard.public_url; + }) + .error(() => { + this.dashboard.publicAccessEnabled = true; + // TODO: show message + }); } else { - $http.post(url).success((data) => { - this.dashboard.publicAccessEnabled = true; - this.dashboard.public_url = data.public_url; - }).error(() => { - this.dashboard.publicAccessEnabled = false; - // TODO: show message - }); + $http + .post(url) + .success((data) => { + this.dashboard.publicAccessEnabled = true; + this.dashboard.public_url = data.public_url; + }) + .error(() => { + this.dashboard.publicAccessEnabled = false; + // TODO: show message + }); } }; }, diff --git a/client/app/pages/queries/query.html b/client/app/pages/queries/query.html index 09c998189e..90ad973270 100644 --- a/client/app/pages/queries/query.html +++ b/client/app/pages/queries/query.html @@ -186,7 +186,9 @@

- +
+ +
diff --git a/client/app/services/widget.js b/client/app/services/widget.js index 2f96296607..1e5789fd83 100644 --- a/client/app/services/widget.js +++ b/client/app/services/widget.js @@ -25,6 +25,21 @@ function Widget($resource, $http, Query, Visualization, dashboardGridOptions) { return this.query; }; + WidgetResource.prototype.getQueryResult = function getQueryResult(force, maxAge) { + if (!this.visualization) { + return undefined; + } + + if (force || this.queryResult === undefined) { + if (maxAge === undefined || force) { + maxAge = force ? 0 : undefined; + } + this.queryResult = this.getQuery().getQueryResult(maxAge); + } + + return this.queryResult; + }; + WidgetResource.prototype.getName = function getName() { if (this.visualization) { return `${this.visualization.query.name} (${this.visualization.name})`;