feat(sap-features-hub): init sap-features-hub µapp

ref: MANAGER-15987 Signed-off-by: Paul Dickerson <[email protected]>
ovh · Dec 13, 2024 · 7685374 · 7685374
1 parent d63d706
commit 7685374
Show file tree

Hide file tree

Showing 41 changed files with 1,169 additions and 20 deletions.
diff --git a/packages/manager/apps/sap-features-hub/README.md b/packages/manager/apps/sap-features-hub/README.md
@@ -0,0 +1,3 @@
+# @ovh-ux/manager-sap-features-hub-app
+
+> Manage SAP workloads in HostedPrivateCloud
diff --git a/packages/manager/apps/sap-features-hub/index.html b/packages/manager/apps/sap-features-hub/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>OVHcloud</title>
+        <link rel="shortcut icon" href="images/favicon.png" />
+        <link rel="apple-touch-icon" href="images/touchicon-180.png" />
+    </head>
+    <body>
+        <noscript>
+            <strong>
+                We're sorry but this application doesn't work properly without
+                JavaScript enabled. Please enable it to continue.
+            </strong>
+        </noscript>
+        <div id="root"></div>
+        <script type="module" src="./src/index.tsx"></script>
+    </body>
+</html>
diff --git a/packages/manager/apps/sap-features-hub/package.json b/packages/manager/apps/sap-features-hub/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@ovh-ux/manager-sap-features-hub-app",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Manage SAP workloads in HostedPrivateCloud",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ovh/manager.git",
+    "directory": "packages/manager/apps/sap-features-hub"
+  },
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS",
+  "scripts": {
+    "build": "tsc && vite build",
+    "coverage": "vitest run --coverage",
+    "dev": "tsc && vite",
+    "start": "lerna exec --stream --scope='@ovh-ux/manager-sap-features-hub-app' --include-dependencies -- npm run build --if-present",
+    "start:dev": "lerna exec --stream --scope='@ovh-ux/manager-sap-features-hub-app' --include-dependencies -- npm run dev --if-present",
+    "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-sap-features-hub-app' --include-dependencies -- npm run dev:watch --if-present",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@ovh-ux/manager-config": "*",
+    "@ovh-ux/manager-core-api": "*",
+    "@ovh-ux/manager-core-utils": "*",
+    "@ovh-ux/manager-react-components": "^2.2.0",
+    "@ovh-ux/manager-react-core-application": "*",
+    "@ovh-ux/manager-react-shell-client": "*",
+    "@ovh-ux/request-tagger": "*",
+    "@ovhcloud/ods-components": "^18.3.0",
+    "@ovhcloud/ods-themes": "^18.3.0",
+    "@tanstack/react-query": "^5.51.21",
+    "axios": "^1.1.2",
+    "clsx": "^1.2.1",
+    "i18next": "^23.8.2",
+    "i18next-http-backend": "^2.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.5",
+    "react-router-dom": "^6.3.0",
+    "tailwindcss": "^3.4.4"
+  },
+  "devDependencies": {
+    "@ovh-ux/manager-vite-config": "*",
+    "@tanstack/react-query-devtools": "^5.51.21",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^2.1.2",
+    "typescript": "^5.1.6",
+    "vite": "^5.2.13",
+    "vitest": "^2.1.2"
+  },
+  "regions": [
+    "CA",
+    "EU",
+    "US"
+  ]
+}
diff --git a/packages/manager/apps/sap-features-hub/postcss.config.js b/packages/manager/apps/sap-features-hub/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/manager/apps/sap-features-hub/public/translations/dashboard/Messages_fr_FR.json b/packages/manager/apps/sap-features-hub/public/translations/dashboard/Messages_fr_FR.json
@@ -0,0 +1,7 @@
+{
+  "title": "Dashboard page",
+  "error_service": "No services info",
+  "general_informations": "Informations générales",
+  "tab2": "Tab 2",
+  "back_link": "Retour à la liste"
+}
diff --git a/packages/manager/apps/sap-features-hub/public/translations/listing/Messages_fr_FR.json b/packages/manager/apps/sap-features-hub/public/translations/listing/Messages_fr_FR.json
@@ -0,0 +1,4 @@
+{
+  "title": "Listing page",
+  "listing_resultats": "résultats"
+}
diff --git a/packages/manager/apps/sap-features-hub/public/translations/onboarding/Messages_fr_FR.json b/packages/manager/apps/sap-features-hub/public/translations/onboarding/Messages_fr_FR.json
@@ -0,0 +1,13 @@
+{
+  "title": "sap-features-hub",
+  "description": "Découvrez des services de stockage managés qui s’appuient sur le système de fichiers OpenZFS. Bénéficiez en quelques clics d’espaces de stockage centralisés pour entreposer ou sauvegarder vos données et fichiers.",
+  "orderButtonLabel": "Commander un sap-features-hub",
+  "moreInfoButtonLabel": "En savoir plus sur sap-features-hub",
+  "guideCategory": "Tutoriel",
+  "guide1Title": "Premiers pas avec un sap-features-hub",
+  "guide1Description": "Découvrez comment gérer un NAS-HA depuis l'espace-client OVHcloud",
+  "guide2Title": "Monter votre NAS via un partage NFS",
+  "guide2Description": "Découvrez comment monter un NAS via un partage NFS",
+  "guide3Title": "Monter votre NAS sur Windows Server via CIFS",
+  "guide3Description": "Découvrez comment monter un NAS sur Windows Server via le protocole CIFS"
+}
diff --git a/...es/manager/apps/sap-features-hub/public/translations/sap-features-hub/Messages_fr_FR.json b/...es/manager/apps/sap-features-hub/public/translations/sap-features-hub/Messages_fr_FR.json
@@ -0,0 +1,6 @@
+{
+  "title": "Bienvenue uapp",
+  "crumb": "sap-features-hub",
+  "tabs_2": "Tabs 2",
+  "onboarding": "Onboarding"
+}
diff --git a/...ager/apps/sap-features-hub/public/translations/sap-features-hub/error/Messages_fr_FR.json b/...ager/apps/sap-features-hub/public/translations/sap-features-hub/error/Messages_fr_FR.json
@@ -0,0 +1,8 @@
+{
+  "manager_error_page_title": "Oops …!",
+  "manager_error_page_button_cancel": "Annuler",
+  "manager_error_page_detail_code": "Code d'erreur : ",
+  "manager_error_page_action_reload_label": "Réessayer",
+  "manager_error_page_action_home_label": "Retour à la page d'accueil",
+  "manager_error_page_default": "Une erreur est survenue lors du chargement de la page."
+}
diff --git a/packages/manager/apps/sap-features-hub/src/App.tsx b/packages/manager/apps/sap-features-hub/src/App.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect, useContext } from 'react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
+import { Routes } from './routes/routes';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 300_000,
+    },
+  },
+});
+
+function App() {
+  const { shell } = useContext(ShellContext);
+  const router = createHashRouter(Routes);
+
+  useEffect(() => {
+    shell.ux.hidePreloader();
+  }, []);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+  );
+}
+
+export default App;
diff --git a/packages/manager/apps/sap-features-hub/src/assets/error-banner-oops.png b/packages/manager/apps/sap-features-hub/src/assets/error-banner-oops.png
diff --git a/packages/manager/apps/sap-features-hub/src/components/Breadcrumb/Breadcrumb.tsx b/packages/manager/apps/sap-features-hub/src/components/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  OdsBreadcrumb,
+  OdsBreadcrumbItem,
+} from '@ovhcloud/ods-components/react';
+import {
+  useBreadcrumb,
+  BreadcrumbItem,
+} from '@/hooks/breadcrumb/useBreadcrumb';
+import appConfig from '@/sap-features-hub.config';
+
+export interface BreadcrumbProps {
+  customRootLabel?: string;
+  appName?: string;
+  items?: BreadcrumbItem[];
+}
+
+function Breadcrumb({ customRootLabel }: BreadcrumbProps): JSX.Element {
+  const label = customRootLabel || appConfig.rootLabel;
+
+  const breadcrumbItems = useBreadcrumb({
+    rootLabel: label,
+    appName: 'sap-features-hub',
+  });
+  return (
+    <OdsBreadcrumb>
+      {breadcrumbItems?.map((item) => (
+        <OdsBreadcrumbItem
+          key={item.label}
+          href={item.href}
+          label={item.label}
+        />
+      ))}
+    </OdsBreadcrumb>
+  );
+}
+
+export default Breadcrumb;
diff --git a/packages/manager/apps/sap-features-hub/src/components/Error/Error.scss b/packages/manager/apps/sap-features-hub/src/components/Error/Error.scss
@@ -0,0 +1,18 @@
+.manager-error-page {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 600px;
+  width: 100%;
+  display: grid;
+  height: 100%;
+  overflow: hidden;
+  .manager-error-page-image {
+    img {
+      width: 100%;
+    }
+  }
+  .manager-error-page-footer {
+    text-align: right;
+    overflow: hidden;
+  }
+}
diff --git a/packages/manager/apps/sap-features-hub/src/components/Error/Error.tsx b/packages/manager/apps/sap-features-hub/src/components/Error/Error.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  ErrorMessage,
+  TRACKING_LABELS,
+  ErrorBanner,
+} from '@ovh-ux/manager-react-components';
+
+interface ErrorObject {
+  [key: string]: any;
+}
+
+function getTrackingTypology(error: ErrorMessage) {
+  if (error?.detail?.status && Math.floor(error.detail.status / 100) === 4) {
+    return [401, 403].includes(error.detail.status)
+      ? TRACKING_LABELS.UNAUTHORIZED
+      : TRACKING_LABELS.SERVICE_NOT_FOUND;
+  }
+  return TRACKING_LABELS.PAGE_LOAD;
+}
+
+const Errors: React.FC<ErrorObject> = ({ error }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { shell } = React.useContext(ShellContext);
+  const { tracking, environment } = shell;
+  const env = environment.getEnvironment();
+
+  React.useEffect(() => {
+    env.then((response) => {
+      const { applicationName } = response;
+      const name = `errors::${getTrackingTypology(error)}::${applicationName}`;
+      tracking.trackPage({
+        name,
+        level2: '81',
+        type: 'navigation',
+        page_category: location.pathname,
+      });
+    });
+  }, []);
+
+  return (
+    <ErrorBanner
+      error={error}
+      onReloadPage={() => navigate(location.pathname, { replace: true })}
+      onRedirectHome={() => navigate('/', { replace: true })}
+    />
+  );
+};
+
+export default Errors;
diff --git a/packages/manager/apps/sap-features-hub/src/components/Loading/Loading.tsx b/packages/manager/apps/sap-features-hub/src/components/Loading/Loading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { OdsSpinner } from '@ovhcloud/ods-components/react';
+
+export default function Loading() {
+  return (
+    <div className="flex justify-center">
+      <div>
+        <OdsSpinner />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/manager/apps/sap-features-hub/src/data/api/sap-features-hub.ts b/packages/manager/apps/sap-features-hub/src/data/api/sap-features-hub.ts
@@ -0,0 +1,52 @@
+import { fetchIcebergV6, apiClient } from '@ovh-ux/manager-core-api';
+
+export type GetdedicatedCloudListParams = {
+  /** Filter resources on IAM tags */
+  iamTags: any;
+};
+
+export const getdedicatedCloudListQueryKey = ['get/dedicatedCloud'];
+
+/**
+ * Operations about the PCC service : List VMware on OVHcloud infrastructures
+ */
+export const getdedicatedCloudList = async (
+  params: GetdedicatedCloudListParams,
+): Promise<any> => apiClient.v6.get('/dedicatedCloud', { data: params });
+
+export type GetdedicatedCloudServiceParams = {
+  /** Domain of the service */
+  serviceName?: any;
+};
+
+export const getdedicatedCloudServiceQueryKey = (
+  params: GetdedicatedCloudServiceParams,
+) => [`get/dedicatedCloud/${params.serviceName}`];
+
+/**
+ * VMware on OVHcloud : Get VMware on OVHcloud
+ */
+export const getdedicatedCloudService = async (
+  params: GetdedicatedCloudServiceParams,
+): Promise<any> => apiClient.v6.get(`/dedicatedCloud/${params.serviceName}`);
+
+/**
+ *  Get listing with iceberg V6
+ */
+export const getListingIcebergV6 = async ({
+  pageSize,
+  page,
+}: {
+  pageSize: number;
+  page: number;
+}) => {
+  const { data, status, totalCount } = await fetchIcebergV6({
+    route: `/dedicatedCloud`,
+    pageSize,
+    page,
+  });
+  if (status > 400) {
+    throw new Error();
+  }
+  return { data, status, totalCount };
+};
diff --git a/packages/manager/apps/sap-features-hub/src/hooks/breadcrumb/useBreadcrumb.tsx b/packages/manager/apps/sap-features-hub/src/hooks/breadcrumb/useBreadcrumb.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState, useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+
+export type BreadcrumbItem = {
+  label: string | undefined;
+  href?: string;
+};
+
+export interface BreadcrumbProps {
+  rootLabel?: string;
+  appName?: string;
+  projectId?: string;
+  items?: BreadcrumbItem[];
+}
+export const useBreadcrumb = ({ rootLabel, appName }: BreadcrumbProps) => {
+  const { shell } = useContext(ShellContext);
+  const [root, setRoot] = useState<BreadcrumbItem[]>([]);
+  const [paths, setPaths] = useState<BreadcrumbItem[]>([]);
+  const location = useLocation();
+  const pathnames = location.pathname.split('/').filter((x) => x);
+
+  useEffect(() => {
+    const fetchRoot = async () => {
+      try {
+        const response = await shell?.navigation.getURL(appName, '#/', {});
+        const rootItem = {
+          label: rootLabel,
+          href: String(response),
+        };
+        setRoot([rootItem]);
+      } catch {
+        // Fetch navigation error
+      }
+    };
+    fetchRoot();
+  }, [rootLabel, appName, shell?.navigation]);
+
+  useEffect(() => {
+    const pathsTab = pathnames.map((value) => ({
+      label: value,
+      href: `/#/${appName}/${value}`,
+    }));
+    setPaths(pathsTab);
+  }, [location]);
+
+  return [...root, ...paths];
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# @ovh-ux/manager-sap-features-hub-app

		> Manage SAP workloads in HostedPrivateCloud