feat(ui/dataLoaders): Move download config into view overlay

influxdata · Feb 8, 2019 · 53db6dd · 53db6dd
1 parent 9ec9d8b
commit 53db6dd
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Bug Fixes
 
 ### UI Improvements
+1. [11764](https://github.com/influxdata/influxdb/pull/11764): Move the download telegraf config button to view config overlay
 
 ## v2.0.0-alpha.2 [2019-02-07]
 

diff --git a/ui/src/organizations/components/CollectorList.tsx b/ui/src/organizations/components/CollectorList.tsx
@@ -13,7 +13,6 @@ import {getDeep} from 'src/utils/wrappers'
 interface Props {
   collectors: Telegraf[]
   emptyState: JSX.Element
-  onDownloadConfig: (telegrafID: string, telegrafName: string) => void
   onDelete: (telegrafID: string) => void
   onUpdate: (telegraf: Telegraf) => void
   onOpenInstructions: (telegrafID: string) => void
@@ -42,7 +41,6 @@ export default class CollectorList extends PureComponent<Props> {
   public get collectorsList(): JSX.Element[] {
     const {
       collectors,
-      onDownloadConfig,
       onDelete,
       onUpdate,
       onOpenInstructions,
@@ -55,7 +53,6 @@ export default class CollectorList extends PureComponent<Props> {
           key={collector.id}
           collector={collector}
           bucket={getDeep<string>(collector, 'plugins.0.config.bucket', '')}
-          onDownloadConfig={onDownloadConfig}
           onDelete={onDelete}
           onUpdate={onUpdate}
           onOpenInstructions={onOpenInstructions}

diff --git a/ui/src/organizations/components/CollectorRow.tsx b/ui/src/organizations/components/CollectorRow.tsx
@@ -17,7 +17,6 @@ import EditableName from 'src/shared/components/EditableName'
 interface Props {
   collector: Telegraf
   bucket: string
-  onDownloadConfig: (telegrafID: string, telegrafName: string) => void
   onDelete: (telegrafID: string) => void
   onUpdate: (telegraf: Telegraf) => void
   onOpenInstructions: (telegrafID: string) => void
@@ -39,12 +38,6 @@ export default class CollectorRow extends PureComponent<Props> {
           <IndexList.Cell>{bucket}</IndexList.Cell>
           <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
             <ComponentSpacer align={Alignment.Right}>
-              <Button
-                size={ComponentSize.ExtraSmall}
-                color={ComponentColor.Secondary}
-                text={'Download Config'}
-                onClick={this.handleDownloadConfig}
-              />
               <Button
                 size={ComponentSize.ExtraSmall}
                 color={ComponentColor.Secondary}
@@ -82,13 +75,6 @@ export default class CollectorRow extends PureComponent<Props> {
     )
   }
 
-  private handleDownloadConfig = (): void => {
-    this.props.onDownloadConfig(
-      this.props.collector.id,
-      this.props.collector.name
-    )
-  }
-
   private handleDeleteConfig = (): void => {
     this.props.onDelete(this.props.collector.id)
   }

diff --git a/ui/src/organizations/components/Collectors.tsx b/ui/src/organizations/components/Collectors.tsx
@@ -3,9 +3,6 @@ import _ from 'lodash'
 import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 
-// Utils
-import {downloadTextFile} from 'src/shared/utils/download'
-
 // Components
 import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
 import CollectorList from 'src/organizations/components/CollectorList'
@@ -31,12 +28,8 @@ import {client} from 'src/utils/api'
 
 // Actions
 import * as NotificationsActions from 'src/types/actions/notifications'
-import {notify} from 'src/shared/actions/notifications'
 import {setBucketInfo} from 'src/dataLoaders/actions/steps'
 
-// Constants
-import {getTelegrafConfigFailed} from 'src/shared/copy/v2/notifications'
-
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
@@ -121,7 +114,6 @@ export class Collectors extends PureComponent<Props, State> {
                   <CollectorList
                     collectors={cs}
                     emptyState={this.emptyState}
-                    onDownloadConfig={this.handleDownloadConfig}
                     onDelete={this.handleDeleteTelegraf}
                     onUpdate={this.handleUpdateTelegraf}
                     onOpenInstructions={this.handleOpenInstructions}
@@ -259,18 +251,6 @@ export class Collectors extends PureComponent<Props, State> {
     )
   }
 
-  private handleDownloadConfig = async (
-    telegrafID: string,
-    telegrafName: string
-  ) => {
-    try {
-      const config = await client.telegrafConfigs.getTOML(telegrafID)
-      downloadTextFile(config, `${telegrafName || 'config'}.toml`)
-    } catch (error) {
-      notify(getTelegrafConfigFailed())
-    }
-  }
-
   private handleDeleteTelegraf = async (telegrafID: string) => {
     await client.telegrafConfigs.delete(telegrafID)
     this.props.onChange()

diff --git a/ui/src/organizations/components/TelegrafConfigOverlay.scss b/ui/src/organizations/components/TelegrafConfigOverlay.scss
@@ -0,0 +1,7 @@
+.config-overlay {
+  height: calc(100vh - 350px);
+  width: 100%;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
diff --git a/ui/src/organizations/components/TelegrafConfigOverlay.tsx b/ui/src/organizations/components/TelegrafConfigOverlay.tsx
@@ -4,8 +4,32 @@ import {connect} from 'react-redux'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
+import OverlayBody from 'src/clockface/components/overlays/OverlayBody'
+import OverlayContainer from 'src/clockface/components/overlays/OverlayContainer'
+import OverlayTechnology from 'src/clockface/components/overlays/OverlayTechnology'
+import OverlayHeading from 'src/clockface/components/overlays/OverlayHeading'
 import TelegrafConfig from 'src/organizations/components/TelegrafConfig'
+import {
+  ComponentSize,
+  ComponentColor,
+  Button,
+  OverlayFooter,
+} from 'src/clockface'
+
+// Utils
+import {downloadTextFile} from 'src/shared/utils/download'
+
+// Constants
+import {getTelegrafConfigFailed} from 'src/shared/copy/v2/notifications'
+
+// APIs
+import {client} from 'src/utils/api'
+
+// Actions
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+// Styles
+import 'src/organizations/components/TelegrafConfigOverlay.scss'
 
 // Types
 import {AppState} from 'src/types/v2'
@@ -17,36 +41,74 @@ interface OwnProps {
 
 interface StateProps {
   telegrafConfigName: string
+  telegrafConfigID
+}
+
+interface DispatchProps {
+  notify: typeof notifyAction
 }
 
-type Props = OwnProps & StateProps
+type Props = OwnProps & StateProps & DispatchProps
 
 @ErrorHandling
 export class TelegrafConfigOverlay extends PureComponent<Props> {
   public render() {
     const {visible, onDismiss, telegrafConfigName} = this.props
 
     return (
-      <WizardOverlay
-        visible={visible}
-        title={`Telegraf Configuration - ${telegrafConfigName}`}
-        onDismiss={onDismiss}
-      >
-        <TelegrafConfig />
-      </WizardOverlay>
+      <OverlayTechnology visible={visible}>
+        <OverlayContainer maxWidth={1200}>
+          <OverlayHeading
+            title={`Telegraf Configuration - ${telegrafConfigName}`}
+            onDismiss={onDismiss}
+          />
+
+          <OverlayBody>
+            <div className="config-overlay">
+              <TelegrafConfig />
+            </div>
+          </OverlayBody>
+          <OverlayFooter>
+            <Button
+              size={ComponentSize.ExtraSmall}
+              color={ComponentColor.Secondary}
+              text={'Download Config'}
+              onClick={this.handleDownloadConfig}
+            />
+          </OverlayFooter>
+        </OverlayContainer>
+      </OverlayTechnology>
     )
   }
+
+  private handleDownloadConfig = async () => {
+    try {
+      const config = await client.telegrafConfigs.getTOML(
+        this.props.telegrafConfigID
+      )
+      downloadTextFile(
+        config,
+        `${this.props.telegrafConfigName || 'config'}.toml`
+      )
+    } catch (error) {
+      this.props.notify(getTelegrafConfigFailed())
+    }
+  }
 }
 
 const mstp = ({
   dataLoading: {
-    dataLoaders: {telegrafConfigName},
+    dataLoaders: {telegrafConfigName, telegrafConfigID},
   },
 }: AppState): StateProps => {
-  return {telegrafConfigName}
+  return {telegrafConfigName, telegrafConfigID}
+}
+
+const mdtp: DispatchProps = {
+  notify: notifyAction,
 }
 
-export default connect<StateProps, {}, OwnProps>(
+export default connect<StateProps, DispatchProps, OwnProps>(
   mstp,
-  null
+  mdtp
 )(TelegrafConfigOverlay)