From 6a7d2291b4ca914e577a2e27729d28eacdae1263 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Sun, 29 Oct 2017 12:03:59 +0200 Subject: [PATCH] getredash/redash#335 Better dashboard editor --- client/app/assets/css/superflat_redash.css | 42 +++++++- .../dashboards/add-widget-dialog.html | 6 +- .../dashboards/add-widget-dialog.js | 53 +++++----- .../dashboards/edit-dashboard-dialog.html | 8 -- .../dashboards/edit-dashboard-dialog.js | 32 +----- client/app/components/dashboards/widget.html | 4 +- client/app/components/dashboards/widget.js | 10 +- client/app/config/index.js | 34 +++++++ client/app/directives/index.js | 42 ++++++++ client/app/pages/dashboards/dashboard.html | 18 +++- client/app/pages/dashboards/dashboard.js | 98 ++++++++++++++----- .../dashboards/public-dashboard-page.html | 8 +- .../pages/dashboards/public-dashboard-page.js | 7 +- client/app/services/dashboard.js | 31 +++++- client/app/services/widget.js | 63 +++++++++++- package.json | 1 + redash/handlers/widgets.py | 1 + webpack.config.js | 2 +- 18 files changed, 342 insertions(+), 118 deletions(-) diff --git a/client/app/assets/css/superflat_redash.css b/client/app/assets/css/superflat_redash.css index bbccd3a05c..ea1ae7fe09 100644 --- a/client/app/assets/css/superflat_redash.css +++ b/client/app/assets/css/superflat_redash.css @@ -6209,7 +6209,7 @@ button.close { /* -------------------------------------------------------- Container -----------------------------------------------------------*/ -/* -------------------------------------------------------- +/* -------------------------------------------------------- Template Variables -----------------------------------------------------------*/ /* -------------------------------------------------------- @@ -6259,7 +6259,7 @@ button.close { Carousel -----------------------------------------------------------*/ /* -------------------------------------------------------- - Modal + Modal -----------------------------------------------------------*/ /* -------------------------------------------------------- Tooltips @@ -7913,6 +7913,44 @@ fieldset[disabled] .btn-inverse.active { position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); } + +.dashboard-wrapper { + margin: -7px; +} +.dashboard-wrapper .tile { + position: absolute; + left: 7px; + top: 7px; + right: 7px; + bottom: 7px; + overflow: auto; + margin: 0; + padding: 0 0 40px 0; +} +.dashboard-wrapper.gridster-mobile { + margin: 0; +} +.dashboard-wrapper.gridster-mobile .gridster-item { + margin-left: 0 !important; + margin-right: 0 !important; +} +.dashboard-wrapper.gridster-mobile .tile { + display: block; + position: static; + height: auto; + margin-bottom: 15px; +} + +.dashboard-widget-bottom-panel { + line-height: 28px; +} +.dashboard-wrapper .dashboard-widget-bottom-panel { + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + .tile[class*="bg-"] { color: #fff; } diff --git a/client/app/components/dashboards/add-widget-dialog.html b/client/app/components/dashboards/add-widget-dialog.html index 62c43efeb1..0a96b7d495 100644 --- a/client/app/components/dashboards/add-widget-dialog.html +++ b/client/app/components/dashboards/add-widget-dialog.html @@ -38,10 +38,8 @@

Add Widget

