From 6f7cd59105c29b6f14b1172b1ff7745d4b9483c3 Mon Sep 17 00:00:00 2001 From: Alex Boatwright Date: Wed, 30 Oct 2019 15:14:20 -0700 Subject: [PATCH 01/16] feat(ui): Adding templating to code snippets --- .../components/ClientCSharpOverlay.tsx | 61 +++++++-- .../components/ClientGoOverlay.tsx | 20 ++- .../components/ClientJSOverlay.tsx | 26 +++- .../components/ClientJavaOverlay.tsx | 55 ++++++-- .../components/ClientPythonOverlay.tsx | 51 ++++++-- ui/src/clientLibraries/constants/index.ts | 120 +++++++++--------- .../components/TemplatedCodeSnippet.tsx | 43 +++++++ 7 files changed, 276 insertions(+), 100 deletions(-) create mode 100644 ui/src/shared/components/TemplatedCodeSnippet.tsx diff --git a/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx b/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx index e39a6a981fc..e77fdb206d9 100644 --- a/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx @@ -2,7 +2,7 @@ import React, {FunctionComponent} from 'react' // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' -import CodeSnippet from 'src/shared/components/CodeSnippet' +import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' // Constants import {clientCSharpLibrary} from 'src/clientLibraries/constants' @@ -30,32 +30,67 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {

Install Package

Package Manager

-

.NET CLI

-

Package Reference

- +
Initialize the Client
- +
Write Data

Option 1: Use InfluxDB Line Protocol to write data

-

Option 2: Use a Data Point to write data

- +

Option 3: Use POCO and corresponding Class to write data

- - + +
Execute a Flux query
- + ) } diff --git a/ui/src/clientLibraries/components/ClientGoOverlay.tsx b/ui/src/clientLibraries/components/ClientGoOverlay.tsx index 44c9ff0e065..18b4a80dfc2 100644 --- a/ui/src/clientLibraries/components/ClientGoOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientGoOverlay.tsx @@ -3,7 +3,7 @@ import React, {FunctionComponent} from 'react' // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' -import CodeSnippet from 'src/shared/components/CodeSnippet' +import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' // Constants import {clientGoLibrary} from 'src/clientLibraries/constants' @@ -24,9 +24,23 @@ const ClientGoOverlay: FunctionComponent<{}> = () => {

Initialize the Client
- +
Write Data
- + ) } diff --git a/ui/src/clientLibraries/components/ClientJSOverlay.tsx b/ui/src/clientLibraries/components/ClientJSOverlay.tsx index e081773ead1..f5208df5759 100644 --- a/ui/src/clientLibraries/components/ClientJSOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientJSOverlay.tsx @@ -3,7 +3,7 @@ import React, {FunctionComponent} from 'react' // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' -import CodeSnippet from 'src/shared/components/CodeSnippet' +import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' // Constants import {clientJSLibrary} from 'src/clientLibraries/constants' @@ -27,17 +27,31 @@ const ClientJSOverlay: FunctionComponent<{}> = () => {


Initialize the Client
-
Write Data
-
Execute a Flux query
- + ) } diff --git a/ui/src/clientLibraries/components/ClientJavaOverlay.tsx b/ui/src/clientLibraries/components/ClientJavaOverlay.tsx index e8229ad9910..32ed7eb534b 100644 --- a/ui/src/clientLibraries/components/ClientJavaOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientJavaOverlay.tsx @@ -2,7 +2,7 @@ import React, {FunctionComponent} from 'react' // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' -import CodeSnippet from 'src/shared/components/CodeSnippet' +import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' // Constants import {clientJavaLibrary} from 'src/clientLibraries/constants' @@ -30,24 +30,59 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => {

Add Dependency

Build with Maven

- +

Build with Gradle

- +
Initialize the Client
- +
Write Data

Option 1: Use InfluxDB Line Protocol to write data

-

Option 2: Use a Data Point to write data

- +

Option 3: Use POJO and corresponding class to write data

