Merge pull request #12611 from influxdata/feat/add-variables-config-page

Add variables to configuration page and navigation for config tabs

ui/src/configuration/components/ConfigurationPage.tsx

@@ -14,6 +14,7 @@ import Settings from 'src/me/components/account/Settings'
 import Tokens from 'src/me/components/account/Tokens'
 import Buckets from 'src/configuration/components/Buckets'
 import Telegrafs from 'src/configuration/components/Telegrafs'
+import Variables from 'src/configuration/components/Variables'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -75,6 +76,15 @@ class ConfigurationPage extends Component<Props> {
                   </GetResources>
                 </GetResources>
               </TabbedPageSection>
+              <TabbedPageSection
+                id="variables_tab"
+                url="variables_tab"
+                title="Variables"
+              >
+                <GetResources resource={ResourceTypes.Variables}>
+                  <Variables />
+                </GetResources>
+              </TabbedPageSection>
               <TabbedPageSection
                 id="tokens_tab"
                 url="tokens_tab"

ui/src/configuration/components/CreateVariableOverlay.tsx

@@ -0,0 +1,48 @@
+// Libraries
+import React, {PureComponent} from 'react'
+
+// Styles
+import 'src/organizations/components/CreateVariableOverlay.scss'
+
+// Components
+import {Overlay} from 'src/clockface'
+import VariableForm from 'src/organizations/components/VariableForm'
+
+// Types
+import {Variable, Organization} from '@influxdata/influx'
+
+interface Props {
+  onCreateVariable: (variable: Variable) => void
+  onHideOverlay: () => void
+  orgs: Organization[]
+  visible: boolean
+  initialScript?: string
+}
+
+export default class CreateVariableOverlay extends PureComponent<Props> {
+  public render() {
+    const {
+      onHideOverlay,
+      onCreateVariable,
+      initialScript,
+      orgs,
+      visible,
+    } = this.props
+
+    return (
+      <Overlay visible={visible}>
+        <Overlay.Container maxWidth={1000}>
+          <Overlay.Heading title="Create Variable" onDismiss={onHideOverlay} />
+          <Overlay.Body>
+            <VariableForm
+              onCreateVariable={onCreateVariable}
+              onHideOverlay={onHideOverlay}
+              orgID={orgs[0].id} //TODO: display a list of orgs and have the user pick one
+              initialScript={initialScript}
+            />
+          </Overlay.Body>
+        </Overlay.Container>
+      </Overlay>
+    )
+  }
+}

ui/src/configuration/components/GetResources.tsx

@@ -7,6 +7,7 @@ import {connect} from 'react-redux'
 import {getLabels} from 'src/labels/actions'
 import {getBuckets} from 'src/buckets/actions'
 import {getTelegrafs} from 'src/telegrafs/actions'
+import {getVariables} from 'src/variables/actions'
 
 // Types
 import {AppState} from 'src/types/v2'
@@ -20,19 +21,22 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import {TechnoSpinner, SpinnerContainer} from '@influxdata/clockface'
 import {getAuthorizations} from 'src/authorizations/actions'
 import {AuthorizationsState} from 'src/authorizations/reducers'
+import {VariablesState} from 'src/variables/reducers'
 
 interface StateProps {
   org: Organization
   labels: LabelsState
   buckets: BucketsState
   telegrafs: TelegrafsState
+  variables: VariablesState
   tokens: AuthorizationsState
 }
 
 interface DispatchProps {
   getLabels: typeof getLabels
   getBuckets: typeof getBuckets
   getTelegrafs: typeof getTelegrafs
+  getVariables: typeof getVariables
   getAuthorizations: typeof getAuthorizations
 }
 
@@ -46,6 +50,7 @@ export enum ResourceTypes {
   Labels = 'labels',
   Buckets = 'buckets',
   Telegrafs = 'telegrafs',
+  Variables = 'variables',
   Authorizations = 'tokens',
 }
 
@@ -65,6 +70,10 @@ class GetResources extends PureComponent<Props, StateProps> {
         return await this.props.getTelegrafs()
       }
 
+      case ResourceTypes.Variables: {
+        return await this.props.getVariables()
+      }
+
       case ResourceTypes.Authorizations: {
         return await this.props.getAuthorizations()
       }
@@ -94,6 +103,7 @@ const mstp = ({
   labels,
   buckets,
   telegrafs,
+  variables,
   tokens,
 }: AppState): StateProps => {
   const org = orgs[0]
@@ -102,6 +112,7 @@ const mstp = ({
     labels,
     buckets,
     telegrafs,
+    variables,
     tokens,
     org,
   }
@@ -111,6 +122,7 @@ const mdtp = {
   getLabels: getLabels,
   getBuckets: getBuckets,
   getTelegrafs: getTelegrafs,
+  getVariables: getVariables,
   getAuthorizations: getAuthorizations,
 }