Skip to content

Commit 5df2332

Browse files
epapbakF-X64
epapbak
authored and
F-X64
committed
Add External links page section
1 parent 47f0278 commit 5df2332

File tree

4 files changed

+212
-103
lines changed

4 files changed

+212
-103
lines changed

‎src/app/Pages/Dashboard/Home.tsx

+35-30
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,62 @@
1-
import * as React from 'react'
2-
import {
3-
PageSectionVariants,
4-
PageSection,
5-
Title,
6-
Flex,
7-
FlexItem
8-
} from '@patternfly/react-core'
9-
import { Helmet } from 'react-helmet'
10-
import {
11-
useDocumentTitle
12-
} from '@app/utils/useDocumentTitle'
13-
import Footer from '@app/components/Footer'
14-
import logo from '@app/bgimages/ohc-hero.png'
15-
import { ImageTable } from '@app/components/ImageTable'
1+
import * as React from 'react';
2+
import { PageSectionVariants, PageSection, Title, Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core';
3+
import { Helmet } from 'react-helmet';
4+
import { useDocumentTitle } from '@app/utils/useDocumentTitle';
5+
import Footer from '@app/components/Footer';
6+
import logo from '@app/bgimages/ohc-hero.png';
7+
import { ImageTable } from '@app/components/ImageTable';
8+
import { ExternalLinksCard } from '@app/components/ExternalLinksCard';
9+
import { InternalLinksCard } from '@app/components/InternalLinkCard';
1610

1711
const Home: React.FunctionComponent<{ title: string }> = ({ title }) => {
18-
19-
useDocumentTitle(title)
12+
useDocumentTitle(title);
2013
return (
2114
<div>
2215
<Helmet>
2316
<meta
2417
name="description"
2518
content="The Cloud Image Directory is a tool that makes finding and running
2619
Red Hat Enterprise Linux (RHEL) cloud images on AWS, Azure and Google Cloud
27-
platforms easy." />
20+
platforms easy."
21+
/>
2822
<link rel="canonical" href="https://imagedirectory.cloud/" />
2923
</Helmet>
30-
<PageSection className='hero-section'>
31-
<Flex className='hero-text' alignItems={{
32-
default: 'alignItemsCenter'
33-
}}>
24+
<PageSection className="hero-section">
25+
<Flex
26+
className="hero-text"
27+
alignItems={{
28+
default: 'alignItemsCenter',
29+
}}
30+
>
3431
<FlexItem>
35-
<Title headingLevel='h1' size='3xl'>
32+
<Title headingLevel="h1" size="3xl">
3633
Welcome to Cloud Image Directory
3734
</Title>
38-
<Title headingLevel='h1' size='lg'>
35+
<Title headingLevel="h1" size="lg">
3936
Get the images you need to start developing your Linux on-cloud experience.
4037
</Title>
4138
</FlexItem>
42-
<FlexItem
43-
spacer={{ default: 'spacer2xl' }}
44-
align={{ default: 'alignRight' }}>
39+
<FlexItem spacer={{ default: 'spacer2xl' }} align={{ default: 'alignRight' }}>
4540
<img alt={'Red Hat Enterprise Linux for the Open Hybrid Cloud'} src={logo} style={{ height: 200 }} />
4641
</FlexItem>
4742
</Flex>
4843
</PageSection>
44+
<PageSection variant={PageSectionVariants.light}>
45+
<Grid hasGutter>
46+
<GridItem md={4} sm={12}>
47+
<InternalLinksCard />
48+
</GridItem>
49+
<GridItem md={8} sm={12}>
50+
<ExternalLinksCard />
51+
</GridItem>
52+
</Grid>
53+
</PageSection>
4954
<PageSection variant={PageSectionVariants.light}>
5055
<ImageTable />
5156
</PageSection>
5257
<Footer />
5358
</div>
54-
)
55-
}
59+
);
60+
};
5661

57-
export { Home }
62+
export { Home };