- - + +
Execute a Flux query
- + ) } diff --git a/ui/src/clientLibraries/components/ClientPythonOverlay.tsx b/ui/src/clientLibraries/components/ClientPythonOverlay.tsx index 33959685f18..ebffd4e4b24 100644 --- a/ui/src/clientLibraries/components/ClientPythonOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientPythonOverlay.tsx @@ -3,7 +3,7 @@ import React, {FunctionComponent} from 'react' // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' -import CodeSnippet from 'src/shared/components/CodeSnippet' +import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' // Constants import {clientPythonLibrary} from 'src/clientLibraries/constants' @@ -29,21 +29,56 @@ const ClientPythonOverlay: FunctionComponent<{}> = () => {

Install Package
- +
Initialize the Client
- +
Write Data

Option 1: Use InfluxDB Line Protocol to write data

-

Option 2: Use a Data Point to write data

- +

Option 3: Use a Batch Sequence to write data

- +
Execute a Flux query
- + ) } diff --git a/ui/src/clientLibraries/constants/index.ts b/ui/src/clientLibraries/constants/index.ts index 22241ee1ab1..ae2ee0f87f7 100644 --- a/ui/src/clientLibraries/constants/index.ts +++ b/ui/src/clientLibraries/constants/index.ts @@ -22,45 +22,45 @@ export const clientCSharpLibrary = { packageReferenceCodeSnippet: ``, initializeClientCodeSnippet: `using InfluxDB.Client; namespace Examples -{ - public class Examples - { - public static void Main(string[] args) - { +{ + public class Examples + { + public static void Main(string[] args) + { // You can generate a Token from the "Tokens Tab" in the UI - var client = InfluxDBClientFactory.Create("basepath", "token".ToCharArray()); - } + var client = InfluxDBClientFactory.Create("<%= server %>", "<%= token %>".ToCharArray()); + } } }`, - executeQueryCodeSnippet: `const string query = "from(bucket: \\"my_bucket\\") |> range(start: -1h)"; -var tables = await client.GetQueryApi().QueryAsync(query, "myorgid");`, + executeQueryCodeSnippet: `const string query = "from(bucket: \\"<%= bucket %>\\") |> range(start: -1h)"; +var tables = await client.GetQueryApi().QueryAsync(query, "<%= org %>");`, writingDataLineProtocolCodeSnippet: `const string data = "mem,host=host1 used_percent=23.43234543 1556896326"; using (var writeApi = client.GetWriteApi()) -{ - writeApi.WriteRecord("bucketID", "orgID", WritePrecision.Ns, data); +{ + writeApi.WriteRecord("<%= bucket %>", "<%= org %>", WritePrecision.Ns, data); }`, - writingDataPointCodeSnippet: `var point = PointData - .Measurement("mem") - .Tag("host", "host1") - .Field("used_percent", 23.43234543) + writingDataPointCodeSnippet: `var point = PointData + .Measurement("mem") + .Tag("host", "host1") + .Field("used_percent", 23.43234543) .Timestamp(1556896326L, WritePrecision.Ns); - + using (var writeApi = client.GetWriteApi()) -{ - writeApi.WritePoint("bucketID", "orgID", point); +{ + writeApi.WritePoint("<%= bucket %>", "<%= org %>", point); }`, writingDataPocoCodeSnippet: `var mem = new Mem { Host = "host1", UsedPercent = 23.43234543, Time = DateTime.UtcNow }; - + using (var writeApi = client.GetWriteApi()) -{ - writeApi.WriteMeasurement("bucketID", "orgID", WritePrecision.Ns, mem); +{ + writeApi.WriteMeasurement("<%= bucket %>", "<%= org %>", WritePrecision.Ns, mem); }`, pocoClassCodeSnippet: `// Public class [Measurement("mem")] private class Mem -{ - [Column("host", IsTag = true)] public string Host { get; set; } - [Column("used_percent")] public double? UsedPercent { get; set; } +{ + [Column("host", IsTag = true)] public string Host { get; set; } + [Column("used_percent")] public double? UsedPercent { get; set; } [Column(IsTimestamp = true)] public DateTime Time { get; set; } }`, } @@ -71,7 +71,7 @@ export const clientGoLibrary = { url: 'https://github.com/influxdata/influxdb-client-go', image: GoLogo, initializeClientCodeSnippet: `// You can generate a Token from the "Tokens Tab" in the UI -influx, err := influxdb.New(myHTTPInfluxAddress, myToken, influxdb.WithHTTPClient(myHTTPClient)) +influx, err := influxdb.New(<%= server %>, <%= token %>, influxdb.WithHTTPClient(myHTTPClient)) if err != nil { panic(err) // error handling here; normally we wouldn't use fmt but it works for the example } @@ -93,7 +93,7 @@ myMetrics := []influxdb.Metric{ } // The actual write..., this method can be called concurrently. -if _, err := influx.Write(context.Background(), "my-awesome-bucket", "my-very-awesome-org", myMetrics...) +if _, err := influx.Write(context.Background(), "<%= bucket %>", "<%= org %>", myMetrics...) if err != nil { log.Fatal(err) // as above use your own error handling here. }`, @@ -113,46 +113,46 @@ export const clientJavaLibrary = { compile "com.influxdb:influxdb-client-java:1.1.0" }`, initializeClientCodeSnippet: `package example; - + import com.influxdb.client.InfluxDBClient; import com.influxdb.client.InfluxDBClientFactory; - -public class InfluxDB2Example { - public static void main(final String[] args) { - // You can generate a Token from the "Tokens Tab" in the UI - InfluxDBClient client = InfluxDBClientFactory.create("serverUrl", "token".toCharArray()); + +public class InfluxDB2Example { + public static void main(final String[] args) { + // You can generate a Token from the "Tokens Tab" in the UI + InfluxDBClient client = InfluxDBClientFactory.create("<%= server %>", "<%= token %>".toCharArray()); } }`, - executeQueryCodeSnippet: `String query = "from(bucket: \\"my_bucket\\") |> range(start: -1h)"; -List tables = client.getQueryApi().query(query, "myorgid");`, + executeQueryCodeSnippet: `String query = "from(bucket: \\"<%= bucket %>\\") |> range(start: -1h)"; +List tables = client.getQueryApi().query(query, "<%= org %>");`, writingDataLineProtocolCodeSnippet: `String data = "mem,host=host1 used_percent=23.43234543 1556896326"; -try (WriteApi writeApi = client.getWriteApi()) { - writeApi.writeRecord("bucketID", "orgID", WritePrecision.NS, data); +try (WriteApi writeApi = client.getWriteApi()) { + writeApi.writeRecord("<%= bucket %>", "<%= org %>", WritePrecision.NS, data); }`, - writingDataPointCodeSnippet: `Point point = Point - .measurement("mem") - .addTag("host", "host1") - .addField("used_percent", 23.43234543) + writingDataPointCodeSnippet: `Point point = Point + .measurement("mem") + .addTag("host", "host1") + .addField("used_percent", 23.43234543) .time(1556896326L, WritePrecision.NS); - -try (WriteApi writeApi = client.getWriteApi()) { - writeApi.writePoint("bucketID", "orgID", point); + +try (WriteApi writeApi = client.getWriteApi()) { + writeApi.writePoint("<%= bucket %>", "<%= org %>", point); }`, writingDataPojoCodeSnippet: `Mem mem = new Mem(); mem.host = "host1"; mem.used_percent = 23.43234543; mem.time = Instant.now(); -try (WriteApi writeApi = client.getWriteApi()) { - writeApi.writeMeasurement("bucketID", "orgID", WritePrecision.NS, mem); +try (WriteApi writeApi = client.getWriteApi()) { + writeApi.writeMeasurement("<%= bucket %>", "<%= org %>", WritePrecision.NS, mem); }`, pojoClassCodeSnippet: `@Measurement(name = "mem") -public class Mem { - @Column(tag = true) - String host; - @Column - Double used_percent; - @Column(timestamp = true) +public class Mem { + @Column(tag = true) + String host; + @Column + Double used_percent; + @Column(timestamp = true) Instant time; }`, } @@ -164,12 +164,12 @@ export const clientJSLibrary = { image: JSLogo, initializeClientCodeSnippet: `import Client from '@influxdata/influx' // You can generate a Token from the "Tokens Tab" in the UI -const client = new Client('serverUrl', 'token')`, +const client = new Client('<%= server %>', '<%= token %>')`, executeQueryCodeSnippet: `const query = 'from(bucket: "my_bucket") |> range(start: -1h)' -const {promise} = client.queries.execute('myorgid', query) +const {promise} = client.queries.execute('<%= org %>', query) const csv = await promise`, writingDataLineProtocolCodeSnippet: `const data = 'mem,host=host1 used_percent=23.43234543 1556896326' // Line protocol string -const response = await client.write.create('orgID', 'bucketID', data)`, +const response = await client.write.create('<%= org %>', '<%= bucket %>', data)`, } export const clientPythonLibrary = { @@ -182,20 +182,20 @@ export const clientPythonLibrary = { from influxdb_client import InfluxDBClient ## You can generate a Token from the "Tokens Tab" in the UI -client = InfluxDBClient(url="serverUrl", token="token")`, - executeQueryCodeSnippet: `query = 'from(bucket: "my_bucket") |> range(start: -1h)' -tables = client.query_api().query(query, org="myorgid")`, +client = InfluxDBClient(url="<%= server %>", token="<%= token %>")`, + executeQueryCodeSnippet: `query = 'from(bucket: "<%= bucket %>") |> range(start: -1h)' +tables = client.query_api().query(query, org="<%= org %>")`, writingDataLineProtocolCodeSnippet: `data = "mem,host=host1 used_percent=23.43234543 1556896326" -write_client.write("bucketID", "orgID", data)`, +write_client.write("<%= bucket %>", "<%= org %>", data)`, writingDataPointCodeSnippet: `point = Point("mem") .tag("host", "host1") .field("used_percent", 23.43234543) .time(1556896326, WritePrecision.NS) -write_client.write("bucketID", "orgID", point)`, +write_client.write("<%= bucket %>", "<%= org %>", point)`, writingDataBatchCodeSnippet: `sequence = ["mem,host=host1 used_percent=23.43234543 1556896326", "mem,host=host1 available_percent=15.856523 1556896326"] -write_client.write("bucketID", "orgID", sequence)`, +write_client.write("<%= bucket %>", "<%= org %>", sequence)`, } export const clientLibraries: ClientLibrary[] = [ diff --git a/ui/src/shared/components/TemplatedCodeSnippet.tsx b/ui/src/shared/components/TemplatedCodeSnippet.tsx new file mode 100644 index 00000000000..72d6010216e --- /dev/null +++ b/ui/src/shared/components/TemplatedCodeSnippet.tsx @@ -0,0 +1,43 @@ +import React, {PureComponent} from 'react' + +// Decorator +import {ErrorHandling} from 'src/shared/decorators/errors' + +// Components +import CodeSnippet from 'src/shared/components/CodeSnippet' + +interface StringMap { [key: string]: string; } +export interface Props { + template: string + label: string + values?: StringMap + defaults?: StringMap +} + +@ErrorHandling +class TemplatedCodeSnippet extends PureComponent { + // NOTE: this is just a simplified form of the resig classic: + // https://johnresig.com/blog/javascript-micro-templating/ + public transform() { + const text = this.props.template + const output = new Function( + 'vars', + 'var output=' + + JSON.stringify(text).replace(/<%=(.+?)%>/g, '"+(vars["$1".trim()])+"') + + ';return output;' + ) + return output(Object.assign({}, this.props.defaults, this.props.values)) + } + + render() { + const {label} = this.props + const props = { + label, + copyText: this.transform(), + } + + return + } +} + +export default TemplatedCodeSnippet From a93f5ecbc5a7e846f27035b235f1d897b452632a Mon Sep 17 00:00:00 2001 From: Alex Boatwright Date: Wed, 30 Oct 2019 15:31:56 -0700 Subject: [PATCH 02/16] fix: linting errors --- ui/src/shared/components/TemplatedCodeSnippet.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/src/shared/components/TemplatedCodeSnippet.tsx b/ui/src/shared/components/TemplatedCodeSnippet.tsx index 72d6010216e..0fb7139d43e 100644 --- a/ui/src/shared/components/TemplatedCodeSnippet.tsx +++ b/ui/src/shared/components/TemplatedCodeSnippet.tsx @@ -6,7 +6,10 @@ import {ErrorHandling} from 'src/shared/decorators/errors' // Components import CodeSnippet from 'src/shared/components/CodeSnippet' -interface StringMap { [key: string]: string; } +interface StringMap { + [key: string]: string +} + export interface Props { template: string label: string From a6b06a4a364e1c94d8d1187065d90ffcfee20dfb Mon Sep 17 00:00:00 2001 From: Alex Boatwright Date: Wed, 30 Oct 2019 19:44:47 -0700 Subject: [PATCH 03/16] feat(ui): adding the ability to view just the output section of a telegraf config for v2 --- ui/src/index.tsx | 11 ++ .../overlays/components/OverlayController.tsx | 4 + ui/src/overlays/reducers/overlays.ts | 1 + .../components/TemplatedCodeSnippet.tsx | 27 ++- ui/src/telegrafs/components/Collectors.tsx | 20 ++- .../components/TelegrafOutputOverlay.scss | 6 + .../components/TelegrafOutputOverlay.tsx | 165 ++++++++++++++++++ 7 files changed, 225 insertions(+), 9 deletions(-) create mode 100644 ui/src/telegrafs/components/TelegrafOutputOverlay.scss create mode 100644 ui/src/telegrafs/components/TelegrafOutputOverlay.tsx diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 79da6497b5b..4b06947d4dc 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -124,6 +124,13 @@ const TelegrafConfigOverlay = RouteOverlay( router.push(`/orgs/${router.params.orgID}/load-data/telegrafs`) } ) +const TelegrafOutputOverlay = RouteOverlay( + OverlayHandler, + 'telegraf-output', + router => { + router.push(`/orgs/${router.params.orgID}/load-data/telegrafs`) + } +) // Actions import {disablePresentationMode} from 'src/shared/actions/app' @@ -306,6 +313,10 @@ class Root extends PureComponent { path=":id/instructions" component={TelegrafInstructionsOverlay} /> + diff --git a/ui/src/overlays/components/OverlayController.tsx b/ui/src/overlays/components/OverlayController.tsx index 84e7f3cc4c1..33d92a21510 100644 --- a/ui/src/overlays/components/OverlayController.tsx +++ b/ui/src/overlays/components/OverlayController.tsx @@ -12,6 +12,7 @@ import NoteEditorOverlay from 'src/dashboards/components/NoteEditorOverlay' import AllAccessTokenOverlay from 'src/authorizations/components/AllAccessTokenOverlay' import BucketsTokenOverlay from 'src/authorizations/components/BucketsTokenOverlay' import TelegrafConfigOverlay from 'src/telegrafs/components/TelegrafConfigOverlay' +import TelegrafOutputOverlay from 'src/telegrafs/components/TelegrafOutputOverlay' import {dismissOverlay} from 'src/overlays/actions/overlays' interface StateProps { @@ -52,6 +53,9 @@ const OverlayController: FunctionComponent = props => { case 'telegraf-config': activeOverlay = break + case 'telegraf-output': + activeOverlay = + break default: visibility = false } diff --git a/ui/src/overlays/reducers/overlays.ts b/ui/src/overlays/reducers/overlays.ts index 34216cc71d7..5a31a4f0a23 100644 --- a/ui/src/overlays/reducers/overlays.ts +++ b/ui/src/overlays/reducers/overlays.ts @@ -10,6 +10,7 @@ export type OverlayID = | 'add-master-token' | 'add-token' | 'telegraf-config' + | 'telegraf-output' export interface OverlayParams { [key: string]: string diff --git a/ui/src/shared/components/TemplatedCodeSnippet.tsx b/ui/src/shared/components/TemplatedCodeSnippet.tsx index 0fb7139d43e..04ebe3f7ce1 100644 --- a/ui/src/shared/components/TemplatedCodeSnippet.tsx +++ b/ui/src/shared/components/TemplatedCodeSnippet.tsx @@ -17,19 +17,29 @@ export interface Props { defaults?: StringMap } +// NOTE: this is just a simplified form of the resig classic: +// https://johnresig.com/blog/javascript-micro-templating/ +function transform(template, vars) { + const output = new Function( + 'vars', + 'var output=' + + JSON.stringify(template).replace(/<%=(.+?)%>/g, '"+(vars["$1".trim()])+"') + + ';return output;' + ) + return output(vars) +} + @ErrorHandling class TemplatedCodeSnippet extends PureComponent { - // NOTE: this is just a simplified form of the resig classic: - // https://johnresig.com/blog/javascript-micro-templating/ public transform() { const text = this.props.template - const output = new Function( - 'vars', - 'var output=' + - JSON.stringify(text).replace(/<%=(.+?)%>/g, '"+(vars["$1".trim()])+"') + - ';return output;' + const vars = Object.assign( + {}, + this.props.defaults, + this.props.values ) - return output(Object.assign({}, this.props.defaults, this.props.values)) + + return transform(text, vars) } render() { @@ -43,4 +53,5 @@ class TemplatedCodeSnippet extends PureComponent { } } +export { transform } export default TemplatedCodeSnippet diff --git a/ui/src/telegrafs/components/Collectors.tsx b/ui/src/telegrafs/components/Collectors.tsx index e49d1eb25db..ebb2c1d1b19 100644 --- a/ui/src/telegrafs/components/Collectors.tsx +++ b/ui/src/telegrafs/components/Collectors.tsx @@ -103,7 +103,16 @@ class Collectors extends PureComponent { searchTerm={searchTerm} onSearch={this.handleFilterChange} /> - {this.createButton} +
+
@@ -203,6 +212,15 @@ class Collectors extends PureComponent { router.push(`/orgs/${orgID}/load-data/telegrafs/new`) } + private handleJustTheOutput = () => { + const { + router, + params: {orgID}, + } = this.props + + router.push(`/orgs/${orgID}/load-data/telegrafs/output`) + } + private get emptyState(): JSX.Element { const {orgName} = this.props const {searchTerm} = this.state diff --git a/ui/src/telegrafs/components/TelegrafOutputOverlay.scss b/ui/src/telegrafs/components/TelegrafOutputOverlay.scss new file mode 100644 index 00000000000..080e2823534 --- /dev/null +++ b/ui/src/telegrafs/components/TelegrafOutputOverlay.scss @@ -0,0 +1,6 @@ +.output-overlay { + height: calc(100vh - 350px); + width: 100%; + position: relative; + flex-direction: column; +} diff --git a/ui/src/telegrafs/components/TelegrafOutputOverlay.tsx b/ui/src/telegrafs/components/TelegrafOutputOverlay.tsx new file mode 100644 index 00000000000..1c039528911 --- /dev/null +++ b/ui/src/telegrafs/components/TelegrafOutputOverlay.tsx @@ -0,0 +1,165 @@ +// Libraries +import React, {PureComponent} from 'react' +import {connect} from 'react-redux' +import {Link} from 'react-router' + +// Components +import {ErrorHandling} from 'src/shared/decorators/errors' +import TemplatedCodeSnippet, {transform} from 'src/shared/components/TemplatedCodeSnippet' +import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown' +import { + ComponentColor, + Button, + // SpinnerContainer, + // TechnoSpinner, + Overlay, +} from '@influxdata/clockface' + +// Utils +import {downloadTextFile} from 'src/shared/utils/download' + +// Types +import {AppState, Bucket} from 'src/types' + +interface OwnProps { + onClose: () => void +} + +interface StateProps { + org: string + orgID: number + server: string + buckets: Bucket[] +} + +type Props = OwnProps & StateProps + +const TELEGRAF_OUTPUT = ` [[outputs.influxdb_v2]] + ## The URLs of the InfluxDB cluster nodes. + ## + ## Multiple URLs can be specified for a single cluster, only ONE of the + ## urls will be written to each interval. + ## urls exp: http://127.0.0.1:9999 + urls = ["<%= server %>"] + + ## Token for authentication. + token = "<%= token %>" + + ## Organization is the name of the organization you wish to write to; must exist. + organization = "<%= org %>" + + ## Destination bucket to write into. + bucket = "<%= bucket %>" +` + +const OUTPUT_DEFAULTS = { + server: 'http://127.0.0.1:9999', + token: '$INFLUX_TOKEN', + org: 'orgID', + bucket: 'bucketID' +} + +@ErrorHandling +class TelegrafOutputOverlay extends PureComponent { + state = { + selectedBucket: null + } + + public render() { + return <>{this.overlay} + } + + private get overlay(): JSX.Element { + const { + server, + org, + orgID, + buckets, + } = this.props + const { + selectedBucket + } = this.state + const bucket = selectedBucket ? selectedBucket : buckets[0] + let bucket_dd = false + + if (buckets.length) { + bucket_dd = ( + + ) + } + + return ( + + + +

+ The $INFLUX_TOKEN can be generated on the +  Tokens tab + . +

+ { bucket_dd } +
+ +
+ + +