From dd7b9cf19e477fecc699bc5f43bcf12e0b4e4dd9 Mon Sep 17 00:00:00 2001 From: Vincent BONMARCHAND Date: Mon, 16 Dec 2024 09:25:38 +0100 Subject: [PATCH] feat(ldp): subscriptions list implementation ref: MANAGER-15919 Signed-off-by: Vincent BONMARCHAND --- .../SubscriptionEmpty.component.tsx | 45 ++++++++++++ .../SubscriptionLogService.component.tsx | 39 ++++++++++ .../SubscriptionStreamActions.component.tsx | 55 ++++++++++++++ .../SubscriptionStreamTitle.component.tsx | 32 ++++++++ .../SubscriptionTile.component.tsx | 37 ++++++++++ .../subscriptions/Subscriptions.component.tsx | 73 +++++++++++++++++++ .../subscriptions/Subscriptions.spec.tsx | 54 ++++++++++++++ .../subscriptions/Subscriptions.tsx | 25 ------- .../src/data/api/logService.ts | 8 ++ .../src/data/api/logStream.ts | 10 +++ .../src/data/api/logStreamUrl.ts | 13 ++++ .../src/data/api/logSubscriptions.ts | 44 +++++++++++ .../src/data/hooks/useLogService.tsx | 14 ++++ .../src/data/hooks/useLogStream.tsx | 14 ++++ .../src/data/hooks/useLogStreamUrl.tsx | 17 +++++ .../src/data/hooks/useLogSubscriptions.tsx | 28 +++++++ .../src/data/mocks/logSubscription.handler.ts | 25 +++++++ .../src/data/mocks/logSubscription.mock.ts | 22 ++++++ .../src/data/types/dbaas/logs/LogService.ts | 14 ++++ .../src/data/types/dbaas/logs/LogStream.ts | 28 +++++++ .../src/data/types/dbaas/logs/logStreamUrl.ts | 4 + .../src/pages/logs/Logs.page.tsx | 2 +- .../src/test-utils/render-test.tsx | 12 ++- .../src/translations/index.ts | 3 + .../logService/Messages_fr_FR.json | 4 + .../src/translations/logService/index.ts | 27 +++++++ .../logStream/Messages_fr_FR.json | 4 + .../src/translations/logStream/index.ts | 27 +++++++ .../logSubscription/Messages_fr_FR.json | 9 +++ .../src/translations/logSubscription/index.ts | 27 +++++++ 30 files changed, 688 insertions(+), 28 deletions(-) create mode 100644 packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionEmpty.component.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionLogService.component.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamTitle.component.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionTile.component.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.component.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.spec.tsx delete mode 100644 packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/data/api/logService.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/api/logStream.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/api/logStreamUrl.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/hooks/useLogService.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/data/hooks/useLogStream.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/data/hooks/useLogStreamUrl.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/data/hooks/useLogSubscriptions.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/data/mocks/logSubscription.handler.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/mocks/logSubscription.mock.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogService.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogStream.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/logStreamUrl.ts create mode 100644 packages/manager/modules/logs-to-customer/src/translations/logService/Messages_fr_FR.json create mode 100644 packages/manager/modules/logs-to-customer/src/translations/logService/index.ts create mode 100644 packages/manager/modules/logs-to-customer/src/translations/logStream/Messages_fr_FR.json create mode 100644 packages/manager/modules/logs-to-customer/src/translations/logStream/index.ts create mode 100644 packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json create mode 100644 packages/manager/modules/logs-to-customer/src/translations/logSubscription/index.ts diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionEmpty.component.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionEmpty.component.tsx new file mode 100644 index 000000000000..162e55691640 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionEmpty.component.tsx @@ -0,0 +1,45 @@ +import { CommonTitle, LinkType, Links } from '@ovh-ux/manager-react-components'; +import { + ODS_BUTTON_SIZE, + ODS_BUTTON_VARIANT, + ODS_TEXT_COLOR_INTENT, + ODS_TEXT_LEVEL, + ODS_TEXT_SIZE, +} from '@ovhcloud/ods-components'; +import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { OsdsTile, OsdsText, OsdsButton } from '@ovhcloud/ods-components/react'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +const SubscriptionEmpty = () => { + const { t } = useTranslation('logSubscription'); + + return ( + +
+ {t('log_subscription_empty_tile_title')} + + {t('log_subscription_empty_tile_description')} + + + + {t('log_subscription_empty_tile_button_subscribe')} + +
+ + ); +}; + +export default SubscriptionEmpty; diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionLogService.component.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionLogService.component.tsx new file mode 100644 index 000000000000..bd0b5bb4edfe --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionLogService.component.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { CommonTitle } from '@ovh-ux/manager-react-components'; +import { ODS_THEME_TYPOGRAPHY_SIZE } from '@ovhcloud/ods-common-theming'; +import { useLogService } from '../../data/hooks/useLogService'; +import { LogSubscription } from '../../data/types/dbaas/logs'; + +type SubscriptionLogServiceProps = { + subscription: LogSubscription; +}; + +const SubscriptionLogService = ({ + subscription, +}: SubscriptionLogServiceProps) => { + const { t } = useTranslation('logService'); + const { data } = useLogService(subscription.serviceName); + return ( + <> +
+
+ + {data?.data.displayName || subscription.serviceName} + + {subscription.serviceName} +
+
+
+
+ + {t('log_service_username_tile_label')} + + {data?.data.username} +
+
+ + ); +}; + +export default SubscriptionLogService; diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx new file mode 100644 index 000000000000..34c94835dd1f --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { + ODS_BUTTON_VARIANT, + ODS_ICON_NAME, + ODS_ICON_SIZE, +} from '@ovhcloud/ods-components'; +import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { OsdsButton, OsdsIcon } from '@ovhcloud/ods-components/react'; +import { useLogStreamUrl } from '../../data/hooks/useLogStreamUrl'; +import { LogSubscription } from '../../data/types/dbaas/logs'; + +type SubscriptionStreamItemProps = { + subscription: LogSubscription; +}; + +const SubscriptionStreamActions = ({ + subscription, +}: SubscriptionStreamItemProps) => { + const { data } = useLogStreamUrl( + subscription.serviceName, + subscription.streamId, + ); + const { t } = useTranslation('logStream'); + const { t: tSubscription } = useTranslation('logSubscription'); + return ( + <> + + {t('log_stream_button_graylog_watch_label')} + + + + + + {tSubscription('log_subscription_button_unsubscribe_label')} + + + ); +}; + +export default SubscriptionStreamActions; diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamTitle.component.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamTitle.component.tsx new file mode 100644 index 000000000000..fd1e2c1de335 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamTitle.component.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { CommonTitle } from '@ovh-ux/manager-react-components'; +import { ODS_THEME_TYPOGRAPHY_SIZE } from '@ovhcloud/ods-common-theming'; +import { useLogStream } from '../../data/hooks/useLogStream'; +import { LogSubscription } from '../../data/types/dbaas/logs'; + +type SubscriptionStreamItemProps = { + subscription: LogSubscription; +}; + +const SubscriptionStreamTitle = ({ + subscription, +}: SubscriptionStreamItemProps) => { + const { t } = useTranslation('logStream'); + const { data } = useLogStream( + subscription.serviceName, + subscription.streamId, + ); + return ( +
+
+ + {t('log_stream_title_tile_label')} + + {data?.data.title} +
+
+ ); +}; + +export default SubscriptionStreamTitle; diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionTile.component.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionTile.component.tsx new file mode 100644 index 000000000000..32091f392b27 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionTile.component.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { CommonTitle } from '@ovh-ux/manager-react-components'; +import { OsdsDivider, OsdsTile } from '@ovhcloud/ods-components/react'; +import { ODS_DIVIDER_SIZE } from '@ovhcloud/ods-components'; +import { useTranslation } from 'react-i18next'; +import { LogSubscription } from '../../data/types/dbaas/logs'; +import SubscriptionStreamTitle from './SubscriptionStreamTitle.component'; +import SubscriptionStreamActions from './SubscriptionStreamActions.component'; +import SubscriptionLogService from './SubscriptionLogService.component'; + +type SubscriptionTileProps = { + subscription: LogSubscription; +}; + +const SubscriptionTile = ({ subscription }: SubscriptionTileProps) => { + const { t } = useTranslation('logSubscription'); + + return ( + +
+ {t('log_subscription_tile_title')} + + + + +
+ + ); +}; + +export default SubscriptionTile; diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.component.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.component.tsx new file mode 100644 index 000000000000..06d8c5f3669a --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.component.tsx @@ -0,0 +1,73 @@ +import React, { useContext } from 'react'; +import { OsdsSpinner } from '@ovhcloud/ods-components/react'; +import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components'; +import { useQueryClient } from '@tanstack/react-query'; +import { LogsContext } from '../../LogsToCustomer.context'; +import { + getLogSubscriptionsQueryKey, + useLogSubscriptions, +} from '../../data/hooks/useLogSubscriptions'; +import SubscriptionTile from './SubscriptionTile.component'; +import SubscriptionEmpty from './SubscriptionEmpty.component'; +import ApiError from '../apiError/ApiError.component'; + +export default function LogsSubscriptions() { + const queryClient = useQueryClient(); + const { currentLogKind, logApiUrls, logApiVersion } = useContext(LogsContext); + const { data, isLoading, isPending, error } = useLogSubscriptions( + logApiUrls.logSubscription, + logApiVersion, + currentLogKind, + ); + + if (!currentLogKind) { + return ( +
+ +
+ ); + } + + if (isLoading || isPending) + return ( +
+ +
+ ); + + if (error) + return ( + + queryClient.refetchQueries({ + queryKey: getLogSubscriptionsQueryKey( + logApiUrls.logSubscription, + currentLogKind, + ), + }) + } + /> + ); + + if (data?.length === 0) return ; + + return ( +
+ {data.map((subscription) => ( + + ))} +
+ ); +} diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.spec.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.spec.tsx new file mode 100644 index 000000000000..33388bf958e5 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.spec.tsx @@ -0,0 +1,54 @@ +import { screen, waitFor } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; +import { renderTest } from '../../test-utils'; + +describe('Subscription list', () => { + it('should display an error if /log/kind api is KO', async () => { + await renderTest({ isLogKindsKO: true }); + + await waitFor(() => expect(screen.getByText('error_title')).toBeDefined(), { + timeout: 10_000, + }); + }); + + it('should render a loading state when the kinds api request is pending', async () => { + await renderTest(); + + expect(screen.getByTestId('logKinds-spinner')).toBeVisible(); + }); + + it('should display an error if /log/subscription api is KO', async () => { + await renderTest({ isLogSubscriptionKO: true }); + + await waitFor(() => expect(screen.getByText('error_title')).toBeDefined(), { + timeout: 10_000, + }); + }); + + it('should render an empty state when there is no subscriptions', async () => { + await renderTest({ nbLogSubscription: 0 }); + + await waitFor( + () => + expect( + screen.getByText('log_subscription_empty_tile_description'), + ).toBeDefined(), + { + timeout: 10_000, + }, + ); + }); + it('should render two subscriptions tile', async () => { + await renderTest({ nbLogSubscription: 2 }); + + await waitFor( + () => + expect(screen.getAllByText('log_subscription_tile_title')).toHaveLength( + 2, + ), + { + timeout: 10_000, + }, + ); + }); +}); diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.tsx deleted file mode 100644 index 74bcdd671262..000000000000 --- a/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useContext } from 'react'; -import { Link } from 'react-router-dom'; -import { LogsContext } from '../../LogsToCustomer.context'; - -export default function LogsSubscriptions() { - const { currentLogKind, logApiUrls, logApiVersion } = useContext(LogsContext); - - return ( -
-

Subscriptions

- data-streams -
    -
  • - CurrentLogKind: {currentLogKind?.displayName} -
    • -
  • - logSubscriptionUrl: {logApiUrls.logSubscription} -
    • -
  • - logApiVersion: {logApiVersion} -
    • -
-
- ); -} diff --git a/packages/manager/modules/logs-to-customer/src/data/api/logService.ts b/packages/manager/modules/logs-to-customer/src/data/api/logService.ts new file mode 100644 index 000000000000..444c920591ef --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/api/logService.ts @@ -0,0 +1,8 @@ +import apiClient from '@ovh-ux/manager-core-api'; +import { LogService } from '../types/dbaas/logs/LogService'; + +/** + * GET log service infos + */ +export const getLogServicev6 = async (serviceName: string) => + apiClient.v6.get(`/dbaas/logs/${serviceName}`); diff --git a/packages/manager/modules/logs-to-customer/src/data/api/logStream.ts b/packages/manager/modules/logs-to-customer/src/data/api/logStream.ts new file mode 100644 index 000000000000..0eea24806ba8 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/api/logStream.ts @@ -0,0 +1,10 @@ +import apiClient from '@ovh-ux/manager-core-api'; +import { LogStream } from '../types/dbaas/logs/LogStream'; + +/** + * GET log stream + */ +export const getLogStreamv6 = async (serviceName: string, streamId: string) => + apiClient.v6.get( + `/dbaas/logs/${serviceName}/output/graylog/stream/${streamId}`, + ); diff --git a/packages/manager/modules/logs-to-customer/src/data/api/logStreamUrl.ts b/packages/manager/modules/logs-to-customer/src/data/api/logStreamUrl.ts new file mode 100644 index 000000000000..effea047a999 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/api/logStreamUrl.ts @@ -0,0 +1,13 @@ +import apiClient from '@ovh-ux/manager-core-api'; +import { LogStreamUrl } from '../types/dbaas/logs/logStreamUrl'; + +/** + * GET log stream url + */ +export const getLogStreamUrlv6 = async ( + serviceName: string, + streamId: string, +) => + apiClient.v6.get( + `/dbaas/logs/${serviceName}/output/graylog/stream/${streamId}/url`, + ); diff --git a/packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts b/packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts new file mode 100644 index 000000000000..cb0e5cc2b453 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts @@ -0,0 +1,44 @@ +import apiClient, { + fetchIcebergV2, + fetchIcebergV6, +} from '@ovh-ux/manager-core-api'; +import { LogKind, LogSubscription } from '../types/dbaas/logs'; +import { ApiUrls } from '../../LogsToCustomer.module'; + +/** + * LIST log subscription + */ +export const getLogSubscriptionsv2 = async ( + logSubscriptionUrl: ApiUrls['logSubscription'], + logKind: LogKind, +) => { + const { data } = await fetchIcebergV2({ + route: `${logSubscriptionUrl}?kind=${logKind.name}`, + }); + return data; +}; + +export const getLogSubscriptionsv6 = async ( + logSubscriptionUrl: ApiUrls['logSubscription'], + logKind: LogKind, +) => { + const { data } = await fetchIcebergV6({ + route: `${logSubscriptionUrl}?kind=${logKind.name}`, + }); + return data; +}; + +/** + * GET log subscription + */ +export const getLogSubscriptionv2 = async ( + logSubscriptionUrl: ApiUrls['logSubscription'], + subscriptionId: string, +) => + apiClient.v2.get(`${logSubscriptionUrl}/${subscriptionId}`); + +export const getLogSubscriptionv6 = async ( + logSubscriptionUrl: ApiUrls['logSubscription'], + subscriptionId: string, +) => + apiClient.v6.get(`${logSubscriptionUrl}/${subscriptionId}`); diff --git a/packages/manager/modules/logs-to-customer/src/data/hooks/useLogService.tsx b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogService.tsx new file mode 100644 index 000000000000..08ade588427b --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogService.tsx @@ -0,0 +1,14 @@ +import { useQuery } from '@tanstack/react-query'; +import { getLogServicev6 } from '../api/logService'; + +export const getLogServiceQueryKey = (serviceName: string) => [ + 'getLogStream', + `/dbaas/logs/${serviceName}`, +]; + +export const useLogService = (serviceName: string) => { + return useQuery({ + queryKey: getLogServiceQueryKey(serviceName), + queryFn: () => getLogServicev6(serviceName), + }); +}; diff --git a/packages/manager/modules/logs-to-customer/src/data/hooks/useLogStream.tsx b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogStream.tsx new file mode 100644 index 000000000000..6086e3860b77 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogStream.tsx @@ -0,0 +1,14 @@ +import { useQuery } from '@tanstack/react-query'; +import { getLogStreamv6 } from '../api/logStream'; + +export const getLogStreamQueryKey = (serviceName: string, streamId: string) => [ + 'getLogStream', + `/dbaas/logs/${serviceName}/output/graylog/stream/${streamId}`, +]; + +export const useLogStream = (serviceName: string, streamId: string) => { + return useQuery({ + queryKey: getLogStreamQueryKey(serviceName, streamId), + queryFn: () => getLogStreamv6(serviceName, streamId), + }); +}; diff --git a/packages/manager/modules/logs-to-customer/src/data/hooks/useLogStreamUrl.tsx b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogStreamUrl.tsx new file mode 100644 index 000000000000..9296faf61a95 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogStreamUrl.tsx @@ -0,0 +1,17 @@ +import { useQuery } from '@tanstack/react-query'; +import { getLogStreamUrlv6 } from '../api/logStreamUrl'; + +export const getLogStreamUrlQueryKey = ( + serviceName: string, + streamId: string, +) => [ + 'getLogStream', + `/dbaas/logs/${serviceName}/output/graylog/stream/${streamId}/url`, +]; + +export const useLogStreamUrl = (serviceName: string, streamId: string) => { + return useQuery({ + queryKey: getLogStreamUrlQueryKey(serviceName, streamId), + queryFn: () => getLogStreamUrlv6(serviceName, streamId), + }); +}; diff --git a/packages/manager/modules/logs-to-customer/src/data/hooks/useLogSubscriptions.tsx b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogSubscriptions.tsx new file mode 100644 index 000000000000..8b04ec2e4f33 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogSubscriptions.tsx @@ -0,0 +1,28 @@ +import { useQuery } from '@tanstack/react-query'; +import { LogApiVersion } from '../types/apiVersion'; +import { ApiUrls } from '../../LogsToCustomer.module'; +import { + getLogSubscriptionsv2, + getLogSubscriptionsv6, +} from '../api/logSubscriptions'; +import { LogKind } from '../types/dbaas/logs'; + +export const getLogSubscriptionsQueryKey = ( + logSubscriptionUrl: string, + logKind?: LogKind, +) => ['getLogSubscriptions', logSubscriptionUrl, logKind?.name]; + +export const useLogSubscriptions = ( + logSubscriptionUrl: ApiUrls['logSubscription'], + apiVersion: LogApiVersion, + logKind?: LogKind, +) => { + const queryFunction = + apiVersion === 'v2' ? getLogSubscriptionsv2 : getLogSubscriptionsv6; + + return useQuery({ + queryKey: getLogSubscriptionsQueryKey(logSubscriptionUrl, logKind), + queryFn: () => queryFunction(logSubscriptionUrl, logKind), + enabled: !!logKind, + }); +}; diff --git a/packages/manager/modules/logs-to-customer/src/data/mocks/logSubscription.handler.ts b/packages/manager/modules/logs-to-customer/src/data/mocks/logSubscription.handler.ts new file mode 100644 index 000000000000..3b3a09181c0d --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/mocks/logSubscription.handler.ts @@ -0,0 +1,25 @@ +import { Handler } from '../../../../../../../playwright-helpers'; +import { testLogUrl } from '../../test-utils/test.constant'; +import { logSubscriptionsMock } from './logSubscription.mock'; + +export type GetLogSubscriptionsMocksParams = { + baseUrl?: string; + isLogSubscriptionKO?: boolean; + nbLogSubscription?: number; +}; + +export const LogSubscriptionsError = 'log subscription error'; + +export const getLogSubscriptionsMocks = ({ + isLogSubscriptionKO, + nbLogSubscription = logSubscriptionsMock.length, +}: GetLogSubscriptionsMocksParams): Handler[] => [ + { + url: testLogUrl, + response: isLogSubscriptionKO + ? { message: LogSubscriptionsError } + : logSubscriptionsMock.slice(0, nbLogSubscription), + status: isLogSubscriptionKO ? 500 : 200, + api: 'v2', + }, +]; diff --git a/packages/manager/modules/logs-to-customer/src/data/mocks/logSubscription.mock.ts b/packages/manager/modules/logs-to-customer/src/data/mocks/logSubscription.mock.ts new file mode 100644 index 000000000000..4faa9ff77847 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/mocks/logSubscription.mock.ts @@ -0,0 +1,22 @@ +import { LogSubscription, LogSubscriptionResource } from '../types/dbaas/logs'; + +export const logSubscriptionsMock: LogSubscription[] = [ + { + serviceName: 'SubscriptionMock', + createdAt: '2024-10-23T15:24:23Z', + kind: 'B5F995F2-BE9C-4805-8910-9A4E5DD25EBF', + updatedAt: '2024-10-23T15:24:23Z', + subscriptionId: 'B5F995F2-BE9C-4805-8910-9A4E5DD25EBF', + streamId: 'F995F2-BE9C-4805-8910-9A4E', + resource: { name: 'audit-rest', type: '' } as LogSubscriptionResource, + }, + { + serviceName: 'SubscriptionMock2', + createdAt: '2024-10-23T15:24:23Z', + kind: 'B5F995F2-BE9C-4805-8910-9A4E5DD25EBF', + updatedAt: '2024-10-23T15:24:23Z', + subscriptionId: 'B5F995F2-BE9C-4805-8910-9A4E5BF', + streamId: 'F995F2-BE9C-4805-8910-9A4E', + resource: { name: 'audit-rest', type: '' } as LogSubscriptionResource, + }, +]; diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogService.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogService.ts new file mode 100644 index 000000000000..f3e0221271e6 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogService.ts @@ -0,0 +1,14 @@ +import { IamObject } from '@ovh-ux/manager-react-components'; + +export interface LogService { + createdAt: string; + displayName: string; + iam: IamObject; + isClusterOwner: boolean; + isIamEnabled: boolean; + plan: string; + serviceName: string; + state: string; + updatedAt: string; + username: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogStream.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogStream.ts new file mode 100644 index 000000000000..a8b7412c13c6 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogStream.ts @@ -0,0 +1,28 @@ +export interface LogStream { + canAlert: boolean; + clusterId: string; + coldStorageCompression: string; + coldStorageContent: string; + coldStorageEnabled: boolean; + coldStorageNotifyEnabled: boolean; + coldStorageRetention: number; + coldStorageTarget: string; + createdAt: string; + description: string; + encryptionKeysIds: string[]; + indexingCurrentSize: number; + indexingEnabled: boolean; + indexingMaxSize: number; + indexingNotifyEnabled: boolean; + isEditable: boolean; + nbAlertCondition: number; + nbArchive: number; + nbSubscription: number; + parentStreamId: string; + pauseIndexingOnMaxSize: boolean; + retentionId: string; + streamId: string; + title: string; + updatedAt: string; + webSocketEnabled: boolean; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/logStreamUrl.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/logStreamUrl.ts new file mode 100644 index 000000000000..7f23455894ac --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/logStreamUrl.ts @@ -0,0 +1,4 @@ +export interface LogStreamUrl { + address: string; + type: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx b/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx index 95fdbcb7ac5c..cf13bb0894eb 100644 --- a/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx +++ b/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import LogsSubscriptions from '../../components/subscriptions/Subscriptions'; +import LogsSubscriptions from '../../components/subscriptions/Subscriptions.component'; import LogsTail from '../../components/logTail/LogTail'; export default function Logs() { diff --git a/packages/manager/modules/logs-to-customer/src/test-utils/render-test.tsx b/packages/manager/modules/logs-to-customer/src/test-utils/render-test.tsx index f72b614a89c8..747b27d3165f 100644 --- a/packages/manager/modules/logs-to-customer/src/test-utils/render-test.tsx +++ b/packages/manager/modules/logs-to-customer/src/test-utils/render-test.tsx @@ -8,15 +8,23 @@ import { } from '../data/mocks/logKind.handler'; import { toMswHandlers } from '../../../../../../playwright-helpers'; import { MockedAppPageLabel } from './MockedAppPage'; +import { + GetLogSubscriptionsMocksParams, + getLogSubscriptionsMocks, +} from '../data/mocks/logSubscription.handler'; export const renderTest = async ({ initialRoute, ...mockParams }: { initialRoute?: string; -} & GetLogKindsMocksParams = {}) => { +} & GetLogKindsMocksParams & + GetLogSubscriptionsMocksParams = {}) => { ((global as unknown) as { server: SetupServer }).server?.resetHandlers( - ...toMswHandlers([...getLogKindsMocks(mockParams)]), + ...toMswHandlers([ + ...getLogKindsMocks(mockParams), + ...getLogSubscriptionsMocks(mockParams), + ]), ); const result = render(); diff --git a/packages/manager/modules/logs-to-customer/src/translations/index.ts b/packages/manager/modules/logs-to-customer/src/translations/index.ts index 151249fb58e7..3cd6d22c335b 100644 --- a/packages/manager/modules/logs-to-customer/src/translations/index.ts +++ b/packages/manager/modules/logs-to-customer/src/translations/index.ts @@ -1,2 +1,5 @@ import './logKind'; import './error'; +import './logStream'; +import './logService'; +import './logSubscription'; diff --git a/packages/manager/modules/logs-to-customer/src/translations/logService/Messages_fr_FR.json b/packages/manager/modules/logs-to-customer/src/translations/logService/Messages_fr_FR.json new file mode 100644 index 000000000000..ea75fe1e677d --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/translations/logService/Messages_fr_FR.json @@ -0,0 +1,4 @@ +{ + "log_service_displayname_tile_label": "Nom d'affichage", + "log_service_username_tile_label": "Utilisateur" +} diff --git a/packages/manager/modules/logs-to-customer/src/translations/logService/index.ts b/packages/manager/modules/logs-to-customer/src/translations/logService/index.ts new file mode 100644 index 000000000000..a351c2cc8ce6 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/translations/logService/index.ts @@ -0,0 +1,27 @@ +import i18next from 'i18next'; + +// import de_DE from './Messages_de_DE.json'; +// import en_GB from './Messages_en_GB.json'; +// import es_ES from './Messages_es_ES.json'; +// import fr_CA from './Messages_fr_CA.json'; +import fr_FR from './Messages_fr_FR.json'; +// import it_IT from './Messages_it_IT.json'; +// import pl_PL from './Messages_pl_PL.json'; +// import pt_PT from './Messages_pt_PT.json'; + +function addTranslations() { + // i18next.addResources('de_DE', 'logService', de_DE); + // i18next.addResources('en_GB', 'logService', en_GB); + // i18next.addResources('es_ES', 'logService', es_ES); + // i18next.addResources('fr_CA', 'logService', fr_CA); + i18next.addResources('fr_FR', 'logService', fr_FR); + // i18next.addResources('it_IT', 'logService', it_IT); + // i18next.addResources('pl_PL', 'logService', pl_PL); + // i18next.addResources('pt_PT', 'logService', pt_PT); +} + +if (i18next.isInitialized) { + addTranslations(); +} else { + i18next.on('initialized', addTranslations); +} diff --git a/packages/manager/modules/logs-to-customer/src/translations/logStream/Messages_fr_FR.json b/packages/manager/modules/logs-to-customer/src/translations/logStream/Messages_fr_FR.json new file mode 100644 index 000000000000..a01d0699fcad --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/translations/logStream/Messages_fr_FR.json @@ -0,0 +1,4 @@ +{ + "log_stream_title_tile_label": "Flux de données", + "log_stream_button_graylog_watch_label": "Observer sur Graylog" +} diff --git a/packages/manager/modules/logs-to-customer/src/translations/logStream/index.ts b/packages/manager/modules/logs-to-customer/src/translations/logStream/index.ts new file mode 100644 index 000000000000..fe5a2a9c9cf1 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/translations/logStream/index.ts @@ -0,0 +1,27 @@ +import i18next from 'i18next'; + +// import de_DE from './Messages_de_DE.json'; +// import en_GB from './Messages_en_GB.json'; +// import es_ES from './Messages_es_ES.json'; +// import fr_CA from './Messages_fr_CA.json'; +import fr_FR from './Messages_fr_FR.json'; +// import it_IT from './Messages_it_IT.json'; +// import pl_PL from './Messages_pl_PL.json'; +// import pt_PT from './Messages_pt_PT.json'; + +function addTranslations() { + // i18next.addResources('de_DE', 'logStream', de_DE); + // i18next.addResources('en_GB', 'logStream', en_GB); + // i18next.addResources('es_ES', 'logStream', es_ES); + // i18next.addResources('fr_CA', 'logStream', fr_CA); + i18next.addResources('fr_FR', 'logStream', fr_FR); + // i18next.addResources('it_IT', 'logStream', it_IT); + // i18next.addResources('pl_PL', 'logStream', pl_PL); + // i18next.addResources('pt_PT', 'logStream', pt_PT); +} + +if (i18next.isInitialized) { + addTranslations(); +} else { + i18next.on('initialized', addTranslations); +} diff --git a/packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json b/packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json new file mode 100644 index 000000000000..91df0826e68c --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json @@ -0,0 +1,9 @@ +{ + "log_subscription_tile_title": "Ces logs sont transférés dans Logs Data Platform", + "log_subscription_serviceName_tile_label": "Nom du service", + "log_subscription_button_unsubscribe_label": "Se désabonner", + "log_subscription_empty_tile_title": "Flux", + "log_subscription_empty_tile_description": "En vous abonnant à ce flux, vous pouvez transférer vos logs directement dans Logs Data Platform d'OVHcloud qui vous permet de faire des recherches plus avancées, créer des alertes et des visualisations ou bien tout simplement les archiver.", + "log_subscription_empty_tile_button_know_more": "En savoir plus sur Logs Data Platform", + "log_subscription_empty_tile_button_subscribe": "S'abonner" +} diff --git a/packages/manager/modules/logs-to-customer/src/translations/logSubscription/index.ts b/packages/manager/modules/logs-to-customer/src/translations/logSubscription/index.ts new file mode 100644 index 000000000000..5295fcdc5d17 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/translations/logSubscription/index.ts @@ -0,0 +1,27 @@ +import i18next from 'i18next'; + +// import de_DE from './Messages_de_DE.json'; +// import en_GB from './Messages_en_GB.json'; +// import es_ES from './Messages_es_ES.json'; +// import fr_CA from './Messages_fr_CA.json'; +import fr_FR from './Messages_fr_FR.json'; +// import it_IT from './Messages_it_IT.json'; +// import pl_PL from './Messages_pl_PL.json'; +// import pt_PT from './Messages_pt_PT.json'; + +function addTranslations() { + // i18next.addResources('de_DE', 'logSubscription', de_DE); + // i18next.addResources('en_GB', 'logSubscription', en_GB); + // i18next.addResources('es_ES', 'logSubscription', es_ES); + // i18next.addResources('fr_CA', 'logSubscription', fr_CA); + i18next.addResources('fr_FR', 'logSubscription', fr_FR); + // i18next.addResources('it_IT', 'logSubscription', it_IT); + // i18next.addResources('pl_PL', 'logSubscription', pl_PL); + // i18next.addResources('pt_PT', 'logSubscription', pt_PT); +} + +if (i18next.isInitialized) { + addTranslations(); +} else { + i18next.on('initialized', addTranslations); +}