Merge pull request #13161 from influxdata/feat/labels-variables

Add the ability to add labels on variables

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 1. [13024](https://github.com/influxdata/influxdb/pull/13024): Add the ability to edit token's description
 1. [13078](https://github.com/influxdata/influxdb/pull/13078): Add the option to create a Dashboard from a Template.
+1. [13161](https://github.com/influxdata/influxdb/pull/13161): Add the ability to add labels on variables
 
 ### Bug Fixes
 

ui/package.json

@@ -137,7 +137,7 @@
   },
   "dependencies": {
     "@influxdata/clockface": "0.0.8",
-    "@influxdata/influx": "0.2.59",
+    "@influxdata/influx": "0.2.61",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "@influxdata/vis": "^0.2.3",
     "axios": "^0.18.0",

ui/src/configuration/components/CreateVariableOverlay.tsx

@@ -6,7 +6,7 @@ import {Overlay} from 'src/clockface'
 import VariableForm from 'src/organizations/components/VariableForm'
 
 // Types
-import {Variable, Organization} from '@influxdata/influx'
+import {IVariable as Variable, Organization} from '@influxdata/influx'
 
 interface Props {
   onCreateVariable: (variable: Variable) => void

ui/src/configuration/components/Variables.tsx

@@ -18,11 +18,12 @@ import CreateVariableOverlay from 'src/configuration/components/CreateVariableOv
 import VariableList from 'src/organizations/components/VariableList'
 import FilterList from 'src/shared/components/Filter'
 import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
+import GetLabels from 'src/configuration/components/GetLabels'
 
 // Types
 import {OverlayState} from 'src/types'
 import {AppState} from 'src/types'
-import {Variable, Organization} from '@influxdata/influx'
+import {IVariable as Variable, Organization} from '@influxdata/influx'
 import {IconFont, ComponentSize, RemoteDataState} from '@influxdata/clockface'
 import {VariablesState} from 'src/variables/reducers'
 
@@ -75,21 +76,24 @@ class Variables extends PureComponent<Props, State> {
             onSelectNew={this.handleOpenCreateOverlay}
           />
         </TabbedPageHeader>
-        <FilterList<Variable>
-          searchTerm={searchTerm}
-          searchKeys={['name']}
-          list={this.variableList(variables)}
-          sortByKey="name"
-        >
-          {v => (
-            <VariableList
-              variables={v}
-              emptyState={this.emptyState}
-              onDeleteVariable={this.handleDeleteVariable}
-              onUpdateVariable={this.handleUpdateVariable}
-            />
-          )}
-        </FilterList>
+        <GetLabels>
+          <FilterList<Variable>
+            searchTerm={searchTerm}
+            searchKeys={['name']}
+            list={this.variableList(variables)}
+            sortByKey="name"
+          >
+            {v => (
+              <VariableList
+                variables={v}
+                emptyState={this.emptyState}
+                onDeleteVariable={this.handleDeleteVariable}
+                onUpdateVariable={this.handleUpdateVariable}
+                onFilterChange={this.handleFilterUpdate}
+              />
+            )}
+          </FilterList>
+        </GetLabels>
         <CreateVariableOverlay
           onCreateVariable={this.handleCreateVariable}
           onHideOverlay={this.handleCloseCreateOverlay}
@@ -136,11 +140,16 @@ class Variables extends PureComponent<Props, State> {
   }
 
   private handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const {value} = e.target
-    this.setState({searchTerm: value})
+    this.handleFilterUpdate(e.target.value)
   }
 
-  private handleFilterBlur() {}
+  private handleFilterBlur(e: ChangeEvent<HTMLInputElement>) {
+    this.setState({searchTerm: e.target.value})
+  }
+
+  private handleFilterUpdate = (searchTerm: string) => {
+    this.setState({searchTerm})
+  }
 
   private handleOpenImportOverlay = (): void => {}
 

ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx

@@ -28,7 +28,7 @@ import {moveVariable} from 'src/variables/actions'
 
 // Types
 import {AppState} from 'src/types'
-import {Variable} from '@influxdata/influx'
+import {IVariable as Variable} from '@influxdata/influx'
 import {ComponentSize} from '@influxdata/clockface'
 
 // Decorators

ui/src/dataExplorer/components/SaveAsVariable.tsx

@@ -11,7 +11,7 @@ import {createVariable} from 'src/variables/actions'
 
 // Types
 import {AppState} from 'src/types'
-import {Variable} from '@influxdata/influx'
+import {IVariable as Variable} from '@influxdata/influx'
 import {getActiveQuery} from 'src/timeMachine/selectors'
 
 interface OwnProps {

ui/src/organizations/components/CreateVariableOverlay.tsx

@@ -9,7 +9,7 @@ import {Overlay} from 'src/clockface'
 import VariableForm from 'src/organizations/components/VariableForm'
 
 // Types
-import {Variable} from '@influxdata/influx'
+import {IVariable as Variable} from '@influxdata/influx'
 
 interface Props {
   onCreateVariable: (variable: Variable) => void

ui/src/organizations/components/UpdateVariableOverlay.tsx

@@ -8,7 +8,7 @@ import {Overlay} from 'src/clockface'
 import FluxEditor from 'src/shared/components/FluxEditor'
 
 // Types
-import {Variable} from '@influxdata/influx'
+import {IVariable as Variable} from '@influxdata/influx'
 import {
   ButtonType,
   ComponentColor,

ui/src/organizations/components/VariableList.tsx

@@ -7,14 +7,15 @@ import VariableRow from 'src/organizations/components/VariableRow'
 import UpdateVariableOverlay from 'src/organizations/components/UpdateVariableOverlay'
 
 // Types
-import {Variable} from '@influxdata/influx'
+import {IVariable as Variable} from '@influxdata/influx'
 import {OverlayState} from 'src/types'
 
 interface Props {
   variables: Variable[]
   emptyState: JSX.Element
   onDeleteVariable: (variable: Variable) => void
   onUpdateVariable: (variable: Variable) => void
+  onFilterChange: (searchTerm: string) => void
 }
 
 interface State {
@@ -38,6 +39,7 @@ class VariableList extends PureComponent<Props, State> {
       variables,
       onDeleteVariable,
       onUpdateVariable,
+      onFilterChange,
     } = this.props
 
     return (
@@ -55,6 +57,7 @@ class VariableList extends PureComponent<Props, State> {
                 onDeleteVariable={onDeleteVariable}
                 onUpdateVariableName={onUpdateVariable}
                 onEditVariable={this.handleStartEdit}
+                onFilterChange={onFilterChange}
               />
             ))}
           </IndexList.Body>

ui/src/organizations/components/VariableRow.tsx

@@ -1,39 +1,77 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
 import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
-import {IndexList, Alignment, Context, IconFont} from 'src/clockface'
+import {
+  IndexList,
+  Alignment,
+  Context,
+  IconFont,
+  Stack,
+  ComponentSpacer,
+} from 'src/clockface'
 import {ComponentColor} from '@influxdata/clockface'
+import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 
 // Types
-import {Variable} from '@influxdata/influx'
+import {IVariable as Variable, ILabel} from '@influxdata/influx'
 import EditableName from 'src/shared/components/EditableName'
+import {AppState} from 'src/types'
+
+// Selectors
+import {viewableLabels} from 'src/labels/selectors'
+
+// Actions
+import {
+  addVariableLabelsAsync,
+  removeVariableLabelsAsync,
+} from 'src/variables/actions'
+import {createLabel as createLabelAsync} from 'src/labels/actions'
 
 interface OwnProps {
   variable: Variable
   onDeleteVariable: (variable: Variable) => void
   onUpdateVariableName: (variable: Partial<Variable>) => void
   onEditVariable: (variable: Variable) => void
+  onFilterChange: (searchTerm: string) => void
 }
 
-type Props = OwnProps & WithRouterProps
+interface StateProps {
+  labels: ILabel[]
+}
 
-class VariableRow extends PureComponent<Props> {
+interface DispatchProps {
+  onAddVariableLabels: typeof addVariableLabelsAsync
+  onRemoveVariableLabels: typeof removeVariableLabelsAsync
+  onCreateLabel: typeof createLabelAsync
+}
+
+type Props = OwnProps & DispatchProps & StateProps
+
+class VariableRow extends PureComponent<Props & WithRouterProps> {
   public render() {
     const {variable, onDeleteVariable} = this.props
 
     return (
       <IndexList.Row testID="variable-row">
         <IndexList.Cell alignment={Alignment.Left}>
-          <EditableName
-            onUpdate={this.handleUpdateVariableName}
-            name={variable.name}
-            noNameString="NAME THIS VARIABLE"
-            onEditName={this.handleEditVariable}
+          <ComponentSpacer
+            stackChildren={Stack.Rows}
+            align={Alignment.Left}
+            stretchToFitWidth={true}
           >
-            {variable.name}
-          </EditableName>
+            <EditableName
+              onUpdate={this.handleUpdateVariableName}
+              name={variable.name}
+              noNameString="NAME THIS VARIABLE"
+              onEditName={this.handleEditVariable}
+            >
+              {variable.name}
+            </EditableName>
+            {this.labels}
+          </ComponentSpacer>
         </IndexList.Cell>
         <IndexList.Cell alignment={Alignment.Left}>Query</IndexList.Cell>
         <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
@@ -59,6 +97,43 @@ class VariableRow extends PureComponent<Props> {
     )
   }
 
+  private get labels(): JSX.Element {
+    const {variable, labels, onFilterChange} = this.props
+    const collectorLabels = viewableLabels(variable.labels)
+
+    return (
+      <InlineLabels
+        selectedLabels={collectorLabels}
+        labels={labels}
+        onFilterChange={onFilterChange}
+        onAddLabel={this.handleAddLabel}
+        onRemoveLabel={this.handleRemoveLabel}
+        onCreateLabel={this.handleCreateLabel}
+      />
+    )
+  }
+
+  private handleAddLabel = (label: ILabel): void => {
+    const {variable, onAddVariableLabels} = this.props
+
+    onAddVariableLabels(variable.id, [label])
+  }
+
+  private handleRemoveLabel = (label: ILabel): void => {
+    const {variable, onRemoveVariableLabels} = this.props
+
+    onRemoveVariableLabels(variable.id, [label])
+  }
+
+  private handleCreateLabel = async (label: ILabel): Promise<void> => {
+    try {
+      const {name, properties} = label
+      await this.props.onCreateLabel(name, properties)
+    } catch (err) {
+      throw err
+    }
+  }
+
   private handleExport = () => {
     const {
       router,
@@ -79,4 +154,19 @@ class VariableRow extends PureComponent<Props> {
   }
 }
 
-export default withRouter<OwnProps>(VariableRow)
+const mstp = ({labels}: AppState): StateProps => {
+  return {
+    labels: viewableLabels(labels.list),
+  }
+}
+
+const mdtp: DispatchProps = {
+  onCreateLabel: createLabelAsync,
+  onAddVariableLabels: addVariableLabelsAsync,
+  onRemoveVariableLabels: removeVariableLabelsAsync,
+}
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  mstp,
+  mdtp
+)(withRouter<Props>(VariableRow))