-
-
Notifications
You must be signed in to change notification settings - Fork 723
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: edge integrations page (#4639)
- Loading branch information
Showing
6 changed files
with
118 additions
and
6 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
91 changes: 91 additions & 0 deletions
91
frontend/src/component/integrations/ViewIntegration/EdgeIntegration/EdgeIntegration.tsx
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,91 @@ | ||
| import FormTemplate from 'component/common/FormTemplate/FormTemplate'; | ||
| import { styled } from '@mui/material'; | ||
|
|
||
| import { IntegrationIcon } from '../../IntegrationList/IntegrationIcon/IntegrationIcon'; | ||
| import { ReactMarkdown } from 'react-markdown/lib/react-markdown'; | ||
| import LaunchIcon from '@mui/icons-material/Launch'; | ||
|
|
||
| const StyledContainer = styled('div')(({ theme }) => ({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: theme.spacing(2), | ||
| })); | ||
|
|
||
| const StyledGrayContainer = styled('div')(({ theme }) => ({ | ||
| backgroundColor: theme.palette.background.elevation1, | ||
| borderRadius: theme.shape.borderRadiusLarge, | ||
| padding: theme.spacing(3), | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: theme.spacing(1), | ||
| })); | ||
|
|
||
| const StyledIconLine = styled('div')(({ theme }) => ({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| })); | ||
|
|
||
| const StyledLink = styled('a')({ | ||
| textDecoration: 'none', | ||
| }); | ||
|
|
||
| export const EDGE_INFO = { | ||
| name: 'unleash', | ||
| displayName: 'Unleash Edge', | ||
| description: 'Unleash Edge is the successor to the Unleash Proxy.', | ||
| documentationUrl: 'https://docs.getunleash.io/reference/unleash-edge', | ||
| howTo: `Unleash Edge sits between the Unleash API and your SDKs and provides a cached read-replica of your Unleash instance. This means you can scale up your Unleash instance to thousands of connected SDKs without increasing the number of requests you make to your Unleash instance. | ||
| Unleash Edge offers two important features: | ||
| - **Performance:** Unleash Edge caches in memory and can run close to your end-users. A single instance can handle tens to hundreds of thousands of requests per second. | ||
| - **Resilience:** Unleash Edge is designed to survive restarts and operate properly even if you lose connection to your Unleash server.`, | ||
| }; | ||
|
|
||
| export const EdgeIntegration = () => { | ||
| const { name, displayName, description, documentationUrl, howTo } = | ||
| EDGE_INFO; | ||
|
|
||
| return ( | ||
| <FormTemplate | ||
| title={`${displayName}`} | ||
| description={description || ''} | ||
| documentationLink={documentationUrl} | ||
| documentationLinkLabel="Unleash Edge documentation" | ||
| > | ||
| <StyledContainer> | ||
| <StyledGrayContainer> | ||
| <StyledIconLine> | ||
| <IntegrationIcon name={name} /> How does it work? | ||
| </StyledIconLine> | ||
| <ReactMarkdown>{howTo}</ReactMarkdown> | ||
| </StyledGrayContainer> | ||
| <StyledGrayContainer> | ||
| <StyledLink | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| href="https://github.com/Unleash/unleash-edge#readme" | ||
| > | ||
| View Unleash Edge on GitHub{' '} | ||
| <LaunchIcon | ||
| fontSize="inherit" | ||
| sx={{ | ||
| verticalAlign: 'middle', | ||
| marginBottom: '2px', | ||
| }} | ||
| /> | ||
| </StyledLink> | ||
| </StyledGrayContainer> | ||
| <iframe | ||
| src="https://www.youtube-nocookie.com/embed/6uIdF-yByWs?si=rPzsFCM_2IheaTUo" | ||
| title="YouTube video player" | ||
| frameBorder="0" | ||
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | ||
| allowFullScreen | ||
| style={{ | ||
| width: '100%', | ||
| aspectRatio: '16/9', | ||
| }} | ||
| ></iframe> | ||
| </StyledContainer> | ||
| </FormTemplate> | ||
| ); | ||
| }; |
2 changes: 1 addition & 1 deletion
2
...ns/JiraIntegration/JiraImageContainer.tsx → ...on/JiraIntegration/JiraImageContainer.tsx
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
4 changes: 2 additions & 2 deletions
4
...tions/JiraIntegration/JiraIntegration.tsx → ...ation/JiraIntegration/JiraIntegration.tsx
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
21 changes: 21 additions & 0 deletions
21
frontend/src/component/integrations/ViewIntegration/ViewIntegration.tsx
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,21 @@ | ||
| import { VFC } from 'react'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import NotFound from 'component/common/NotFound/NotFound'; | ||
| import { JiraIntegration } from './JiraIntegration/JiraIntegration'; | ||
| import { EdgeIntegration } from './EdgeIntegration/EdgeIntegration'; | ||
|
|
||
| interface IViewIntegrationProps {} | ||
|
|
||
| export const ViewIntegration: VFC<IViewIntegrationProps> = () => { | ||
| const { providerId } = useParams<{ providerId: string }>(); | ||
|
|
||
| if (providerId === 'jira') { | ||
| return <JiraIntegration />; | ||
| } | ||
|
|
||
| if (providerId === 'edge') { | ||
| return <EdgeIntegration />; | ||
| } | ||
|
|
||
| return <NotFound />; | ||
| }; |
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