-
- - +
+
diff --git a/client/app/components/dashboards/add-widget-dialog.js b/client/app/components/dashboards/add-widget-dialog.js index a9b10e0ef7..d0c5262d88 100644 --- a/client/app/components/dashboards/add-widget-dialog.js +++ b/client/app/components/dashboards/add-widget-dialog.js @@ -1,3 +1,4 @@ +import * as _ from 'underscore'; import template from './add-widget-dialog.html'; const AddWidgetDialog = { @@ -12,21 +13,13 @@ const AddWidgetDialog = { this.dashboard = this.resolve.dashboard; this.saveInProgress = false; - this.widgetSize = 1; this.selectedVis = null; this.query = {}; this.selected_query = undefined; this.text = ''; this.existing_text = ''; this.new_text = ''; - this.widgetSizes = [{ - name: 'Regular', - value: 1, - }, { - name: 'Double', - value: 2, - }]; - + this.isHidden = false; this.type = 'visualization'; this.trustAsHtml = html => $sce.trustAsHtml(html); @@ -35,11 +28,6 @@ const AddWidgetDialog = { this.setType = (type) => { this.type = type; - if (type === 'textbox') { - this.widgetSizes.push({ name: 'Hidden', value: 0 }); - } else if (this.widgetSizes.length > 2) { - this.widgetSizes.pop(); - } }; this.onQuerySelect = () => { @@ -72,21 +60,40 @@ const AddWidgetDialog = { const widget = new Widget({ visualization_id: this.selectedVis && this.selectedVis.id, dashboard_id: this.dashboard.id, - options: {}, - width: this.widgetSize, + options: { + isHidden: this.isTextBox() && this.isHidden, + position: { + // Place new widget below all others + col: 0, + row: _.chain(this.dashboard.widgets) + .map((w) => { + let temp = _.extend({}, w.options); + temp = _.extend({}, temp.position); + const row = parseInt(temp.row, 10); + const height = parseInt(temp.sizeY, 10); + + let result = 0; + if (isFinite(row)) { + result += row; + } + if (isFinite(height)) { + result += height; + } + return result; + }) + .max() + .value(), + // Auto-height by default + sizeY: -1, + }, + }, text: this.text, }); widget.$save().then((response) => { // update dashboard layout - this.dashboard.layout = response.layout; this.dashboard.version = response.version; - const newWidget = new Widget(response.widget); - if (response.new_row) { - this.dashboard.widgets.push([newWidget]); - } else { - this.dashboard.widgets[this.dashboard.widgets.length - 1].push(newWidget); - } + this.dashboard.widgets.push(new Widget(response.widget)); this.close(); }).catch(() => { toastr.error('Widget can not be added'); diff --git a/client/app/components/dashboards/edit-dashboard-dialog.html b/client/app/components/dashboards/edit-dashboard-dialog.html index edac266bfc..867bc31661 100644 --- a/client/app/components/dashboards/edit-dashboard-dialog.html +++ b/client/app/components/dashboards/edit-dashboard-dialog.html @@ -13,14 +13,6 @@

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

Use Dashboard Level Filters

- -
- -
diff --git a/client/app/components/dashboards/edit-dashboard-dialog.js b/client/app/components/dashboards/edit-dashboard-dialog.js index 40a31efaa2..f33b461a37 100644 --- a/client/app/components/dashboards/edit-dashboard-dialog.js +++ b/client/app/components/dashboards/edit-dashboard-dialog.js @@ -1,4 +1,4 @@ -import { isEmpty, sortBy } from 'underscore'; +import { isEmpty } from 'underscore'; import template from './edit-dashboard-dialog.html'; const EditDashboardDialog = { @@ -28,47 +28,17 @@ const EditDashboardDialog = { }, }; - this.items = []; - - if (this.dashboard.widgets) { - this.dashboard.widgets.forEach((row, rowIndex) => { - row.forEach((widget, colIndex) => { - this.items.push({ - id: widget.id, - col: colIndex, - row: rowIndex, - sizeY: 1, - sizeX: widget.width, - name: widget.getName(), // visualization.query.name - }); - }); - }); - } - this.isFormValid = () => !isEmpty(this.dashboard.name); this.saveDashboard = () => { this.saveInProgress = true; if (this.dashboard.id) { - const layout = []; - const sortedItems = sortBy(this.items, item => item.row * 10 + item.col); - - sortedItems.forEach((item) => { - layout[item.row] = layout[item.row] || []; - if (item.col > 0 && layout[item.row][item.col - 1] === undefined) { - layout[item.row][item.col - 1] = item.id; - } else { - layout[item.row][item.col] = item.id; - } - }); - const request = { slug: this.dashboard.id, name: this.dashboard.name, version: this.dashboard.version, dashboard_filters_enabled: this.dashboard.dashboard_filters_enabled, - layout: JSON.stringify(layout), }; Dashboard.save(request, (dashboard) => { diff --git a/client/app/components/dashboards/widget.html b/client/app/components/dashboards/widget.html index f4627454fa..4049be6bf3 100644 --- a/client/app/components/dashboards/widget.html +++ b/client/app/components/dashboards/widget.html @@ -1,4 +1,4 @@ -
+
@@ -39,7 +39,7 @@
-
+
Updated: Updated: {{$ctrl.queryResult.getUpdatedAt() | dateTime}} diff --git a/client/app/components/dashboards/widget.js b/client/app/components/dashboards/widget.js index 82dca750f2..6f7d0830ef 100644 --- a/client/app/components/dashboards/widget.js +++ b/client/app/components/dashboards/widget.js @@ -47,7 +47,7 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser) this.localParametersDefs = () => { if (!this.localParameters) { - this.localParameters = this.widget.query.getParametersDefs().filter(p => !p.global); + this.localParameters = this.widget.getQuery().getParametersDefs().filter(p => !p.global); } return this.localParameters; }; @@ -60,14 +60,8 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser) Events.record('delete', 'widget', this.widget.id); this.widget.$delete((response) => { - this.dashboard.widgets = - this.dashboard.widgets.map(row => row.filter(widget => widget.id !== undefined)); - - this.dashboard.widgets = this.dashboard.widgets.filter(row => row.length > 0); - - this.dashboard.layout = response.layout; + this.dashboard.widgets = this.dashboard.widgets.filter(widget => widget.id !== undefined); this.dashboard.version = response.version; - if (this.deleted) { this.deleted({}); } diff --git a/client/app/config/index.js b/client/app/config/index.js index 971564de06..603fd265fa 100644 --- a/client/app/config/index.js +++ b/client/app/config/index.js @@ -46,8 +46,42 @@ const requirements = [ ngGridster.name, ]; +const dashboardGridOptions = { + columns: 6, + pushing: true, + floating: true, + swapping: true, + width: 'auto', + colWidth: 'auto', + rowHeight: 100, + margins: [0, 0], + outerMargin: false, + sparse: false, + isMobile: false, + mobileBreakPoint: 1200, + mobileModeEnabled: true, + minColumns: 1, + minRows: 1, + maxRows: 100, + defaultSizeX: 3, + defaultSizeY: 2, + minSizeX: 1, + maxSizeX: null, + minSizeY: 1, + maxSizeY: null, + resizable: { + enabled: true, + handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'], + }, + draggable: { + enabled: true, // whether dragging items is supported + }, +}; + const ngModule = angular.module('app', requirements); +ngModule.constant('dashboardGridOptions', dashboardGridOptions); + function registerAll(context) { const modules = context .keys() diff --git a/client/app/directives/index.js b/client/app/directives/index.js index 04441509e3..711a5e5921 100644 --- a/client/app/directives/index.js +++ b/client/app/directives/index.js @@ -2,6 +2,11 @@ import debug from 'debug'; const logger = debug('redash:directives'); +const requestAnimationFrame = window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.msRequestAnimationFrame; + function compareTo() { return { require: 'ngModel', @@ -70,9 +75,46 @@ function title($rootScope, Title) { }; } +function gridsterAutoHeight($timeout) { + return { + restrict: 'A', + require: 'gridsterItem', + link($scope, $element, attr, controller) { + let destroyed = false; + + function updateHeight() { + const paddings = 15; + const element = $element[0].querySelector(attr.gridsterAutoHeight); + if (element) { + if (element.scrollHeight > element.offsetHeight) { + let h = element.scrollHeight; + h = Math.ceil((h + paddings) / controller.gridster.curRowHeight); + $timeout(() => { + controller.sizeY = h; + }); + } + } + + if (!destroyed) { + requestAnimationFrame(updateHeight); + } + } + + if (controller.sizeY < 0) { + updateHeight(); + + $scope.$on('$destroy', () => { + destroyed = true; + }); + } + }, + }; +} + export default function init(ngModule) { ngModule.factory('Title', TitleService); ngModule.directive('title', title); ngModule.directive('compareTo', compareTo); ngModule.directive('autofocus', autofocus); + ngModule.directive('gridsterAutoHeight', gridsterAutoHeight); } diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html index eb8c3c45d0..3b63532da3 100644 --- a/client/app/pages/dashboards/dashboard.html +++ b/client/app/pages/dashboards/dashboard.html @@ -1,14 +1,19 @@
-
+

{{$ctrl.dashboard.name}} Unpublished Archived

-
+

+ +
-
- +
+
+
+ +
+
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js index 6e76fdbe22..9155f4c579 100644 --- a/client/app/pages/dashboards/dashboard.js +++ b/client/app/pages/dashboards/dashboard.js @@ -3,9 +3,58 @@ import template from './dashboard.html'; import shareDashboardTemplate from './share-dashboard.html'; function DashboardCtrl( - $rootScope, $routeParams, $location, $timeout, $q, $uibModal, + $rootScope, $scope, $routeParams, $location, $timeout, $q, $uibModal, Title, AlertDialog, Dashboard, currentUser, clientConfig, Events, + dashboardGridOptions, toastr, ) { + this.saveInProgress = false; + const saveDashboard = _.debounce(() => { + if (!this.dashboard.canEdit()) { + return; + } + + this.saveInProgress = true; + const showMessages = this.layoutEditing; + // Temporarily disable grid editing (but allow user to use UI controls) + this.dashboardGridOptions.draggable.enabled = false; + this.dashboardGridOptions.resizable.enabled = false; + $q.all(_.map(this.dashboard.widgets, widget => widget.$save())) + .then(() => { + if (showMessages) { + toastr.success('Dashboard layout saved.'); + } + }) + .catch(() => { + if (showMessages) { + toastr.error('Cannot save dashboard layout.'); + } + }) + .finally(() => { + this.saveInProgress = false; + // If user didn't disable editing mode while saving - restore grid + this.dashboardGridOptions.draggable.enabled = this.layoutEditing; + this.dashboardGridOptions.resizable.enabled = this.layoutEditing; + }); + }, 2000); + + this.layoutEditing = false; + this.dashboardGridOptions = _.extend({}, dashboardGridOptions, { + resizable: { + enabled: false, + handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'], + stop: saveDashboard, + }, + draggable: { + enabled: false, + stop: saveDashboard, + }, + }); + + $scope.$watch( + () => (_.isArray(this.dashboard.widgets) ? this.dashboard.widgets.length : undefined), + () => saveDashboard(), + ); + this.isFullscreen = false; this.refreshRate = null; this.showPermissionsControl = clientConfig.showPermissionsControl; @@ -33,18 +82,17 @@ function DashboardCtrl( this.extractGlobalParameters = () => { let globalParams = {}; - this.dashboard.widgets.forEach(row => - row.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); - }); - } - })); + 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); + }); + } + }); this.globalParameters = _.values(globalParams); }; @@ -60,16 +108,15 @@ function DashboardCtrl( Title.set(dashboard.name); const promises = []; - this.dashboard.widgets.forEach(row => - row.forEach((widget) => { - if (widget.visualization) { - const maxAge = force ? 0 : undefined; - const queryResult = widget.getQuery().getQueryResult(maxAge); - if (!_.isUndefined(queryResult)) { - promises.push(queryResult.toPromise()); - } + 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()); } - })); + } + }); this.extractGlobalParameters(); @@ -155,6 +202,12 @@ function DashboardCtrl( }); }; + this.editLayout = (enableEditing) => { + this.layoutEditing = enableEditing; + this.dashboardGridOptions.draggable.enabled = this.layoutEditing && !this.saveInProgress; + this.dashboardGridOptions.resizable.enabled = this.layoutEditing && !this.saveInProgress; + }; + this.editDashboard = () => { const previousFiltersState = this.dashboard.dashboard_filters_enabled; $uibModal.open({ @@ -199,7 +252,6 @@ function DashboardCtrl( Dashboard.save({ slug: this.dashboard.id, name: this.dashboard.name, - layout: JSON.stringify(this.dashboard.layout), is_draft: this.dashboard.is_draft, }, (dashboard) => { this.saveInProgress = false; diff --git a/client/app/pages/dashboards/public-dashboard-page.html b/client/app/pages/dashboards/public-dashboard-page.html index 281d87ed5f..1e46493f2e 100644 --- a/client/app/pages/dashboards/public-dashboard-page.html +++ b/client/app/pages/dashboards/public-dashboard-page.html @@ -15,7 +15,11 @@

-
- + +
+
+
+
diff --git a/client/app/pages/dashboards/public-dashboard-page.js b/client/app/pages/dashboards/public-dashboard-page.js index c57706044c..0c178bcf55 100644 --- a/client/app/pages/dashboards/public-dashboard-page.js +++ b/client/app/pages/dashboards/public-dashboard-page.js @@ -6,9 +6,11 @@ const PublicDashboardPage = { bindings: { dashboard: '<', }, - controller($routeParams, Widget) { + controller($routeParams, Widget, dashboardGridOptions) { 'ngInject'; + this.dashboardGridOptions = dashboardGridOptions; + // embed in params == headless this.logoUrl = logoUrl; this.headless = $routeParams.embed; @@ -16,8 +18,7 @@ const PublicDashboardPage = { document.querySelector('body').classList.add('headless'); } this.public = true; - this.dashboard.widgets = this.dashboard.widgets.map(row => - row.map(widget => new Widget(widget))); + this.dashboard.widgets = this.dashboard.widgets.map(widget => new Widget(widget)); }, }; diff --git a/client/app/services/dashboard.js b/client/app/services/dashboard.js index b6fcbe62fa..7d854ff4e6 100644 --- a/client/app/services/dashboard.js +++ b/client/app/services/dashboard.js @@ -1,8 +1,33 @@ -import { map, isArray } from 'underscore'; +import { map, flatten, extend, isArray } from 'underscore'; -function Dashboard($resource, $http, currentUser, Widget) { +function Dashboard($resource, $http, currentUser, Widget, dashboardGridOptions) { function transformSingle(dashboard) { - dashboard.widgets = map(dashboard.widgets, row => row.map(widget => new Widget(widget))); + if ( + isArray(dashboard.widgets) && (dashboard.widgets.length > 0) && + isArray(dashboard.widgets[0]) + ) { + // Dashboard v1 processing + // v1 dashboard has two columns, and widget can occupy one of them or both; + // this means, that there can be at most two widgets per row. + // Here we will map gridster columns and rows to v1-style grid + const dashboardV1ColumnSize = Math.round(dashboardGridOptions.columns / 2); + dashboard.widgets = map( + dashboard.widgets, + (row, rowIndex) => map(row, (widget, widgetIndex) => { + widget.options = widget.options || {}; + widget.options.position = extend({}, { + row: rowIndex, + col: widgetIndex * dashboardV1ColumnSize, + sizeX: dashboardV1ColumnSize * widget.width, + sizeY: -1, // auto + }, widget.options.position); + return widget; + }), + ); + } + + dashboard.widgets = map(flatten(dashboard.widgets), widget => new Widget(widget)); + dashboard.publicAccessEnabled = dashboard.public_url !== undefined; } diff --git a/client/app/services/widget.js b/client/app/services/widget.js index 2a9b4b5dfb..bc4d9c7326 100644 --- a/client/app/services/widget.js +++ b/client/app/services/widget.js @@ -1,7 +1,21 @@ -import truncate from 'underscore.string/truncate'; +import { truncate } from 'underscore.string'; +import { omit, flatten, extend, isObject } from 'underscore'; -function Widget($resource, Query) { - const WidgetResource = $resource('api/widgets/:id', { id: '@id' }); +function Widget($resource, $http, Query, Visualization, dashboardGridOptions) { + function prepareForSave(data) { + return omit(data, 'query'); + } + + const WidgetResource = $resource('api/widgets/:id', { id: '@id' }, { + get: { method: 'GET' }, + save: { + method: 'POST', + transformRequest: flatten([prepareForSave, $http.defaults.transformRequest]), + }, + query: { method: 'GET', isArray: true }, + remove: { method: 'DELETE' }, + delete: { method: 'DELETE' }, + }); WidgetResource.prototype.getQuery = function getQuery() { if (!this.query && this.visualization) { @@ -18,7 +32,48 @@ function Widget($resource, Query) { return truncate(this.text, 20); }; - return WidgetResource; + function WidgetConstructor(widget) { + widget.width = 1; // Backward compatibility, user on back-end + + const visualizationOptions = {}; + const visualization = widget.visualization ? + Visualization.visualizations[widget.visualization.type] : null; + if (isObject(visualization)) { + const options = extend({}, visualization.defaultOptions); + + // Width constraints + const minColumns = parseInt(options.minColumns, 10); + if (isFinite(minColumns) && (minColumns >= 0)) { + visualizationOptions.minSizeX = minColumns; + } + const maxColumns = parseInt(options.maxColumns, 10); + if (isFinite(maxColumns) && (maxColumns >= 0)) { + visualizationOptions.maxSizeX = Math.min(maxColumns, dashboardGridOptions.columns); + } + + // Height constraints + // `minRows` is preferred, but it should be kept for backward compatibility + const height = parseInt(options.height, 10); + if (isFinite(height)) { + visualizationOptions.minSizeY = Math.ceil(height / dashboardGridOptions.rowHeight); + } + const minRows = parseInt(options.minRows, 10); + if (isFinite(minRows)) { + visualizationOptions.minSizeY = minRows; + } + const maxRows = parseInt(options.maxRows, 10); + if (isFinite(maxRows) && (maxRows >= 0)) { + visualizationOptions.maxSizeY = maxRows; + } + } + + widget.options = widget.options || {}; + widget.options.position = extend({}, visualizationOptions, widget.options.position); + + return new WidgetResource(widget); + } + + return WidgetConstructor; } diff --git a/package.json b/package.json index b2092e14db..7d3f67b3fb 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "main": "index.js", "scripts": { "start": "webpack-dev-server", + "start-demo": "REDASH_BACKEND=https://demo.redash.io npm start", "build": "rm -rf ./client/dist/ && NODE_ENV=production node node_modules/.bin/webpack", "watch": "webpack --watch --progress --colors -d" }, diff --git a/redash/handlers/widgets.py b/redash/handlers/widgets.py index 22acd9cfe0..7f0c8d080f 100644 --- a/redash/handlers/widgets.py +++ b/redash/handlers/widgets.py @@ -82,6 +82,7 @@ def post(self, widget_id): require_object_modify_permission(widget.dashboard, self.current_user) widget_properties = request.get_json(force=True) widget.text = widget_properties['text'] + widget.options = json.dumps(widget_properties['options']) models.db.session.commit() return widget.to_dict() diff --git a/webpack.config.js b/webpack.config.js index 4a95846be0..3ddf521cc8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -124,7 +124,7 @@ var config = { proxy: [{ context: [ '/login', '/invite', '/setup', '/images', '/js', '/styles', - '/status.json', '/api/admin', '/api', '/oauth'], + '/status.json', '/api', '/oauth'], target: redashBackend + '/', changeOrigin: true, secure: false