From 0688ce577d41f2af9b85b7e7a91aa3c9226c8dd9 Mon Sep 17 00:00:00 2001
From: Alirie Gray <alirie.gray@gmail.com>
Date: Tue, 12 Mar 2019 11:10:46 -0700
Subject: [PATCH] feat(dashboards): add variable control bar for selecting
 values

Co-Authored-By: Alex Paxton <thealexpaxton@gmail.com>
---
 CHANGELOG.md                                  |   3 +-
 .../components/empty_state/EmptyState.tsx     |   9 +-
 .../dashboards/components/DashboardHeader.tsx |  13 ++
 .../dashboards/components/DashboardPage.tsx   |  16 ++-
 .../variablesControlBar/VariableDropdown.scss |  34 +++++
 .../variablesControlBar/VariableDropdown.tsx  |  70 ++++++++++
 .../VariablesControlBar.scss                  |  35 +++++
 .../VariablesControlBar.tsx                   | 129 ++++++++++++++++++
 ui/src/variables/actions/index.ts             |  21 ++-
 ui/src/variables/reducers/index.ts            |   7 +
 10 files changed, 331 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/dashboards/components/variablesControlBar/VariableDropdown.scss
 create mode 100644 ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx
 create mode 100644 ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss
 create mode 100644 ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73a7d43f1ee..68b9de41162 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,12 +1,13 @@
 ## v2.0.0-alpha.6 [unreleased]
 
 ### Features
