From 606cf12e743c4b6102532e1d8aef70b391c8695b Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Thu, 16 May 2019 06:43:46 -0600 Subject: [PATCH] Dashboard grid React migration #1 (#3722) * Dashboard grid React migration * Updated tests * Fixes comments * One col layout * Tests unskipped * Test fixes * Test fix * AutoHeight feature * Kebab-cased * Get rid of lazyInjector * Replace react-grid-layout with patched fork to fix performance issues * Fix issue with initial layout when page has a scrollbar * Decrease polling interval (500ms is too slow) * Rename file to match it's contents * Added some notes and very minor fixes * Fix Remove widget button (should be visible only in editing mode); fix widget actions menu * Fixed missing grid markings * Enhanced resize handle * Updated placeholder color * Render DashboardGrid only when dashboard is loaded --- .../dashboards/AutoHeightController.js | 110 +++++ .../components/dashboards/DashboardGrid.jsx | 213 ++++++++++ .../components/dashboards/dashboard-grid.less | 7 + .../dashboards/gridstack/gridstack.js | 87 ---- .../dashboards/gridstack/gridstack.less | 55 --- .../components/dashboards/gridstack/index.js | 400 ------------------ client/app/components/dashboards/widget.html | 11 +- client/app/components/dashboards/widget.js | 30 +- client/app/components/dashboards/widget.less | 30 ++ client/app/config/dashboard-grid-options.js | 8 +- client/app/config/index.js | 3 - client/app/pages/dashboards/dashboard.html | 25 +- client/app/pages/dashboards/dashboard.js | 108 +++-- client/app/pages/dashboards/dashboard.less | 61 +-- .../dashboards/public-dashboard-page.html | 18 +- .../pages/dashboards/public-dashboard-page.js | 5 +- client/app/services/dashboard.js | 3 +- client/app/services/widget.js | 23 +- .../integration/dashboard/dashboard_spec.js | 49 ++- package-lock.json | 39 +- package.json | 2 +- 21 files changed, 574 insertions(+), 713 deletions(-) create mode 100644 client/app/components/dashboards/AutoHeightController.js create mode 100644 client/app/components/dashboards/DashboardGrid.jsx create mode 100644 client/app/components/dashboards/dashboard-grid.less delete mode 100644 client/app/components/dashboards/gridstack/gridstack.js delete mode 100644 client/app/components/dashboards/gridstack/gridstack.less delete mode 100644 client/app/components/dashboards/gridstack/index.js diff --git a/client/app/components/dashboards/AutoHeightController.js b/client/app/components/dashboards/AutoHeightController.js new file mode 100644 index 0000000000..eddab575ab --- /dev/null +++ b/client/app/components/dashboards/AutoHeightController.js @@ -0,0 +1,110 @@ +import { includes, reduce, some } from 'lodash'; + +// TODO: Revisit this implementation when migrating widget component to React + +const WIDGET_SELECTOR = '[data-widgetid="{0}"]'; +const WIDGET_CONTENT_SELECTOR = [ + '.widget-header', // header + 'visualization-renderer', // visualization + '.scrollbox .alert', // error state + '.spinner-container', // loading state + '.tile__bottom-control', // footer +].join(','); +const INTERVAL = 200; + +export default class AutoHeightController { + widgets = {}; + + interval = null; + + onHeightChange = null; + + constructor(handler) { + this.onHeightChange = handler; + } + + update(widgets) { + const newWidgetIds = widgets + .filter(widget => widget.options.position.autoHeight) + .map(widget => widget.id.toString()); + + // added + newWidgetIds + .filter(id => !includes(Object.keys(this.widgets), id)) + .forEach(this.add); + + // removed + Object.keys(this.widgets) + .filter(id => !includes(newWidgetIds, id)) + .forEach(this.remove); + } + + add = (id) => { + if (this.isEmpty()) { + this.start(); + } + + const selector = WIDGET_SELECTOR.replace('{0}', id); + this.widgets[id] = [ + function getHeight() { + const widgetEl = document.querySelector(selector); + if (!widgetEl) { + return undefined; // safety + } + + // get all content elements + const els = widgetEl.querySelectorAll(WIDGET_CONTENT_SELECTOR); + + // calculate accumulated height + return reduce(els, (acc, el) => { + const height = el ? el.getBoundingClientRect().height : 0; + return acc + height; + }, 0); + }, + ]; + }; + + remove = (id) => { + // not actually deleting from this.widgets to prevent case of unwanted re-adding + this.widgets[id.toString()] = false; + + if (this.isEmpty()) { + this.stop(); + } + }; + + exists = id => !!this.widgets[id.toString()]; + + isEmpty = () => !some(this.widgets); + + checkHeightChanges = () => { + Object.keys(this.widgets).forEach((id) => { + const [getHeight, prevHeight] = this.widgets[id]; + const height = getHeight(); + if (height && height !== prevHeight) { + this.widgets[id][1] = height; // save + this.onHeightChange(id, height); // dispatch + } + }); + }; + + start = () => { + this.stop(); + this.interval = setInterval(this.checkHeightChanges, INTERVAL); + }; + + stop = () => { + clearInterval(this.interval); + }; + + resume = () => { + if (!this.isEmpty()) { + this.start(); + } + }; + + destroy = () => { + this.stop(); + this.widgets = null; + } +} diff --git a/client/app/components/dashboards/DashboardGrid.jsx b/client/app/components/dashboards/DashboardGrid.jsx new file mode 100644 index 0000000000..d8a0fe3da2 --- /dev/null +++ b/client/app/components/dashboards/DashboardGrid.jsx @@ -0,0 +1,213 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { chain, cloneDeep, find } from 'lodash'; +import { react2angular } from 'react2angular'; +import cx from 'classnames'; +import { Responsive, WidthProvider } from 'react-grid-layout'; +import { DashboardWidget } from '@/components/dashboards/widget'; +import { FiltersType } from '@/components/Filters'; +import cfg from '@/config/dashboard-grid-options'; +import AutoHeightController from './AutoHeightController'; + +import 'react-grid-layout/css/styles.css'; +import './dashboard-grid.less'; + +const ResponsiveGridLayout = WidthProvider(Responsive); + +const WidgetType = PropTypes.shape({ + id: PropTypes.number.isRequired, + options: PropTypes.shape({ + position: PropTypes.shape({ + col: PropTypes.number.isRequired, + row: PropTypes.number.isRequired, + sizeY: PropTypes.number.isRequired, + minSizeY: PropTypes.number.isRequired, + maxSizeY: PropTypes.number.isRequired, + sizeX: PropTypes.number.isRequired, + minSizeX: PropTypes.number.isRequired, + maxSizeX: PropTypes.number.isRequired, + }).isRequired, + }).isRequired, +}); + +const SINGLE = 'single-column'; +const MULTI = 'multi-column'; + +class DashboardGrid extends React.Component { + static propTypes = { + isEditing: PropTypes.bool.isRequired, + dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types + widgets: PropTypes.arrayOf(WidgetType).isRequired, + filters: FiltersType, + onBreakpointChange: PropTypes.func, + onRemoveWidget: PropTypes.func, + onLayoutChange: PropTypes.func, + }; + + static defaultProps = { + filters: [], + onRemoveWidget: () => {}, + onLayoutChange: () => {}, + onBreakpointChange: () => {}, + }; + + static normalizeFrom(widget) { + const { id, options: { position: pos } } = widget; + + return { + i: id.toString(), + x: pos.col, + y: pos.row, + w: pos.sizeX, + h: pos.sizeY, + minW: pos.minSizeX, + maxW: pos.maxSizeX, + minH: pos.minSizeY, + maxH: pos.maxSizeY, + }; + } + + mode = null; + + autoHeightCtrl = null; + + constructor(props) { + super(props); + + this.state = { + layouts: {}, + disableAnimations: true, + }; + + // init AutoHeightController + this.autoHeightCtrl = new AutoHeightController(this.onWidgetHeightUpdated); + this.autoHeightCtrl.update(this.props.widgets); + } + + componentDidMount() { + this.onBreakpointChange(document.body.offsetWidth <= cfg.mobileBreakPoint ? SINGLE : MULTI); + // Work-around to disable initial animation on widgets; `measureBeforeMount` doesn't work properly: + // it disables animation, but it cannot detect scrollbars. + setTimeout(() => { + this.setState({ disableAnimations: false }); + }, 50); + } + + componentDidUpdate() { + // update, in case widgets added or removed + this.autoHeightCtrl.update(this.props.widgets); + } + + componentWillUnmount() { + this.autoHeightCtrl.destroy(); + } + + onLayoutChange = (_, layouts) => { + // workaround for when dashboard starts at single mode and then multi is empty or carries single col data + // fixes test dashboard_spec['shows widgets with full width'] + // TODO: open react-grid-layout issue + if (layouts[MULTI]) { + this.setState({ layouts }); + } + + // workaround for https://github.com/STRML/react-grid-layout/issues/889 + // remove next line when fix lands + this.mode = document.body.offsetWidth <= cfg.mobileBreakPoint ? SINGLE : MULTI; + // end workaround + + // don't save single column mode layout + if (this.mode === SINGLE) { + return; + } + + const normalized = chain(layouts[MULTI]) + .keyBy('i') + .mapValues(this.normalizeTo) + .value(); + + this.props.onLayoutChange(normalized); + }; + + onBreakpointChange = (mode) => { + this.mode = mode; + this.props.onBreakpointChange(mode === SINGLE); + }; + + // height updated by auto-height + onWidgetHeightUpdated = (widgetId, newHeight) => { + this.setState(({ layouts }) => { + const layout = cloneDeep(layouts[MULTI]); // must clone to allow react-grid-layout to compare prev/next state + const item = find(layout, { i: widgetId.toString() }); + if (item) { + // update widget height + item.h = Math.ceil((newHeight + cfg.margins) / cfg.rowHeight); + } + + return { layouts: { [MULTI]: layout } }; + }); + }; + + // height updated by manual resize + onWidgetResize = (layout, oldItem, newItem) => { + if (oldItem.h !== newItem.h) { + this.autoHeightCtrl.remove(Number(newItem.i)); + } + + this.autoHeightCtrl.resume(); + }; + + normalizeTo = layout => ({ + col: layout.x, + row: layout.y, + sizeX: layout.w, + sizeY: layout.h, + autoHeight: this.autoHeightCtrl.exists(layout.i), + }); + + render() { + const className = cx('dashboard-wrapper', this.props.isEditing ? 'editing-mode' : 'preview-mode'); + const { onRemoveWidget, dashboard, widgets } = this.props; + + return ( +
+ + {widgets.map(widget => ( +
+ onRemoveWidget(widget.id)} + /> +
+ ))} + +
+ ); + } +} + +export default function init(ngModule) { + ngModule.component('dashboardGrid', react2angular(DashboardGrid)); +} + +init.init = true; diff --git a/client/app/components/dashboards/dashboard-grid.less b/client/app/components/dashboards/dashboard-grid.less new file mode 100644 index 0000000000..83af1a7843 --- /dev/null +++ b/client/app/components/dashboards/dashboard-grid.less @@ -0,0 +1,7 @@ +.react-grid-layout { + &.disable-animations { + & > .react-grid-item { + transition: none !important; + } + } +} diff --git a/client/app/components/dashboards/gridstack/gridstack.js b/client/app/components/dashboards/gridstack/gridstack.js deleted file mode 100644 index 24e71b66e2..0000000000 --- a/client/app/components/dashboards/gridstack/gridstack.js +++ /dev/null @@ -1,87 +0,0 @@ -import $ from 'jquery'; -import _ from 'lodash'; -import 'jquery-ui/ui/widgets/draggable'; -import 'jquery-ui/ui/widgets/droppable'; -import 'jquery-ui/ui/widgets/resizable'; -import 'gridstack/dist/gridstack.css'; - -// eslint-disable-next-line import/first -import gridstack from 'gridstack'; - -function sequence(...fns) { - fns = _.filter(fns, _.isFunction); - if (fns.length > 0) { - return function sequenceWrapper(...args) { - for (let i = 0; i < fns.length; i += 1) { - fns[i].apply(this, args); - } - }; - } - return _.noop; -} - -// eslint-disable-next-line import/prefer-default-export -function JQueryUIGridStackDragDropPlugin(grid) { - gridstack.GridStackDragDropPlugin.call(this, grid); -} - -gridstack.GridStackDragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin); - -JQueryUIGridStackDragDropPlugin.prototype = Object.create(gridstack.GridStackDragDropPlugin.prototype); -JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin; - -JQueryUIGridStackDragDropPlugin.prototype.resizable = function resizable(el, opts, key, value) { - el = $(el); - if (opts === 'disable' || opts === 'enable') { - el.resizable(opts); - } else if (opts === 'option') { - el.resizable(opts, key, value); - } else { - el.resizable(_.extend({}, this.grid.opts.resizable, { - // run user-defined callback before internal one - start: sequence(this.grid.opts.resizable.start, opts.start), - // this and next - run user-defined callback after internal one - stop: sequence(opts.stop, this.grid.opts.resizable.stop), - resize: sequence(opts.resize, this.grid.opts.resizable.resize), - })); - } - return this; -}; - -JQueryUIGridStackDragDropPlugin.prototype.draggable = function draggable(el, opts) { - el = $(el); - if (opts === 'disable' || opts === 'enable') { - el.draggable(opts); - } else { - el.draggable(_.extend({}, this.grid.opts.draggable, { - containment: this.grid.opts.isNested ? this.grid.container.parent() : null, - // run user-defined callback before internal one - start: sequence(this.grid.opts.draggable.start, opts.start), - // this and next - run user-defined callback after internal one - stop: sequence(opts.stop, this.grid.opts.draggable.stop), - drag: sequence(opts.drag, this.grid.opts.draggable.drag), - })); - } - return this; -}; - -JQueryUIGridStackDragDropPlugin.prototype.droppable = function droppable(el, opts) { - el = $(el); - if (opts === 'disable' || opts === 'enable') { - el.droppable(opts); - } else { - el.droppable({ - accept: opts.accept, - }); - } - return this; -}; - -JQueryUIGridStackDragDropPlugin.prototype.isDroppable = function isDroppable(el) { - return Boolean($(el).data('droppable')); -}; - -JQueryUIGridStackDragDropPlugin.prototype.on = function on(el, eventName, callback) { - $(el).on(eventName, callback); - return this; -}; diff --git a/client/app/components/dashboards/gridstack/gridstack.less b/client/app/components/dashboards/gridstack/gridstack.less deleted file mode 100644 index 53fa032bb1..0000000000 --- a/client/app/components/dashboards/gridstack/gridstack.less +++ /dev/null @@ -1,55 +0,0 @@ -.grid-stack { - // Same options as in JS - @gridstack-margin: 15px; - @gridstack-width: 6; - - margin-right: -@gridstack-margin; - - .gridstack-columns(@column, @total) when (@column > 0) { - @value: 100% * (@column / @total); - > .grid-stack-item[data-gs-min-width="@{column}"] { min-width: @value } - > .grid-stack-item[data-gs-max-width="@{column}"] { max-width: @value } - > .grid-stack-item[data-gs-width="@{column}"] { width: @value } - > .grid-stack-item[data-gs-x="@{column}"] { left: @value } - - .gridstack-columns((@column - 1), @total); // next iteration - } - - .gridstack-columns(@gridstack-width, @gridstack-width); - - .grid-stack-item { - .grid-stack-item-content { - overflow: visible !important; - box-shadow: none !important; - opacity: 1 !important; - left: 0 !important; - right: @gridstack-margin !important; - } - - .ui-resizable-handle { - background: none !important; - - &.ui-resizable-w, - &.ui-resizable-sw { - left: 0 !important; - } - - &.ui-resizable-e, - &.ui-resizable-se { - right: @gridstack-margin !important; - } - } - - &.grid-stack-placeholder > .placeholder-content { - border: 0; - background: rgba(0, 0, 0, 0.05); - border-radius: 3px; - left: 0 !important; - right: @gridstack-margin !important; - } - } - - &.grid-stack-one-column-mode > .grid-stack-item { - margin-bottom: @gridstack-margin !important; - } -} diff --git a/client/app/components/dashboards/gridstack/index.js b/client/app/components/dashboards/gridstack/index.js deleted file mode 100644 index 7189540f0d..0000000000 --- a/client/app/components/dashboards/gridstack/index.js +++ /dev/null @@ -1,400 +0,0 @@ -import $ from 'jquery'; -import _ from 'lodash'; -import './gridstack'; -import './gridstack.less'; - -function toggleAutoHeightClass($element, isEnabled) { - const className = 'widget-auto-height-enabled'; - if (isEnabled) { - $element.addClass(className); - } else { - $element.removeClass(className); - } -} - -function computeAutoHeight($element, grid, node, minHeight, maxHeight) { - const wrapper = $element[0]; - const element = wrapper.querySelector('.scrollbox, .spinner-container'); - - let resultHeight = _.isObject(node) ? node.height : 1; - if (element) { - const childrenBounds = _.chain(element.children) - .map((child) => { - const bounds = child.getBoundingClientRect(); - const style = window.getComputedStyle(child); - return { - top: bounds.top - parseFloat(style.marginTop), - bottom: bounds.bottom + parseFloat(style.marginBottom), - }; - }) - .reduce((result, bounds) => ({ - top: Math.min(result.top, bounds.top), - bottom: Math.max(result.bottom, bounds.bottom), - })) - .value() || { top: 0, bottom: 0 }; - - // Height of controls outside visualization area - const bodyWrapper = wrapper.querySelector('.body-container'); - if (bodyWrapper) { - const elementStyle = window.getComputedStyle(element); - const controlsHeight = _.chain(bodyWrapper.children) - .filter(n => n !== element) - .reduce((result, n) => { - const b = n.getBoundingClientRect(); - return result + (b.bottom - b.top); - }, 0) - .value(); - - const additionalHeight = grid.opts.verticalMargin + - // include container paddings too - parseFloat(elementStyle.paddingTop) + parseFloat(elementStyle.paddingBottom) + - // add few pixels for scrollbar (if visible) - (element.scrollWidth > element.offsetWidth ? 16 : 0); - - const contentsHeight = childrenBounds.bottom - childrenBounds.top; - - const cellHeight = grid.cellHeight() + grid.opts.verticalMargin; - resultHeight = Math.ceil(Math.round(controlsHeight + contentsHeight + additionalHeight) / cellHeight); - } - } - - // minHeight <= resultHeight <= maxHeight - return Math.min(Math.max(minHeight, resultHeight), maxHeight); -} - -function gridstack($parse, dashboardGridOptions) { - return { - restrict: 'A', - replace: false, - scope: { - editing: '=', - batchUpdate: '=', // set by directive - for using in wrapper components - onLayoutChanged: '=', - isOneColumnMode: '=', - }, - controller() { - this.$el = null; - - this.resizingWidget = null; - this.draggingWidget = null; - - this.grid = () => (this.$el ? this.$el.data('gridstack') : null); - - this._updateStyles = () => { - const grid = this.grid(); - if (grid) { - // compute real grid height; `gridstack` sometimes uses only "dirty" - // items and computes wrong height - const gridHeight = _.chain(grid.grid.nodes) - .map(node => node.y + node.height) - .max() - .value(); - // `_updateStyles` is internal, but grid sometimes "forgets" - // to rebuild stylesheet, so we need to force it - if (_.isObject(grid._styles)) { - grid._styles._max = 0; // reset size cache - } - grid._updateStyles(gridHeight + 10); - } - }; - - this.addWidget = ($element, item, itemId) => { - const grid = this.grid(); - if (grid) { - grid.addWidget( - $element, - item.col, item.row, item.sizeX, item.sizeY, - false, // auto position - item.minSizeX, item.maxSizeX, item.minSizeY, item.maxSizeY, - itemId, - ); - this._updateStyles(); - } - }; - - this.updateWidget = ($element, item) => { - this.update((grid) => { - grid.update($element, item.col, item.row, item.sizeX, item.sizeY); - grid.minWidth($element, item.minSizeX); - grid.maxWidth($element, item.maxSizeX); - grid.minHeight($element, item.minSizeY); - grid.maxHeight($element, item.maxSizeY); - }); - }; - - this.removeWidget = ($element) => { - const grid = this.grid(); - if (grid) { - grid.removeWidget($element, false); - this._updateStyles(); - } - }; - - this.getNodeByElement = (element) => { - const grid = this.grid(); - if (grid && grid.grid) { - // This method seems to be internal - return grid.grid.getNodeDataByDOMEl($(element)); - } - }; - - this.setWidgetId = ($element, id) => { - // `gridstack` has no API method to change node id; but since it's not used - // by library, we can just update grid and DOM node - const node = this.getNodeByElement($element); - if (node) { - node.id = id; - $element.attr('data-gs-id', _.isUndefined(id) ? null : id); - } - }; - - this.setEditing = (value) => { - const grid = this.grid(); - if (grid) { - if (value) { - grid.enable(); - } else { - grid.disable(); - } - } - }; - - this.update = (callback) => { - const grid = this.grid(); - if (grid) { - grid.batchUpdate(); - try { - if (_.isFunction(callback)) { - callback(grid); - } - } finally { - grid.commit(); - this._updateStyles(); - } - } - }; - }, - link: ($scope, $element, $attr, controller) => { - const isOneColumnModeAssignable = _.isFunction($parse($attr.onLayoutChanged).assign); - let enablePolling = true; - - $element.addClass('grid-stack'); - $element.gridstack({ - auto: false, - verticalMargin: dashboardGridOptions.margins, - // real row height will be `cellHeight` + `verticalMargin` - cellHeight: dashboardGridOptions.rowHeight - dashboardGridOptions.margins, - width: dashboardGridOptions.columns, // columns - height: 0, // max rows (0 for unlimited) - animate: true, - float: false, - minWidth: dashboardGridOptions.mobileBreakPoint, - resizable: { - handles: 'e, se, s, sw, w', - start: (event, ui) => { - controller.resizingWidget = ui.element; - $(ui.element).trigger( - 'gridstack.resize-start', - controller.getNodeByElement(ui.element), - ); - }, - stop: (event, ui) => { - controller.resizingWidget = null; - $(ui.element).trigger( - 'gridstack.resize-end', - controller.getNodeByElement(ui.element), - ); - controller.update(); - }, - }, - draggable: { - start: (event, ui) => { - controller.draggingWidget = ui.helper; - $(ui.helper).trigger( - 'gridstack.drag-start', - controller.getNodeByElement(ui.helper), - ); - }, - stop: (event, ui) => { - controller.draggingWidget = null; - $(ui.helper).trigger( - 'gridstack.drag-end', - controller.getNodeByElement(ui.helper), - ); - controller.update(); - }, - }, - }); - controller.$el = $element; - - // `change` events sometimes fire too frequently (for example, - // on initial rendering when all widgets add themselves to grid, grid - // will fire `change` event will _all_ items available at that moment). - // Collect changed items, and then delegate event with some delay - let changedNodes = {}; - const triggerChange = _.debounce(() => { - _.each(changedNodes, (node) => { - if (node.el) { - $(node.el).trigger('gridstack.changed', node); - } - }); - if ($scope.onLayoutChanged) { - $scope.onLayoutChanged(); - } - changedNodes = {}; - }); - - $element.on('change', (event, nodes) => { - nodes = _.isArray(nodes) ? nodes : []; - _.each(nodes, (node) => { - changedNodes[node.id] = node; - }); - triggerChange(); - }); - - $scope.$watch('editing', (value) => { - controller.setEditing(!!value); - }); - - $scope.$on('$destroy', () => { - enablePolling = false; - controller.$el = null; - }); - - // `gridstack` does not provide API to detect when one-column mode changes. - // Just watch `$element` for specific class - function updateOneColumnMode() { - const grid = controller.grid(); - if (grid) { - const isOneColumnMode = $element.hasClass(grid.opts.oneColumnModeClass); - if ($scope.isOneColumnMode !== isOneColumnMode) { - $scope.isOneColumnMode = isOneColumnMode; - $scope.$applyAsync(); - } - } - - if (enablePolling) { - setTimeout(updateOneColumnMode, 150); - } - } - - // Start polling only if we can update scope binding; otherwise it - // will just waisting CPU time (example: public dashboards don't need it) - if (isOneColumnModeAssignable) { - updateOneColumnMode(); - } - }, - }; -} - -function gridstackItem($timeout) { - return { - restrict: 'A', - replace: false, - require: '^gridstack', - scope: { - gridstackItem: '=', - gridstackItemId: '@', - }, - link: ($scope, $element, $attr, controller) => { - let enablePolling = true; - let heightBeforeResize = null; - - controller.addWidget($element, $scope.gridstackItem, $scope.gridstackItemId); - - // these events are triggered only on user interaction - $element.on('gridstack.resize-start', () => { - const node = controller.getNodeByElement($element); - heightBeforeResize = _.isObject(node) ? node.height : null; - }); - $element.on('gridstack.resize-end', (event, node) => { - const item = $scope.gridstackItem; - if ( - _.isObject(node) && _.isObject(item) && - (node.height !== heightBeforeResize) && - (heightBeforeResize !== null) - ) { - item.autoHeight = false; - toggleAutoHeightClass($element, item.autoHeight); - $scope.$applyAsync(); - } - }); - - $element.on('gridstack.changed', (event, node) => { - const item = $scope.gridstackItem; - if (_.isObject(node) && _.isObject(item)) { - let dirty = false; - if (node.x !== item.col) { - item.col = node.x; - dirty = true; - } - if (node.y !== item.row) { - item.row = node.y; - dirty = true; - } - if (node.width !== item.sizeX) { - item.sizeX = node.width; - dirty = true; - } - if (node.height !== item.sizeY) { - item.sizeY = node.height; - dirty = true; - } - if (dirty) { - $scope.$applyAsync(); - } - } - }); - - $scope.$watch('gridstackItem.autoHeight', () => { - const item = $scope.gridstackItem; - if (_.isObject(item)) { - toggleAutoHeightClass($element, item.autoHeight); - } else { - toggleAutoHeightClass($element, false); - } - }); - - $scope.$watch('gridstackItemId', () => { - controller.setWidgetId($element, $scope.gridstackItemId); - }); - - $scope.$on('$destroy', () => { - enablePolling = false; - $timeout(() => { - controller.removeWidget($element); - }); - }); - - function update() { - if (!controller.resizingWidget && !controller.draggingWidget) { - const item = $scope.gridstackItem; - const grid = controller.grid(); - if (grid && _.isObject(item) && item.autoHeight) { - const sizeY = computeAutoHeight( - $element, grid, controller.getNodeByElement($element), - item.minSizeY, item.maxSizeY, - ); - if (sizeY !== item.sizeY) { - item.sizeY = sizeY; - controller.updateWidget($element, { sizeY }); - $scope.$applyAsync(); - } - } - } - if (enablePolling) { - setTimeout(update, 150); - } - } - - update(); - }, - }; -} - -export default function init(ngModule) { - ngModule.directive('gridstack', gridstack); - ngModule.directive('gridstackItem', gridstackItem); -} - -init.init = true; diff --git a/client/app/components/dashboards/widget.html b/client/app/components/dashboards/widget.html index b532ae0a4b..e1be1bf6d4 100644 --- a/client/app/components/dashboards/widget.html +++ b/client/app/components/dashboards/widget.html @@ -1,7 +1,7 @@
-
+
@@ -12,7 +12,7 @@ uib-dropdown dropdown-append-to-body="true" >
- +
    @@ -94,12 +94,13 @@

