Skip to content

Commit 83126fd

Browse files
mavariusmavarius
authored
feat(ui): add engine version and announcement for IOx (#6539)
* feat(ui): update version number with engine info * feat(ui): add announcement block component * feat(ui): introduce announcement block for iox
1 parent aec84b9 commit 83126fd

File tree

7 files changed

+173
-88
lines changed

7 files changed

+173
-88
lines changed

‎src/homepageExperience/containers/HomepageContainer.tsx‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -288,27 +288,13 @@ export const HomepageContainer: FC = () => {
288288
</Link>
289289
</FlexBox>
290290
</Grid.Column>
291-
<Grid.Column
292-
widthSM={Columns.Four}
293-
widthMD={Columns.Three}
294-
style={{marginTop: '-8px'}}
295-
>
291+
<Grid.Column widthSM={Columns.Four} widthMD={Columns.Three}>
296292
{CLOUD ? (
297293
<UsageProvider>
298-
<Resources
299-
style={{
300-
backgroundColor: InfluxColors.Grey5,
301-
paddingRight: 0,
302-
}}
303-
/>
294+
<Resources />
304295
</UsageProvider>
305296
) : (
306-
<Resources
307-
style={{
308-
backgroundColor: InfluxColors.Grey5,
309-
paddingRight: 0,
310-
}}
311-
/>
297+
<Resources />
312298
)}
313299
</Grid.Column>
314300
</Grid.Row>

‎src/me/components/AnnouncementBlock.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, {FC} from 'react'
2+
3+
// Components
4+
import {
5+
ButtonShape,
6+
ComponentSize,
7+
Heading,
8+
HeadingElement,
9+
JustifyContent,
10+
LinkButton,
11+
LinkTarget,
12+
Panel,
13+
} from '@influxdata/clockface'
14+
15+
interface OwnProps {
16+
image?: JSX.Element
17+
title?: string
18+
body?: string | JSX.Element
19+
ctaText?: string
20+
ctaLink?: string
21+
}
22+
23+
const AnnouncementBlock: FC<OwnProps> = (props: OwnProps) => {
24+
return (
25+
<Panel>
26+
<Panel.Header>
27+
{props.image}
28+
<Heading element={HeadingElement.H3}>{props.title}</Heading>
29+
</Panel.Header>
30+
<Panel.Body>{props.body}</Panel.Body>
31+
{props.ctaText && props.ctaLink && (
32+
<Panel.Footer justifyContent={JustifyContent.FlexEnd}>
33+
<LinkButton
34+
text={props.ctaText}
35+
titleText={props.ctaText}
36+
href={props.ctaLink}
37+
target={LinkTarget.Blank}
38+
size={ComponentSize.ExtraSmall}
39+
shape={ButtonShape.Default}
40+
/>
41+
</Panel.Footer>
42+
)}
43+
</Panel>
44+
)
45+
}
46+
47+
export default AnnouncementBlock

‎src/me/components/AnnouncementCenter.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, {FC} from 'react'
2+
3+
// Components
4+
import {
5+
AlignItems,
6+
ComponentSize,
7+
FlexBox,
8+
FlexDirection,
9+
} from '@influxdata/clockface'
10+
11+
interface OwnProps {
12+
children?: JSX.Element | JSX.Element[]
13+
}
14+
15+
const AnnouncementCenter: FC<OwnProps> = (props: OwnProps) => {
16+
return (
17+
<FlexBox
18+
direction={FlexDirection.Column}
19+
alignItems={AlignItems.Stretch}
20+
margin={ComponentSize.Medium}
21+
>
22+
{props.children}
23+
</FlexBox>
24+
)
25+
}
26+
27+
export default AnnouncementCenter

‎src/me/components/DocSearchWidget.tsx‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Libraries
22
import React, {FC} from 'react'
3+
import {useSelector} from 'react-redux'
34

45
// Components
56
import DocSearch, {DocSearchType} from 'src/shared/search/DocSearch'
@@ -10,7 +11,9 @@ import {DOCS_URL_VERSION} from 'src/shared/constants/fluxFunctions'
1011

1112
// Utils
1213
import {event} from 'src/cloud/utils/reporting'
14+
import {isOrgIOx} from 'src/organizations/selectors'
1315

16+
// Styles
1417
import 'src/me/components/DocSearchWidget.scss'
1518

1619
const supportLinks = [
@@ -72,24 +75,30 @@ const DocSearchWidget: FC = () => {
7275
return (
7376
<div className="WidgetSearch">
7477
<DocSearch type={DocSearchType.Widget} />
75-
<p className="WidgetHelperText">Press CTRL + M on any page to search</p>
76-
<div className="useful-links">
77-
<h4 style={{textTransform: 'uppercase'}}>Useful Links</h4>
78-
<ul className="docslinks-list">
79-
{supportLinks.map(({link, title, eventName}) => (
80-
<li key={title}>
81-
<a
82-
href={link}
83-
target="_blank"
84-
rel="noreferrer"
85-
onClick={() => handleEventing(eventName)}
86-
>
87-
{title}
88-
</a>
89-
</li>
90-
))}
91-
</ul>
92-
</div>
78+
{!useSelector(isOrgIOx) && (
79+
<>
80+
<p className="WidgetHelperText">
81+
Press CTRL + M on any page to search
82+
</p>
83+
<div className="useful-links">
84+
<h4 style={{textTransform: 'uppercase'}}>Useful Links</h4>
85+
<ul className="docslinks-list">
86+
{supportLinks.map(({link, title, eventName}) => (
87+
<li key={title}>
88+
<a
89+
href={link}
90+
target="_blank"
91+
rel="noreferrer"
92+
onClick={() => handleEventing(eventName)}
93+
>
94+
{title}
95+
</a>
96+
</li>
97+
))}
98+
</ul>
99+
</div>
100+
</>
101+
)}
93102
</div>
94103
)
95104
}

‎src/me/components/Resources.tsx‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,65 @@
11
// Libraries
2-
import React, {CSSProperties, FC, memo, useContext} from 'react'
3-
import {
4-
Panel,
5-
FlexBox,
6-
FlexDirection,
7-
ComponentSize,
8-
AlignItems,
9-
} from '@influxdata/clockface'
2+
import React, {FC, memo, useContext} from 'react'
3+
import {useSelector} from 'react-redux'
104

115
// Utils
126
import {CLOUD} from 'src/shared/constants'
137
import {UsageContext} from 'src/usage/context/usage'
148

159
// Components
10+
import {
11+
FlexBox,
12+
FlexDirection,
13+
ComponentSize,
14+
AlignItems,
15+
} from '@influxdata/clockface'
16+
import AnnouncementCenter from './AnnouncementCenter'
17+
import AnnouncementBlock from './AnnouncementBlock'
1618
import UsagePanel from 'src/me/components/UsagePanel'
1719
import DocSearchWidget from 'src/me/components/DocSearchWidget'
1820
import VersionInfo from 'src/shared/components/VersionInfo'
1921

20-
type OwnProps = {
21-
style?: CSSProperties
22-
}
22+
// Utils
23+
import {isOrgIOx} from 'src/organizations/selectors'
2324

24-
const ResourceLists: FC<OwnProps> = (props: OwnProps) => {
25+
const ResourceLists: FC = () => {
2526
const {paygCreditEnabled} = useContext(UsageContext)
2627

2728
return (
2829
<FlexBox
2930
direction={FlexDirection.Column}
3031
alignItems={AlignItems.Stretch}
3132
stretchToFitWidth={true}
32-
margin={ComponentSize.Small}
33+
stretchToFitHeight={true}
34+
margin={ComponentSize.Large}
3335
>
34-
<Panel testID="documentation--panel">
35-
<Panel.Body style={props.style}>
36-
<DocSearchWidget />
37-
</Panel.Body>
38-
</Panel>
36+
<DocSearchWidget />
37+
{useSelector(isOrgIOx) && (
38+
<AnnouncementCenter>
39+
<AnnouncementBlock
40+
title="New time-series engine for InfluxDB"
41+
body={
42+
<>
43+
<p>
44+
InfluxDB Cloud is now powered by the new{' '}
45+
<strong>IOx High-Performance Time-Series Engine</strong>. What
46+
does this mean for you?
47+
</p>
48+
<ul>
49+
<li>Improved performance</li>
50+
<li>Native support for SQL</li>
51+
<li>Unlimited series cardinality</li>
52+
<li>Low-cost cloud object storage</li>
53+
</ul>
54+
</>
55+
}
56+
ctaText="Learn more"
57+
ctaLink="https://www.influxdata.com/blog/influxdb-cloud-announces-new-time-series-engine/"
58+
/>
59+
</AnnouncementCenter>
60+
)}
3961
{CLOUD && paygCreditEnabled && <UsagePanel />}
40-
<Panel>
41-
<Panel.Footer style={props.style}>
42-
<VersionInfo />
43-
</Panel.Footer>
44-
</Panel>
62+
<VersionInfo />
4563
</FlexBox>
4664
)
4765
}

‎src/shared/components/VersionInfo.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
*/
55

66
.version-info {
7+
border-top: 2px solid $cf-grey-25;
8+
padding-top: $cf-space-l;
9+
padding-bottom: $cf-space-l;
710
color: $cf-grey-55;
811
text-align: center;
912
}

‎src/shared/components/VersionInfo.tsx‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,38 @@
11
// Libraries
2-
import React, {PureComponent} from 'react'
2+
import React, {FC} from 'react'
3+
import {useSelector} from 'react-redux'
34

45
// Components
56
import VersionInfoOSS from 'src/shared/components/VersionInfoOSS'
7+
import {SafeBlankLink} from 'src/utils/SafeBlankLink'
68

79
// Constants
810
import {VERSION, GIT_SHA, CLOUD} from 'src/shared/constants'
911

10-
interface Props {
11-
widthPixels?: number
12-
}
12+
// Utils
13+
import {isOrgIOx} from 'src/organizations/selectors'
1314

14-
class VersionInfo extends PureComponent<Props> {
15-
public render() {
16-
return (
17-
<div
18-
className="version-info"
19-
style={this.style}
20-
data-testid="version-info"
21-
>
22-
<p>
23-
{CLOUD ? (
24-
<>
25-
Version {VERSION}{' '}
26-
{GIT_SHA && <code>({GIT_SHA.slice(0, 7)})</code>}
27-
</>
28-
) : (
29-
<VersionInfoOSS />
30-
)}
31-
</p>
32-
</div>
33-
)
34-
}
15+
const VersionInfo: FC = () => {
16+
const engineName = useSelector(isOrgIOx) ? 'IOx' : 'TSM'
17+
const engineLink = useSelector(isOrgIOx)
18+
? 'http://docs.influxdata.com/influxdb/cloud-iox/'
19+
: 'https://docs.influxdata.com/influxdb/v2.6/reference/internals/storage-engine/'
3520

36-
private get style() {
37-
if (this.props.widthPixels) {
38-
return {width: `${this.props.widthPixels}px`}
39-
}
40-
}
21+
return (
22+
<div className="version-info" data-testid="version-info">
23+
{CLOUD ? (
24+
<div>
25+
<SafeBlankLink href={engineLink}>
26+
InfluxDB Cloud powered by {engineName}
27+
</SafeBlankLink>
28+
<br />
29+
Version {VERSION} {GIT_SHA && <code>({GIT_SHA.slice(0, 7)})</code>}
30+
</div>
31+
) : (
32+
<VersionInfoOSS />
33+
)}
34+
</div>
35+
)
4136
}
4237

4338
export default VersionInfo

0 commit comments

Comments
 (0)