Skip to content

Commit

Permalink
feat(clientLibs): Add Client Libs page (influxdata#15413)
Browse files Browse the repository at this point in the history 
* feat(clientLibs): fix icons, add go and c#

* feat(clientLibs): fix go client overlay

* feat(clientLibs): update remaining client libs

* feat(clientLibs): remove feature flag

* fix(telegraf): fix broken test

* fix(clientLibs): removing unused featureflag class

* feat(clientLibs): addressing pr feedback

* feat(clientLibs): fixing wording and formatting

* feat(clientLibs): update the text on JS page
  • Loading branch information
@russorat
russorat authored Oct 15, 2019
1 parent a138b8b commit a947a4e
Show file tree
Hide file tree
Showing 12 changed files with 339 additions and 459 deletions.
194 changes: 42 additions & 152 deletions ui/src/clientLibraries/components/ClientCSharpOverlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,24 @@
import React, {FunctionComponent} from 'react'
// Components
import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
import CodeSnippet from 'src/shared/components/CodeSnippet'
// Constants
import {clientCSharpLibrary} from 'src/clientLibraries/constants'

const ClientCSharpOverlay: FunctionComponent<{}> = () => {
const {name, url} = clientCSharpLibrary

const {
name,
url,
installingPackageManagerCodeSnippet,
installingPackageDotNetCLICodeSnippet,
packageReferenceCodeSnippet,
initializeClientCodeSnippet,
executeQueryCodeSnippet,
writingDataPointCodeSnippet: writingDataDataPointCodeSnippet,
writingDataLineProtocolCodeSnippet,
writingDataPocoCodeSnippet,
pocoClassCodeSnippet,
} = clientCSharpLibrary
return (
<ClientLibraryOverlay title={`${name} Client Library`}>
<p>
Expand All @@ -16,156 +28,34 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {
GitHub Repository
</a>
</p>
<br />
<h5>Installing package</h5>
<p>
<b>Package Manager</b>
</p>
<pre>
<code>Install-Package InfluxDB.Client</code>
</pre>
<p>
<b>.NET CLI</b>
</p>
<pre>
<code>dotnet add package InfluxDB.Client</code>
</pre>
<p>
<b>Package Reference</b>
</p>
<pre>
<code>&lt;PackageReference Include="InfluxDB.Client"/&gt;</code>
</pre>
<h5>Initializing the Client</h5>
<pre>
<code>
using InfluxDB.Client;
<br />
<br />
namespace Examples
<br />
&#123;
<br />
&nbsp;&nbsp;public class Examples
<br />
&nbsp;&nbsp;&#123;
<br />
&nbsp;&nbsp;&nbsp;&nbsp;public static void Main(string[] args)
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&#123;
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var client =
InfluxDBClientFactory.Create("basepath", "token".ToCharArray());
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&#125;
<br />
&nbsp;&nbsp;&#125;
<br />
&#125;
<br />
</code>
</pre>
<h5>Using the client to execute a query</h5>
<pre>
<code>
const string query = "from(bucket: \"my_bucket\") |> range(start:
-1h)";
<br />
<br />
var tables = await client.GetQueryApi().QueryAsync(query,
"someorgid");
</code>
</pre>
<h5>Writing Data</h5>
<p>
Data could be written using InfluxDB Line Protocol, Data Point or POCO
</p>
<p>
<b>InfluxDB Line Protocol</b>
</p>
<pre>
<code>
const string data = "mem,host=host1 used_percent=23.43234543
1556896326";
<br />
<br />
using (var writeApi = client.GetWriteApi())
<br />
&#123;
<br />
&nbsp;&nbsp;writeApi.WriteRecord("bucketID", "orgID",
WritePrecision.Ns, data);
<br />
&#125;
<br />
</code>
</pre>
<p>
<b>Data Point</b>
</p>
<pre>
<code>
var point = PointData
<br />
&nbsp;&nbsp;.Measurement("mem")
<br />
&nbsp;&nbsp;.Tag("host", "host1")
<br />
&nbsp;&nbsp;.Field("used_percent", 23.43234543)
<br />
&nbsp;&nbsp;.Timestamp(1556896326L, WritePrecision.Ns);
<br />
<br />
using (var writeApi = client.GetWriteApi())
<br />
&#123;
<br />
&nbsp;&nbsp;writeApi.WritePoint("bucketID", "orgID", point);
<br />
&#125;
<br />
</code>
</pre>
<p>
<b>POCO</b>
</p>
<pre>
<code>
var mem = new Mem &#123;Host = "host1", UsedPercent = 23.43234543,
Time = DateTime.UtcNow&#125;;
<br />
<br />
using (var writeApi = client.GetWriteApi())
<br />
&#123;
<br />
&nbsp;&nbsp;writeApi.WriteMeasurement("bucketID", "orgID",
WritePrecision.Ns, mem);
<br />
&#125;
<br />
</code>
</pre>
<pre>
<code>
[Measurement("mem")]
<br />
private class Mem
<br />
&#123;
<br />
&nbsp;&nbsp;[Column("host", IsTag = true)] public string Host &#123;
get; set; &#125;
<br />
&nbsp;&nbsp;[Column("used_percent")] public double? UsedPercent &#123;
get; set; &#125;
<br />
&nbsp;&nbsp;[Column(IsTimestamp = true)] public DateTime Time &#123;
get; set; &#125;
<br />
&#125;
</code>
</pre>
<h5>Install Package</h5>
<p>Package Manager</p>
<CodeSnippet
copyText={installingPackageManagerCodeSnippet}
label="Code"
/>
<p>.NET CLI</p>
<CodeSnippet
copyText={installingPackageDotNetCLICodeSnippet}
label="Code"
/>
<p>Package Reference</p>
<CodeSnippet copyText={packageReferenceCodeSnippet} label="Code" />
<h5>Initialize the Client</h5>
<CodeSnippet copyText={initializeClientCodeSnippet} label="C# Code" />
<h5>Write Data</h5>
<p>Option 1: Use InfluxDB Line Protocol to write data</p>
<CodeSnippet
copyText={writingDataLineProtocolCodeSnippet}
label="C# Code"
/>
<p>Option 2: Use a Data Point to write data</p>
<CodeSnippet copyText={writingDataDataPointCodeSnippet} label="C# Code" />
<p>Option 3: Use POCO and corresponding Class to write data</p>
<CodeSnippet copyText={writingDataPocoCodeSnippet} label="C# Code" />
<CodeSnippet copyText={pocoClassCodeSnippet} label="C# Code" />
<h5>Execute a Flux query</h5>
<CodeSnippet copyText={executeQueryCodeSnippet} label="C# Code" />
</ClientLibraryOverlay>
)
}
Expand Down
13 changes: 11 additions & 2 deletions ui/src/clientLibraries/components/ClientGoOverlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import React, {FunctionComponent} from 'react'

// Components
import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
import CodeSnippet from 'src/shared/components/CodeSnippet'

// Constants
import {clientGoLibrary} from 'src/clientLibraries/constants'

const ClientGoOverlay: FunctionComponent<{}> = () => {
const {name, url} = clientGoLibrary

const {
name,
url,
initializeClientCodeSnippet,
writeDataCodeSnippet,
} = clientGoLibrary
return (
<ClientLibraryOverlay title={`${name} Client Library`}>
<p>
Expand All @@ -18,6 +23,10 @@ const ClientGoOverlay: FunctionComponent<{}> = () => {
GitHub Repository
</a>
</p>
<h5>Initialize the Client</h5>
<CodeSnippet copyText={initializeClientCodeSnippet} label="Go Code" />
<h5>Write Data</h5>
<CodeSnippet copyText={writeDataCodeSnippet} label="Go Code" />
</ClientLibraryOverlay>
)
}
Expand Down
50 changes: 20 additions & 30 deletions ui/src/clientLibraries/components/ClientJSOverlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@ import React, {FunctionComponent} from 'react'

// Components
import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
import CodeSnippet from 'src/shared/components/CodeSnippet'

// Constants
import {clientJSLibrary} from 'src/clientLibraries/constants'

const ClientJSOverlay: FunctionComponent<{}> = () => {
const {name, url} = clientJSLibrary
const {
name,
url,
initializeClientCodeSnippet,
executeQueryCodeSnippet,
writingDataLineProtocolCodeSnippet,
} = clientJSLibrary

return (
<ClientLibraryOverlay title={`${name} Client Library`}>
Expand All @@ -19,35 +26,18 @@ const ClientJSOverlay: FunctionComponent<{}> = () => {
</a>
</p>
<br />
<h5>Initializing the Client</h5>
<pre>
<code>import Client from '@influxdata/influx'</code>
<br />
<code>const client = new Client('basepath', 'token')</code>
</pre>
<h5>Using the client to execute a query</h5>
<pre>
<code>
const query = 'from(bucket: "my_bucket") |> range(start: -1h)'
</code>
<br />
<code>
const &#123;promise, cancel&#125; =
client.queries.execute('someorgid', query)
</code>
<br />
<code>const csv = await promise</code>
<br />
<code>cancel() // Cancels request</code>
</pre>
<h5>Writing Data</h5>
<p>Data should be written using InfluxDB Line Protocol</p>
<pre>
<code>const data = '' // Line protocal string</code>
<code>
const response = await client.write.create('orgID', 'bucketID', data)
</code>
</pre>
<h5>Initialize the Client</h5>
<CodeSnippet
copyText={initializeClientCodeSnippet}
label="JavaScript Code"
/>
<h5>Write Data</h5>
<CodeSnippet
copyText={writingDataLineProtocolCodeSnippet}
label="JavaScript Code"
/>
<h5>Execute a Flux query</h5>
<CodeSnippet copyText={executeQueryCodeSnippet} label="JavaScript Code" />
</ClientLibraryOverlay>
)
}
Expand Down
Loading

0 comments on commit a947a4e

Please sign in to comment.