From 9af1e9e9369c18a2804b98799d04f5711ed58b07 Mon Sep 17 00:00:00 2001 From: Romain Jamet Date: Tue, 26 Nov 2024 14:50:23 +0100 Subject: [PATCH 1/2] feat(logs): init logs-to-customer module ref: MANAGER-15966 Signed-off-by: Romain Jamet --- .../modules/logs-to-customer/package.json | 43 ++++++++ .../src/LogsToCustomer.context.tsx | 11 ++ .../src/LogsToCustomer.module.tsx | 100 ++++++++++++++++++ .../logKindsSelector.component.tsx | 46 ++++++++ .../translations/Messages_fr_FR.json | 3 + .../logKindsSelector/translations/index.ts | 27 +++++ .../src/components/logTail/LogTail.tsx | 20 ++++ .../subscriptions/Subscriptions.tsx | 22 ++++ .../logs-to-customer/src/data/api/logKinds.ts | 31 ++++++ .../src/data/hooks/useLogKinds.tsx | 23 ++++ .../src/data/types/apiVersion.ts | 1 + .../src/data/types/dbaas/index.ts | 3 + .../src/data/types/dbaas/logs/LogKind.ts | 15 +++ .../data/types/dbaas/logs/LogSubscription.ts | 19 ++++ .../dbaas/logs/LogSubscriptionCreation.ts | 7 ++ .../dbaas/logs/LogSubscriptionResource.ts | 7 ++ .../dbaas/logs/LogSubscriptionResponse.ts | 7 ++ .../data/types/dbaas/logs/LogUrlCreation.ts | 5 + .../types/dbaas/logs/TemporaryLogsLink.ts | 7 ++ .../src/data/types/dbaas/logs/index.ts | 7 ++ .../modules/logs-to-customer/src/index.ts | 1 + .../pages/data-streams/Data-streams.page.tsx | 22 ++++ .../src/pages/logs/Logs.page.tsx | 12 +++ .../logs-to-customer/src/routes/routes.tsx | 23 ++++ .../logs-to-customer/tailwind.config.js | 7 ++ .../modules/logs-to-customer/tsconfig.json | 22 ++++ .../modules/logs-to-customer/vite.config.mjs | 20 ++++ 27 files changed, 511 insertions(+) create mode 100644 packages/manager/modules/logs-to-customer/package.json create mode 100644 packages/manager/modules/logs-to-customer/src/LogsToCustomer.context.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/LogsToCustomer.module.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/components/logKindsSelector/logKindsSelector.component.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/components/logKindsSelector/translations/Messages_fr_FR.json create mode 100644 packages/manager/modules/logs-to-customer/src/components/logKindsSelector/translations/index.ts create mode 100644 packages/manager/modules/logs-to-customer/src/components/logTail/LogTail.tsx create 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/logKinds.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/hooks/useLogKinds.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/apiVersion.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/index.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogKind.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscription.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionCreation.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionResource.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionResponse.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogUrlCreation.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/TemporaryLogsLink.ts create mode 100644 packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/index.ts create mode 100644 packages/manager/modules/logs-to-customer/src/index.ts create mode 100644 packages/manager/modules/logs-to-customer/src/pages/data-streams/Data-streams.page.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/routes/routes.tsx create mode 100644 packages/manager/modules/logs-to-customer/tailwind.config.js create mode 100644 packages/manager/modules/logs-to-customer/tsconfig.json create mode 100644 packages/manager/modules/logs-to-customer/vite.config.mjs diff --git a/packages/manager/modules/logs-to-customer/package.json b/packages/manager/modules/logs-to-customer/package.json new file mode 100644 index 000000000000..6b8593017263 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/package.json @@ -0,0 +1,43 @@ +{ + "name": "@ovh-ux/logs-to-customer", + "version": "1.0.0", + "private": true, + "description": "", + "license": "BSD-3-Clause", + "author": "OVH SAS", + "type": "module", + "main": "./src/index.ts", + "scripts": { + "dev": "tsc" + }, + "dependencies": {}, + "devDependencies": { + "@ovh-ux/manager-core-api": "^0.9.0", + "@ovh-ux/manager-react-components": "^1.41.1", + "@ovh-ux/manager-vite-config": "^0.8.2", + "@testing-library/react": "^16.0.0", + "@vitejs/plugin-react": "^4.2.1", + "react-i18next": "^14.0.5", + "tailwindcss": "^3.4.4", + "typescript": "^4.3.2", + "vite": "^5.2.13", + "vitest": "^1.2.0" + }, + "peerDependencies": { + "@ovh-ux/manager-core-api": "^0.9.0", + "@ovh-ux/manager-react-components": "^1.41.1", + "@ovh-ux/manager-react-shell-client": "^0.8.1", + "@ovh-ux/manager-tailwind-config": "^0.2.0", + "@ovhcloud/ods-common-core": "17.2.2", + "@ovhcloud/ods-common-theming": "17.2.2", + "@ovhcloud/ods-components": "17.2.2", + "@ovhcloud/ods-theme-blue-jeans": "17.2.2", + "@tanstack/react-query": "^5.51.21", + "i18next": "^23.8.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-i18next": "^14.0.5", + "react-router": "^6.21.3", + "react-router-dom": "^6.3.0" + } +} diff --git a/packages/manager/modules/logs-to-customer/src/LogsToCustomer.context.tsx b/packages/manager/modules/logs-to-customer/src/LogsToCustomer.context.tsx new file mode 100644 index 000000000000..486fddb535dc --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/LogsToCustomer.context.tsx @@ -0,0 +1,11 @@ +import { createContext } from 'react'; +import { LogKind } from './data/types/dbaas/logs'; + +export interface LogProviderProps { + currentLogKind?: LogKind; + logApiBaseUrl: string; +} + +export const LogsContext = createContext({ + logApiBaseUrl: '', +}); diff --git a/packages/manager/modules/logs-to-customer/src/LogsToCustomer.module.tsx b/packages/manager/modules/logs-to-customer/src/LogsToCustomer.module.tsx new file mode 100644 index 000000000000..4539df40f306 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/LogsToCustomer.module.tsx @@ -0,0 +1,100 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { Outlet } from 'react-router-dom'; +import { useQueryClient } from '@tanstack/react-query'; +import { + OsdsButton, + OsdsMessage, + OsdsSpinner, + OsdsText, +} from '@ovhcloud/ods-components/react'; +import { + ODS_BUTTON_SIZE, + ODS_BUTTON_VARIANT, + ODS_MESSAGE_TYPE, + ODS_SPINNER_SIZE, +} from '@ovhcloud/ods-components'; +import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { getLogKindsQueryKey, useLogKinds } from './data/hooks/useLogKinds'; +import LogKindsSelector from './components/logKindsSelector/LogKindsSelector.component'; +import { LogKind } from './data/types/dbaas/logs'; +import { LogApiVersion } from './data/types/apiVersion'; +import { LogsContext } from './LogsToCustomer.context'; + +export interface ILogsToCustomerModule { + logApiBaseUrl: string; + logApiVersion: LogApiVersion; +} + +export default function LogsToCustomerModule({ + logApiBaseUrl, + logApiVersion, +}: Readonly) { + const queryClient = useQueryClient(); + const [currentLogKind, setCurrentLogKind] = useState(); + + const { data: logKinds, error, isPending } = useLogKinds({ + baseUrl: logApiBaseUrl, + apiVersion: logApiVersion, + }); + + useEffect(() => { + if (!isPending && logKinds?.length > 0) setCurrentLogKind(logKinds[0]); + }, [logKinds, isPending]); + + const LogsContextValues = useMemo( + () => ({ + currentLogKind, + logApiBaseUrl, + }), + [currentLogKind, logApiBaseUrl], + ); + + if (isPending) + return ( +
+ +
+ ); + + if (error) + return ( +
+ + +
Une erreur est survenue
+ {error && {error.message}} + + + + queryClient.refetchQueries({ + queryKey: getLogKindsQueryKey(logApiBaseUrl), + }) + } + > + reload logs + +
+ ); + + if (logKinds.length === 0) return
no logkinds
; + + return ( +
+ + + + +
+ ); +} diff --git a/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/logKindsSelector.component.tsx b/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/logKindsSelector.component.tsx new file mode 100644 index 000000000000..91ddd578f3a0 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/logKindsSelector.component.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Description } from '@ovh-ux/manager-react-components'; +import { OsdsSelect, OsdsSelectOption } from '@ovhcloud/ods-components/react'; +import './translations'; +import { LogKind } from '../../data/types/dbaas/logs'; + +interface ILogKindsSelector { + logKinds: LogKind[]; + currentLogKind: LogKind; + setCurrentLogKind: React.Dispatch>; +} + +export default function LogKindsSelector({ + logKinds, + currentLogKind, + setCurrentLogKind, +}: Readonly) { + const { t } = useTranslation('logKindsSelector'); + + // TODO: Design Specs for usecase: One kind. + if (logKinds.length === 1) { + return
{logKinds[0].displayName}
; + } + + return ( +
+ {t('logKindsSelector_select_label')} + { + const newLogKind = logKinds.find( + (k) => k.kindId === event.detail.value, + ); + setCurrentLogKind(newLogKind); + }} + > + {logKinds.map((k) => ( + + {k.displayName} + + ))} + +
+ ); +} diff --git a/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/translations/Messages_fr_FR.json b/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/translations/Messages_fr_FR.json new file mode 100644 index 000000000000..51415b42bc01 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/translations/Messages_fr_FR.json @@ -0,0 +1,3 @@ +{ + "logKindsSelector_select_label": "Sélectionnez le type de log" +} diff --git a/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/translations/index.ts b/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/translations/index.ts new file mode 100644 index 000000000000..7f988cd2dd0f --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/logKindsSelector/translations/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', 'logKindsSelector', de_DE); + // i18next.addResources('en_GB', 'logKindsSelector', en_GB); + // i18next.addResources('es_ES', 'logKindsSelector', es_ES); + // i18next.addResources('fr_CA', 'logKindsSelector', fr_CA); + i18next.addResources('fr_FR', 'logKindsSelector', fr_FR); + // i18next.addResources('it_IT', 'logKindsSelector', it_IT); + // i18next.addResources('pl_PL', 'logKindsSelector', pl_PL); + // i18next.addResources('pt_PT', 'logKindsSelector', pt_PT); +} + +if (i18next.isInitialized) { + addTranslations(); +} else { + i18next.on('initialized', addTranslations); +} diff --git a/packages/manager/modules/logs-to-customer/src/components/logTail/LogTail.tsx b/packages/manager/modules/logs-to-customer/src/components/logTail/LogTail.tsx new file mode 100644 index 000000000000..e8c414866d65 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/logTail/LogTail.tsx @@ -0,0 +1,20 @@ +import React, { useContext } from 'react'; +import { LogsContext } from '../../LogsToCustomer.context'; + +export default function LogsTail() { + const { currentLogKind, logApiBaseUrl } = useContext(LogsContext); + + return ( +
+

