Turn generateVisualization func into separate component

ui/src/shared/components/Layout.js

@@ -0,0 +1,89 @@
+import React, {PropTypes} from 'react'
+import WidgetCell from 'shared/components/WidgetCell'
+import LayoutCell from 'shared/components/LayoutCell'
+import RefreshingGraph from 'shared/components/RefreshingGraph'
+import {buildQueriesForLayouts} from 'utils/influxql'
+
+const Layout = ({
+  host,
+  cell,
+  cell: {h, axes, type},
+  source,
+  onZoom,
+  templates,
+  timeRange,
+  isEditable,
+  onEditCell,
+  autoRefresh,
+  onDeleteCell,
+  synchronizer,
+  onCancelEditCell,
+  onSummonOverlayTechnologies,
+}) =>
+  <LayoutCell
+    onCancelEditCell={onCancelEditCell}
+    isEditable={isEditable}
+    onEditCell={onEditCell}
+    onDeleteCell={onDeleteCell}
+    onSummonOverlayTechnologies={onSummonOverlayTechnologies}
+    cell={cell}
+  >
+    {cell.isWidget
+      ? <WidgetCell cell={cell} timeRange={timeRange} source={source} />
+      : <RefreshingGraph
+          axes={axes}
+          type={type}
+          cellHeight={h}
+          onZoom={onZoom}
+          timeRange={timeRange}
+          templates={templates}
+          autoRefresh={autoRefresh}
+          synchronizer={synchronizer}
+          queries={buildQueriesForLayouts(cell, source, timeRange, host)}
+        />}
+  </LayoutCell>
+
+const {arrayOf, bool, func, number, shape, string} = PropTypes
+
+Layout.propTypes = {
+  autoRefresh: number.isRequired,
+  timeRange: shape({
+    lower: string.isRequired,
+  }),
+  cell: shape({
+    // isWidget cells will not have queries
+    isWidget: bool,
+    queries: arrayOf(
+      shape({
+        label: string,
+        text: string,
+        query: string,
+      }).isRequired
+    ),
+    x: number.isRequired,
+    y: number.isRequired,
+    w: number.isRequired,
+    h: number.isRequired,
+    i: string.isRequired,
+    name: string.isRequired,
+    type: string.isRequired,
+  }).isRequired,
+  templates: arrayOf(shape()),
+  host: string,
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  onPositionChange: func,
+  onEditCell: func,
+  onDeleteCell: func,
+  onSummonOverlayTechnologies: func,
+  synchronizer: func,
+  isStatusPage: bool,
+  isEditable: bool,
+  onCancelEditCell: func,
+  onZoom: func,
+}
+
+export default Layout

ui/src/shared/components/LayoutRenderer.js

@@ -1,12 +1,7 @@
 import React, {Component, PropTypes} from 'react'
 
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout'
-
+import Layout from 'src/shared/components/Layout'
-import LayoutCell from 'shared/components/LayoutCell'
-import WidgetCell from 'shared/components/WidgetCell'
-import RefreshingGraph from 'shared/components/RefreshingGraph'
-
-import buildInfluxQLQuery, {buildCannedDashboardQuery} from 'utils/influxql'
 
 import {
   // TODO: get these const values dynamically
@@ -28,73 +23,17 @@ class LayoutRenderer extends Component {
     }
   }
 
