-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#12939][yugabyted-ui] Adding alert and admin page to Yugabyted UI
Summary: Added page that links to YugabyteDB Managed signup for alert and admin tabs. Test Plan: no test plan Reviewers: nikhil Reviewed By: nikhil Subscribers: djiang Differential Revision: https://phabricator.dev.yugabyte.com/D17768
- Loading branch information
1 parent
b9fb454
commit 72d1538
Showing
6 changed files
with
1,786 additions
and
1,613 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React, { FC } from 'react'; | ||
| import { Divider, Box, Typography } from '@material-ui/core'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import { YBButton } from '@app/components'; | ||
| import { useGettingStartedStyles } from './gettingStartedStyles'; | ||
|
|
||
| import WelcomeCloudImage from '@app/assets/welcome-cloud-image.svg'; | ||
| import CheckIcon from '@app/assets/check.svg'; | ||
|
|
||
| const LINK_SIGNUP = 'https://cloud.yugabyte.com/signup?'; | ||
|
|
||
| // TODO: remove page once PLG feature is stable | ||
| export const GettingStarted: FC = () => { | ||
| const classes = useGettingStartedStyles(); | ||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <Typography variant="h4" className={classes.headerTitle}> | ||
| {t('managed.signupForManaged')} | ||
| </Typography> | ||
| <Divider /> | ||
| <Typography variant="h2" className={classes.getStartedTitle}> | ||
| {t('managed.featureAvailableWith')} | ||
| </Typography> | ||
|
|
||
| <div className={classes.getStartedBlock}> | ||
| <Box pt={4} display="flex"> | ||
| <WelcomeCloudImage /> | ||
| <Box maxWidth={390} pt={1} pl={5} pr={5}> | ||
| <Box mb={1}> | ||
| <Typography variant="body2">{t('welcome.getStarted.line1')}</Typography> | ||
| </Box> | ||
| <Box mb={3}> | ||
| <Typography variant="body2" color="textSecondary"> | ||
| {t('welcome.getStarted.line2')} | ||
| </Typography> | ||
| </Box> | ||
| <YBButton data-testid="BtnAddCluster" variant="gradient" size="large" component={Link} | ||
| to={{ pathname: LINK_SIGNUP }} target="_blank"> | ||
| {t('managed.signupForManaged')} | ||
| </YBButton> | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <div className={classes.features}> | ||
| <div className={classes.featureItem}> | ||
| <CheckIcon className={classes.iconCheck} /> | ||
| <Box> | ||
| <Box mb={0.5}> | ||
| <Typography variant="body1">{t('welcome.getStarted.feature1Title')}</Typography> | ||
| </Box> | ||
| <Typography variant="body2">{t('welcome.getStarted.feature1Subtitle')}</Typography> | ||
| </Box> | ||
| </div> | ||
| <div className={classes.featureItem}> | ||
| <CheckIcon className={classes.iconCheck} /> | ||
| <Box> | ||
| <Box mb={0.5}> | ||
| <Typography variant="body1">{t('welcome.getStarted.feature2Title')}</Typography> | ||
| </Box> | ||
| <Typography variant="body2">{t('welcome.getStarted.feature2Subtitle')}</Typography> | ||
| </Box> | ||
| </div> | ||
| <div className={classes.featureItem}> | ||
| <CheckIcon className={classes.iconCheck} /> | ||
| <Box> | ||
| <Box mb={0.5}> | ||
| <Typography variant="body1">{t('welcome.getStarted.feature3Title')}</Typography> | ||
| </Box> | ||
| <Typography variant="body2">{t('welcome.getStarted.feature3Subtitle')}</Typography> | ||
| </Box> | ||
| </div> | ||
| <div className={classes.featureItem}> | ||
| <CheckIcon className={classes.iconCheck} /> | ||
| <Box> | ||
| <Box mb={0.5}> | ||
| <Typography variant="body1">{t('welcome.getStarted.feature4Title')}</Typography> | ||
| </Box> | ||
| <Typography variant="body2">{t('welcome.getStarted.feature4Subtitle')}</Typography> | ||
| </Box> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
69 changes: 69 additions & 0 deletions
69
yugabyted-ui/ui/src/features/welcome/gettingStartedStyles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { makeStyles } from '@material-ui/core'; | ||
|
|
||
| export const useGettingStartedStyles = makeStyles((theme) => ({ | ||
| root: { | ||
| maxWidth: 1200, | ||
| minHeight: 425, | ||
| padding: theme.spacing(0, 4), | ||
| margin: theme.spacing(2, 'auto', 0, 'auto'), | ||
| backgroundColor: theme.palette.background.paper, | ||
| border: `1px solid ${theme.palette.grey[200]}`, | ||
| borderRadius: theme.shape.borderRadius | ||
| }, | ||
| headerTitle: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| padding: theme.spacing(4, 2) | ||
| }, | ||
| getStartedTitle: { | ||
| padding: theme.spacing(7, 2, 5, 2) | ||
| }, | ||
| getStartedBlock: { | ||
| display: 'flex', | ||
| padding: theme.spacing(0, 2, 5, 2) | ||
| }, | ||
| features: { | ||
| borderLeft: `1px solid ${theme.palette.grey[200]}`, | ||
| padding: theme.spacing(1, 1, 1, 5) | ||
| }, | ||
| featureItem: { | ||
| display: 'flex', | ||
| alignItems: 'flex-start', | ||
| marginBottom: theme.spacing(2.5), | ||
| '&:last-child': { | ||
| marginBottom: 0 | ||
| } | ||
| }, | ||
| iconCheck: { | ||
| marginRight: theme.spacing(3), | ||
| color: theme.palette.grey[600] | ||
| }, | ||
| tile: { | ||
| width: '100%', | ||
| height: 165, | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| border: `1px solid ${theme.palette.grey[200]}`, | ||
| borderRadius: theme.shape.borderRadius, | ||
| padding: theme.spacing(3, 4), | ||
| backgroundColor: theme.palette.background.default, | ||
| marginRight: theme.spacing(4), | ||
| '&:last-child': { | ||
| marginRight: 0 | ||
| } | ||
| }, | ||
| link: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| marginTop: 'auto' | ||
| }, | ||
| users: { | ||
| color: theme.palette.grey[600], | ||
| borderRadius: theme.shape.borderRadius, | ||
| border: `1px solid ${theme.palette.grey[200]}`, | ||
| padding: theme.spacing(2), | ||
| marginTop: theme.spacing(2), | ||
| display: 'flex', | ||
| alignItems: 'center' | ||
| } | ||
| })); |
Oops, something went wrong.