diff --git a/CHANGELOG.md b/CHANGELOG.md index 118b7baeb..407bc1c8a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ ### UI Improvements +1. [#3088](https://github.com/influxdata/chronograf/pull/3088): New dashboard cells appear at bottom of layout and assume the size of the most common cell 1. [#3096](https://github.com/influxdata/chronograf/pull/3096): Standardize delete confirmation interactions 1. [#3096](https://github.com/influxdata/chronograf/pull/3096): Standardize save & cancel interactions @@ -13,12 +14,6 @@ 1. [#2950](https://github.com/influxdata/chronograf/pull/2094): Always save template variables on first edit -## v1.4.3.0 [unreleased] - -### UI Improvements - -### Bug Fixes - ## v1.4.3.0 [2018-3-28] ### Features diff --git a/ui/src/dashboards/actions/index.js b/ui/src/dashboards/actions/index.js index 94477b2ad..770dd993d 100644 --- a/ui/src/dashboards/actions/index.js +++ b/ui/src/dashboards/actions/index.js @@ -11,7 +11,7 @@ import { import {notify} from 'shared/actions/notifications' import {errorThrown} from 'shared/actions/errors' -import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants' +import {generateNewDashboardCell} from 'src/dashboards/constants' import { notifyDashboardDeleted, notifyDashboardDeleteFailed, @@ -280,7 +280,7 @@ export const addDashboardCellAsync = dashboard => async dispatch => { try { const {data} = await addDashboardCellAJAX( dashboard, - NEW_DEFAULT_DASHBOARD_CELL + generateNewDashboardCell(dashboard) ) dispatch(addDashboardCell(dashboard, data)) } catch (error) { diff --git a/ui/src/dashboards/constants/index.js b/ui/src/dashboards/constants/index.js index 20404f349..1909b7d73 100644 --- a/ui/src/dashboards/constants/index.js +++ b/ui/src/dashboards/constants/index.js @@ -25,6 +25,49 @@ export const NEW_DEFAULT_DASHBOARD_CELL = { tableOptions: DEFAULT_TABLE_OPTIONS, } +const getMostCommonValue = values => { + const results = values.reduce( + (acc, value) => { + const {distribution, mostCommonCount} = acc + distribution[value] = (distribution[value] || 0) + 1 + if (distribution[value] > mostCommonCount) { + return { + distribution, + mostCommonCount: distribution[value], + mostCommonValue: value, + } + } + return acc + }, + {distribution: {}, mostCommonCount: 0} + ) + + return results.mostCommonValue +} + +export const generateNewDashboardCell = dashboard => { + if (dashboard.cells.length === 0) { + return NEW_DEFAULT_DASHBOARD_CELL + } + + const newCellY = dashboard.cells + .map(cell => cell.y + cell.h) + .reduce((a, b) => (a > b ? a : b)) + + const existingCellWidths = dashboard.cells.map(cell => cell.w) + const existingCellHeights = dashboard.cells.map(cell => cell.h) + + const mostCommonCellWidth = getMostCommonValue(existingCellWidths) + const mostCommonCellHeight = getMostCommonValue(existingCellHeights) + + return { + ...NEW_DEFAULT_DASHBOARD_CELL, + y: newCellY, + w: mostCommonCellWidth, + h: mostCommonCellHeight, + } +} + export const NEW_DASHBOARD = { name: 'Name This Dashboard', cells: [NEW_DEFAULT_DASHBOARD_CELL],