feat(ldp): subscriptions list implementation

ref: MANAGER-15919

Signed-off-by: Vincent BONMARCHAND <[email protected]>

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 (
+    <>
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-row justify-between ">
+          <CommonTitle typoSize={ODS_THEME_TYPOGRAPHY_SIZE._200}>
+            {t('log_service_displayname_tile_label')}
+          </CommonTitle>
+          {data?.data.displayName || subscription.serviceName}
+        </div>
+      </div>
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-row justify-between ">
+          <CommonTitle typoSize={ODS_THEME_TYPOGRAPHY_SIZE._200}>
+            {t('log_service_username_tile_label')}
+          </CommonTitle>
+          {data?.data.username}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SubscriptionLogService;

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 (
+    <>
+      <ManagerButton
+        href={data?.data[0].address}
+        className="flex w-full"
+        color={ODS_THEME_COLOR_INTENT.primary}
+        variant={ODS_BUTTON_VARIANT.stroked}
+        isIamTrigger={false}
+      >
+        {t('log_stream_button_graylog_watch_label')}
+        <span slot="end">
+          <OsdsIcon
+            name={ODS_ICON_NAME.EXTERNAL_LINK}
+            size={ODS_ICON_SIZE.xs}
+            color={ODS_THEME_COLOR_INTENT.primary}
+          ></OsdsIcon>
+        </span>
+      </ManagerButton>
+      <ManagerButton
+        href={data?.data[0].address}
+        className="flex w-full"
+        variant={ODS_BUTTON_VARIANT.ghost}
+        isIamTrigger={false}
+      >
+        {tSubscription('log_subscription_button_unsubscribe_label')}
+      </ManagerButton>
+    </>
+  );
+};
+
+export default SubscriptionStreamActions;

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 (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-row justify-between ">
+        <CommonTitle typoSize={ODS_THEME_TYPOGRAPHY_SIZE._200}>
+          {t('log_stream_title_tile_label')}
+        </CommonTitle>
+        {data?.data.title}
+      </div>
+    </div>
+  );
+};
+
+export default SubscriptionStreamTitle;

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 (
+    <OsdsTile rounded inline className="flex flex-col w-full h-fit">
+      <div className="flex flex-col gap-6 pb-4">
+        <CommonTitle>{subscription.serviceName}</CommonTitle>
+        <SubscriptionLogService
+          subscription={subscription}
+        ></SubscriptionLogService>
+        <SubscriptionStreamTitle
+          subscription={subscription}
+        ></SubscriptionStreamTitle>
+        <OsdsDivider separator size={ODS_DIVIDER_SIZE.one} />
+        <SubscriptionStreamActions
+          subscription={subscription}
+        ></SubscriptionStreamActions>
+      </div>
+    </OsdsTile>
+  );
+};
+
+export default SubscriptionTile;

packages/manager/modules/logs-to-customer/src/components/subscriptions/Subscriptions.tsx → 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 (
     <div className="flex gap-8 flex-col  p-8">
@@ -19,6 +25,13 @@ export default function LogsSubscriptions() {
         <li>
           logApiVersion: <b>{logApiVersion}</b>
         </li>
+        {!isPending &&
+          !isLoading &&
+          data?.map((subscription) => {
+            return (
+              <SubscriptionTile subscription={subscription}></SubscriptionTile>
+            );
+          })}
       </ul>
     </div>
   );

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<LogService>(`/dbaas/logs/${serviceName}`);

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<LogStream>(
+    `/dbaas/logs/${serviceName}/output/graylog/stream/${streamId}`,
+  );

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<LogStreamUrl[]>(
+    `/dbaas/logs/${serviceName}/output/graylog/stream/${streamId}/url`,
+  );

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<LogSubscription>({
+    route: logSubscriptionUrl,
+  });
+  return data;
+};
+
+export const getLogSubscriptionsv6 = async (
+  logSubscriptionUrl: ApiUrls['logSubscription'],
+) => {
+  const { data } = await fetchIcebergV6<LogSubscription>({
+    route: logSubscriptionUrl,
+  });
+  return data;
+};
+
+/**
+ * GET log subscription
+ */
+export const getLogSubscriptionv2 = async (
+  logSubscriptionUrl: ApiUrls['logSubscription'],
+  subscriptionId: string,
+) =>
+  apiClient.v2.get<LogSubscription>(`${logSubscriptionUrl}/${subscriptionId}`);
+
+export const getLogSubscriptionv6 = async (
+  logSubscriptionUrl: ApiUrls['logSubscription'],
+  subscriptionId: string,
+) =>
+  apiClient.v6.get<LogSubscription>(`${logSubscriptionUrl}/${subscriptionId}`);

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),
+  });
+};

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),
+  });
+};

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),
+  });
+};

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),
+  });
+};

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;
+}

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;
+}

packages/manager/modules/logs-to-customer/src/data/types/dbaas/logs/logStreamUrl.ts

@@ -0,0 +1,4 @@
+export interface LogStreamUrl {
+  address: string;
+  type: string;
+}