Skip to content

added back button on cluster view #2503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dgolovin merged 2 commits into from
Aug 24, 2022
Merged

added back button on cluster view #2503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
485b7bc
added back button on cluster view
msivasubramaniaan Aug 8, 2022
682f6af
changed button name as back
msivasubramaniaan Aug 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/webview/cluster/app/cluster.style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,15 @@ export default (theme: Theme) =>
},
textTransform: 'none'
},
sandboxButton: {
color: 'var(--vscode-button-foreground)',
backgroundColor: '#EE0000',
'&:hover': {
color: 'var(--vscode-button-foreground)',
backgroundColor: '#BE0000',
},
textTransform: 'none'
},
cardContent: {
background: 'var(--vscode-settings-focusedRowBackground)',
border: '1px solid var(--vscode-settings-focusedRowBorder)',
Expand Down
105 changes: 59 additions & 46 deletions src/webview/cluster/app/cluster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,36 +25,36 @@ import './images/logo.png';
const useStyles = makeStyles(clusterStyle);

const clusterTypes = [
{
heading: 'Deploy it locally on your laptop',
description: 'Install on Laptop: Red Hat OpenShift Local (formerly Red Hat CodeReady Containers)',
smallInfo: 'Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.',
imageUrl: ['https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg'],
urlAlt: 'crc',
redirectLink: '',
buttonText: 'Create/Refresh cluster',
tooltip: 'Create/Run local OpenShift 4 cluster using the guided workflow'
},
{
heading: 'Launch Developer Sandbox',
description: 'Free access to the Developer Sandbox for Red Hat OpenShift',
smallInfo: 'If you are exploring how to run your code as containers in OpenShift, our free Developer Sandbox instantly gives you a way to try it out.',
imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'],
urlAlt: 'dev sandbox',
redirectLink: '',
buttonText: 'Start your OpenShift experience',
tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift'
},
{
heading: 'Deploy it in your public cloud',
description: 'Run OpenShift clusters on your own by installing from another cloud provider.',
smallInfo: 'This includes Azure Red Hat Openshift, Red Hat OpenShift on IBM Cloud, Red Hat OpenShift Service on AWS, Google Cloud, AWS (x86_64), Azure.',
imageUrl: ['https://www.openshift.com/hubfs/images/logos/logo_aws.svg', 'https://www.openshift.com/hubfs/images/logos/logo-try-cloud.svg', 'https://www.openshift.com/hubfs/images/logos/logo_google_cloud.svg'],
urlAlt: 'public cloud',
redirectLink: 'https://console.redhat.com/openshift/create',
buttonText: 'Try it in your cloud',
tooltip: 'For complete installation, follow the official documentation.'
}
{
heading: 'Deploy it locally on your laptop',
description: 'Install on Laptop: Red Hat OpenShift Local (formerly Red Hat CodeReady Containers)',
smallInfo: 'Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.',
imageUrl: ['https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg'],
urlAlt: 'crc',
redirectLink: '',
buttonText: 'Create/Refresh cluster',
tooltip: 'Create/Run local OpenShift 4 cluster using the guided workflow'
},
{
heading: 'Launch Developer Sandbox',
description: 'Free access to the Developer Sandbox for Red Hat OpenShift',
smallInfo: 'If you are exploring how to run your code as containers in OpenShift, our free Developer Sandbox instantly gives you a way to try it out.',
imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'],
urlAlt: 'dev sandbox',
redirectLink: '',
buttonText: 'Start your OpenShift experience',
tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift'
},
{
heading: 'Deploy it in your public cloud',
description: 'Run OpenShift clusters on your own by installing from another cloud provider.',
smallInfo: 'This includes Azure Red Hat Openshift, Red Hat OpenShift on IBM Cloud, Red Hat OpenShift Service on AWS, Google Cloud, AWS (x86_64), Azure.',
imageUrl: ['https://www.openshift.com/hubfs/images/logos/logo_aws.svg', 'https://www.openshift.com/hubfs/images/logos/logo-try-cloud.svg', 'https://www.openshift.com/hubfs/images/logos/logo_google_cloud.svg'],
urlAlt: 'public cloud',
redirectLink: 'https://console.redhat.com/openshift/create',
buttonText: 'Try it in your cloud',
tooltip: 'For complete installation, follow the official documentation.'
}
];

const vscodeApi = window.vscodeApi;
Expand Down Expand Up @@ -98,17 +98,21 @@ export default function Header() {
}
};

const moveBack = () => {
setShowWizard('');
}

