Skip to content

Commit

Permalink
feat(pci-rancher): add egress gateway ip
Browse files Browse the repository at this point in the history
ref: TAPC-1507
Signed-off-by: Eric Ciccotti <[email protected]>
  • Loading branch information
Eric Ciccotti committed Oct 18, 2024
1 parent e003601 commit ce66b02
Show file tree
Hide file tree
Showing 5 changed files with 209 additions and 130 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
"service_level": "Offre",
"count_cpu_orchestrated": "Nombre de vCPUs orchestrés",
"security_and_access": "Accès et sécurité",
"egress_title": "Rancher egress CIDRs",
"egress_tooltip": "Ces CIDRs représentent les plages d'adresses IP de sortie utilisées par Rancher. Il peut être nécessaire d'autoriser ces adresses IP (whitelisting) à accéder à vos plateformes tierces (ex: appels APIs pour provisionner des ressources).",
"rancher_ui_access": "Accès à l'interface Rancher",
"rancher_button_acces": "Accéder à Rancher",
"generate_access": "Générer vos accès temporaires",
Expand Down
3 changes: 3 additions & 0 deletions packages/manager/apps/pci-rancher/src/_mock_/rancher.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ export const rancherMocked: RancherService = {
datetime: '2023-12-12',
orchestratedVcpus: 2,
},
networking: {
egressCIDRBlocks: ['192.0.2.0/24', '198.51.100.0/24'],
},
},
currentTasks: [],
resourceStatus: ResourceStatus.READY,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,18 @@ import {
useNotifications,
} from '@ovh-ux/manager-react-components';
import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import {
ODS_THEME_COLOR_HUE,
ODS_THEME_COLOR_INTENT,
} from '@ovhcloud/ods-common-theming';
import {
ODS_BUTTON_SIZE,
ODS_BUTTON_VARIANT,
ODS_ICON_NAME,
ODS_ICON_SIZE,
ODS_MESSAGE_TYPE,
ODS_TEXT_LEVEL,
ODS_TEXT_SIZE,
} from '@ovhcloud/ods-components';
import {
OsdsButton,
Expand All @@ -23,6 +29,9 @@ import {
OsdsMessage,
OsdsText,
OsdsTile,
OsdsTooltipContent,
OsdsTooltip,
OsdsIcon,
} from '@ovhcloud/ods-components/react';
import React, { useCallback, useEffect, useState } from 'react';
import { useHref } from 'react-router-dom';
Expand All @@ -42,6 +51,9 @@ import { useTrackingAction } from '@/hooks/useTrackingPage/useTrackingPage';
import { getLatestVersionAvailable } from '@/utils/rancher';
import { TrackingEvent, TrackingPageView } from '@/utils/tracking';

// to delete when return from API is OK
const egressCIDRBlocksFake = ['192.0.2.0/24', '198.51.100.0/24'];

export interface RancherDetailProps {
rancher: RancherService;
editNameResponseType: ODS_MESSAGE_TYPE | null;
Expand Down Expand Up @@ -245,6 +257,49 @@ const RancherDetail = ({
isDisabled={!isReadyStatus}
/>
</TileBlock>
<div className="flex flex-col mb-3">
<div className="flex justify-between">
<OsdsText
className="mb-2"
size={ODS_TEXT_SIZE._200}
level={ODS_TEXT_LEVEL.heading}
color={ODS_THEME_COLOR_INTENT.primary}
hue={ODS_THEME_COLOR_HUE._800}
>
{t('egress_title')}
</OsdsText>
<OsdsTooltip>
<OsdsIcon
name={ODS_ICON_NAME.HELP}
size={ODS_ICON_SIZE.xs}
color={ODS_THEME_COLOR_INTENT.primary}
/>
<OsdsTooltipContent slot="tooltip-content">
{t('egress_tooltip')}
</OsdsTooltipContent>
</OsdsTooltip>
</div>
<OsdsText
className="mb-2"
size={ODS_TEXT_SIZE._400}
level={ODS_TEXT_LEVEL.body}
color={ODS_THEME_COLOR_INTENT.default}
>
{/* {currentState.networking.egressCIDRBlocks.map((ip) => ( */}
{egressCIDRBlocksFake.map((ip) => (
<OsdsClipboard
aria-label="clipboard-egress"
value={ip}
key={ip}
className="m-4"
>
<span slot="success-message">{t('copy')}</span>
<span slot="error-message">{t('error')}</span>
</OsdsClipboard>
))}
</OsdsText>
<OsdsDivider separator />
</div>
</div>
</OsdsTile>
</div>
Expand Down
Loading

0 comments on commit ce66b02

Please sign in to comment.