feat(key-management-service): add services loader in sidebar (#13040)

ref: MANAGER-14636 Signed-off-by: David Arsène <[email protected]>
ovh · Sep 23, 2024 · 7b79460 · 7b79460
1 parent 0156c6e
commit 7b79460
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 22 deletions.
diff --git a/.../manager/apps/container/src/container/legacy/server-sidebar/universe/DedicatedSidebar.tsx b/.../manager/apps/container/src/container/legacy/server-sidebar/universe/DedicatedSidebar.tsx
@@ -392,6 +392,7 @@ export default function DedicatedSidebar() {
     }
 
     if (feature['key-management-service']) {
+      const keyIcon = <OsdsIcon name={ODS_ICON_NAME.KEY_CONCEPT} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.text}/>
       menu.push({
         id: 'identity-security-operations',
         label: t('sidebar_identity_security_operations'),
@@ -405,7 +406,27 @@ export default function DedicatedSidebar() {
             href: navigation.getURL('key-management-service', '/'),
             badge: 'beta',
             pathMatcher: new RegExp('^/key-management-service'),
-            icon: <OsdsIcon name={ODS_ICON_NAME.KEY_CONCEPT} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.text}/>
+            icon: keyIcon,
+            async loader() {
+              const app = 'key-management-service';
+              const services = await loadServices('/okms/resource', undefined, app);
+
+              return [
+                {
+                  id: 'key-management-service-all',
+                  label: t('sidebar_service_all'),
+                  href: navigation.getURL(app, '/'),
+                  ignoreSearch: true,
+                  icon: keyIcon,
+                },
+                ...services.map((service) => ({
+                  ...service,
+                  pathMatcher: new RegExp(
+                    `^/key-management-service/${service.serviceName}`,
+                  ),
+                })),
+              ];
+            },
           },
         ],
       });

diff --git a/...apps/container/src/container/legacy/server-sidebar/universe/HostedPrivateCloudSidebar.tsx b/...apps/container/src/container/legacy/server-sidebar/universe/HostedPrivateCloudSidebar.tsx
@@ -201,7 +201,7 @@ export default function HostedPrivateCloudSidebar() {
               return [
                 {
                   id: 'vrack_services-all',
-                  label: t('sidebar_all_vrack_services'),
+                  label: t('sidebar_service_all'),
                   href: navigation.getURL(appId, '#/'),
                   ignoreSearch: true,
                 },
@@ -237,6 +237,7 @@ export default function HostedPrivateCloudSidebar() {
       });
     }
     if (feature['key-management-service']) {
+      const keyIcon = <OsdsIcon name={ODS_ICON_NAME.KEY_CONCEPT} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.text}/>
       menu.push({
         id: 'identity-security-operations',
         label: t('sidebar_identity_security_operations'),
@@ -250,7 +251,27 @@ export default function HostedPrivateCloudSidebar() {
             href: navigation.getURL('key-management-service', '/'),
             badge: 'beta',
             pathMatcher: new RegExp('^/key-management-service'),
-            icon: <OsdsIcon name={ODS_ICON_NAME.KEY_CONCEPT} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.text}/>
+            icon: keyIcon,
+            async loader() {
+              const app = 'key-management-service';
+              const services = await loadServices('/okms/resource', undefined, app);
+
+              return [
+                {
+                  id: 'key-management-service-all',
+                  label: t('sidebar_service_all'),
+                  href: navigation.getURL(app, '/'),
+                  ignoreSearch: true,
+                  icon: keyIcon,
+                },
+                ...services.map((service) => ({
+                  ...service,
+                  pathMatcher: new RegExp(
+                    `^/key-management-service/${service.serviceName}`,
+                  ),
+                })),
+              ];
+            },
           },
         ],
       });

diff --git a/...s/manager/apps/container/src/container/legacy/server-sidebar/universe/useServiceLoader.ts b/...s/manager/apps/container/src/container/legacy/server-sidebar/universe/useServiceLoader.ts
@@ -1,40 +1,64 @@
-import { useReket } from '@ovh-ux/ovh-reket';
 import { useShell } from '@/context';
+import { apiClient } from '@ovh-ux/manager-core-api';
+import { AxiosResponse } from 'axios';
 import { SidebarMenuItem } from '../sidebarMenu';
 
+type TService = {
+  displayName: string;
+  serviceName: string;
+  url?: string;
+  baseUrl?: string;
+  extraParams?: Record<string, string>;
+  stateParams?: (number | string)[];
+  parentName?: string;
+  searchParams?: string[];
+};
+
+const fetchServices = (
+  path: string,
+  subType: string,
+): Promise<AxiosResponse<TService[]>> =>
+  apiClient.aapi.get('/service', {
+    params: {
+      type: path,
+      subType,
+      external: false,
+    },
+  });
+
 export default function useServiceLoader(appId: string) {
-  const reketInstance = useReket();
   const shell = useShell();
   const navigation = shell.getPlugin('navigation');
 
   return {
     async loadServices(
       path: string,
       subType?: string,
-      applicationId = appId
+      applicationId = appId,
     ): Promise<SidebarMenuItem[]> {
-      const services = await reketInstance.get('/service', {
-        requestType: 'aapi',
-        params: {
-          type: path,
-          subType,
-          external: false,
-        },
-      });
-      return services
-        .map((service: any) => ({
+      const { data: services } = await fetchServices(path, subType);
+
+      const menuItems: SidebarMenuItem[] = services.map((service: TService) => {
+        const item: SidebarMenuItem = {
           id: `service-${path}-${service.serviceName}`,
           label: service.displayName,
           extraParams: service.extraParams,
           stateParams: service.stateParams || [],
           searchParams: service.searchParams || [],
-          href: navigation.getURL(applicationId, service.url || service.baseUrl || ''),
+          href: navigation.getURL(
+            applicationId,
+            service.url || service.baseUrl || '',
+          ),
           parentName: service.parentName,
           serviceName: service.serviceName,
-        }))
-        .sort((a: SidebarMenuItem, b: SidebarMenuItem) => {
-          return a.label?.localeCompare(b.label);
-        });
+        };
+
+        return item;
+      });
+
+      return menuItems.sort((a: SidebarMenuItem, b: SidebarMenuItem) =>
+        a.label?.localeCompare(b.label),
+      );
     },
   };
 }
diff --git a/packages/manager/apps/container/src/public/translations/sidebar/Messages_fr_FR.json b/packages/manager/apps/container/src/public/translations/sidebar/Messages_fr_FR.json
@@ -106,7 +106,6 @@
   "sidebar_vrack": "Réseau Privé vRack",
   "sidebar_cloud_connect": "OVHcloud Connect",
   "sidebar_vrack_services": "vRack Services",
-  "sidebar_all_vrack_services": "Tous les services",
   "sidebar_iplb": "Load Balancer",
   "sidebar_ip": "Adresses IP Publiques",
   "sidebar_cdn": "Content Delivery Network",