+
 1. [12496](https://github.com/influxdata/influxdb/pull/12496): Add ability to import a dashboard
 1. [12524](https://github.com/influxdata/influxdb/pull/12524): Add ability to import a dashboard from org view
 1. [12531](https://github.com/influxdata/influxdb/pull/12531): Add ability to export a dashboard and a task
 1. [12615](https://github.com/influxdata/influxdb/pull/12615): Add `run` subcommand to influxd binary. This is also the default when no subcommand is specified.
-
 1. [12523](https://github.com/influxdata/influxdb/pull/12523): Add ability to save a query as a variable from the Data Explorer.
+1. [12655](https://github.com/influxdata/influxdb/pull/12655): Add a variable control bar to dashboards to select values for variables.
 
 ### Bug Fixes
 
diff --git a/ui/src/clockface/components/empty_state/EmptyState.tsx b/ui/src/clockface/components/empty_state/EmptyState.tsx
index 2597a273f7e..5fba76b0db7 100644
--- a/ui/src/clockface/components/empty_state/EmptyState.tsx
+++ b/ui/src/clockface/components/empty_state/EmptyState.tsx
@@ -16,6 +16,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface PassedProps {
   children: JSX.Element | JSX.Element[]
+  className?: string
 }
 
 interface DefaultProps {
@@ -36,12 +37,14 @@ class EmptyState extends Component<Props> {
   public static SubText = EmptyStateSubText
 
   public render() {
-    const {children, size, testID} = this.props
+    const {children, size, testID, className} = this.props
 
-    const className = `empty-state empty-state--${size}`
+    const classname = className
+      ? `empty-state empty-state--${size} ${className}`
+      : `empty-state empty-state--${size}`
 
     return (
-      <div className={className} data-testid={testID}>
+      <div className={classname} data-testid={testID}>
         {children}
       </div>
     )
diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx
index 25c1ca0eaba..96e73ccb09a 100644
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@@ -42,6 +42,8 @@ interface OwnProps {
   showTemplateControlBar: boolean
   zoomedTimeRange: QueriesModels.TimeRange
   onRenameDashboard: (name: string) => Promise<void>
+  toggleVariablesControlBar: () => void
+  isShowingVariablesControlBar: boolean
   isHidden: boolean
 }
 
@@ -69,6 +71,8 @@ class DashboardHeader extends Component<Props> {
       zoomedTimeRange: {upper: zoomedUpper, lower: zoomedLower},
       isHidden,
       onAddNote,
+      toggleVariablesControlBar,
+      isShowingVariablesControlBar,
     } = this.props
 
     return (
@@ -94,6 +98,15 @@ class DashboardHeader extends Component<Props> {
               lower: zoomedLower || lower,
             }}
           />
+          <Button
+            text="Variables"
+            onClick={toggleVariablesControlBar}
+            color={
+              isShowingVariablesControlBar
+                ? ComponentColor.Primary
+                : ComponentColor.Default
+            }
+          />
           <Button
             icon={IconFont.ExpandA}
             titleText="Enter Presentation Mode"
diff --git a/ui/src/dashboards/components/DashboardPage.tsx b/ui/src/dashboards/components/DashboardPage.tsx
index 982c019d21a..246fcc8129c 100644
--- a/ui/src/dashboards/components/DashboardPage.tsx
+++ b/ui/src/dashboards/components/DashboardPage.tsx
@@ -14,6 +14,7 @@ import VEO from 'src/dashboards/components/VEO'
 import {Overlay} from 'src/clockface'
 import {HoverTimeProvider} from 'src/dashboards/utils/hoverTime'
 import NoteEditorContainer from 'src/dashboards/components/NoteEditorContainer'
+import VariablesControlBar from 'src/dashboards/components/variablesControlBar/VariablesControlBar'
 
 // Actions
 import * as dashboardActions from 'src/dashboards/actions/v2'
@@ -105,6 +106,7 @@ interface State {
   scrollTop: number
   windowHeight: number
   isShowingVEO: boolean
+  isShowingVariablesControlBar: boolean
 }
 
 @ErrorHandling
@@ -116,6 +118,7 @@ class DashboardPage extends Component<Props, State> {
       scrollTop: 0,
       windowHeight: window.innerHeight,
       isShowingVEO: false,
+      isShowingVariablesControlBar: false,
     }
   }
 
@@ -163,7 +166,7 @@ class DashboardPage extends Component<Props, State> {
       handleChooseAutoRefresh,
       handleClickPresentationButton,
     } = this.props
-    const {isShowingVEO} = this.state
+    const {isShowingVEO, isShowingVariablesControlBar} = this.state
 
     return (
       <Page titleTag={this.pageTitle}>
@@ -182,7 +185,12 @@ class DashboardPage extends Component<Props, State> {
             handleChooseAutoRefresh={handleChooseAutoRefresh}
             handleChooseTimeRange={this.handleChooseTimeRange}
             handleClickPresentationButton={handleClickPresentationButton}
+            toggleVariablesControlBar={this.toggleVariablesControlBar}
+            isShowingVariablesControlBar={isShowingVariablesControlBar}
           />
+          {isShowingVariablesControlBar && (
+            <VariablesControlBar dashboardID={dashboard.id} />
+          )}
           {!!dashboard && (
             <DashboardComponent
               inView={this.inView}
@@ -322,6 +330,12 @@ class DashboardPage extends Component<Props, State> {
     this.setState({windowHeight: window.innerHeight})
   }
 
+  private toggleVariablesControlBar = (): void => {
+    this.setState({
+      isShowingVariablesControlBar: !this.state.isShowingVariablesControlBar,
+    })
+  }
+
   private get pageTitle(): string {
     const {dashboard} = this.props
 
diff --git a/ui/src/dashboards/components/variablesControlBar/VariableDropdown.scss b/ui/src/dashboards/components/variablesControlBar/VariableDropdown.scss
new file mode 100644
index 00000000000..bf6a5a6d1e7
--- /dev/null
+++ b/ui/src/dashboards/components/variablesControlBar/VariableDropdown.scss
@@ -0,0 +1,34 @@
+@import 'src/style/modules';
+
+.variable-dropdown {
+  display: flex;
+  flex-direction: row;
+  height: $form-sm-height;
+}
+
+.variable-dropdown--dropdown {
+  .button {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+}
+
+.variable-dropdown--label {
+  user-select: none;
+  line-height: $form-sm-height;
+  font-size: $form-sm-font;
+  font-weight: 600;
+  color: $c-comet;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0 $form-sm-padding;
+  border-radius: $radius 0 0 $radius;
+  background-color: $g3-castle;
+  background-attachment: fixed;
+
+  > span {
+    @include gradient-h($c-comet, $c-laser);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
diff --git a/ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx b/ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx
new file mode 100644
index 00000000000..fd151b1bd0c
--- /dev/null
+++ b/ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx
@@ -0,0 +1,70 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {Dropdown, DropdownMenuColors} from 'src/clockface'
+
+// Styles
+import 'src/dashboards/components/variablesControlBar/VariableDropdown.scss'
+
+interface Props {
+  name: string
+  variableID: string
+  values: string[] //todo
+  initialSelected: string // todo
+  onSelect: (variableID: string, value: string) => void // todo
+}
+
+interface State {
+  selectedValue: any // todo
+}
+
+class VariableDropdown extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      selectedValue: this.props.initialSelected,
+    }
+  }
+
+  render() {
+    const {name} = this.props
+    const {selectedValue} = this.state
+
+    return (
+      <div className="variable-dropdown">
+        {/* TODO: Add variable description to title attribute when it is ready */}
+        <div className="variable-dropdown--label">
+          <span>{name}</span>
+        </div>
+        <Dropdown
+          selectedID={selectedValue}
+          onChange={this.handleSelect}
+          widthPixels={140}
+          customClass="variable-dropdown--dropdown"
+          menuColor={DropdownMenuColors.Amethyst}
+        >
+          {this.dropdownItems}
+        </Dropdown>
+      </div>
+    )
+  }
+
+  private get dropdownItems(): JSX.Element[] {
+    const {values} = this.props
+
+    return values.map(v => {
+      return (
+        <Dropdown.Item key={v} id={v} value={v}>
+          {v}
+        </Dropdown.Item>
+      )
+    })
+  }
+
+  private handleSelect = (value: string) => {
+    const {variableID, onSelect} = this.props
+    onSelect(variableID, value)
+  }
+}
+
+export default VariableDropdown
diff --git a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss
new file mode 100644
index 00000000000..58d095ceb0d
--- /dev/null
+++ b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss
@@ -0,0 +1,35 @@
+@import 'src/style/modules';
+
+$variables-control-bar--height: $page-header-size -
+  (($page-header-size - $form-sm-height) / 2);
+
+$variables-control-bar--gutter: $ix-marg-a;
+
+.variables-control-bar {
+  min-height: $variables-control-bar--height;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  padding: 0 ($page-gutter - ($variables-control-bar--gutter / 2));
+  padding-bottom: (($page-header-size - $form-sm-height) / 2) -
+    $variables-control-bar--gutter;
+
+  /* Adjust height of Page Contents when control bar is present */
+  & + .page-contents {
+    height: calc(
+      100% - #{$variables-control-bar--height + $page-header-size}
+    ) !important;
+  }
+
+  .variable-dropdown {
+    margin: 0 $variables-control-bar--gutter / 2;
+    margin-bottom: $variables-control-bar--gutter;
+  }
+}
+
+.variables-control-bar--empty {
+  background-color: $g3-castle;
+  border-radius: $radius;
+  height: 100%;
+  justify-content: center;
+}
diff --git a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
new file mode 100644
index 00000000000..41bd0283022
--- /dev/null
+++ b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
@@ -0,0 +1,129 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+import _ from 'lodash'
+
+// Components
+import VariableDropdown from 'src/dashboards/components/variablesControlBar/VariableDropdown'
+import {EmptyState, ComponentSize} from 'src/clockface'
+
+// Styles
+import 'src/dashboards/components/variablesControlBar/VariablesControlBar.scss'
+
+// Actions
+import {selectValue} from 'src/variables/actions'
+
+// Types
+import {AppState} from 'src/types/v2'
+import {VariablesState} from 'src/variables/reducers'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface OwnProps {
+  dashboardID: string
+}
+
+interface StateProps {
+  variables: VariablesState
+}
+
+interface DispatchProps {
+  selectValue: typeof selectValue
+}
+
+type Props = StateProps & DispatchProps & OwnProps
+
+@ErrorHandling
+class VariablesControlBar extends PureComponent<Props> {
+  render() {
+    // return <div className="variables-control-bar" />
+    if (_.isEmpty(this.variablesForDashboard)) {
+      return (
+        <div className="variables-control-bar">
+          <EmptyState
+            size={ComponentSize.ExtraSmall}
+            className="variables-control-bar--empty"
+          >
+            <EmptyState.Text text="To see variable controls here, use a variable in a cell query" />
+          </EmptyState>
+        </div>
+      )
+    }
+
+    return (
+      <div className="variables-control-bar">
+        {Object.keys(this.variablesForDashboard).map(variableID => {
+          const initialSelected = _.get(
+            this.valuesForDashboard,
+            `${variableID}.selectedValue`
+          )
+          const name = _.get(
+            this.variablesForDashboard,
+            `${variableID}.variable.name`,
+            ''
+          )
+          const values = _.get(
+            this.valuesForDashboard,
+            `${variableID}.values`,
+            []
+          )
+
+          return (
+            <VariableDropdown
+              key={variableID}
+              variableID={variableID}
+              name={name}
+              values={values}
+              initialSelected={initialSelected}
+              onSelect={this.handleSelectValue}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+
+  private get variablesForDashboard() {
+    const {variables} = this.props.variables
+
+    const variableIDs = Object.keys(this.valuesForDashboard)
+    let variablesForDash = {}
+
+    Object.keys(variables).forEach(variableID => {
+      if (variableIDs.includes(variableID)) {
+        variablesForDash[variableID] = variables[variableID]
+      }
+    })
+
+    return variablesForDash
+  }
+
+  private get valuesForDashboard() {
+    const {
+      variables: {values},
+      dashboardID,
+    } = this.props
+    return _.get(values, `${dashboardID}.values`)
+  }
+
+  private handleSelectValue = (variableID: string, value: string) => {
+    const {selectValue, dashboardID} = this.props
+    selectValue(dashboardID, variableID, value)
+  }
+}
+
+const mdtp = {
+  selectValue: selectValue,
+}
+
+const mstp = (state: AppState): StateProps => {
+  const {variables} = state
+
+  return {variables}
+}
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  mstp,
+  mdtp
+)(VariablesControlBar)
diff --git a/ui/src/variables/actions/index.ts b/ui/src/variables/actions/index.ts
index bac9604bcdc..0a90e777711 100644
--- a/ui/src/variables/actions/index.ts
+++ b/ui/src/variables/actions/index.ts
@@ -23,7 +23,12 @@ import {GetState} from 'src/types/v2'
 import {Variable} from '@influxdata/influx'
 import {VariableValuesByID} from 'src/variables/types'
 
-export type Action = SetVariables | SetVariable | RemoveVariable | SetValues
+export type Action =
+  | SetVariables
+  | SetVariable
+  | RemoveVariable
+  | SetValues
+  | SelectValue
 
 interface SetVariables {
   type: 'SET_VARIABLES'
@@ -69,6 +74,20 @@ const removeVariable = (id: string): RemoveVariable => ({
   payload: {id},
 })
 
+interface SelectValue {
+  type: 'SELECT_VALUE'
+  payload: {contextID: string; id: string; value: string}
+}
+
+export const selectValue = (
+  contextID: string,
+  id: string,
+  value: string
+): SelectValue => ({
+  type: 'SELECT_VALUE',
+  payload: {contextID, id, value},
+})
+
 interface SetValues {
   type: 'SET_VARIABLE_VALUES'
   payload: {
diff --git a/ui/src/variables/reducers/index.ts b/ui/src/variables/reducers/index.ts
index aabb9cb2d68..59742564247 100644
--- a/ui/src/variables/reducers/index.ts
+++ b/ui/src/variables/reducers/index.ts
@@ -78,6 +78,13 @@ export const variablesReducer = (
         return
       }
 
+      case 'SELECT_VALUE': {
+        const {contextID, id, value} = action.payload
+        draftState.values[contextID].values[id].selectedValue = value
+
+        return
+      }
+
       case 'SET_VARIABLE_VALUES': {
         const {contextID, status, values} = action.payload