diff --git a/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx b/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx index e77fdb206d9..93286e3512b 100644 --- a/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx @@ -1,12 +1,24 @@ // Libraries import React, {FunctionComponent} from 'react' +import {connect} from 'react-redux' + // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' + // Constants import {clientCSharpLibrary} from 'src/clientLibraries/constants' -const ClientCSharpOverlay: FunctionComponent<{}> = () => { +// Types +import {AppState} from 'src/types' + +interface StateProps { + org: string +} + +type Props = StateProps + +const ClientCSharpOverlay: FunctionComponent = props => { const { name, url, @@ -20,6 +32,9 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => { writingDataPocoCodeSnippet, pocoClassCodeSnippet, } = clientCSharpLibrary + const {org} = props + const server = window.location.origin + return (

@@ -52,6 +67,9 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => { server: 'basepath', token: 'token', }} + values={{ + server, + }} />

Write Data

Option 1: Use InfluxDB Line Protocol to write data

@@ -62,6 +80,9 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => { org: 'orgID', bucket: 'bucketID', }} + values={{ + org, + }} />

Option 2: Use a Data Point to write data

= () => { org: 'orgID', bucket: 'bucketID', }} + values={{ + org, + }} />

Option 3: Use POCO and corresponding Class to write data

= () => { org: 'orgID', bucket: 'bucketID', }} + values={{ + org, + }} />
Execute a Flux query
@@ -90,9 +117,24 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => { org: 'orgID', bucket: 'bucketID', }} + values={{ + org, + }} />
) } -export default ClientCSharpOverlay +const mstp = (state: AppState): StateProps => { + const org = state.orgs.org.id + + return { + org, + } +} + +export {ClientCSharpOverlay} +export default connect( + mstp, + null +)(ClientCSharpOverlay) diff --git a/ui/src/clientLibraries/components/ClientGoOverlay.tsx b/ui/src/clientLibraries/components/ClientGoOverlay.tsx index 18b4a80dfc2..dd64b73cfdb 100644 --- a/ui/src/clientLibraries/components/ClientGoOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientGoOverlay.tsx @@ -1,5 +1,6 @@ // Libraries import React, {FunctionComponent} from 'react' +import {connect} from 'react-redux' // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' @@ -8,13 +9,25 @@ import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' // Constants import {clientGoLibrary} from 'src/clientLibraries/constants' -const ClientGoOverlay: FunctionComponent<{}> = () => { +// Types +import {AppState} from 'src/types' + +interface StateProps { + org: string +} + +type Props = StateProps + +const ClientGoOverlay: FunctionComponent = props => { const { name, url, initializeClientCodeSnippet, writeDataCodeSnippet, } = clientGoLibrary + const {org} = props + const server = window.location.origin + return (

@@ -31,6 +44,9 @@ const ClientGoOverlay: FunctionComponent<{}> = () => { token: 'myToken', server: 'myHTTPInfluxAddress', }} + values={{ + server, + }} />

Write Data
= () => { bucket: 'my-awesome-bucket', org: 'my-very-awesome-org', }} + values={{ + org, + }} />
) } -export default ClientGoOverlay +const mstp = (state: AppState): StateProps => { + const org = state.orgs.org.id + + return { + org, + } +} + +export {ClientGoOverlay} +export default connect( + mstp, + null +)(ClientGoOverlay) diff --git a/ui/src/clientLibraries/components/ClientJSOverlay.tsx b/ui/src/clientLibraries/components/ClientJSOverlay.tsx index f5208df5759..37d5af7120f 100644 --- a/ui/src/clientLibraries/components/ClientJSOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientJSOverlay.tsx @@ -1,5 +1,6 @@ // Libraries import React, {FunctionComponent} from 'react' +import {connect} from 'react-redux' // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' @@ -8,7 +9,16 @@ import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' // Constants import {clientJSLibrary} from 'src/clientLibraries/constants' -const ClientJSOverlay: FunctionComponent<{}> = () => { +// Types +import {AppState} from 'src/types' + +interface StateProps { + org: string +} + +type Props = StateProps + +const ClientJSOverlay: FunctionComponent = props => { const { name, url, @@ -16,6 +26,8 @@ const ClientJSOverlay: FunctionComponent<{}> = () => { executeQueryCodeSnippet, writingDataLineProtocolCodeSnippet, } = clientJSLibrary + const {org} = props + const server = window.location.origin return ( @@ -34,6 +46,9 @@ const ClientJSOverlay: FunctionComponent<{}> = () => { server: 'server', token: 'token', }} + values={{ + server, + }} />
Write Data
= () => { org: 'orgID', bucket: 'bucketID', }} + values={{ + org, + }} />
Execute a Flux query
= () => { defaults={{ org: 'orgID', }} + values={{ + org, + }} />
) } -export default ClientJSOverlay +const mstp = (state: AppState): StateProps => { + const org = state.orgs.org.id + + return { + org, + } +} + +export {ClientJSOverlay} +export default connect( + mstp, + null +)(ClientJSOverlay) diff --git a/ui/src/clientLibraries/components/ClientJavaOverlay.tsx b/ui/src/clientLibraries/components/ClientJavaOverlay.tsx index 32ed7eb534b..67269cb0cde 100644 --- a/ui/src/clientLibraries/components/ClientJavaOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientJavaOverlay.tsx @@ -1,12 +1,24 @@ // Libraries import React, {FunctionComponent} from 'react' +import {connect} from 'react-redux' + // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' + // Constants import {clientJavaLibrary} from 'src/clientLibraries/constants' -const ClientJavaOverlay: FunctionComponent<{}> = () => { +// Types +import {AppState} from 'src/types' + +interface StateProps { + org: string +} + +type Props = StateProps + +const ClientJavaOverlay: FunctionComponent = props => { const { name, url, @@ -19,6 +31,8 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => { writingDataPojoCodeSnippet, pojoClassCodeSnippet, } = clientJavaLibrary + const {org} = props + const server = window.location.origin return ( @@ -44,6 +58,9 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => { server: 'serverUrl', token: 'token', }} + values={{ + server, + }} />
Write Data

