chore(chronograf): legend rendering

* Make legend work again

* Fix broken tests

* Import proper reducer

chronograf/ui/src/dashboards/actions/v2/views.ts

@@ -0,0 +1,17 @@
+export type Action = SetActiveViewAction
+
+export enum ActionTypes {
+  SetActiveView = 'SET_ACTIVE_VIEW',
+}
+
+interface SetActiveViewAction {
+  type: ActionTypes.SetActiveView
+  payload: {
+    activeViewID: string
+  }
+}
+
+export const setActiveCell = (activeViewID: string): SetActiveViewAction => ({
+  type: ActionTypes.SetActiveView,
+  payload: {activeViewID},
+})

chronograf/ui/src/dashboards/components/DashboardSwitcher.tsx

@@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react'
-import {Link} from 'react-router'
+import {Link, withRouter, WithRouterProps} from 'react-router'
 import _ from 'lodash'
 import classnames from 'classnames'
 
@@ -20,7 +20,7 @@ interface State {
 }
 
 @ErrorHandling
-class DashboardSwitcher extends PureComponent<Props, State> {
+class DashboardSwitcher extends PureComponent<Props & WithRouterProps, State> {
   constructor(props) {
     super(props)
 
@@ -75,13 +75,26 @@ class DashboardSwitcher extends PureComponent<Props, State> {
             active: link === active,
           })}
         >
-          <Link to={link.to} onClick={this.handleCloseMenu}>
+          <Link
+            to={{pathname: link.to, query: this.sourceID}}
+            onClick={this.handleCloseMenu}
+          >
             {link.text}
           </Link>
         </li>
       )
     })
   }
+
+  private get sourceID(): {sourceID: string} | {} {
+    const {query} = this.props.location
+    const {sourceID} = query
+    if (query.sourceID) {
+      return {sourceID}
+    }
+
+    return {}
+  }
 }
 
-export default OnClickOutside(DashboardSwitcher)
+export default OnClickOutside(withRouter(DashboardSwitcher))

chronograf/ui/src/dashboards/reducers/v2/views.test.ts

@@ -0,0 +1,13 @@
+import reducer from 'src/dashboards/reducers/v2/views'
+
+import {setActiveCell} from 'src/dashboards/actions/v2/views'
+
+describe('Dashboards.Reducers.Ranges', () => {
+  it('can set the active cell', () => {
+    const state = 'cell-one'
+    const expected = 'cell-tw0'
+
+    const actual = reducer(state, setActiveCell(expected))
+    expect(actual).toEqual(expected)
+  })
+})

chronograf/ui/src/dashboards/reducers/v2/views.ts

@@ -0,0 +1,16 @@
+import {Action, ActionTypes} from 'src/dashboards/actions/v2/views'
+
+type State = string
+
+const initialState = ''
+
+export default (state: State = initialState, action: Action) => {
+  switch (action.type) {
+    case ActionTypes.SetActiveView: {
+      const {activeViewID} = action.payload
+      return activeViewID
+    }
+  }
+
+  return state
+}

chronograf/ui/src/shared/components/Dygraph.tsx