-  buildQueries = (cell, source) => {
+  componentDidMount() {
-    const {timeRange, host} = this.props
+    window.addEventListener('resize', this.updateWindowDimensions)
-    return cell.queries.map(query => {
-      let queryText
-      // Canned dashboards use an different a schema different from queryConfig.
-      if (query.queryConfig) {
-        const {queryConfig: {rawText, range}} = query
-        const tR = range || {
-          upper: ':upperDashboardTime:',
-          lower: ':dashboardTime:',
-        }
-        queryText = rawText || buildInfluxQLQuery(tR, query.queryConfig)
-      } else {
-        queryText = buildCannedDashboardQuery(query, timeRange, host)
   }
 
-      return {...query, host: source.links.proxy, text: queryText}
+  componentWillUnmount() {
-    })
+    window.removeEventListener('resize', this.updateWindowDimensions)
   }
 
-  // Generates cell contents based on cell type, i.e. graphs, news feeds, etc.
+  // idea adopted from https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
-  generateVisualizations = () => {
+  updateWindowDimensions = () => {
-    const {
+    this.setState({rowHeight: this.calculateRowHeight()})
-      source,
-      cells,
-      onEditCell,
-      onCancelEditCell,
-      onDeleteCell,
-      onSummonOverlayTechnologies,
-      timeRange,
-      autoRefresh,
-      templates,
-      synchronizer,
-      isEditable,
-      onZoom,
-    } = this.props
-
-    return cells.map(cell => {
-      const {type, h, axes} = cell
-
-      return (
-        <div key={cell.i}>
-          <LayoutCell
-            onCancelEditCell={onCancelEditCell}
-            isEditable={isEditable}
-            onEditCell={onEditCell}
-            onDeleteCell={onDeleteCell}
-            onSummonOverlayTechnologies={onSummonOverlayTechnologies}
-            cell={cell}
-          >
-            {cell.isWidget
-              ? <WidgetCell cell={cell} timeRange={timeRange} source={source} />
-              : <RefreshingGraph
-                  timeRange={timeRange}
-                  autoRefresh={autoRefresh}
-                  templates={templates}
-                  synchronizer={synchronizer}
-                  type={type}
-                  queries={this.buildQueries(cell, source)}
-                  cellHeight={h}
-                  axes={axes}
-                  onZoom={onZoom}
-                />}
-          </LayoutCell>
-        </div>
-      )
-    })
   }
 
   handleLayoutChange = layout => {
@@ -134,15 +73,24 @@ class LayoutRenderer extends Component {
       : DASHBOARD_LAYOUT_ROW_HEIGHT
   }
 
-  // idea adopted from https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
-  updateWindowDimensions = () => {
-    this.setState({rowHeight: this.calculateRowHeight()})
-  }
-
   render() {
-    const {cells} = this.props
+    const {
-    const {rowHeight} = this.state
+      host,
+      cells,
+      source,
+      onZoom,
+      templates,
+      timeRange,
+      isEditable,
+      onEditCell,
+      autoRefresh,
+      onDeleteCell,
+      synchronizer,
+      onCancelEditCell,
+      onSummonOverlayTechnologies,
+    } = this.props
 
+    const {rowHeight} = this.state
     const isDashboard = !!this.props.onPositionChange
 
     return (
@@ -159,18 +107,29 @@ class LayoutRenderer extends Component {
         isDraggable={isDashboard}
         isResizable={isDashboard}
       >
-        {this.generateVisualizations()}
+        {cells.map(cell =>
+          <div key={cell.i}>
+            <Layout
+              key={cell.i}
+              cell={cell}
+              host={host}
+              source={source}
+              onZoom={onZoom}
+              templates={templates}
+              timeRange={timeRange}
+              isEditable={isEditable}
+              onEditCell={onEditCell}
+              autoRefresh={autoRefresh}
+              onDeleteCell={onDeleteCell}
+              synchronizer={synchronizer}
+              onCancelEditCell={onCancelEditCell}
+              onSummonOverlayTechnologies={onSummonOverlayTechnologies}
+            />
+          </div>
+        )}
       </GridLayout>
     )
   }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.updateWindowDimensions)
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updateWindowDimensions)
-  }
 }
 
 const {arrayOf, bool, func, number, shape, string} = PropTypes

ui/src/utils/influxql.js

@@ -144,7 +144,7 @@ function _buildFill(fill) {
   return ` FILL(${fill})`
 }
 
-export const buildCannedDashboardQuery = (query, {lower, upper}, host) => {
+const buildCannedDashboardQuery = (query, {lower, upper}, host) => {
   const {defaultGroupBy} = timeRanges.find(range => range.lower === lower) || {
     defaultGroupBy: '5m',
   }
@@ -180,3 +180,22 @@ export const buildCannedDashboardQuery = (query, {lower, upper}, host) => {
 
   return text
 }
+
+export const buildQueriesForLayouts = (cell, source, timeRange, host) => {
+  return cell.queries.map(query => {
+    let queryText
+    // Canned dashboards use an different a schema different from queryConfig.
+    if (query.queryConfig) {
+      const {queryConfig: {rawText, range}} = query
+      const tR = range || {
+        upper: ':upperDashboardTime:',
+        lower: ':dashboardTime:',
+      }
+      queryText = rawText || buildInfluxQLQuery(tR, query.queryConfig)
+    } else {
+      queryText = buildCannedDashboardQuery(query, timeRange, host)
+    }
+
+    return {...query, host: source.links.proxy, text: queryText}
+  })
+}