Live tail

+
    +
  • + CurrentLogKind: {currentLogKind?.displayName} +
    • +
  • + logApiBaseUrl: {logApiBaseUrl} +
    • +
+
+ ); +} 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 new file mode 100644 index 000000000000..bcd2791cc58e --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.tsx @@ -0,0 +1,22 @@ +import React, { useContext } from 'react'; +import { Link } from 'react-router-dom'; +import { LogsContext } from '../../LogsToCustomer.context'; + +export default function LogsSubscriptions() { + const { currentLogKind, logApiBaseUrl } = useContext(LogsContext); + + return ( +
+

Subscriptions

+ data-streams +
    +
  • + CurrentLogKind: {currentLogKind?.displayName} +
    • +
  • + logApiBaseUrl: {logApiBaseUrl} +
    • +
+
+ ); +} diff --git a/packages/manager/modules/logs-to-customer/src/data/api/logKinds.ts b/packages/manager/modules/logs-to-customer/src/data/api/logKinds.ts new file mode 100644 index 000000000000..5f8cf18b1da1 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/api/logKinds.ts @@ -0,0 +1,31 @@ +import apiClient, { + fetchIcebergV2, + fetchIcebergV6, +} from '@ovh-ux/manager-core-api'; +import { LogKind } from '../types/dbaas/logs'; + +/** + * LIST log kinds + */ +export const getLogKindsv2 = async (baseUrl: string) => { + const { data } = await fetchIcebergV2({ + route: `${baseUrl}/kind`, + }); + return data; +}; + +export const getLogKindsv6 = async (baseUrl: string) => { + const { data } = await fetchIcebergV6({ + route: `${baseUrl}/kind`, + }); + return data; +}; + +/** + * GET log kind + */ +export const getLogKindv2 = async (baseUrl: string, name: string) => + apiClient.v2.get(`${baseUrl}/kind/${name}`); + +export const getLogKindv6 = async (baseUrl: string, name: string) => + apiClient.v6.get(`${baseUrl}/kind/${name}`); diff --git a/packages/manager/modules/logs-to-customer/src/data/hooks/useLogKinds.tsx b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogKinds.tsx new file mode 100644 index 000000000000..37520209dc6b --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/hooks/useLogKinds.tsx @@ -0,0 +1,23 @@ +import { useQuery } from '@tanstack/react-query'; +import { getLogKindsv2, getLogKindsv6 } from '../api/logKinds'; +import { LogApiVersion } from '../types/apiVersion'; + +export const getLogKindsQueryKey = (baseUrl: string) => [ + 'getLogKinds', + baseUrl, +]; + +export const useLogKinds = ({ + baseUrl, + apiVersion, +}: { + baseUrl: string; + apiVersion: LogApiVersion; +}) => { + const queryFunction = apiVersion === 'v2' ? getLogKindsv2 : getLogKindsv6; + + return useQuery({ + queryKey: getLogKindsQueryKey(baseUrl), + queryFn: () => queryFunction(baseUrl), + }); +}; diff --git a/packages/manager/modules/logs-to-customer/src/data/types/apiVersion.ts b/packages/manager/modules/logs-to-customer/src/data/types/apiVersion.ts new file mode 100644 index 000000000000..2fe88e6b7b3c --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/apiVersion.ts @@ -0,0 +1 @@ +export type LogApiVersion = 'v2' | 'v6'; diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/index.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/index.ts new file mode 100644 index 000000000000..af1d30004a6a --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/index.ts @@ -0,0 +1,3 @@ +import * as logs from './logs/index'; + +export { logs }; diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogKind.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogKind.ts new file mode 100644 index 000000000000..487e2f66c8ee --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogKind.ts @@ -0,0 +1,15 @@ +/** Log kind */ +export interface LogKind { + /** List of additional log fields managed in this log kind */ + additionalReturnedFields: string[]; + /** Creation date of the log kind */ + createdAt: string; + /** Log kind display name */ + displayName: string; + /** Log kind ID */ + kindId: string; + /** Log kind name */ + name: string; + /** Last update date of the log kind */ + updatedAt: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscription.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscription.ts new file mode 100644 index 000000000000..556284474f89 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscription.ts @@ -0,0 +1,19 @@ +import { LogSubscriptionResource } from './LogSubscriptionResource'; + +/** Log subscription */ +export interface LogSubscription { + /** Creation date of the subscription */ + createdAt: string; + /** Log kind name of this subscription */ + kind: string; + /** Subscribed resource, where the logs come from */ + resource: LogSubscriptionResource; + /** Name of the destination log service */ + serviceName: string; + /** Id of the destination log stream */ + streamId: string; + /** Subscription ID */ + subscriptionId: string; + /** Last update date of the subscription */ + updatedAt: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionCreation.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionCreation.ts new file mode 100644 index 000000000000..b2400178efd3 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionCreation.ts @@ -0,0 +1,7 @@ +/** Log subscription creation payload */ +export interface LogSubscriptionCreation { + /** Log kind name to subscribe to */ + kind: string; + /** Customer log stream ID */ + streamId: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionResource.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionResource.ts new file mode 100644 index 000000000000..3cab9f84155e --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionResource.ts @@ -0,0 +1,7 @@ +/** Log subscription resource */ +export interface LogSubscriptionResource { + /** Name of subscribed resource */ + name: string; + /** Type of subscribed resource */ + type: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionResponse.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionResponse.ts new file mode 100644 index 000000000000..72ed330aaa3a --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogSubscriptionResponse.ts @@ -0,0 +1,7 @@ +/** Asynchronous operation after subscribing or unsubscribing to a resource logs */ +export interface LogSubscriptionResponse { + /** Identifier of the operation */ + operationId: string; + /** Operation owner's service name */ + serviceName: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogUrlCreation.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogUrlCreation.ts new file mode 100644 index 000000000000..d676e8859cd7 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/LogUrlCreation.ts @@ -0,0 +1,5 @@ +/** Log temporary URL creation payload */ +export interface LogUrlCreation { + /** Log kind name */ + kind: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/TemporaryLogsLink.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/TemporaryLogsLink.ts new file mode 100644 index 000000000000..90cdc17ab27f --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/TemporaryLogsLink.ts @@ -0,0 +1,7 @@ +/** Temporary url information */ +export interface TemporaryLogsLink { + /** Temporary url expiration date */ + expirationDate: string; + /** Temporary url */ + url: string; +} diff --git a/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/index.ts b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/index.ts new file mode 100644 index 000000000000..f1f79db7433e --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/index.ts @@ -0,0 +1,7 @@ +export * from './LogKind'; +export * from './LogSubscription'; +export * from './LogSubscriptionCreation'; +export * from './LogSubscriptionResource'; +export * from './LogSubscriptionResponse'; +export * from './LogUrlCreation'; +export * from './TemporaryLogsLink'; diff --git a/packages/manager/modules/logs-to-customer/src/index.ts b/packages/manager/modules/logs-to-customer/src/index.ts new file mode 100644 index 000000000000..035c93990cf4 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/index.ts @@ -0,0 +1 @@ +export * from './LogsToCustomer.module'; diff --git a/packages/manager/modules/logs-to-customer/src/pages/data-streams/Data-streams.page.tsx b/packages/manager/modules/logs-to-customer/src/pages/data-streams/Data-streams.page.tsx new file mode 100644 index 000000000000..ab3ac647543f --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/pages/data-streams/Data-streams.page.tsx @@ -0,0 +1,22 @@ +import React, { useContext } from 'react'; +import { Link } from 'react-router-dom'; +import { LogsContext } from '../../LogsToCustomer.context'; + +export default function DataStreams() { + const { currentLogKind, logApiBaseUrl } = useContext(LogsContext); + + return ( +
+ logs & subscriptions +

Data-streams

+
    +
  • + CurrentLogKind: {currentLogKind?.displayName} +
    • +
  • + logApiBaseUrl: {logApiBaseUrl} +
    • +
+
+ ); +} 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 new file mode 100644 index 000000000000..95fdbcb7ac5c --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import LogsSubscriptions from '../../components/subscriptions/Subscriptions'; +import LogsTail from '../../components/logTail/LogTail'; + +export default function Logs() { + return ( +
+ + +
+ ); +} diff --git a/packages/manager/modules/logs-to-customer/src/routes/routes.tsx b/packages/manager/modules/logs-to-customer/src/routes/routes.tsx new file mode 100644 index 000000000000..f9fddae319f7 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/routes/routes.tsx @@ -0,0 +1,23 @@ +const lazyRouteConfig = (importFn: CallableFunction) => { + return { + lazy: async () => { + const { default: moduleDefault, ...moduleExports } = await importFn(); + + return { + Component: moduleDefault, + ...moduleExports, + }; + }, + }; +}; + +export default [ + { + path: '', + ...lazyRouteConfig(() => import('../pages/logs/Logs.page')), + }, + { + path: 'streams', + ...lazyRouteConfig(() => import('../pages/data-streams/Data-streams.page')), + }, +]; diff --git a/packages/manager/modules/logs-to-customer/tailwind.config.js b/packages/manager/modules/logs-to-customer/tailwind.config.js new file mode 100644 index 000000000000..b18d8d191fcf --- /dev/null +++ b/packages/manager/modules/logs-to-customer/tailwind.config.js @@ -0,0 +1,7 @@ +import config from '@ovh-ux/manager-tailwind-config'; + +/** @type {import('tailwindcss').Config} */ +module.exports = { + ...config, + content: ['./src/**/*.{js,jsx,ts,tsx}'], +}; diff --git a/packages/manager/modules/logs-to-customer/tsconfig.json b/packages/manager/modules/logs-to-customer/tsconfig.json new file mode 100644 index 000000000000..6764849b8c1d --- /dev/null +++ b/packages/manager/modules/logs-to-customer/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "lib": ["dom", "es2020"], + "noEmit": true, + "target": "es2020", + "types": ["vite/client", "node"], + "module": "ES2020", + "moduleResolution": "node", + "removeComments": true, + "esModuleInterop": true, + "isolatedModules": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "noImplicitAny": true, + "declaration": true, + "resolveJsonModule": true, + "allowJs": true, + "jsx": "react" + }, + "include": ["src"], + "exclude": ["node_modules", "dist", "types"] +} diff --git a/packages/manager/modules/logs-to-customer/vite.config.mjs b/packages/manager/modules/logs-to-customer/vite.config.mjs new file mode 100644 index 000000000000..c75bc277363a --- /dev/null +++ b/packages/manager/modules/logs-to-customer/vite.config.mjs @@ -0,0 +1,20 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from 'tailwindcss'; +import { resolve } from 'path'; + +export default defineConfig({ + plugins: [react()], + css: { + postcss: { + plugins: [tailwindcss], + }, + }, + build: { + lib: { + entry: resolve(__dirname, 'src/index.ts'), + name: 'LogsToCustomerModule', + fileName: (format) => `logs-to-customer-module.${format}.ts`, + }, + }, +}); From 94d3acd234c9052fae87adc6dc5cef930633711e Mon Sep 17 00:00:00 2001 From: Romain Jamet Date: Tue, 26 Nov 2024 15:07:31 +0100 Subject: [PATCH 2/2] feat(kms): add logs-to-customer module ref: MANAGER-15966 Signed-off-by: Romain Jamet --- .../apps/key-management-service/package.json | 1 + .../dashboard/Messages_fr_FR.json | 1 + .../logs/Messages_fr_FR.json | 4 ++++ .../layout-helpers/Dashboard/Dashboard.tsx | 4 +++- .../src/pages/dashboard/index.tsx | 11 ++++++++++ .../src/pages/dashboard/logs/Logs.page.tsx | 20 +++++++++++++++++++ .../src/routes/routes.constants.ts | 1 + .../src/routes/routes.tsx | 8 ++++++++ .../key-management-service/tailwind.config.js | 4 ++++ 9 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 packages/manager/apps/key-management-service/public/translations/key-management-service/logs/Messages_fr_FR.json create mode 100644 packages/manager/apps/key-management-service/src/pages/dashboard/logs/Logs.page.tsx diff --git a/packages/manager/apps/key-management-service/package.json b/packages/manager/apps/key-management-service/package.json index 455ba8ea3f02..62331c5cc07b 100644 --- a/packages/manager/apps/key-management-service/package.json +++ b/packages/manager/apps/key-management-service/package.json @@ -23,6 +23,7 @@ "test:coverage": "vitest run --coverage" }, "dependencies": { + "@ovh-ux/logs-to-customer": "^1.0.0", "@ovh-ux/manager-config": "^8.0.0", "@ovh-ux/manager-core-api": "^0.9.0", "@ovh-ux/manager-core-utils": "*", diff --git a/packages/manager/apps/key-management-service/public/translations/key-management-service/dashboard/Messages_fr_FR.json b/packages/manager/apps/key-management-service/public/translations/key-management-service/dashboard/Messages_fr_FR.json index ba9595df8f1a..21ea554c53b1 100644 --- a/packages/manager/apps/key-management-service/public/translations/key-management-service/dashboard/Messages_fr_FR.json +++ b/packages/manager/apps/key-management-service/public/translations/key-management-service/dashboard/Messages_fr_FR.json @@ -5,6 +5,7 @@ "general_informations": "Informations générales", "encrypted_keys": "Clés de chiffrement", "access_certificates": "Certificats d'accès", + "logs": "Logs", "key_management_service_dashboard_back_link": "Retour à la liste des KMS", "key_management_service_dashboard_tab_comming_soon": "prochainement", "key_management_service_dashboard_field_label_name": "Nom du KMS", diff --git a/packages/manager/apps/key-management-service/public/translations/key-management-service/logs/Messages_fr_FR.json b/packages/manager/apps/key-management-service/public/translations/key-management-service/logs/Messages_fr_FR.json new file mode 100644 index 000000000000..9f67132b7a4e --- /dev/null +++ b/packages/manager/apps/key-management-service/public/translations/key-management-service/logs/Messages_fr_FR.json @@ -0,0 +1,4 @@ +{ + "key_management_service_logs": "logs", + "key_management_service_logs_description": "Une description à définir." +} diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx index 89e276f66743..42dec3805858 100644 --- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx +++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx @@ -38,8 +38,10 @@ const Dashboard: React.FC = ({ tabs }) => { useEffect(() => { const activeTab = tabs.find( - (tab) => `/${okmsId}/${tab.url}` === location.pathname, + (tab) => + tab.url !== '' && location.pathname.startsWith(`/${okmsId}/${tab.url}`), ); + if (!activeTab) return; setActivePanel(activeTab?.url); }, [location]); diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx index b98b684f651f..859f4b3774c8 100644 --- a/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx +++ b/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx @@ -32,6 +32,8 @@ export default function DashboardPage() { const { t: tCredentials } = useTranslation( 'key-management-service/credential', ); + const { t: tLogs } = useTranslation('key-management-service/logs'); + const { okmsId } = useParams(); const { data: okms, @@ -82,6 +84,10 @@ export default function DashboardPage() { url: ROUTES_URLS.credentials, title: tDashboard('access_certificates'), }, + { + url: ROUTES_URLS.logs, + title: tDashboard('logs'), + }, ]; const breadcrumbItems: BreadcrumbItem[] = [ @@ -105,6 +111,11 @@ export default function DashboardPage() { label: tDashboard('key_management_service_update_name'), navigateTo: `/${okmsId}/${ROUTES_URLS.okmsUpdateName}`, }, + { + id: ROUTES_URLS.logs, + label: tLogs('key_management_service_logs'), + navigateTo: `/${okmsId}/${ROUTES_URLS.logs}`, + }, ]; const headerProps: HeadersProps = { diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/logs/Logs.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/logs/Logs.page.tsx new file mode 100644 index 000000000000..796eeb54309d --- /dev/null +++ b/packages/manager/apps/key-management-service/src/pages/dashboard/logs/Logs.page.tsx @@ -0,0 +1,20 @@ +import LogsToCustomerModule from '@ovh-ux/logs-to-customer/src/LogsToCustomer.module'; +import { Description } from '@ovh-ux/manager-react-components'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; + +export default function KmsLogs() { + const { okmsId } = useParams(); + const { t } = useTranslation('key-management-service/logs'); + + return ( +
+ {t('key_management_service_logs_description')} + +
+ ); +} diff --git a/packages/manager/apps/key-management-service/src/routes/routes.constants.ts b/packages/manager/apps/key-management-service/src/routes/routes.constants.ts index 0041c5ff8b1e..417bd7945936 100644 --- a/packages/manager/apps/key-management-service/src/routes/routes.constants.ts +++ b/packages/manager/apps/key-management-service/src/routes/routes.constants.ts @@ -8,6 +8,7 @@ export const ROUTES_URLS = { okmsUpdateName: 'update-name', keys: 'keys', keyId: ':keyId', + logs: 'logs', createKmsServiceKey: 'create', serviceKeyEditName: 'edit-name', serviceKeyDeactivate: 'deactivate', diff --git a/packages/manager/apps/key-management-service/src/routes/routes.tsx b/packages/manager/apps/key-management-service/src/routes/routes.tsx index fddde97f6f77..74de6008261c 100644 --- a/packages/manager/apps/key-management-service/src/routes/routes.tsx +++ b/packages/manager/apps/key-management-service/src/routes/routes.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import logsRoutes from '@ovh-ux/logs-to-customer/src/routes/routes'; import { PageType } from '@ovh-ux/manager-react-shell-client'; import NotFound from '../pages/404'; import { ROUTES_URLS } from './routes.constants'; @@ -157,6 +158,13 @@ export default [ }, ], }, + { + path: `${ROUTES_URLS.logs}/*`, + ...lazyRouteConfig(() => + import('@/pages/dashboard/logs/Logs.page'), + ), + children: [...logsRoutes], + }, ], }, { diff --git a/packages/manager/apps/key-management-service/tailwind.config.js b/packages/manager/apps/key-management-service/tailwind.config.js index 657ab11bb87d..62c2564c3f56 100644 --- a/packages/manager/apps/key-management-service/tailwind.config.js +++ b/packages/manager/apps/key-management-service/tailwind.config.js @@ -6,6 +6,10 @@ module.exports = { ...config, content: [ './src/**/*.{js,jsx,ts,tsx}', + path.join( + path.dirname(require.resolve('@ovh-ux/logs-to-customer')), + '**/*.{js,jsx,ts,tsx}', + ), path.join( path.dirname(require.resolve('@ovh-ux/manager-react-components')), '**/*.{js,jsx,ts,tsx}',