@@ -50,7 +50,7 @@ const Dygraphs = D as Constructable<DygraphClass>
 
 interface Props {
   type: ViewType
-  cellID?: string
+  viewID?: string
   queries?: CellQuery[]
   timeSeries: DygraphData
   labels: string[]
@@ -249,7 +249,7 @@ class Dygraph extends Component<Props, State> {
 
   public render() {
     const {staticLegendHeight} = this.state
-    const {staticLegend, cellID} = this.props
+    const {staticLegend, viewID} = this.props
 
     return (
       <div
@@ -260,7 +260,7 @@ class Dygraph extends Component<Props, State> {
         {this.dygraph && (
           <div className="dygraph-addons">
             <DygraphLegend
-              cellID={cellID}
+              viewID={viewID}
               dygraph={this.dygraph}
               onHide={this.handleHideLegend}
               onShow={this.handleShowLegend}

chronograf/ui/src/shared/components/DygraphLegend.tsx

@@ -5,7 +5,7 @@ import _ from 'lodash'
 import classnames from 'classnames'
 import uuid from 'uuid'
 
-import * as actions from 'src/dashboards/actions/v2'
+import * as actions from 'src/dashboards/actions/v2/views'
 import {SeriesLegendData} from 'src/types/dygraphs'
 import DygraphLegendSort from 'src/shared/components/DygraphLegendSort'
 
@@ -17,11 +17,11 @@ import {DygraphClass} from 'src/types'
 interface Props {
   hoverTime: number
   dygraph: DygraphClass
-  cellID: string
+  viewID: string
   onHide: () => void
   onShow: (e: MouseEvent) => void
-  activeCellID: string
-  setActiveCell: (cellID: string) => void
+  activeViewID: string
+  setActiveCell: (viewID: string) => void
   onMouseEnter: () => void
 }
 
@@ -39,7 +39,7 @@ interface State {
   isFilterVisible: boolean
   legendStyles: object
   pageX: number | null
-  cellID: string
+  viewID: string
 }
 
 @ErrorHandling
@@ -67,7 +67,7 @@ class DygraphLegend extends PureComponent<Props, State> {
       isFilterVisible: false,
       legendStyles: {},
       pageX: null,
-      cellID: null,
+      viewID: null,
     }
   }
 
@@ -96,7 +96,7 @@ class DygraphLegend extends PureComponent<Props, State> {
           <div className="dygraph-legend--timestamp">{legend.xHTML}</div>
           <DygraphLegendSort
             isAscending={isAscending}
-            isActive={this.isAphaSort}
+            isActive={this.isAlphaSort}
             top="A"
             bottom="Z"
             onSort={this.handleSortLegend('alphabetic')}
@@ -180,8 +180,8 @@ class DygraphLegend extends PureComponent<Props, State> {
   }
 
   private highlightCallback = (e: MouseEvent) => {
-    if (this.props.activeCellID !== this.props.cellID) {
-      this.props.setActiveCell(this.props.cellID)
+    if (this.props.activeViewID !== this.props.viewID) {
+      this.props.setActiveCell(this.props.viewID)
     }
 
     this.setState({pageX: e.pageX})
@@ -236,7 +236,7 @@ class DygraphLegend extends PureComponent<Props, State> {
     return ordered.filter(s => s.label.match(filterText))
   }
 
-  private get isAphaSort(): boolean {
+  private get isAlphaSort(): boolean {
     return this.state.sortType === 'alphabetic'
   }
 
@@ -245,9 +245,9 @@ class DygraphLegend extends PureComponent<Props, State> {
   }
 
   private get isVisible(): boolean {
-    const {cellID, activeCellID} = this.props
+    const {viewID, activeViewID} = this.props
 
-    return cellID === activeCellID
+    return viewID === activeViewID
   }
 
   private get hidden(): string {
@@ -275,8 +275,8 @@ const mapDispatchToProps = {
   setActiveCell: actions.setActiveCell,
 }
 
-const mapStateToProps = ({hoverTime}) => ({
-  activeCellID: '0',
+const mapStateToProps = ({hoverTime, activeViewID}) => ({
+  activeViewID,
   hoverTime: +hoverTime,
 })
 

chronograf/ui/src/shared/components/GaugeChart.tsx

@@ -15,7 +15,6 @@ import {TimeSeriesServerResponse} from 'src/types/series'
 interface Props {
   data: TimeSeriesServerResponse[]
   decimalPlaces: DecimalPlaces
-  cellID: string
   cellHeight?: number
   colors?: ColorString[]
   prefix: string

chronograf/ui/src/shared/components/LineGraph.tsx

@@ -31,7 +31,7 @@ interface Props {
   loading: RemoteDataState
   decimalPlaces: DecimalPlaces
   data: TimeSeriesServerResponse[]
-  cellID: string
+  viewID: string
   cellHeight: number
   staticLegend: boolean
   onZoom: () => void
@@ -83,7 +83,7 @@ class LineGraph extends PureComponent<LineGraphProps> {
       axes,
       type,
       colors,
-      cellID,
+      viewID,
       onZoom,
       loading,
       queries,
@@ -117,7 +117,7 @@ class LineGraph extends PureComponent<LineGraphProps> {
         <Dygraph
           type={type}
           axes={axes}
-          cellID={cellID}
+          viewID={viewID}
           colors={colors}
           onZoom={onZoom}
           labels={labels}

chronograf/ui/src/shared/components/RefreshingGraph.tsx

@@ -29,7 +29,7 @@ interface Props {
   link: string
   timeRange: TimeRange
   templates: Template[]
-  cellID: string
+  viewID: string
   inView: boolean
   isInCEO: boolean
   timeFormat: string
@@ -131,13 +131,12 @@ class RefreshingGraph extends PureComponent<Props & WithRouterProps> {
   }
 
   private gauge = (data): JSX.Element => {
-    const {cellID, cellHeight, manualRefresh} = this.props
+    const {cellHeight, manualRefresh} = this.props
     const {colors, decimalPlaces} = this.props.options
 
     return (
       <GaugeChart
         data={data}
-        cellID={cellID}
         colors={colors}
         prefix={this.prefix}
         suffix={this.suffix}
@@ -152,7 +151,7 @@ class RefreshingGraph extends PureComponent<Props & WithRouterProps> {
   private lineGraph = (data, loading): JSX.Element => {
     const {
       onZoom,
-      cellID,
+      viewID,
       timeRange,
       cellHeight,
       staticLegend,
@@ -167,7 +166,7 @@ class RefreshingGraph extends PureComponent<Props & WithRouterProps> {
         data={data}
         type={type}
         axes={axes}
-        cellID={cellID}
+        viewID={viewID}
         colors={colors}
         onZoom={onZoom}
         queries={queries}

chronograf/ui/src/shared/components/cells/View.tsx

@@ -37,6 +37,7 @@ class ViewComponent extends Component<Props> {
 
     return (
       <RefreshingGraph
+        viewID={view.id}
         onZoom={onZoom}
         timeRange={timeRange}
         templates={templates}

chronograf/ui/src/store/configureStore.js

@@ -16,6 +16,7 @@ import sourceReducer from 'src/sources/reducers/sources'
 import rangesReducer from 'src/dashboards/reducers/v2/ranges'
 import dashboardsReducer from 'src/dashboards/reducers/v2/dashboards'
 import hoverTimeReducer from 'src/dashboards/reducers/v2/hoverTime'
+import activeViewReducer from 'src/dashboards/reducers/v2/views'
 
 const rootReducer = combineReducers({
   ...statusReducers,
@@ -27,6 +28,7 @@ const rootReducer = combineReducers({
   routing: routerReducer,
   script: scriptReducer,
   sources: sourceReducer,
+  activeViewID: activeViewReducer,
 })
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

chronograf/ui/src/types/dashboards.ts

@@ -150,7 +150,7 @@ export interface DashboardUIState {
     status: string | null
   }
   hoverTime: string
-  activeCellID: string
+  activeViewID: string
 }
 
 export interface DashboardSwitcherLinks {