(bug)Fix dashboard grid configuration (#1044)

* dash_fix_wip

* fix db command argument length validation

* fix dashboard bug

front-end/src/dashboard/config.jsx

@@ -91,10 +91,12 @@ class config extends React.Component {
       for (j = 0; j < config.column; j++) {
         config.grid_details[i][j] = {
           id: cells[i][j].id,
-          type: cells[i][j].type.name
+          type: cells[i][j].type
         }
       }
+      config.grid_details[i].length = config.column
     }
+    config.grid_details.length = config.row
     this.setState({
       config: config,
       updated: true

front-end/src/dashboard/dashboard.test.js

@@ -22,8 +22,8 @@ describe('Dashboard', () => {
       grid_details: [
         [{ type: 'equipment' }, { type: 'ato', id: '1' }],
         [{ type: 'light', id: '1' }, { type: 'health', id: 'current' }],
-        [{ type: 'ph-current', id: '1' }, { type: 'ph-historical', id: 'current' }],
-        [{ type: 'tc', id: '1' }, { type: 'temperature', id: 'current' }]
+        [{ type: 'ph_current', id: '1' }, { type: 'ph_historical', id: 'current' }],
+        [{ type: 'temp_historical', id: '1' }, { type: 'temp_current', id: 'current' }]
       ]
     }
     let m = shallow(<Main store={mockStore({ dashboard: config })} />)
@@ -43,12 +43,9 @@ describe('Dashboard', () => {
     ]
     const m = shallow(<Grid rows={2} columns={2} cells={cells} hook={() => {}} />).instance()
     m.setType(0, 0, 'equipment')()
-    m.updateHook(0, 0)('1')
+    m.setID(0, 0)('1')
     m.menuItem('ato', true, 0, 1)
-    delete m.state.cells
     m.render()
-    delete m.state.cells
-    m.initiatlizeCell(1, 2)
   })
 
   it('<ComponentSelector />', () => {

front-end/src/dashboard/grid.jsx

@@ -1,116 +1,58 @@
 import React from 'react'
 import ComponentSelector from './component_selector'
-import i18next from 'i18next'
+import { buildTypeMap, buildCells } from './types'
 
 // props: rows, columns, hook, cells, tcs, atos
 export default class Grid extends React.Component {
   constructor (props) {
     super(props)
-    this.availableTypes = {
-      ato: {
-        name: 'ato',
-        label: i18next.t('ato'),
-        options: props.atos
-      },
-      equipment: {
-        name: 'equipment',
-        label: i18next.t('equipment'),
-        options: []
-      },
-      health: {
-        name: 'health',
-        label: i18next.t('health'),
-        options: [{ id: 'current', name: 'current' }, { id: 'historical', name: 'historical' }]
-      },
-      light: {
-        name: 'lights',
-        label: i18next.t('light'),
-        options: props.lights
-      },
-      ph_current: {
-        name: 'ph_current',
-        label: i18next.t('ph:chart:current'),
-        options: props.phs
-      },
-      ph_historical: {
-        name: 'ph_historical',
-        label: i18next.t('ph:chart:historical'),
-        options: props.phs
-      },
-      temp_current: {
-        name: 'temp_current',
-        label: i18next.t('temperature:chart:current'),
-        options: props.tcs
-      },
-      temp_historical: {
-        name: 'temp_historical',
-        label: i18next.t('temperature:chart:historical'),
-        options: props.tcs
-      },
-      doser: {
-        name: 'doser',
-        label: i18next.t('doser'),
-        options: props.dosers
-      }
-    }
-    let i, j
-    const cells = []
-    for (i = 0; i < props.rows; i++) {
-      cells[i] = []
-      for (j = 0; j < props.columns; j++) {
-        if (props.cells[i] === undefined || props.cells[i][j] === undefined) {
-          cells[i][j] = { type: 'health' }
-          continue
-        }
-        const cell = props.cells[i][j]
-        cells[i][j] = {
-          type: this.availableTypes[cell.type],
-          id: cell.id
-        }
-      }
-    }
     this.state = {
-      cells: cells
+      cells: buildCells(props.rows, props.columns, props.cells),
+      types: buildTypeMap(props)
     }
     this.setType = this.setType.bind(this)
-    this.updateHook = this.updateHook.bind(this)
-    this.initiatlizeCell = this.initiatlizeCell.bind(this)
+    this.setID = this.setID.bind(this)
     this.cellUI = this.cellUI.bind(this)
     this.menuItem = this.menuItem.bind(this)
     this.menuItems = this.menuItems.bind(this)
   }
 
-  cellUI (type, currentId, i, j) {
-    return (
-      <ComponentSelector
-        components={type.options}
-        hook={this.updateHook(i, j)}
-        selector_id={'component-' + type.label + '-' + i + '-' + j}
-        current_id={currentId}
-      />
-    )
-  }
-
-  initiatlizeCell (i, j) {
-    let cells = this.state.cells
-    if (cells === undefined) {
-      cells = []
-    }
-    if (cells[i] === undefined) {
-      cells[i] = []
+  cellUI (i, j, cell) {
+    let label = this.state.types.health.label
+    let options = this.state.types.health.options
+    let id = 'current'
+    if (cell === undefined) {
+      cell = { type: 'health', id: 'current' }
     }
-    for (j = 0; j < this.props.columns; j++) {
-      if (cells[i][j] === undefined) {
-        cells[i][j] = {
-          type: 'health'
-        }
-      }
-      cells[i][j].ui = this.cellUI(cells[i][j].type, cells[i][j].id, i, j)
+
+    if (this.state.types[cell.type] !== undefined) {
+      label = this.state.types[cell.type].label
+      options = this.state.types[cell.type].options
+      id = cell.id
     }
-    return (cells)
+    return (
+      <div className='col grid-block' key={'chart-type-' + i + '-' + j}>
+        <div className='dropdown'>
+          <button className='btn btn-secondary dropdown-toggle' type='button' id={'db-' + i + '-' + j} data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            {label}
+          </button>
+          <div className='dropdown-menu' aria-labelledby='dropdownMenuButton'>
+            {this.menuItems(i, j)}
+          </div>
+        </div>
+        <div className='col-2 col-4 col-6'>
+          <ComponentSelector
+            components={options}
+            hook={this.setID(i, j)}
+            selector_id={'component-' + label + '-' + i + '-' + j}
+            current_id={id}
+          />
+        </div>
+      </div>
+    )
   }
 
-  updateHook (i, j) {
+  setID (i, j) {
     return (function (id) {
       const cells = this.state.cells
       cells[i][j].id = id
@@ -121,75 +63,60 @@ export default class Grid extends React.Component {
 
   setType (i, j, type) {
     return (function () {
-      const cells = this.initiatlizeCell(i, j)
+      const cells = this.state.cells
       cells[i][j].type = type
-      cells[i][j].ui = this.cellUI(type, '', i, j)
       this.setState({ cells: cells })
       this.props.hook(cells)
     }.bind(this))
   }
 
-  menuItem (type, a, i, j) {
+  menuItem (type, active, i, j) {
     let cName = 'dropdown-item'
-    if (a) {
+    if (active) {
       cName += ' active'
     }
+    if (type === undefined) {
+      return (<span>None</span>)
+    }
+    const label = type.label || '-'
     return (
-      <a className={cName} href='#' onClick={this.setType(i, j, type)} key={type.name + i + '-' + j}>
-        <span id={type + '-chart-' + i + '-' + j}>{type.label}</span>
+      <a className={cName} href='#' onClick={this.setType(i, j, type.name)} key={type.name + '-' + i + '-' + j}>
+        <span id={'menu-chart-' + i + '-' + j}>{label}</span>
       </a>
     )
   }
 
   menuItems (i, j) {
     const types = [
-      this.menuItem(this.availableTypes.ato, false, i, j),
-      this.menuItem(this.availableTypes.equipment, false, i, j),
-      this.menuItem(this.availableTypes.health, false, i, j),
-      this.menuItem(this.availableTypes.light, false, i, j),
-      this.menuItem(this.availableTypes.ph_current, false, i, j),
-      this.menuItem(this.availableTypes.ph_historical, false, i, j),
-      this.menuItem(this.availableTypes.temp_current, false, i, j),
-      this.menuItem(this.availableTypes.temp_historical, false, i, j),
-      this.menuItem(this.availableTypes.doser, false, i, j)
+      this.menuItem(this.state.types.ato, false, i, j),
+      this.menuItem(this.state.types.equipment, false, i, j),
+      this.menuItem(this.state.types.health, false, i, j),
+      this.menuItem(this.state.types.light, false, i, j),
+      this.menuItem(this.state.types.ph_current, false, i, j),
+      this.menuItem(this.state.types.ph_historical, false, i, j),
+      this.menuItem(this.state.types.temp_current, false, i, j),
+      this.menuItem(this.state.types.temp_historical, false, i, j),
+      this.menuItem(this.state.types.doser, false, i, j)
     ]
     return (types)
   }
 
   render () {
-    const rows = []
+    const cells = buildCells(this.props.rows, this.props.columns, this.state.cells)
     let i, j
-    let cells = this.state.cells
-    if (cells === undefined) {
-      cells = []
-    }
+    const rows = []
     for (i = 0; i < this.props.rows; i++) {
       const columns = []
       for (j = 0; j < this.props.columns; j++) {
-        cells = this.initiatlizeCell(i, j)
-        columns.push(
-          <div className='col grid-block' key={'chart-type-' + i + '-' + j}>
-            <div className='dropdown'>
-              <button className='btn btn-secondary dropdown-toggle' type='button' id={'db-' + i + '-' + j} data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                {cells[i][j].type.label}
-              </button>
-              <div className='dropdown-menu' aria-labelledby='dropdownMenuButton'>
-                {this.menuItems(i, j)}
-              </div>
-            </div>
-            <div className='col-2 col-4 col-6'>
-              {cells[i][j].ui}
-            </div>
-          </div>
-        )
+        const cell = cells[i][j]
+        columns.push(this.cellUI(i, j, cell))
       }
       rows.push(
-        <div className='row' key={'chart-details-' + i + '-' + 'j'}>
+        <div className='row' key={'chart-row-' + i}>
           {columns}
         </div>
       )
     }
-
     return (
       <div className='col-12 reef-pi-grid'>
         <label> Charts </label>

front-end/src/dashboard/types.jsx

@@ -0,0 +1,76 @@
+import i18next from 'i18next'
+
+export const buildCells = (rows, columns, cells) => {
+  const pCells = []
+  let i, j
+  for (i = 0; i < rows; i++) {
+    const row = []
+    for (j = 0; j < columns; j++) {
+      const cell = {
+        type: 'health',
+        id: 'current'
+      }
+      if (cells[i] !== undefined && cells[i][j] !== undefined) {
+        cell.type = cells[i][j].type || 'health'
+        cell.id = cells[i][j].id || 'current'
+      }
+      row.push(cell)
+    }
+    pCells.push(row)
+  }
+  return (pCells)
+}
+
+export const buildTypeMap = (props) => {
+  if (props === undefined) {
+    props = {}
+  }
+  const validTypes = {
+    ato: {
+      name: 'ato',
+      label: i18next.t('ato'),
+      options: props.atos || []
+    },
+    equipment: {
+      name: 'equipment',
+      label: i18next.t('equipment'),
+      options: []
+    },
+    health: {
+      name: 'health',
+      label: i18next.t('health'),
+      options: [{ id: 'current', name: 'current' }, { id: 'historical', name: 'historical' }]
+    },
+    light: {
+      name: 'lights',
+      label: i18next.t('light'),
+      options: props.lights || []
+    },
+    ph_current: {
+      name: 'ph_current',
+      label: i18next.t('ph:chart:current'),
+      options: props.phs || []
+    },
+    ph_historical: {
+      name: 'ph_historical',
+      label: i18next.t('ph:chart:historical'),
+      options: props.phs || []
+    },
+    temp_current: {
+      name: 'temp_current',
+      label: i18next.t('temperature:chart:current'),
+      options: props.tcs || []
+    },
+    temp_historical: {
+      name: 'temp_historical',
+      label: i18next.t('temperature:chart:historical'),
+      options: props.tcs || []
+    },
+    doser: {
+      name: 'doser',
+      label: i18next.t('doser'),
+      options: props.dosers || []
+    }
+  }
+  return (validTypes)
+}