Skip to content

Commit e56f542

Browse files
ChitlangeSahasChitlangeSahas
authored
feat: Execute aggregate query and finish steps (#4071)
1 parent 52a46a1 commit e56f542

File tree

6 files changed

+199
-6
lines changed

6 files changed

+199
-6
lines changed

‎src/homepageExperience/components/HomepageExperience.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ $pool-fill: #00a3ff;
1010

1111
padding-top: 71px;
1212
padding-right: 85px;
13+
14+
overflow-y: scroll;
15+
padding-bottom: 185px;
1316
}
1417

1518
.homepage-wizard-container--subway {
@@ -156,3 +159,39 @@ $pool-fill: #00a3ff;
156159
align-items: center;
157160
text-transform: uppercase;
158161
}
162+
163+
.homepage-wizard-next-steps {
164+
display: flex;
165+
max-width: 300px;
166+
margin-top: 0 !important;
167+
h4 {
168+
background: linear-gradient(45deg, #fad9ff 0%, #f0fcff 100%);
169+
-webkit-background-clip: text;
170+
-webkit-text-fill-color: transparent;
171+
172+
display: flex;
173+
align-items: center;
174+
175+
margin: 0;
176+
svg {
177+
margin-right: 10px;
178+
}
179+
}
180+
181+
p {
182+
font-size: 14px;
183+
margin: 0;
184+
font-style: normal;
185+
font-weight: 300;
186+
line-height: 17px;
187+
text-align: left;
188+
}
189+
190+
h5 {
191+
display: flex;
192+
align-items: center;
193+
justify-content: center;
194+
letter-spacing: 0.06em;
195+
margin: 0;
196+
}
197+
}

‎src/homepageExperience/components/HomepageIcons.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,3 +184,59 @@ export const ListeningDataHeartbeatIcon = (
184184
/>
185185
</svg>
186186
)
187+
188+
export const InfluxDBUniversityIcon = (
189+
<svg
190+
width="18"
191+
height="20"
192+
viewBox="0 0 18 20"
193+
fill="none"
194+
xmlns="http://www.w3.org/2000/svg"
195+
>
196+
<path
197+
d="M18 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H18V20H3C2.20435 20 1.44129 19.6839 0.87868 19.1213C0.316071 18.5587 0 17.7956 0 17V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H18V16ZM2 14.05C2.162 14.017 2.329 14 2.5 14H16V2H2V14.05ZM13 7H5V5H13V7Z"
198+
fill="url(#paint0_linear_430_2155)"
199+
/>
200+
<defs>
201+
<linearGradient
202+
id="paint0_linear_430_2155"
203+
x1="0"
204+
y1="20"
205+
x2="19.8895"
206+
y2="2.09945"
207+
gradientUnits="userSpaceOnUse"
208+
>
209+
<stop stopColor="#FAD9FF" />
210+
<stop offset="1" stopColor="#F0FCFF" />
211+
</linearGradient>
212+
</defs>
213+
</svg>
214+
)
215+
216+
export const VSCodePluginIcon = (
217+
<svg
218+
width="21"
219+
height="18"
220+
viewBox="0 0 21 18"
221+
fill="none"
222+
xmlns="http://www.w3.org/2000/svg"
223+
>
224+
<path
225+
d="M1.33334 0H19.3333C19.5986 0 19.8529 0.105357 20.0405 0.292893C20.228 0.48043 20.3333 0.734784 20.3333 1V17C20.3333 17.2652 20.228 17.5196 20.0405 17.7071C19.8529 17.8946 19.5986 18 19.3333 18H1.33334C1.06813 18 0.813773 17.8946 0.626237 17.7071C0.4387 17.5196 0.333344 17.2652 0.333344 17V1C0.333344 0.734784 0.4387 0.48043 0.626237 0.292893C0.813773 0.105357 1.06813 0 1.33334 0ZM2.33334 2V16H18.3333V2H2.33334ZM18.3333 9L14.7973 12.536L13.3833 11.121L15.5053 9L13.3833 6.879L14.7973 5.464L18.3333 9ZM5.16134 9L7.28334 11.121L5.86934 12.536L2.33334 9L5.86934 5.464L7.28334 6.88L5.16134 9ZM9.57734 14H7.44934L11.0893 4H13.2173L9.57734 14Z"
226+
fill="url(#paint0_linear_430_2163)"
227+
/>
228+
<defs>
229+
<linearGradient
230+
id="paint0_linear_430_2163"
231+
x1="0.333344"
232+
y1="18"
233+
x2="18.2339"
234+
y2="-1.8895"
235+
gradientUnits="userSpaceOnUse"
236+
>
237+
<stop stopColor="#FAD9FF" />
238+
<stop offset="1" stopColor="#F0FCFF" />
239+
</linearGradient>
240+
</defs>
241+
</svg>
242+
)

‎src/homepageExperience/components/steps/ExecuteAggregateQuery.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import CodeSnippet from 'src/shared/components/CodeSnippet'
3+
4+
export const ExecuteAggregateQuery = () => {
5+
const codeSnippet = `query_api = client.query_api()
6+
7+
query = "from(bucket: \\"bucket1\\") |> range(start: -10m) |> mean()"
8+
tables = query_api.query(query, org=org)
9+
10+
for table in tables:
11+
for record in table.records:
12+
print(record)`
13+
return (
14+
<>
15+
<h1>Execute an Aggregate Query</h1>
16+
<p>Paste the following code after the prompt (>>>) and press Enter.</p>
17+
<CodeSnippet text={codeSnippet} />
18+
<p>This will return the mean of the five values. </p>
19+
</>
20+
)
21+
}

‎src/homepageExperience/components/steps/Finish.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react'
2+
import {
3+
AlignItems,
4+
ComponentSize,
5+
FlexBox,
6+
Icon,
7+
IconFont,
8+
ResourceCard,
9+
} from '@influxdata/clockface'
10+
import {InfluxDBUniversityIcon, VSCodePluginIcon} from '../HomepageIcons'
11+
12+
export const Finish = () => {
13+
return (
14+
<>
15+
<h1>Congrats!</h1>
16+
<p>You completed setting up, writing, and querying data.</p>
17+
<p>Curious to learn more? Try these next steps!</p>
18+
<FlexBox margin={ComponentSize.Medium} alignItems={AlignItems.Stretch}>
19+
<ResourceCard className="homepage-wizard-next-steps">
20+
<a href="https://influxdbu.com/" target="_blank">
21+
<h4>{InfluxDBUniversityIcon}InfluxDB University</h4>
22+
</a>
23+
<p>
24+
Our free hands-on courses teach you the technical skills and best
25+
practices to get the most out of your real-time data with InfluxDB."
26+
</p>
27+
</ResourceCard>
28+
<ResourceCard className="homepage-wizard-next-steps">
29+
<a
30+
href="https://docs.influxdata.com/influxdb/cloud/tools/flux-vscode"
31+
target="_blank"
32+
>
33+
<h4>{VSCodePluginIcon}Install VSCode Plugin</h4>
34+
</a>
35+
<p>Streamline your workflow even further with our VSCode plugin!</p>
36+
</ResourceCard>
37+
<ResourceCard className="homepage-wizard-next-steps">
38+
<div
39+
style={{display: 'flex', justifyContent: 'center', height: '100%'}}
40+
>
41+
<h5>
42+
MORE OPTIONS{' '}
43+
<Icon
44+
glyph={IconFont.ArrowRight_New}
45+
style={{marginLeft: '9px'}}
46+
/>
47+
</h5>
48+
</div>
49+
</ResourceCard>
50+
</FlexBox>
51+
52+
<p style={{marginTop: '150px'}}>
53+
What did you think about the set up process? Give us feedback to improve
54+
</p>
55+
</>
56+
)
57+
}

‎src/homepageExperience/containers/HomepagePythonWizard.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React, {PureComponent} from 'react'
22
import classnames from 'classnames'
33

4-
import {Button, ComponentColor, ComponentSize} from '@influxdata/clockface'
4+
import {
5+
Button,
6+
ComponentColor,
7+
ComponentSize,
8+
ComponentStatus,
9+
} from '@influxdata/clockface'
510

611
import {InstallDependencies} from 'src/homepageExperience/components/steps/InstallDependencies'
712
import {Overview} from 'src/homepageExperience/components/steps/Overview'
@@ -10,8 +15,10 @@ import {CreateToken} from 'src/homepageExperience/components/steps/CreateToken'
1015
import {InitalizeClient} from 'src/homepageExperience/components/steps/InitalizeClient'
1116
import {WriteData} from 'src/homepageExperience/components/steps/WriteData'
1217
import {ExecuteQuery} from 'src/homepageExperience/components/steps/ExecuteQuery'
18+
import {Finish} from 'src/homepageExperience/components/steps/Finish'
1319

1420
import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
21+
import {ExecuteAggregateQuery} from '../components/steps/ExecuteAggregateQuery'
1522

1623
interface State {
1724
currentStep: number
@@ -55,13 +62,21 @@ export class HomepagePythonWizard extends PureComponent<null, State> {
5562
case 6: {
5663
return <ExecuteQuery />
5764
}
65+
case 7: {
66+
return <ExecuteAggregateQuery />
67+
}
68+
case 8: {
69+
return <Finish />
70+
}
5871
default: {
5972
return <Overview />
6073
}
6174
}
6275
}
6376

6477
render() {
78+
const {currentStep} = this.state
79+
6580
return (
6681
<div className="homepage-wizard-container">
6782
<aside className="homepage-wizard-container--subway">
@@ -84,12 +99,22 @@ export class HomepagePythonWizard extends PureComponent<null, State> {
8499
text="Previous"
85100
size={ComponentSize.Large}
86101
color={ComponentColor.Tertiary}
102+
status={
103+
currentStep > 1
104+
? ComponentStatus.Default
105+
: ComponentStatus.Disabled
106+
}
87107
/>
88108
<Button
89109
onClick={this.handleNextClick}
90110
text="Next"
91111
size={ComponentSize.Large}
92112
color={ComponentColor.Primary}
113+
status={
114+
currentStep < 8
115+
? ComponentStatus.Default
116+
: ComponentStatus.Disabled
117+
}
93118
/>
94119
</div>
95120
</div>

‎src/homepageExperience/utils.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
AlertIcon,
32
ExecuteQueryIcon,
43
FinishIcon,
54
InitializeClientIcon,
@@ -38,10 +37,6 @@ export const HOMEPAGE_NAVIGATION_STEPS = [
3837
name: 'Execute an \n Aggregate Query',
3938
icon: ExecuteQueryIcon,
4039
},
41-
{
42-
name: '(Optional) \n Set up Alerts',
43-
icon: AlertIcon,
44-
},
4540
{
4641
name: 'Finish',
4742
icon: FinishIcon,

0 commit comments

Comments
 (0)