const InfrastructureLayout = ({ clusterTypes }) => (
<>
{clusterTypes.map((list, index) => (
<Card className={classes.cardTransform} key={index}>
<div className={classes.cardHeader}>
<Typography variant="caption" display="block" style={{ fontSize: '1.25em', color: 'white' }}>
<Typography variant='caption' display='block' style={{ fontSize: '1.25em', color: 'white' }}>
{list.heading}
</Typography>
</div>
<CardContent style={{ height: 240 }}>
<Typography className={index === 2 ? classes.cardImageTableContainer : classes.cardImageContainer}>
<Typography className={index === 2 ? classes.cardImageTableContainer : classes.cardImageContainer}>
{list.imageUrl.map((url: string, index: string | number) => (
<img src={url} key={index} className={classes.image} style={{ marginLeft: '.625rem', marginRight: '.625rem', position: 'relative' }}></img>
))}
Expand All @@ -125,13 +129,13 @@ export default function Header() {
</CardContent>
<div>
<CardActions className={classes.cardButton}>
<Tooltip title={list.tooltip} placement="top">
<Tooltip title={list.tooltip} placement='top'>
<div>
<a onClick={() => handleView(index)} style={{ textDecoration: 'none' }} href={clusterTypes[index].redirectLink || '#'}>
<Button
variant="contained"
color="default"
component="span"
variant='contained'
color='default'
component='span'
className={classes.button}
>
{list.buttonText}
Expand All @@ -148,13 +152,22 @@ export default function Header() {

return (
<div className={classes.App}>
<div className={classes.iconContainer}>
<img className={classes.image} src='assets/logo.png' alt="redhat-openshift"></img>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', margin: '0 auto' }}>
<div>
{showWizard?.length > 0 &&
<a onClick={() => moveBack()} className={classes.cardButton} style={{ textDecoration: 'none', cursor: 'pointer'}}>
&#60; Back
</a>
}
</div>
<div className={classes.iconContainer}>
<img className={classes.image} src='assets/logo.png' alt='redhat-openshift'></img>
</div>
</div>
{ showWizard === 'crc' && (
<div className={classes.rowBody}>
<Card className={classes.cardContent}>
<Typography variant="body2" component="p" style={{ padding: 20 }}>
<Typography variant='body2' component='p' style={{ padding: 20 }}>
Red Hat OpenShift Local brings a minimal OpenShift 4 cluster to your local computer.<br></br>You can use this guided workflow to create OpenShift cluster locally. Cluster take approximately 15 minutes to provision.
</Typography>
<AddClusterView vscode={vscodeApi} />
Expand All @@ -164,17 +177,17 @@ export default function Header() {
{ showWizard === 'sandbox' && (
<div className={classes.rowBody}>
<Card className={classes.cardContent}>
<Typography variant="body2" component="p" style={{ padding: 20 }}>
The sandbox provides you with a private OpenShift environment in a shared, multi-tenant OpenShift cluster that is pre-configured with a set of developer tools. <br></br>Discover the rich capabilities of the full developer experience on OpenShift with the sandbox.
<Typography variant='body2' component='p' style={{ padding: 20 }}>
The sandbox provides you with a private OpenShift environment in a shared, multi-tenant OpenShift cluster that is pre-configured with a set of developer tools. <br></br>Discover the rich capabilities of the full developer experience on OpenShift with the sandbox.
</Typography>
<Button variant="outlined" href='https://developers.redhat.com/developer-sandbox' className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Learn More</Button>
<Button variant="outlined" href='mailto:[email protected]' className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Contact Us</Button>
<Button variant="outlined" href='https://dn.dev/DevNationSlack'className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Connect on Slack</Button>
<AddSandboxView/>
<Button variant='outlined' href='https://developers.redhat.com/developer-sandbox' className={classes.sandboxButton} style={{ margin: 15, textTransform: 'none' }}>Learn More</Button>
<Button variant='outlined' href='mailto:[email protected]' className={classes.sandboxButton} style={{ margin: 15, textTransform: 'none' }}>Contact Us</Button>
<Button variant='outlined' href='https://dn.dev/DevNationSlack' className={classes.sandboxButton} style={{ margin: 15, textTransform: 'none' }}>Connect on Slack</Button>
<AddSandboxView />
</Card>
</div>
)}
{ !showWizard && (
{!showWizard && (
<div className={classes.cardContainer}>
<InfrastructureLayout clusterTypes={clusterTypes}></InfrastructureLayout>
</div>
Expand Down
⚡