Merge pull request #3088 from influxdata/polish/improve-add-new-cell

Improve Add New Cell UX

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

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) {

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],