feat: telegraf editor design work (#16223)

influxdata · Dec 16, 2019 · 25a62ef · 25a62ef
1 parent 3f9c278
commit 25a62ef
Show file tree

Hide file tree

Showing 11 changed files with 420 additions and 205 deletions.
diff --git a/ui/src/dataLoaders/actions/telegrafEditor.ts b/ui/src/dataLoaders/actions/telegrafEditor.ts
@@ -19,15 +19,21 @@ export const setActivePlugins = (plugins: TelegrafEditorActivePluginState) => ({
 })
 
 export type EditorAction =
-  | ReturnType<typeof setMode>
+  | ReturnType<typeof setLookup>
+  | ReturnType<typeof setList>
   | ReturnType<typeof setText>
   | ReturnType<typeof setBucket>
   | ReturnType<typeof setFilter>
   | ReturnType<typeof reset>
 
-export const setMode = (mode: 'adding' | 'indexing') => ({
-  type: 'SET_TELEGRAF_EDITOR_MODE' as 'SET_TELEGRAF_EDITOR_MODE',
-  payload: mode,
+export const setLookup = (show: boolean) => ({
+  type: 'SET_TELEGRAF_EDITOR_LOOKUP' as 'SET_TELEGRAF_EDITOR_LOOKUP',
+  payload: show,
+})
+
+export const setList = (show: boolean) => ({
+  type: 'SET_TELEGRAF_EDITOR_LIST' as 'SET_TELEGRAF_EDITOR_LIST',
+  payload: show,
 })
 
 export const setText = (text: string) => ({

diff --git a/ui/src/dataLoaders/components/TelegrafEditor.scss b/ui/src/dataLoaders/components/TelegrafEditor.scss
@@ -1,31 +1,173 @@
 @import '~src/style/_influx-colors.scss';
+@import '~src/style/_variables.scss';
 
-.telegraf-editor--plugins {
-  .display {
-    color: $g7-graphite;
-    margin-top: 8px;
-    padding: 0 12px;
+// Main Layout
+.telegraf-editor {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+  width: 100%;
+}
+
+.telegraf-editor--heading {
+  text-align: center;
+  padding-bottom: $ix-marg-c;
+}
+
+.telegraf-editor--body {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+
+.telegraf-editor--column-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  height: 30px;
+  background-color: $g4-onyx;
+  color: $g15-platinum;
+  border-radius: $ix-radius $ix-radius 0 0;
+
+  .telegraf-editor--column__collapsed & {
+    padding: $ix-marg-a;
   }
+}
 
-  .entry {
-    cursor: pointer;
-    padding: 0 12px;
-    padding-left: 24px;
-
-    label {
-      font-size: 12px;
-      color: $g9-mountain;
-      display: block;
-      margin-bottom: 4px;
-      cursor: pointer;
-    }
+.telegraf-editor--title {
+  font-size: 13px;
+  white-space: nowrap;
+  user-select: none;
+  line-height: 32px;
+  font-weight: 600;
+
+  .telegraf-editor--column__collapsed & {
+    display: none;
+  }
+}
+
+.telegraf-editor--title__collapsed {
+  font-size: 13px;
+  white-space: nowrap;
+  user-select: none;
+  line-height: 32px;
+  font-weight: 600;
+  transform-origin: bottom left;
+  transform: rotate(90deg);
+  position: absolute;
+  left: -2px;
+  top: 8px;
+}
+
+// Column Layout
+.telegraf-editor--left-column,
+.telegraf-editor--middle-column,
+.telegraf-editor--right-column {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: $g4-onyx;
+  border-radius: $ix-radius;
+}
+
+.telegraf-editor--left-column {
+  flex: 0 0 180px;
+  margin-right: $ix-marg-a;
+  position: relative;
+}
+
+.telegraf-editor--middle-column {
+  flex: 1 0 0;
+  border-radius: $ix-radius 0 0 $ix-radius;
+  overflow: hidden;
+}
+
+.telegraf-editor--right-column {
+  flex: 0 0 180px;
+  border-left: 0;
+  border-radius: 0 $ix-radius $ix-radius 0;
+  position: relative;
+}
+
+.telegraf-editor--column-section {
+  padding: $ix-marg-a + $ix-marg-b;
+  padding-top: 0;
+
+  p {
+    margin: 0;
   }
+}
+
+.telegraf-editor--column__collapsed {
+  flex-basis: 30px;
+  overflow: hidden;
+}
+
+// Monaco Editor
+.telegraf-editor--monaco {
+  border: $ix-border solid $g4-onyx;
+  border-radius: $ix-radius;
+  border-right: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+// Plugins List
+.telegraf-plugins {
+  border: $ix-border solid $g4-onyx;
+  border-radius: $ix-radius;
+  background-color: $g2-kevlar;
+}
+
+.telegraf-plugins--list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
 
-  .input,
-  .output,
-  .processor,
-  .aggregator,
-  .bundle {
-    @extend .entry;
+.telegraf-plugins--item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 6px 8px;
+}
+
+.telegraf-plugins--divider {
+  user-select: none;
+  font-weight: 600;
+  font-size: 13px;
+  color: $g9-mountain;
+  background-color: $g1-raven;
+  text-transform: uppercase;
+  cursor: default;
+}
+
+.telegraf-plugins--plugin {
+  background-color: $g2-kevlar;
+  transition: background-color 0.25s ease, color 0.25s ease;
+
+  &:hover {
+    cursor: pointer;
+    color: $g18-cloud;
+    background-color: $g5-pepper;
   }
 }
+
+.telegraf-plugins--item-name {
+  font-size: 13px;
+  font-weight: 700;
+}
+.telegraf-plugins--item-description {
+  font-size: 11px;
+  font-weight: 500;
+  padding-left: 6px;
+  opacity: 0.75;
+}
+
+// Search
+.telegraf-editor--filter {
+  margin: $ix-marg-a;
+}
diff --git a/ui/src/dataLoaders/components/TelegrafEditor.tsx b/ui/src/dataLoaders/components/TelegrafEditor.tsx
@@ -3,8 +3,9 @@ import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
-import {Grid, Columns} from '@influxdata/clockface'
+import {Alert, ComponentColor} from '@influxdata/clockface'
 import TelegrafEditorSidebar from 'src/dataLoaders/components/TelegrafEditorSidebar'
+import TelegrafEditorPluginLookup from 'src/dataLoaders/components/TelegrafEditorPluginLookup'
 import TelegrafEditorMonaco from 'src/dataLoaders/components/TelegrafEditorMonaco'
 
 // Styles
@@ -35,33 +36,23 @@ class TelegrafEditor extends PureComponent<Props> {
 
   render() {
     return (
-      <Grid style={{height: '100%'}}>
-        <Grid.Row style={{textAlign: 'center'}}>
-          <h3 className="wizard-step--title">What do you want to monitor?</h3>
-          <h5 className="wizard-step--sub-title">
-            Telegraf is a plugin-based data collection agent which writes
-            metrics to a bucket in InfluxDB
-            <br />
-            Use the editor below to configure as many of the 200+{' '}
-            <a
-              href="https://v2.docs.influxdata.com/v2.0/reference/telegraf-plugins/#input-plugins"
-              target="_blank"
-            >
-              plugins
-            </a>{' '}
-            as you require
-          </h5>
-        </Grid.Row>
-        <Grid.Row style={{height: 'calc(100% - 128px)'}}>
+      <div className="telegraf-editor">
+        <div className="telegraf-editor--heading">
+          <Alert color={ComponentColor.Default}>
+            This tool will help create a configuration file for Telegraf, but
+            you will have to download and run Telegraf externally to get data
+            into your bucket.
+          </Alert>
+        </div>
+        <div className="telegraf-editor--body">
           <TelegrafEditorSidebar
             onJump={this.handleJump}
             onAdd={this.handleAdd}
           />
-          <Grid.Column widthXS={Columns.Nine} style={{height: '100%'}}>
-            <TelegrafEditorMonaco ref={this.connect} />
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
+          <TelegrafEditorMonaco ref={this.connect} />
+          <TelegrafEditorPluginLookup onJump={this.handleJump} />
+        </div>
+      </div>
     )
   }
 

diff --git a/ui/src/dataLoaders/components/TelegrafEditorFooter.tsx b/ui/src/dataLoaders/components/TelegrafEditorFooter.tsx
@@ -0,0 +1,65 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+import {downloadTextFile} from 'src/shared/utils/download'
+import {ComponentColor, Button} from '@influxdata/clockface'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {AppState} from 'src/types'
+
+interface OwnProps {
+  onDismiss: () => void
+}
+
+interface StateProps {
+  script: string
+}
+
+interface DispatchProps {}
+
+type Props = StateProps & DispatchProps & OwnProps
+
+export class TelegrafEditorFooter extends PureComponent<Props> {
+  public render() {
+    if (!isFlagEnabled('telegrafEditor')) {
+      return false
+    }
+
+    return (
+      <>
+        <Button
+          color={ComponentColor.Secondary}
+          text="Download Config"
+          onClick={this.handleDownloadConfig}
+        />
+        <Button
+          color={ComponentColor.Primary}
+          text="Save Config"
+          onClick={this.handleSaveConfig}
+        />
+      </>
+    )
+  }
+
+  private handleDownloadConfig = () => {
+    downloadTextFile(this.props.script, 'telegraf', '.conf')
+  }
+
+  private handleSaveConfig = () => {
+    this.props.onDismiss()
+  }
+}
+
+const mstp = (state: AppState): StateProps => {
+  const script = state.telegrafEditor.text
+
+  return {
+    script,
+  }
+}
+
+const mdtp: DispatchProps = {}
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  mstp,
+  mdtp
+)(TelegrafEditorFooter)
diff --git a/ui/src/dataLoaders/components/TelegrafEditorMonaco.tsx b/ui/src/dataLoaders/components/TelegrafEditorMonaco.tsx
@@ -32,11 +32,17 @@ class TelegrafEditorMonaco extends PureComponent<Props> {
     const {script} = this.props
 
     return (
-      <Editor
-        script={script}
-        onChangeScript={this.handleChange}
-        willMount={this.connect}
-      />
+      <div className="telegraf-editor--middle-column">
+        <div className="telegraf-editor--column-heading">
+          <span className="telegraf-editor--title">Configuration File</span>
+        </div>
+        <Editor
+          className="telegraf-editor--monaco"
+          script={script}
+          onChangeScript={this.handleChange}
+          willMount={this.connect}
+        />
+      </div>
     )
   }