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..577e1be8f04a --- /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 ( + <> +
+
+ + {t('log_service_displayname_tile_label')} + + {data?.data.displayName || 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..84c0c5727d67 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { ManagerButton } from '@ovh-ux/manager-react-components'; +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 { 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..bc07ca457ce5 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionTile.component.tsx @@ -0,0 +1,34 @@ +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 { 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) => { + return ( + +
+ {subscription.serviceName} + + + + +
+ + ); +}; + +export default SubscriptionTile; 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.component.tsx similarity index 59% rename from packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.tsx rename to packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.component.tsx index 74bcdd671262..86eaa799daed 100644 --- a/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.tsx +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.component.tsx @@ -1,9 +1,15 @@ import React, { useContext } from 'react'; import { Link } from 'react-router-dom'; import { LogsContext } from '../../LogsToCustomer.context'; +import { useLogSubscriptions } from '../../data/hooks/useLogSubscriptions'; +import SubscriptionTile from './SubscriptionTile.component'; export default function LogsSubscriptions() { const { currentLogKind, logApiUrls, logApiVersion } = useContext(LogsContext); + const { data, isLoading, isPending } = useLogSubscriptions( + logApiUrls.logSubscription, + logApiVersion, + ); return (
@@ -19,6 +25,13 @@ export default function LogsSubscriptions() {
  • logApiVersion: {logApiVersion}
    • + {!isPending && + !isLoading && + data?.map((subscription) => { + return ( + + ); + })}
    ); 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..6bc9158fbe62 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts @@ -0,0 +1,42 @@ +import apiClient, { + fetchIcebergV2, + fetchIcebergV6, +} from '@ovh-ux/manager-core-api'; +import { LogSubscription } from '../types/dbaas/logs'; +import { ApiUrls } from '../../LogsToCustomer.module'; + +/** + * LIST log subscription + */ +export const getLogSubscriptionsv2 = async ( + logSubscriptionUrl: ApiUrls['logSubscription'], +) => { + const { data } = await fetchIcebergV2({ + route: logSubscriptionUrl, + }); + return data; +}; + +export const getLogSubscriptionsv6 = async ( + logSubscriptionUrl: ApiUrls['logSubscription'], +) => { + const { data } = await fetchIcebergV6({ + route: logSubscriptionUrl, + }); + 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..22eee9c515fd --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogSubscriptions.tsx @@ -0,0 +1,25 @@ +import { useQuery } from '@tanstack/react-query'; +import { LogApiVersion } from '../types/apiVersion'; +import { ApiUrls } from '../../LogsToCustomer.module'; +import { + getLogSubscriptionsv2, + getLogSubscriptionsv6, +} from '../api/logSubscriptions'; + +export const getLogSubscriptionsQueryKey = (logSubscriptionUrl: string) => [ + 'getLogSubscriptions', + logSubscriptionUrl, +]; + +export const useLogSubscriptions = ( + logSubscriptionUrl: ApiUrls['logSubscription'], + apiVersion: LogApiVersion, +) => { + const queryFunction = + apiVersion === 'v2' ? getLogSubscriptionsv2 : getLogSubscriptionsv6; + + return useQuery({ + queryKey: getLogSubscriptionsQueryKey(logSubscriptionUrl), + queryFn: () => queryFunction(logSubscriptionUrl), + }); +}; 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..4e24c84c7e16 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,11 +1,11 @@ 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() { return (
    - + {/* */}
    ); 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..90b3522ae886 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json @@ -0,0 +1,4 @@ +{ + "log_subscription_serviceName_tile_label": "Nom du service", + "log_subscription_button_unsubscribe_label": "Se désabonner" +} 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); +}