feat(ldp): subscriptions list implementation

ref: MANAGER-15919

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

packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionEmpty.component.tsx

@@ -0,0 +1,48 @@
+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';
+import { useNavigate } from 'react-router-dom';
+
+const SubscriptionEmpty = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation('logSubscription');
+
+  return (
+    <OsdsTile rounded inline className="flex flex-col w-full h-fit">
+      <div className="flex flex-col gap-6 pb-4">
+        <CommonTitle>{t('log_subscription_empty_tile_title')}</CommonTitle>
+        <OsdsText
+          color={ODS_TEXT_COLOR_INTENT.text}
+          level={ODS_TEXT_LEVEL.body}
+          size={ODS_TEXT_SIZE._200}
+        >
+          {t('log_subscription_empty_tile_description')}
+        </OsdsText>
+        <Links
+          type={LinkType.external}
+          label={t('log_subscription_empty_tile_button_know_more')}
+        />
+        <OsdsButton
+          inline
+          variant={ODS_BUTTON_VARIANT.stroked}
+          color={ODS_THEME_COLOR_INTENT.primary}
+          size={ODS_BUTTON_SIZE.sm}
+          onClick={() => navigate('streams')}
+        >
+          {t('log_subscription_empty_tile_button_subscribe')}
+        </OsdsButton>
+      </div>
+    </OsdsTile>
+  );
+};
+
+export default SubscriptionEmpty;

packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionLogService.component.tsx

@@ -0,0 +1,75 @@
+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 { OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  getLogServiceQueryKey,
+  useLogService,
+} from '../../data/hooks/useLogService';
+import { LogSubscription } from '../../data/types/dbaas/logs';
+import ApiError from '../apiError/ApiError.component';
+
+type SubscriptionLogServiceProps = {
+  subscription: LogSubscription;
+};
+
+const SubscriptionLogService = ({
+  subscription,
+}: SubscriptionLogServiceProps) => {
+  const { t } = useTranslation('logService');
+  const queryClient = useQueryClient();
+  const { data, isLoading, isPending, error } = useLogService(
+    subscription.serviceName,
+  );
+
+  if (isLoading || isPending) {
+    return (
+      <div className="flex justify-center w-full py-4">
+        <OsdsSpinner
+          inline
+          size={ODS_SPINNER_SIZE.md}
+          data-testid="logService-spinner"
+        />
+      </div>
+    );
+  }
+
+  if (error)
+    return (
+      <ApiError
+        error={error}
+        onRetry={() =>
+          queryClient.refetchQueries({
+            queryKey: getLogServiceQueryKey(subscription.serviceName),
+          })
+        }
+        testId="logService-error"
+      />
+    );
+
+  return (
+    <>
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-row justify-between ">
+          <CommonTitle typoSize={ODS_THEME_TYPOGRAPHY_SIZE._200}>
+            {data?.data.displayName || subscription.serviceName}
+          </CommonTitle>
+          {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,104 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ODS_BUTTON_VARIANT,
+  ODS_ICON_NAME,
+  ODS_ICON_SIZE,
+  ODS_SPINNER_SIZE,
+} from '@ovhcloud/ods-components';
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import {
+  OsdsButton,
+  OsdsIcon,
+  OsdsSpinner,
+} from '@ovhcloud/ods-components/react';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  getLogStreamUrlQueryKey,
+  useLogStreamUrl,
+} from '../../data/hooks/useLogStreamUrl';
+import { LogSubscription, Url, UrlTypeEnum } from '../../data/types/dbaas/logs';
+import ApiError from '../apiError/ApiError.component';
+
+type SubscriptionStreamItemProps = {
+  subscription: LogSubscription;
+};
+
+const SubscriptionStreamActions = ({
+  subscription,
+}: SubscriptionStreamItemProps) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation('logStream');
+  const { t: tSubscription } = useTranslation('logSubscription');
+  const { data, isLoading, isPending, error } = useLogStreamUrl(
+    subscription.serviceName,
+    subscription.streamId,
+  );
+  const [streamUrl, setStreamUrl] = useState<Url | null>(null);
+
+  useEffect(() => {
+    setStreamUrl(
+      data?.data.find(({ type }) => type === UrlTypeEnum.GRAYLOG_WEBUI),
+    );
+  }, [data]);
+
+  if (isLoading || isPending || !streamUrl) {
+    return (
+      <div className="flex justify-center w-full py-4">
+        <OsdsSpinner
+          inline
+          size={ODS_SPINNER_SIZE.md}
+          data-testid="logStreamUrl-spinner"
+        />
+      </div>
+    );
+  }
+
+  if (error)
+    return (
+      <ApiError
+        error={error}
+        onRetry={() =>
+          queryClient.refetchQueries({
+            queryKey: getLogStreamUrlQueryKey(
+              subscription.serviceName,
+              subscription.streamId,
+            ),
+          })
+        }
+        testId="logStreamUrl-error"
+      />
+    );
+
+  return (
+    <>
+      <OsdsButton
+        href={streamUrl?.address}
+        className="flex w-full"
+        color={ODS_THEME_COLOR_INTENT.primary}
+        variant={ODS_BUTTON_VARIANT.stroked}
+        target={OdsHTMLAnchorElementTarget._blank}
+      >
+        {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>
+      </OsdsButton>
+      <OsdsButton
+        href={streamUrl?.address}
+        className="flex w-full"
+        variant={ODS_BUTTON_VARIANT.ghost}
+        color={ODS_THEME_COLOR_INTENT.primary}
+      >
+        {tSubscription('log_subscription_button_unsubscribe_label')}
+      </OsdsButton>
+    </>
+  );
+};
+
+export default SubscriptionStreamActions;

packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamTitle.component.tsx

@@ -0,0 +1,68 @@
+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 { OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  getLogStreamQueryKey,
+  useLogStream,
+} from '../../data/hooks/useLogStream';
+import { LogSubscription } from '../../data/types/dbaas/logs';
+import ApiError from '../apiError/ApiError.component';
+
+type SubscriptionStreamItemProps = {
+  subscription: LogSubscription;
+};
+
+const SubscriptionStreamTitle = ({
+  subscription,
+}: SubscriptionStreamItemProps) => {
+  const { t } = useTranslation('logStream');
+  const queryClient = useQueryClient();
+  const { data, isLoading, isPending, error } = useLogStream(
+    subscription.serviceName,
+    subscription.streamId,
+  );
+
+  if (isLoading || isPending) {
+    return (
+      <div className="flex justify-center w-full py-4">
+        <OsdsSpinner
+          inline
+          size={ODS_SPINNER_SIZE.md}
+          data-testid="logStream-spinner"
+        />
+      </div>
+    );
+  }
+
+  if (error)
+    return (
+      <ApiError
+        error={error}
+        onRetry={() =>
+          queryClient.refetchQueries({
+            queryKey: getLogStreamQueryKey(
+              subscription.serviceName,
+              subscription.streamId,
+            ),
+          })
+        }
+        testId="logStream-error"
+      />
+    );
+  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,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 (
+    <OsdsTile rounded inline className="flex flex-col w-full h-fit">
+      <div className="flex flex-col gap-6 pb-4">
+        <CommonTitle>{t('log_subscription_tile_title')}</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;