feat(ips): init ips react app

ref: MANAGER-15657 Signed-off-by: Quentin Pavy <[email protected]>
ovh · Nov 15, 2024 · 63e7557 · 63e7557
1 parent e94354c
commit 63e7557
Show file tree

Hide file tree

Showing 36 changed files with 929 additions and 0 deletions.
diff --git a/packages/manager/apps/ips/README.md b/packages/manager/apps/ips/README.md
@@ -0,0 +1,3 @@
+# @ovh-ux/manager-ips-app
+
+> ips manager app
diff --git a/packages/manager/apps/ips/index.html b/packages/manager/apps/ips/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/ips/package.json b/packages/manager/apps/ips/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@ovh-ux/manager-ips-app",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Ips manager app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ovh/manager.git",
+    "directory": "packages/manager/apps/ips"
+  },
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "tsc && vite",
+    "start": "lerna exec --stream --scope='@ovh-ux/manager-ips-app' --include-dependencies -- npm run build --if-present",
+    "start:dev": "lerna exec --stream --scope='@ovh-ux/manager-ips-app' --include-dependencies -- npm run dev --if-present",
+    "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-ips-app' --include-dependencies -- npm run dev:watch --if-present"
+  },
+  "dependencies": {
+    "@ovh-ux/manager-config": "*",
+    "@ovh-ux/manager-core-api": "*",
+    "@ovh-ux/manager-core-utils": "*",
+    "@ovh-ux/manager-react-components": "2.1.0",
+    "@ovh-ux/manager-react-core-application": "*",
+    "@ovh-ux/manager-react-shell-client": "^0.8.1",
+    "@ovh-ux/manager-tailwind-config": "*",
+    "@ovh-ux/request-tagger": "^0.4.0",
+    "@ovhcloud/ods-common-core": "^17.2.2",
+    "@ovhcloud/ods-components": "18.3.0",
+    "@ovhcloud/ods-themes": "^18.3.0",
+    "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"
+  },
+  "devDependencies": {
+    "@cucumber/cucumber": "^10.3.1",
+    "@ovh-ux/manager-vite-config": "*",
+    "@tanstack/react-query": "^5.51.21",
+    "@tanstack/react-query-devtools": "^5.51.21",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.1.6",
+    "vite": "^5.2.13"
+  },
+  "regions": [
+    "CA",
+    "EU",
+    "US"
+  ]
+}
diff --git a/packages/manager/apps/ips/postcss.config.js b/packages/manager/apps/ips/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/manager/apps/ips/public/translations/dashboard/Messages_fr_FR.json b/packages/manager/apps/ips/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/ips/public/translations/ips/Messages_fr_FR.json b/packages/manager/apps/ips/public/translations/ips/Messages_fr_FR.json
@@ -0,0 +1,6 @@
+{
+  "title": "Bienvenue uapp",
+  "crumb": "ips",
+  "tabs_2": "Tabs 2",
+  "onboarding": "Onboarding"
+}
diff --git a/packages/manager/apps/ips/public/translations/ips/error/Messages_fr_FR.json b/packages/manager/apps/ips/public/translations/ips/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/ips/public/translations/listing/Messages_fr_FR.json b/packages/manager/apps/ips/public/translations/listing/Messages_fr_FR.json
@@ -0,0 +1,4 @@
+{
+  "title": "Listing page",
+  "listing_resultats": "résultats"
+}
diff --git a/packages/manager/apps/ips/public/translations/onboarding/Messages_fr_FR.json b/packages/manager/apps/ips/public/translations/onboarding/Messages_fr_FR.json
@@ -0,0 +1,13 @@
+{
+  "title": "ips",
+  "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 ips",
+  "moreInfoButtonLabel": "En savoir plus sur ips",
+  "guideCategory": "Tutoriel",
+  "guide1Title": "Premiers pas avec un ips",
+  "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/packages/manager/apps/ips/src/App.tsx b/packages/manager/apps/ips/src/App.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect, useContext } from 'react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { odsSetup } from '@ovhcloud/ods-common-core';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
+import { Routes } from './routes/routes';
+
+odsSetup();
+
+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/ips/src/assets/error-banner-oops.png b/packages/manager/apps/ips/src/assets/error-banner-oops.png
diff --git a/packages/manager/apps/ips/src/components/Breadcrumb/Breadcrumb.tsx b/packages/manager/apps/ips/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 '@/ips.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: 'ips',
+  });
+  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/ips/src/components/Error/Error.scss b/packages/manager/apps/ips/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/ips/src/components/Error/Error.tsx b/packages/manager/apps/ips/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/ips/src/components/Loading/Loading.tsx b/packages/manager/apps/ips/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/ips/src/data/api/ips.ts b/packages/manager/apps/ips/src/data/api/ips.ts
@@ -0,0 +1,64 @@
+import { fetchIcebergV6, apiClient } from '@ovh-ux/manager-core-api';
+
+export type GetIpListParams = {
+  /** Filter the value of campus property (ilike) (alpha) */
+  campus: any;
+  /** Filter the value of description property (like) */
+  description: any;
+  /** Filter resources on IAM tags */
+  iamTags: any;
+  /** Filter the value of ip property (contains or equals) */
+  ip: any;
+  /** Filter the value of isAdditionalIp property (&#x3D;) (alpha) */
+  isAdditionalIp: any;
+  /** Filter the value of routedTo.serviceName property (like) */
+  routedToserviceName: any;
+  /** Filter the value of type property (&#x3D;) */
+  type: any;
+  /** Filter the value of version property (&#x3D;) (alpha) */
+  version: any;
+};
+
+export const getIpListQueryKey = ['get/ip'];
+
+/**
+ * List the ip.Ip objects : Your OVH IPs
+ */
+export const getIpList = async (params: GetIpListParams): Promise<any> =>
+  apiClient.v6.get('/ip', { data: params });
+
+export type GetIpIpParams = {
+  /**  */
+  ip?: any;
+};
+
+export const getIpIpQueryKey = (params: GetIpIpParams) => [
+  `get/ip/${params.ip}`,
+];
+
+/**
+ * Your IP : Get this object properties
+ */
+export const getIpIp = async (params: GetIpIpParams): Promise<any> =>
+  apiClient.v6.get(`/ip/${params.ip}`);
+
+/**
+ *  Get listing with iceberg V6
+ */
+export const getListingIcebergV6 = async ({
+  pageSize,
+  page,
+}: {
+  pageSize: number;
+  page: number;
+}) => {
+  const { data, status, totalCount } = await fetchIcebergV6({
+    route: `/ip`,
+    pageSize,
+    page,
+  });
+  if (status > 400) {
+    throw new Error();
+  }
+  return { data, status, totalCount };
+};