-
+
- +
-
    + diff --git a/client/app/components/dashboards/widget.js b/client/app/components/dashboards/widget.js index fc0667f1bd..9d6a4e73bb 100644 --- a/client/app/components/dashboards/widget.js +++ b/client/app/components/dashboards/widget.js @@ -1,4 +1,5 @@ import { filter } from 'lodash'; +import { angular2react } from 'angular2react'; import template from './widget.html'; import TextboxDialog from '@/components/dashboards/TextboxDialog'; import widgetDialogTemplate from './widget-dialog.html'; @@ -18,6 +19,8 @@ const WidgetDialog = { }, }; +export let DashboardWidget = null; // eslint-disable-line import/no-mutable-exports + function DashboardWidgetCtrl($scope, $location, $uibModal, $window, $rootScope, $timeout, Events, currentUser) { this.canViewQuery = currentUser.hasPermission('view_query'); @@ -106,19 +109,24 @@ function DashboardWidgetCtrl($scope, $location, $uibModal, $window, $rootScope, } } +const DashboardWidgetOptions = { + template, + controller: DashboardWidgetCtrl, + bindings: { + widget: '<', + public: '<', + dashboard: '<', + filters: '<', + deleted: '<', + }, +}; + export default function init(ngModule) { ngModule.component('widgetDialog', WidgetDialog); - ngModule.component('dashboardWidget', { - template, - controller: DashboardWidgetCtrl, - bindings: { - widget: '<', - public: '<', - dashboard: '<', - filters: '<', - deleted: '&onDelete', - }, - }); + ngModule.component('dashboardWidget', DashboardWidgetOptions); + ngModule.run(['$injector', ($injector) => { + DashboardWidget = angular2react('dashboardWidget ', DashboardWidgetOptions, $injector); + }]); } init.init = true; diff --git a/client/app/components/dashboards/widget.less b/client/app/components/dashboards/widget.less index 7503c10e88..0d356d7d12 100644 --- a/client/app/components/dashboards/widget.less +++ b/client/app/components/dashboards/widget.less @@ -89,3 +89,33 @@ visualization-name { } } } + + +// react-grid-layout overrides +.react-grid-item { + + // placeholder color + &.react-grid-placeholder { + border-radius: 3px; + background-color: #E0E6EB; + opacity: 0.5; + } + + // resize placeholder behind widget, the lib's default is above 🤷‍♂️ + &.resizing { + z-index: 3; + } + + // auto-height animation + &.cssTransforms:not(.resizing) { + transition-property: transform, height; // added ", height" + } + + // resize handle size + & > .react-resizable-handle::after { + width: 11px; + height: 11px; + right: 5px; + bottom: 5px; + } +} \ No newline at end of file diff --git a/client/app/config/dashboard-grid-options.js b/client/app/config/dashboard-grid-options.js index 8be8434d83..a07c5691bb 100644 --- a/client/app/config/dashboard-grid-options.js +++ b/client/app/config/dashboard-grid-options.js @@ -1,4 +1,4 @@ -const dashboardGridOptions = { +export default { columns: 6, // grid columns count rowHeight: 50, // grid row height (incl. bottom padding) margins: 15, // widget margins @@ -11,9 +11,3 @@ const dashboardGridOptions = { minSizeY: 1, maxSizeY: 1000, }; - -export default function init(ngModule) { - ngModule.constant('dashboardGridOptions', dashboardGridOptions); -} - -init.init = true; diff --git a/client/app/config/index.js b/client/app/config/index.js index 8fa095a488..a38c5cd839 100644 --- a/client/app/config/index.js +++ b/client/app/config/index.js @@ -29,7 +29,6 @@ import * as filters from '@/filters'; import registerDirectives from '@/directives'; import markdownFilter from '@/filters/markdown'; import dateTimeFilter from '@/filters/datetime'; -import dashboardGridOptions from './dashboard-grid-options'; import './antd-spinner'; const logger = debug('redash:config'); @@ -58,8 +57,6 @@ const requirements = [ const ngModule = angular.module('app', requirements); -dashboardGridOptions(ngModule); - function registerAll(context) { const modules = context .keys() diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html index 336dd7f878..a52bb540c7 100644 --- a/client/app/pages/dashboards/dashboard.html +++ b/client/app/pages/dashboards/dashboard.html @@ -25,7 +25,7 @@

    Saving Failed - @@ -101,18 +101,17 @@