‎src/app/components/ExternalLinksCard.tsx

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import React from 'react';
2+
import {
3+
Bullseye,
4+
Button,
5+
Card,
6+
CardTitle,
7+
CardBody,
8+
CardFooter,
9+
Divider,
10+
Stack,
11+
StackItem,
12+
Flex,
13+
FlexItem,
14+
} from '@patternfly/react-core';
15+
16+
import redhat_logo from '@app/bgimages/redhat_clear.png';
17+
import aws_logo from '@app/bgimages/aws_clear.png';
18+
import azure_logo from '@app/bgimages/azure_clear.png';
19+
import google_logo from '@app/bgimages/google_clear.png';
20+
import { ArrowRightIcon } from '@patternfly/react-icons';
21+
22+
const providerInfos = [
23+
{
24+
name: 'aws',
25+
text: 'Launch in AWS ->',
26+
url: 'https://aws.amazon.com/marketplace/pp/prodview-kv5mi3ksb2mma?sr=0-1&ref_=beagle&applicationId=AWSMPContessa',
27+
},
28+
{
29+
name: 'google',
30+
text: 'Launch in Google Cloud ->',
31+
url: 'https://console.cloud.google.com/marketplace/product/rhel-cloud/rhel-9?project=cockpituous',
32+
},
33+
{
34+
name: 'azure',
35+
text: 'Launch in Azure ->',
36+
url: 'https://azuremarketplace.microsoft.com/en-us/marketplace/apps/redhat.rhel-20190605?tab=Overview',
37+
},
38+
];
39+
40+
const loadImage = (name: Provider) => {
41+
switch (name) {
42+
case Provider.aws:
43+
return aws_logo;
44+
case Provider.azure:
45+
return azure_logo;
46+
case Provider.google:
47+
return google_logo;
48+
}
49+
};
50+
51+
const displayText = (name: Provider) => {
52+
switch (name) {
53+
case Provider.aws:
54+
return 'Launch in AWS';
55+
case Provider.azure:
56+
return 'Launch in Azure';
57+
case Provider.google:
58+
return 'Launch in Google Cloud';
59+
}
60+
};
61+
62+
enum Provider {
63+
'aws',
64+
'azure',
65+
'google',
66+
}
67+
68+
type ProviderCardProps = {
69+
provider: Provider;
70+
};
71+
72+
const ProviderCard = ({ provider }: ProviderCardProps) => {
73+
return (
74+
<Stack>
75+
<StackItem>
76+
<Bullseye>
77+
<img style={{ height: 100, width: 100 }} src={loadImage(provider)} />
78+
</Bullseye>
79+
</StackItem>
80+
<StackItem>
81+
<Bullseye>
82+
<Button variant="link" isLarge>
83+
{displayText(provider)} <ArrowRightIcon />
84+
</Button>
85+
</Bullseye>
86+
</StackItem>
87+
</Stack>
88+
);
89+
};
90+
91+
const ExternalLinksCard: React.FunctionComponent = () => {
92+
return (
93+
<Card isLarge isFlat>
94+
<CardTitle>
95+
<Stack>
96+
<StackItem>
97+
<img
98+
src={redhat_logo}
99+
style={{
100+
height: '2vw',
101+
}}
102+
/>
103+
</StackItem>
104+
<StackItem>
105+
<p>Get the latest Red Hat Enterprise Linux certified image for cloud deployment</p>
106+
</StackItem>
107+
</Stack>
108+
</CardTitle>
109+
<CardBody>
110+
<p>Launch the latest RHEL certified cloud image through available cloud service provider marketplaces.</p>
111+
<br />
112+
<Flex justifyContent={{ default: 'justifyContentCenter' }}>
113+
<FlexItem>
114+
<ProviderCard provider={Provider.aws} />
115+
</FlexItem>
116+
<Divider orientation={{ default: 'vertical' }} />
117+
<FlexItem>
118+
<ProviderCard provider={Provider.google} />
119+
</FlexItem>
120+
<Divider orientation={{ default: 'vertical' }} />
121+
<FlexItem>
122+
<ProviderCard provider={Provider.azure} />
123+
</FlexItem>
124+
</Flex>
125+
</CardBody>
126+
</Card>
127+
);
128+
};
129+
130+
export { ExternalLinksCard };

‎src/app/components/InternalLinkCard.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import { Button, Card, CardBody, CardFooter, CardTitle, Stack, StackItem } from '@patternfly/react-core';
3+
4+
import redhat_logo from '@app/bgimages/redhat_clear.png';
5+
import { ArrowRightIcon } from '@patternfly/react-icons';
6+
7+
const providerInfo = {
8+
name: 'redhat',
9+
title: 'Build your own RHEL cloud image',
10+
description:
11+
"With Red Hat's image builder, you can create customizable and repeatable operating system images and server images",
12+
text: 'Build an image ->',
13+
url: 'https://console.redhat.com/insights/image-builder',
14+
};
15+
16+
const InternalLinksCard: React.FunctionComponent = () => {
17+
return (
18+
<Card isFlat isFullHeight isLarge>
19+
<CardTitle>
20+
<Stack>
21+
<StackItem>
22+
<img
23+
src={redhat_logo}
24+
style={{
25+
height: '2vw',
26+
}}
27+
/>
28+
</StackItem>
29+
<StackItem>
30+
<p>Build your own RHEL cloud image</p>
31+
</StackItem>
32+
</Stack>
33+
</CardTitle>
34+
<CardBody>
35+
With Red Hat's Image Builder, you can create customizable and repeatable operating system images and server
36+
images.
37+
</CardBody>
38+
<CardFooter>
39+
<Button variant="link" isLarge>
40+
Build an image <ArrowRightIcon />
41+
</Button>
42+
</CardFooter>
43+
</Card>
44+
);
45+
};
46+
47+
export { InternalLinksCard };

‎src/app/components/ProviderCard.tsx

-73
This file was deleted.

0 commit comments

Comments
 (0)