Option 1: Use InfluxDB Line Protocol to write data

@@ -54,6 +71,9 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => { bucket: 'bucketID', org: 'orgID', }} + values={{ + org, + }} />

Option 2: Use a Data Point to write data

= () => { bucket: 'bucketID', org: 'orgID', }} + values={{ + org, + }} />

Option 3: Use POJO and corresponding class to write data

= () => { bucket: 'bucketID', org: 'orgID', }} + values={{ + org, + }} />
Execute a Flux query
@@ -82,9 +108,24 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => { bucket: 'my_bucket', org: 'myorgid', }} + values={{ + org, + }} />
) } -export default ClientJavaOverlay +const mstp = (state: AppState): StateProps => { + const org = state.orgs.org.id + + return { + org, + } +} + +export {ClientJavaOverlay} +export default connect( + mstp, + null +)(ClientJavaOverlay) diff --git a/ui/src/clientLibraries/components/ClientPythonOverlay.tsx b/ui/src/clientLibraries/components/ClientPythonOverlay.tsx index ebffd4e4b24..b9d0cacd789 100644 --- a/ui/src/clientLibraries/components/ClientPythonOverlay.tsx +++ b/ui/src/clientLibraries/components/ClientPythonOverlay.tsx @@ -1,5 +1,6 @@ // Libraries import React, {FunctionComponent} from 'react' +import {connect} from 'react-redux' // Components import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay' @@ -8,7 +9,16 @@ import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet' // Constants import {clientPythonLibrary} from 'src/clientLibraries/constants' -const ClientPythonOverlay: FunctionComponent<{}> = () => { +// Types +import {AppState} from 'src/types' + +interface StateProps { + org: string +} + +type Props = StateProps + +const ClientPythonOverlay: FunctionComponent = props => { const { name, url, @@ -19,6 +29,8 @@ const ClientPythonOverlay: FunctionComponent<{}> = () => { writingDataPointCodeSnippet, writingDataBatchCodeSnippet, } = clientPythonLibrary + const {org} = props + const server = window.location.origin return ( @@ -41,6 +53,9 @@ const ClientPythonOverlay: FunctionComponent<{}> = () => { server: 'serverUrl', token: 'token', }} + values={{ + server, + }} />
Write Data

Option 1: Use InfluxDB Line Protocol to write data

@@ -51,6 +66,9 @@ const ClientPythonOverlay: FunctionComponent<{}> = () => { bucket: 'bucketID', org: 'orgID', }} + values={{ + org, + }} />

Option 2: Use a Data Point to write data

= () => { bucket: 'bucketID', org: 'orgID', }} + values={{ + org, + }} />

Option 3: Use a Batch Sequence to write data

= () => { bucket: 'bucketID', org: 'orgID', }} + values={{ + org, + }} />
Execute a Flux query
= () => { bucket: 'my_bucket', org: 'orgID', }} + values={{ + org, + }} />
) } -export default ClientPythonOverlay +const mstp = (state: AppState): StateProps => { + const org = state.orgs.org.id + + return { + org, + } +} + +export {ClientPythonOverlay} +export default connect( + mstp, + null +)(ClientPythonOverlay)