-
-
-
-
- -
-
-
+
+
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js index a4811af7f7..545530f227 100644 --- a/client/app/pages/dashboards/dashboard.js +++ b/client/app/pages/dashboards/dashboard.js @@ -17,19 +17,11 @@ import notification from '@/services/notification'; import './dashboard.less'; -function isWidgetPositionChanged(oldPosition, newPosition) { - const fields = ['col', 'row', 'sizeX', 'sizeY', 'autoHeight']; - oldPosition = _.pick(oldPosition, fields); - newPosition = _.pick(newPosition, fields); - return !!_.find(fields, key => newPosition[key] !== oldPosition[key]); -} - -function getWidgetsWithChangedPositions(widgets) { - return _.filter(widgets, (widget) => { - if (!_.isObject(widget.$originalPosition)) { - return true; - } - return isWidgetPositionChanged(widget.$originalPosition, widget.options.position); +function getChangedPositions(widgets, nextPositions = {}) { + return _.pickBy(nextPositions, (nextPos, widgetId) => { + const widget = _.find(widgets, { id: Number(widgetId) }); + const prevPos = widget.options.position; + return !_.isMatch(prevPos, nextPos); }); } @@ -47,28 +39,29 @@ function DashboardCtrl( clientConfig, Events, ) { - this.saveInProgress = false; - this.saveDelay = false; + let recentPositions = []; - this.saveDashboardLayout = () => { + const saveDashboardLayout = (changedPositions) => { if (!this.dashboard.canEdit()) { return; } - this.isLayoutDirty = true; + this.saveInProgress = true; - // calc diff, bail if none - const changedWidgets = getWidgetsWithChangedPositions(this.dashboard.widgets); - if (!changedWidgets.length) { - this.isLayoutDirty = false; - $scope.$applyAsync(); - return; - } + const saveChangedWidgets = _.map(changedPositions, (position, id) => { + // find widget + const widget = _.find(this.dashboard.widgets, { id: Number(id) }); + + // skip already deleted widget + if (!widget) { + return Promise.resolve(); + } + + return widget.save('options', { position }); + }); - this.saveDelay = false; - this.saveInProgress = true; return $q - .all(_.map(changedWidgets, widget => widget.save())) + .all(saveChangedWidgets) .then(() => { this.isLayoutDirty = false; if (this.editBtnClickedWhileSaving) { @@ -76,32 +69,42 @@ function DashboardCtrl( } }) .catch(() => { - // in the off-chance that a widget got deleted mid-saving it's position, an error will occur - // currently left unhandled PR 3653#issuecomment-481699053 notification.error('Error saving changes.'); }) .finally(() => { this.saveInProgress = false; this.editBtnClickedWhileSaving = false; + $scope.$applyAsync(); }); }; - const saveDashboardLayoutDebounced = () => { + const saveDashboardLayoutDebounced = (...args) => { this.saveDelay = true; - return _.debounce(() => this.saveDashboardLayout(), 2000)(); + return _.debounce(() => { + this.saveDelay = false; + saveDashboardLayout(...args); + }, 2000)(); + }; + + this.retrySaveDashboardLayout = () => { + this.onLayoutChange(recentPositions); }; + // grid vars this.saveDelay = false; + this.saveInProgress = false; + this.recentLayoutPositions = {}; this.editBtnClickedWhileSaving = false; this.layoutEditing = false; + this.isLayoutDirty = false; + this.isGridDisabled = false; + + // dashboard vars this.isFullscreen = false; this.refreshRate = null; - this.isGridDisabled = false; - this.updateGridItems = null; this.showPermissionsControl = clientConfig.showPermissionsControl; this.globalParameters = []; this.isDashboardOwner = false; - this.isLayoutDirty = false; this.filters = []; this.refreshRates = clientConfig.dashboardRefreshIntervals.map(interval => ({ @@ -233,17 +236,35 @@ function DashboardCtrl( }); }; - this.onLayoutChanged = () => { - // prevent unnecessary save when gridstack is loaded - if (!this.layoutEditing) { + this.onLayoutChange = (positions) => { + recentPositions = positions; // required for retry if subsequent save fails + + // determine position changes + const changedPositions = getChangedPositions(this.dashboard.widgets, positions); + if (_.isEmpty(changedPositions)) { + this.isLayoutDirty = false; + $scope.$applyAsync(); return; } + this.isLayoutDirty = true; - saveDashboardLayoutDebounced(); + $scope.$applyAsync(); + + // debounce in edit mode, immediate in preview + if (this.layoutEditing) { + saveDashboardLayoutDebounced(changedPositions); + } else { + saveDashboardLayout(changedPositions); + } }; - this.editLayout = (enableEditing) => { - this.layoutEditing = enableEditing; + this.onBreakpointChanged = (isSingleCol) => { + this.isGridDisabled = isSingleCol; + $scope.$applyAsync(); + }; + + this.editLayout = (isEditing) => { + this.layoutEditing = isEditing; }; this.loadTags = () => getTags('api/dashboards/tags').then(tags => _.map(tags, t => t.name)); @@ -332,6 +353,7 @@ function DashboardCtrl( return widget.save() .then(() => { this.dashboard.widgets.push(widget); + this.dashboard.widgets = [...this.dashboard.widgets]; // ANGULAR_REMOVE_ME this.onWidgetAdded(); }); }; @@ -368,6 +390,7 @@ function DashboardCtrl( return Promise.all(widgetsToSave.map(w => w.save())) .then(() => { this.dashboard.widgets.push(widget); + this.dashboard.widgets = [...this.dashboard.widgets]; // ANGULAR_REMOVE_ME this.onWidgetAdded(); }); }; @@ -388,11 +411,6 @@ function DashboardCtrl( this.extractGlobalParameters(); collectFilters(this.dashboard, false); $scope.$applyAsync(); - - if (!this.layoutEditing) { - // We need to wait a bit while `angular` updates widgets, and only then save new layout - $timeout(() => this.saveDashboardLayout(), 50); - } }; this.toggleFullscreen = () => { diff --git a/client/app/pages/dashboards/dashboard.less b/client/app/pages/dashboards/dashboard.less index a24eedf53c..65901238a5 100644 --- a/client/app/pages/dashboards/dashboard.less +++ b/client/app/pages/dashboards/dashboard.less @@ -1,4 +1,11 @@ .dashboard-wrapper { + flex-grow: 1; + margin-bottom: 85px; + + .layout { + margin: -15px -15px 0; + } + .tile { display: flex; position: absolute; @@ -17,7 +24,7 @@ overflow: visible; } - .preview-mode & { + &.preview-mode { .widget-menu-regular { display: block; } @@ -26,7 +33,25 @@ } } - .editing-mode & { + &.editing-mode { + /* Y axis lines */ + background: linear-gradient(to right, transparent, transparent 1px, #F6F8F9 1px, #F6F8F9), linear-gradient(to bottom, #B3BABF, #B3BABF 1px, transparent 1px, transparent); + background-size: 5px 50px; + background-position-y: -8px; + + /* X axis lines */ + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 85px; + right: 15px; + background: linear-gradient(to bottom, transparent, transparent 2px, #F6F8F9 2px, #F6F8F9 5px), linear-gradient(to left, #B3BABF, #B3BABF 1px, transparent 1px, transparent); + background-size: calc((100vw - 15px) / 6) 5px; + background-position: -7px 1px; + } + .widget-menu-regular { display: none; } @@ -179,7 +204,7 @@ public-dashboard-page { #footer { height: 95px; - text-align: center; + text-align: center; } } @@ -198,30 +223,12 @@ dashboard-page, dashboard-page .container { #dashboard-container { position: relative; flex-grow: 1; - margin-bottom: 50px; // but not ALL the way ಠ_ಠ - - &.editing-mode.grid-enabled { - /* Y axis lines */ - background: linear-gradient(to right, transparent, transparent 1px, #F6F8F9 1px, #F6F8F9), linear-gradient(to bottom, #B3BABF, #B3BABF 1px, transparent 1px, transparent); - background-size: 5px 50px; - background-position-y: -8px; - - /* X axis lines */ - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 15px; - background: linear-gradient(to bottom, transparent, transparent 2px, #F6F8F9 2px, #F6F8F9 5px), linear-gradient(to left, #B3BABF, #B3BABF 1px, transparent 1px, transparent); - background-size: calc((100vw - 15px) / 6) 5px; - background-position: -7px 1px; - } - } + display: flex; } -// placeholder bg color -.grid-stack-placeholder > .placeholder-content { - background-color: rgba(224, 230, 235, 0.5) !important; +// soon deprecated +dashboard-grid { + flex-grow: 1; + display: flex; + flex-direction: column; } diff --git a/client/app/pages/dashboards/public-dashboard-page.html b/client/app/pages/dashboards/public-dashboard-page.html index 950aa10706..cdadcd8769 100644 --- a/client/app/pages/dashboards/public-dashboard-page.html +++ b/client/app/pages/dashboards/public-dashboard-page.html @@ -5,16 +5,14 @@
-
-
-
-
- -
-
-
+
+
diff --git a/client/app/pages/dashboards/public-dashboard-page.js b/client/app/pages/dashboards/public-dashboard-page.js index 5b769168e2..b9b24e98f0 100644 --- a/client/app/pages/dashboards/public-dashboard-page.js +++ b/client/app/pages/dashboards/public-dashboard-page.js @@ -1,5 +1,6 @@ import logoUrl from '@/assets/images/redash_icon_small.png'; import template from './public-dashboard-page.html'; +import dashboardGridOptions from '@/config/dashboard-grid-options'; import './dashboard.less'; function loadDashboard($http, $route) { @@ -12,9 +13,11 @@ const PublicDashboardPage = { bindings: { dashboard: '<', }, - controller($scope, $timeout, $location, $http, $route, dashboardGridOptions, Dashboard) { + controller($scope, $timeout, $location, $http, $route, Dashboard) { 'ngInject'; + this.filters = []; + this.dashboardGridOptions = Object.assign({}, dashboardGridOptions, { resizable: { enabled: false }, draggable: { enabled: false }, diff --git a/client/app/services/dashboard.js b/client/app/services/dashboard.js index 3afda888d4..fa19cafef3 100644 --- a/client/app/services/dashboard.js +++ b/client/app/services/dashboard.js @@ -1,4 +1,5 @@ import _ from 'lodash'; +import dashboardGridOptions from '@/config/dashboard-grid-options'; export let Dashboard = null; // eslint-disable-line import/no-mutable-exports @@ -75,7 +76,7 @@ function prepareWidgetsForDashboard(widgets) { return widgets; } -function DashboardService($resource, $http, $location, currentUser, Widget, dashboardGridOptions) { +function DashboardService($resource, $http, $location, currentUser, Widget) { function prepareDashboardWidgets(widgets) { return prepareWidgetsForDashboard(_.map(widgets, widget => new Widget(widget))); } diff --git a/client/app/services/widget.js b/client/app/services/widget.js index afb28a9885..ecc8b36300 100644 --- a/client/app/services/widget.js +++ b/client/app/services/widget.js @@ -1,10 +1,11 @@ import moment from 'moment'; -import { each, pick, extend, isObject, truncate, keys, difference, filter, map } from 'lodash'; +import { each, pick, extend, isObject, truncate, keys, difference, filter, map, merge } from 'lodash'; +import dashboardGridOptions from '@/config/dashboard-grid-options'; import { registeredVisualizations } from '@/visualizations'; export let Widget = null; // eslint-disable-line import/no-mutable-exports -function calculatePositionOptions(dashboardGridOptions, widget) { +function calculatePositionOptions(widget) { widget.width = 1; // Backward compatibility, user on back-end const visualizationOptions = { @@ -68,7 +69,7 @@ export const ParameterMappingType = { StaticValue: 'static-value', }; -function WidgetFactory($http, $location, Query, dashboardGridOptions) { +function WidgetFactory($http, $location, Query) { class WidgetService { static MappingType = ParameterMappingType; @@ -78,7 +79,7 @@ function WidgetFactory($http, $location, Query, dashboardGridOptions) { this[k] = v; }); - const visualizationOptions = calculatePositionOptions(dashboardGridOptions, this); + const visualizationOptions = calculatePositionOptions(this); this.options = this.options || {}; this.options.position = extend( @@ -90,13 +91,6 @@ function WidgetFactory($http, $location, Query, dashboardGridOptions) { if (this.options.position.sizeY < 0) { this.options.position.autoHeight = true; } - - this.updateOriginalPosition(); - } - - updateOriginalPosition() { - // Save original position (create a shallow copy) - this.$originalPosition = extend({}, this.options.position); } getQuery() { @@ -151,8 +145,11 @@ function WidgetFactory($http, $location, Query, dashboardGridOptions) { return this.queryResult.toPromise(); } - save() { + save(key, value) { const data = pick(this, 'options', 'text', 'id', 'width', 'dashboard_id', 'visualization_id'); + if (key && value) { + data[key] = merge({}, data[key], value); // done like this so `this.options` doesn't get updated by side-effect + } let url = 'api/widgets'; if (this.id) { @@ -164,8 +161,6 @@ function WidgetFactory($http, $location, Query, dashboardGridOptions) { this[k] = v; }); - this.updateOriginalPosition(); - return this; }); } diff --git a/client/cypress/integration/dashboard/dashboard_spec.js b/client/cypress/integration/dashboard/dashboard_spec.js index ca8370764f..86f03a3c19 100644 --- a/client/cypress/integration/dashboard/dashboard_spec.js +++ b/client/cypress/integration/dashboard/dashboard_spec.js @@ -4,7 +4,7 @@ import { createDashboard, createQuery, addTextbox, addWidget } from '../../suppo const { get } = Cypress._; -const RESIZE_HANDLE_SELECTOR = '.ui-resizable-se'; +const RESIZE_HANDLE_SELECTOR = '.react-resizable-handle'; function getWidgetTestId(widget) { @@ -31,17 +31,19 @@ function editDashboard() { }); } -function dragBy(wrapper, offsetLeft = 0, offsetTop = 0, force = false) { - let start; +function dragBy(wrapper, offsetLeft, offsetTop, force = false) { + if (!offsetLeft) { + offsetLeft = 1; + } + if (!offsetTop) { + offsetTop = 1; + } return wrapper - .then(($el) => { - start = $el.offset(); - return wrapper - .trigger('mouseover', { force }) - .trigger('mousedown', { pageX: start.left, pageY: start.top, which: 1, force }) - .trigger('mousemove', { pageX: start.left + offsetLeft, pageY: start.top + offsetTop, which: 1, force }) - .trigger('mouseup', { force }); - }); + .trigger('mouseover', { force }) + .trigger('mousedown', 'topLeft', { force }) + .trigger('mousemove', 1, 1, { force }) // must have at least 2 mousemove events for react-grid-layout to trigger onLayoutChange + .trigger('mousemove', offsetLeft, offsetTop, { force }) + .trigger('mouseup', { force }); } function resizeBy(wrapper, offsetLeft = 0, offsetTop = 0) { @@ -157,8 +159,7 @@ describe('Dashboard', () => { }); }); - // eslint-disable-next-line jest/no-disabled-tests - it.skip('allows opening menu after removal', function () { + it('allows opening menu after removal', function () { let elTestId1; addTextbox(this.dashboardId, 'txb 1') .then(getWidgetTestId) @@ -235,7 +236,7 @@ describe('Dashboard', () => { const { top, left } = $el.offset(); expect(top).to.eq(214); expect(left).to.eq(215); - expect($el.width()).to.eq(600); + expect($el.width()).to.eq(585); expect($el.height()).to.eq(185); }); }); @@ -300,21 +301,21 @@ describe('Dashboard', () => { resizeBy(cy.get('@textboxEl'), 90) .then(() => cy.get('@textboxEl')) .invoke('width') - .should('eq', 600); // no change, 600 -> 600 + .should('eq', 585); // no change, 585 -> 585 }); it('moves one column when dragged over snap threshold', () => { resizeBy(cy.get('@textboxEl'), 110) .then(() => cy.get('@textboxEl')) .invoke('width') - .should('eq', 800); // resized by 200, 600 -> 800 + .should('eq', 785); // resized by 200, 585 -> 785 }); it('moves two columns when dragged over snap threshold', () => { resizeBy(cy.get('@textboxEl'), 400) .then(() => cy.get('@textboxEl')) .invoke('width') - .should('eq', 1000); // resized by 400, 600 -> 1000 + .should('eq', 985); // resized by 400, 585 -> 985 }); }); @@ -342,7 +343,7 @@ describe('Dashboard', () => { .then($el => resizeBy(cy.get('@textboxEl'), -$el.width(), -$el.height())) // resize to 0,0 .then(() => cy.get('@textboxEl')) .should(($el) => { - expect($el.width()).to.eq(200); // min textbox width + expect($el.width()).to.eq(185); // min textbox width expect($el.height()).to.eq(35); // min textbox height }); }); @@ -433,7 +434,7 @@ describe('Dashboard', () => { cy.getByTestId('RefreshIndicator').as('refreshButton'); }); cy.getByTestId(`ParameterName${paramName}`).within(() => { - cy.get('input').as('paramInput'); + cy.getByTestId('TextParamInput').as('paramInput'); }); }); }); @@ -469,8 +470,10 @@ describe('Dashboard', () => { cy.get('@widget').invoke('height').should('eq', 285); // resize height by 1 grid row - resizeBy(cy.get('@widget'), 0, 5); - cy.get('@widget').invoke('height').should('eq', 335); + resizeBy(cy.get('@widget'), 0, 50) + .then(() => cy.get('@widget')) + .invoke('height') + .should('eq', 335); // resized by 50, , 135 -> 185 // add 4 table rows cy.get('@paramInput').clear().type('5{enter}'); @@ -505,12 +508,12 @@ describe('Dashboard', () => { it('shows widgets with full width', () => { cy.get('@textboxEl').should(($el) => { - expect($el.width()).to.eq(785); + expect($el.width()).to.eq(770); }); cy.viewport(801, 800); cy.get('@textboxEl').should(($el) => { - expect($el.width()).to.eq(393); + expect($el.width()).to.eq(378); }); }); diff --git a/package-lock.json b/package-lock.json index ef5c037cc9..0c78491cb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8912,16 +8912,6 @@ "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz", "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==" }, - "gridstack": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/gridstack/-/gridstack-0.3.0.tgz", - "integrity": "sha1-vhx4kfP70q9g+dYPTH1RejDTu3g=", - "requires": { - "jquery": "^3.1.0", - "jquery-ui": "^1.12.0", - "lodash": "^4.14.2" - } - }, "growly": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", @@ -14866,6 +14856,26 @@ "scheduler": "^0.13.3" } }, + "react-draggable": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-3.3.0.tgz", + "integrity": "sha512-U7/jD0tAW4T0S7DCPK0kkKLyL0z61sC/eqU+NUfDjnq+JtBKaYKDHpsK2wazctiA4alEzCXUnzkREoxppOySVw==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.0" + } + }, + "react-grid-layout": { + "version": "git+https://github.com/getredash/react-grid-layout.git#45c44030b8501aa14dae746c5afa3e867d86ebea", + "from": "git+https://github.com/getredash/react-grid-layout.git", + "requires": { + "classnames": "2.x", + "lodash.isequal": "^4.0.0", + "prop-types": "15.x", + "react-draggable": "3.x", + "react-resizable": "1.x" + } + }, "react-is": { "version": "16.8.3", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz", @@ -14887,6 +14897,15 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-resizable": { + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.7.5.tgz", + "integrity": "sha512-lauPcBsLqmxMHXHpTeOBpYenGalbSikYr8hK+lwtNYMQX1pGd2iYE+pDvZEV97nCnzuCtWM9htp7OpsBIY2Sjw==", + "requires": { + "prop-types": "15.x", + "react-draggable": "^2.2.6 || ^3.0.3" + } + }, "react-slick": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.23.2.tgz", diff --git a/package.json b/package.json index a4dc2719d9..489a73fd36 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,6 @@ "d3-cloud": "^1.2.4", "debug": "^3.1.0", "font-awesome": "^4.7.0", - "gridstack": "^0.3.0", "hoist-non-react-statics": "^3.3.0", "jquery": "^3.2.1", "jquery-ui": "^1.12.1", @@ -81,6 +80,7 @@ "react": "^16.8.3", "react-ace": "^6.1.0", "react-dom": "^16.8.3", + "react-grid-layout": "git+https://github.com/getredash/react-grid-layout.git", "react2angular": "^3.2.1", "ui-select": "^0.19.8", "underscore.string": "^3.3.4"