mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-08 01:15:49 +02:00
feat: Edge integration page (#4657)
## About the changes 
This commit is contained in:
Tymoteusz Czech
GitHub
parent
44db4fb0c3
commit
dbaa386697
@ -44,6 +44,7 @@ import { IntegrationDelete } from './IntegrationDelete/IntegrationDelete';
|
||||
import { IntegrationStateSwitch } from './IntegrationStateSwitch/IntegrationStateSwitch';
|
||||
import { capitalizeFirst } from 'utils/capitalizeFirst';
|
||||
import { useUiFlag } from 'hooks/useUiFlag';
|
||||
import { IntegrationHowToSection } from '../IntegrationHowToSection/IntegrationHowToSection';
|
||||
|
||||
type IntegrationFormProps = {
|
||||
provider?: AddonTypeSchema;
|
||||
@ -305,6 +306,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
||||
hidden={true}
|
||||
variant="outlined"
|
||||
/>
|
||||
<IntegrationHowToSection provider={provider} />
|
||||
<StyledRaisedSection>
|
||||
<IntegrationStateSwitch
|
||||
checked={formValues.enabled}
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
import { AddonTypeSchema } from 'openapi';
|
||||
import { VFC } from 'react';
|
||||
import { StyledRaisedSection } from '../IntegrationForm/IntegrationForm.styles';
|
||||
import { Typography } from '@mui/material';
|
||||
import { IntegrationIcon } from '../IntegrationList/IntegrationIcon/IntegrationIcon';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
interface IIntegrationHowToSectionProps {
|
||||
provider?: Pick<AddonTypeSchema, 'howTo' | 'name'>;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export const IntegrationHowToSection: VFC<IIntegrationHowToSectionProps> = ({
|
||||
provider,
|
||||
title = 'How does it work?',
|
||||
}) => {
|
||||
if (!provider?.name || !provider?.howTo) return null;
|
||||
|
||||
return (
|
||||
<StyledRaisedSection>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h3"
|
||||
sx={theme => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: theme.spacing(1),
|
||||
})}
|
||||
>
|
||||
<IntegrationIcon name={provider.name} /> {title}
|
||||
</Typography>
|
||||
<ReactMarkdown>{provider!.howTo || ''}</ReactMarkdown>
|
||||
</StyledRaisedSection>
|
||||
);
|
||||
};
|
||||
@ -106,7 +106,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
|
||||
<IntegrationCard
|
||||
icon="unleash"
|
||||
title="Unleash Edge"
|
||||
description="Unleash Edge is built to help you scale Unleash. As a successor of Unleash Proxy it's even faster and more versitile."
|
||||
description="Unleash Edge is built to help you scale Unleash. As a successor of Unleash Proxy it's even faster and more versatile."
|
||||
link="/integrations/view/edge"
|
||||
configureActionText="Learn more"
|
||||
/>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
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 { Divider, Typography, styled } from '@mui/material';
|
||||
import edgeMode from './assets/edge-mode.svg';
|
||||
import offlineMode from './assets/edge-offline.svg';
|
||||
import edgeChaining from './assets/edge-daisy-chaining.svg';
|
||||
import LaunchIcon from '@mui/icons-material/Launch';
|
||||
import { IntegrationHowToSection } from 'component/integrations/IntegrationHowToSection/IntegrationHowToSection';
|
||||
import { formatAssetPath } from 'utils/formatPath';
|
||||
|
||||
const StyledContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
@ -11,6 +13,12 @@ const StyledContainer = styled('div')(({ theme }) => ({
|
||||
gap: theme.spacing(2),
|
||||
}));
|
||||
|
||||
const StyledDescription = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(3),
|
||||
}));
|
||||
|
||||
const StyledGrayContainer = styled('div')(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.elevation1,
|
||||
borderRadius: theme.shape.borderRadiusLarge,
|
||||
@ -20,15 +28,31 @@ const StyledGrayContainer = styled('div')(({ theme }) => ({
|
||||
gap: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const StyledIconLine = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
const StyledDescriptionHeader = styled(Typography)(({ theme }) => ({
|
||||
marginTop: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const StyledLink = styled('a')({
|
||||
textDecoration: 'none',
|
||||
});
|
||||
|
||||
const StyledFigure = styled('figure')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
marginTop: theme.spacing(1.5),
|
||||
marginBottom: theme.spacing(3),
|
||||
gap: theme.spacing(1),
|
||||
flexDirection: 'column',
|
||||
}));
|
||||
|
||||
const StyledFigcaption = styled('figcaption')(({ theme }) => ({
|
||||
fontSize: theme.typography.body2.fontSize,
|
||||
color: theme.palette.text.secondary,
|
||||
textAlign: 'center',
|
||||
}));
|
||||
|
||||
export const EDGE_INFO = {
|
||||
name: 'unleash',
|
||||
displayName: 'Unleash Edge',
|
||||
@ -41,8 +65,7 @@ Unleash Edge offers two important features:
|
||||
};
|
||||
|
||||
export const EdgeIntegration = () => {
|
||||
const { name, displayName, description, documentationUrl, howTo } =
|
||||
EDGE_INFO;
|
||||
const { displayName, description, documentationUrl } = EDGE_INFO;
|
||||
|
||||
return (
|
||||
<FormTemplate
|
||||
@ -52,12 +75,10 @@ export const EdgeIntegration = () => {
|
||||
documentationLinkLabel="Unleash Edge documentation"
|
||||
>
|
||||
<StyledContainer>
|
||||
<StyledGrayContainer>
|
||||
<StyledIconLine>
|
||||
<IntegrationIcon name={name} /> How does it work?
|
||||
</StyledIconLine>
|
||||
<ReactMarkdown>{howTo}</ReactMarkdown>
|
||||
</StyledGrayContainer>
|
||||
<IntegrationHowToSection
|
||||
provider={EDGE_INFO}
|
||||
title="Why would you need Edge?"
|
||||
/>
|
||||
<StyledGrayContainer>
|
||||
<StyledLink
|
||||
target="_blank"
|
||||
@ -74,6 +95,12 @@ export const EdgeIntegration = () => {
|
||||
/>
|
||||
</StyledLink>
|
||||
</StyledGrayContainer>
|
||||
<Divider
|
||||
sx={theme => ({
|
||||
marginTop: theme.spacing(2),
|
||||
marginBottom: theme.spacing(2),
|
||||
})}
|
||||
/>
|
||||
<iframe
|
||||
src="https://www.youtube-nocookie.com/embed/6uIdF-yByWs?si=rPzsFCM_2IheaTUo"
|
||||
title="YouTube video player"
|
||||
@ -85,6 +112,94 @@ export const EdgeIntegration = () => {
|
||||
aspectRatio: '16/9',
|
||||
}}
|
||||
></iframe>
|
||||
<StyledDescription>
|
||||
<section>
|
||||
<StyledDescriptionHeader variant="h3">
|
||||
Modes
|
||||
</StyledDescriptionHeader>
|
||||
<Typography variant="body1">
|
||||
Edge currently supports 2 different modes:{' '}
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.getunleash.io/reference/unleash-edge#edge"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Edge
|
||||
</a>{' '}
|
||||
Edge – Connection to upstream node
|
||||
(Unleash instance or another Edge). Supports
|
||||
dynamic tokens, metrics and other advanced
|
||||
features;
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.getunleash.io/reference/unleash-edge#offline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Offline
|
||||
</a>{' '}
|
||||
– No connection to upstream node. Full
|
||||
control of data and tokens;
|
||||
</li>
|
||||
</ul>
|
||||
</Typography>
|
||||
</section>
|
||||
<section>
|
||||
<StyledDescriptionHeader variant="h3">
|
||||
Edge
|
||||
</StyledDescriptionHeader>
|
||||
<Typography variant="body1">
|
||||
Edge mode is the "standard" mode for Unleash Edge
|
||||
and the one you should default to in most cases. It
|
||||
connects to an upstream node, such as your Unleash
|
||||
instance, and uses that as the source of truth for
|
||||
feature toggles.
|
||||
</Typography>
|
||||
<StyledFigure>
|
||||
<img src={formatAssetPath(edgeMode)} alt="test" />
|
||||
<StyledFigcaption>Edge mode</StyledFigcaption>
|
||||
</StyledFigure>
|
||||
<Typography>
|
||||
Other than connecting Edge directly to your Unleash
|
||||
instance, it's also possible to connect to another
|
||||
Edge instance (daisy chaining). You can have as many
|
||||
Edge nodes as you'd like between the Edge node your
|
||||
clients are accessing and the Unleash server, and
|
||||
it's also possible for multiple nodes to connect to
|
||||
a single upstream one.
|
||||
</Typography>
|
||||
<StyledFigure>
|
||||
<img
|
||||
src={formatAssetPath(edgeChaining)}
|
||||
alt="test"
|
||||
/>
|
||||
<StyledFigcaption>
|
||||
Edge daisy chaining
|
||||
</StyledFigcaption>
|
||||
</StyledFigure>
|
||||
</section>
|
||||
<section>
|
||||
<StyledDescriptionHeader variant="h3">
|
||||
Offline
|
||||
</StyledDescriptionHeader>
|
||||
<Typography>
|
||||
Offline mode is useful when there is no connection
|
||||
to an upstream node, such as your Unleash instance
|
||||
or another Edge instance, or as a tool to make
|
||||
working with Unleash easier during development.
|
||||
</Typography>
|
||||
<StyledFigure>
|
||||
<img
|
||||
src={formatAssetPath(offlineMode)}
|
||||
alt="test"
|
||||
/>
|
||||
<StyledFigcaption>Edge offline</StyledFigcaption>
|
||||
</StyledFigure>
|
||||
</section>
|
||||
</StyledDescription>
|
||||
</StyledContainer>
|
||||
</FormTemplate>
|
||||
);
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 50 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 22 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
@ -1,11 +1,11 @@
|
||||
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
|
||||
import { Divider, styled } from '@mui/material';
|
||||
|
||||
import { IntegrationIcon } from '../../IntegrationList/IntegrationIcon/IntegrationIcon';
|
||||
import cr from 'assets/img/jira/cr.png';
|
||||
import connect from 'assets/img/jira/connect.png';
|
||||
import manage from 'assets/img/jira/manage.png';
|
||||
import cr from './assets/cr.png';
|
||||
import connect from './assets/connect.png';
|
||||
import manage from './assets/manage.png';
|
||||
import { JiraImageContainer } from './JiraImageContainer';
|
||||
import { IntegrationHowToSection } from 'component/integrations/IntegrationHowToSection/IntegrationHowToSection';
|
||||
|
||||
const StyledContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
@ -22,12 +22,6 @@ const StyledGrayContainer = styled('div')(({ theme }) => ({
|
||||
gap: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const StyledIconLine = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
marginLeft: theme.spacing(1),
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
const StyledLink = styled('a')({
|
||||
textDecoration: 'none',
|
||||
});
|
||||
@ -39,10 +33,14 @@ export const JIRA_INFO = {
|
||||
'Create, connect, manage, and approve Unleash feature flags directly from Jira',
|
||||
documentationUrl:
|
||||
'https://docs.getunleash.io/reference/integrations/jira-cloud-plugin-installation',
|
||||
howTo: ` - Create a new feature flag directly within Jira, or connect existing flags to any Jira issue.
|
||||
- Keep track of your flag status for each environment.
|
||||
- Activate/deactivate feature flags directly within Jira.
|
||||
- Initiate change requests when guarded flags are activated/deactivated within Jira.`,
|
||||
};
|
||||
|
||||
export const JiraIntegration = () => {
|
||||
const { name, displayName, description, documentationUrl } = JIRA_INFO;
|
||||
const { displayName, description, documentationUrl } = JIRA_INFO;
|
||||
|
||||
return (
|
||||
<FormTemplate
|
||||
@ -52,28 +50,7 @@ export const JiraIntegration = () => {
|
||||
documentationLinkLabel="Jira documentation"
|
||||
>
|
||||
<StyledContainer>
|
||||
<StyledGrayContainer>
|
||||
<StyledIconLine>
|
||||
<IntegrationIcon name={name} /> How does it work?
|
||||
</StyledIconLine>
|
||||
<ul>
|
||||
<li>
|
||||
Create a new feature flag directly within Jira, or
|
||||
connect existing flags to any Jira issue.
|
||||
</li>
|
||||
<li>
|
||||
Keep track of your flag status for each environment.
|
||||
</li>
|
||||
<li>
|
||||
Activate/deactivate feature flags directly within
|
||||
Jira.
|
||||
</li>
|
||||
<li>
|
||||
Initiate change requests when guarded flags are
|
||||
activated/deactivated within Jira.
|
||||
</li>
|
||||
</ul>
|
||||
</StyledGrayContainer>
|
||||
<IntegrationHowToSection provider={JIRA_INFO} />
|
||||
<StyledGrayContainer>
|
||||
<StyledLink
|
||||
target="_blank"
|
||||
|
||||
|
Before Width: | Height: | Size: 243 KiB After Width: | Height: | Size: 243 KiB |
|
Before Width: | Height: | Size: 243 KiB After Width: | Height: | Size: 243 KiB |
|
Before Width: | Height: | Size: 243 KiB After Width: | Height: | Size: 243 KiB |
@ -20,6 +20,8 @@ export interface AddonTypeSchema {
|
||||
documentationUrl: string;
|
||||
/** A description of the addon type. */
|
||||
description: string;
|
||||
/** A long description of how to use this addon type. This will be displayed on the top of configuration page. Can contain markdown. */
|
||||
howTo?: string;
|
||||
/** A list of [Unleash tag types](https://docs.getunleash.io/reference/tags#tag-types) that this addon uses. These tags will be added to the Unleash instance when an addon of this type is created. */
|
||||
tagTypes?: TagTypeSchema[];
|
||||
/** The addon provider's parameters. Use these to configure an addon of this provider type. Items with `required: true` must be provided. */
|
||||
|
||||
@ -22,6 +22,7 @@ const dataDogDefinition: IAddonDefinition = {
|
||||
displayName: 'Datadog',
|
||||
description: 'Allows Unleash to post updates to Datadog.',
|
||||
documentationUrl: 'https://docs.getunleash.io/docs/addons/datadog',
|
||||
howTo: 'The Datadog integration allows Unleash to post Updates to Datadog when a feature toggle is updated.',
|
||||
parameters: [
|
||||
{
|
||||
name: 'url',
|
||||
|
||||
@ -22,6 +22,7 @@ const teamsDefinition: IAddonDefinition = {
|
||||
displayName: 'Microsoft Teams',
|
||||
description: 'Allows Unleash to post updates to Microsoft Teams.',
|
||||
documentationUrl: 'https://docs.getunleash.io/docs/addons/teams',
|
||||
howTo: 'The MicrosoftTeams integration allows Unleash to post Updates when a feature toggle is updated.',
|
||||
parameters: [
|
||||
{
|
||||
name: 'url',
|
||||
|
||||
@ -34,6 +34,7 @@ const webhookDefinition: IAddonDefinition = {
|
||||
description:
|
||||
'A Webhook is a generic way to post messages from Unleash to third party services.',
|
||||
documentationUrl: 'https://docs.getunleash.io/docs/addons/webhook',
|
||||
howTo: 'The Webhook Addon introduces a generic way to post messages from Unleash to third party services. Unleash allows you to define a webhook which listens changes in Unleash and post them to a third party services.',
|
||||
parameters: [
|
||||
{
|
||||
name: 'url',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user