feat(pci-load-balancer): add pool members listing

ref: DTCORE-2659
Signed-off-by: Yoann Fievez <[email protected]>

packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_de_DE.json

@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_go_back": "Zurück",
+  "octavia_load_balancer_pools_detail_members_info_title": "Mitglieder",
+  "octavia_load_balancer_pools_detail_members_description_part_1": "Mitglieder sind die tatsächlichen Backend-IP-Adressen, die den Traffic des Loadbalancers empfangen.",
+  "octavia_load_balancer_pools_detail_members_create_success": "Ihr Mitglied wird erstellt. Laden Sie die Seite erneut, um es in der Liste zu sehen.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_create_success": "Ihre Mitglieder werden erstellt. Laden Sie die Seite erneut, um sie in der Liste zu sehen.",
+  "octavia_load_balancer_pools_detail_members_delete_success": "Ihr Mitglied {{ membre }} wurde erfolgreich gelöscht!",
+  "octavia_load_balancer_pools_detail_members_edit_name_success": "Ihr Mitglied {{ membre }} wurde erfolgreich geändert!",
+  "octavia_load_balancer_pools_detail_members_protocol_port_tooltip": "Der Port, an dem der Traffic an das Mitglied gesendet wird"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_en_GB.json

@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_go_back": "Previous",
+  "octavia_load_balancer_pools_detail_members_info_title": "Members",
+  "octavia_load_balancer_pools_detail_members_description_part_1": "Members are the actual back-end IP addresses that will receive Load Balancer traffic.",
+  "octavia_load_balancer_pools_detail_members_delete_success": "Your {{ membre }} member has been deleted!",
+  "octavia_load_balancer_pools_detail_members_edit_name_success": "Your {{ membre }} member has been modified!",
+  "octavia_load_balancer_pools_detail_members_protocol_port_tooltip": "The port on which traffic is sent to the member",
+  "octavia_load_balancer_pools_detail_members_create_success": "Creating your member... Reload your page to view it in the list.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_create_success": "Creating your members... Reload your page to view them in the list."
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_es_ES.json

@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_go_back": "Anterior",
+  "octavia_load_balancer_pools_detail_members_info_title": "Miembros",
+  "octavia_load_balancer_pools_detail_members_description_part_1": "Los miembros son las direcciones IP back-end reales que recibirán el tráfico del Load Balancer.",
+  "octavia_load_balancer_pools_detail_members_create_success": "Creando el miembro... Volver a cargar la página para verlo en la lista.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_create_success": "Creando los miembros... Volver a cargar la página para verlos en la lista.",
+  "octavia_load_balancer_pools_detail_members_delete_success": "Su miembro {{ membre }} se ha eliminado correctamente.",
+  "octavia_load_balancer_pools_detail_members_edit_name_success": "Su miembro {{ membre }} se ha modificado correctamente.",
+  "octavia_load_balancer_pools_detail_members_protocol_port_tooltip": "El puerto utilizado para enviar el tráfico al miembro"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_fr_CA.json

@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_go_back": "Précédent",
+  "octavia_load_balancer_pools_detail_members_info_title": "Membres",
+  "octavia_load_balancer_pools_detail_members_description_part_1": "Les membres sont les adresses IP backend réelles qui recevront le trafic du Load Balancer.",
+  "octavia_load_balancer_pools_detail_members_create_success": "La création de votre membre est en cours. Recharger votre page pour le voir dans la liste.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_create_success": "La création de vos membres est en cours. Recharger votre page pour les voir dans la liste.",
+  "octavia_load_balancer_pools_detail_members_delete_success": "Votre membre {{ membre }} a été supprimé avec succès !",
+  "octavia_load_balancer_pools_detail_members_edit_name_success": "Votre membre {{ membre }} a été modifié avec succès !",
+  "octavia_load_balancer_pools_detail_members_protocol_port_tooltip": "Le port sur lequel le traffic est envoyé vers le membre"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_fr_FR.json

@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_go_back": "Précédent",
+  "octavia_load_balancer_pools_detail_members_info_title": "Membres",
+  "octavia_load_balancer_pools_detail_members_description_part_1": "Les membres sont les adresses IP backend réelles qui recevront le trafic du Load Balancer.",
+  "octavia_load_balancer_pools_detail_members_create_success": "La création de votre membre est en cours. Recharger votre page pour le voir dans la liste.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_create_success": "La création de vos membres est en cours. Recharger votre page pour les voir dans la liste.",
+  "octavia_load_balancer_pools_detail_members_delete_success": "Votre membre {{ membre }} a été supprimé avec succès !",
+  "octavia_load_balancer_pools_detail_members_edit_name_success": "Votre membre {{ membre }} a été modifié avec succès !",
+  "octavia_load_balancer_pools_detail_members_protocol_port_tooltip": "Le port sur lequel le traffic est envoyé vers le membre"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_it_IT.json

@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_go_back": "Indietro",
+  "octavia_load_balancer_pools_detail_members_info_title": "Membri",
+  "octavia_load_balancer_pools_detail_members_description_part_1": "I membri sono gli indirizzi IP backend effettivi che riceveranno il traffico del Load Balancer.",
+  "octavia_load_balancer_pools_detail_members_create_success": "Creazione del membro in corso... Ricarica la pagina per visualizzarlo nell'elenco.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_create_success": "Creazione dei membri in corso... Ricarica la pagina per visualizzarla nell'elenco.",
+  "octavia_load_balancer_pools_detail_members_delete_success": "Il membro {{ membre }} è stato eliminato correttamente.",
+  "octavia_load_balancer_pools_detail_members_edit_name_success": "Il membro {{ membre }} è stato modificato correttamente.",
+  "octavia_load_balancer_pools_detail_members_protocol_port_tooltip": "La porta sulla quale il traffico viene inviato al membro"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_pl_PL.json

@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_go_back": "Wstecz",
+  "octavia_load_balancer_pools_detail_members_info_title": "Użytkownicy",
+  "octavia_load_balancer_pools_detail_members_description_part_1": "Użytkownicy to prawdziwe adresy IP back-end, które będą odbierać ruch z Load Balancera.",
+  "octavia_load_balancer_pools_detail_members_create_success": "Trwa tworzenie użytkownika. Odśwież stronę, aby zobaczyć go na liście.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_create_success": "Trwa tworzenie użytkowników. Odśwież stronę, aby zobaczyć ich na liście.",
+  "octavia_load_balancer_pools_detail_members_delete_success": "Użytkownik {{ membre }} został usunięty!",
+  "octavia_load_balancer_pools_detail_members_edit_name_success": "Twój użytkownik {{ membre }} został zmodyfikowany!",
+  "octavia_load_balancer_pools_detail_members_protocol_port_tooltip": "Port, na którym ruch jest wysyłany do użytkownika"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_pt_PT.json

@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_go_back": "Anterior",
+  "octavia_load_balancer_pools_detail_members_info_title": "Membros",
+  "octavia_load_balancer_pools_detail_members_description_part_1": "Os membros são os endereços IP backend reais que receberão o tráfego do Load Balancer.",
+  "octavia_load_balancer_pools_detail_members_create_success": "A criação do seu membro está em curso. Atualizar a página para o ver na lista.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_create_success": "A criação dos seus membros está em curso. Atualizar a página para os ver na lista.",
+  "octavia_load_balancer_pools_detail_members_delete_success": "O membro {{ membre }} foi eliminado com sucesso!",
+  "octavia_load_balancer_pools_detail_members_edit_name_success": "O membro {{ membre }} foi modificado com sucesso!",
+  "octavia_load_balancer_pools_detail_members_protocol_port_tooltip": "A porta através da qual o tráfego é enviado para o membro"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_de_DE.json

@@ -0,0 +1,8 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_manually": "Manuell hinzufügen",
+  "octavia_load_balancer_pools_detail_members_name": "Name",
+  "octavia_load_balancer_pools_detail_members_address": "IP-Adresse",
+  "octavia_load_balancer_pools_detail_members_protocol_port": "Port",
+  "octavia_load_balancer_pools_detail_members_edit": "Bearbeiten",
+  "octavia_load_balancer_pools_detail_members_delete": "Löschen"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_en_GB.json

@@ -0,0 +1,8 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_manually": "Manually add",
+  "octavia_load_balancer_pools_detail_members_name": "Name",
+  "octavia_load_balancer_pools_detail_members_address": "IP address",
+  "octavia_load_balancer_pools_detail_members_protocol_port": "Port",
+  "octavia_load_balancer_pools_detail_members_edit": "Edit",
+  "octavia_load_balancer_pools_detail_members_delete": "Delete"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_es_ES.json

@@ -0,0 +1,8 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_manually": "Añadir manualmente",
+  "octavia_load_balancer_pools_detail_members_name": "Nombre",
+  "octavia_load_balancer_pools_detail_members_address": "Dirección IP",
+  "octavia_load_balancer_pools_detail_members_protocol_port": "Puerto",
+  "octavia_load_balancer_pools_detail_members_edit": "Editar",
+  "octavia_load_balancer_pools_detail_members_delete": "Eliminar"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_fr_CA.json

@@ -0,0 +1,8 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_manually": "Ajouter manuellement",
+  "octavia_load_balancer_pools_detail_members_name": "Nom",
+  "octavia_load_balancer_pools_detail_members_address": "Adresse IP",
+  "octavia_load_balancer_pools_detail_members_protocol_port": "Port",
+  "octavia_load_balancer_pools_detail_members_edit": "Editer",
+  "octavia_load_balancer_pools_detail_members_delete": "Supprimer"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_fr_FR.json

@@ -0,0 +1,8 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_manually": "Ajouter manuellement",
+  "octavia_load_balancer_pools_detail_members_name": "Nom",
+  "octavia_load_balancer_pools_detail_members_address": "Adresse IP",
+  "octavia_load_balancer_pools_detail_members_protocol_port": "Port",
+  "octavia_load_balancer_pools_detail_members_edit": "Editer",
+  "octavia_load_balancer_pools_detail_members_delete": "Supprimer"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_it_IT.json

@@ -0,0 +1,8 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_manually": "Aggiungi manualmente",
+  "octavia_load_balancer_pools_detail_members_name": "Nome",
+  "octavia_load_balancer_pools_detail_members_address": "Indirizzo IP",
+  "octavia_load_balancer_pools_detail_members_protocol_port": "Porta",
+  "octavia_load_balancer_pools_detail_members_edit": "Modifica",
+  "octavia_load_balancer_pools_detail_members_delete": "Elimina"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_pl_PL.json

@@ -0,0 +1,8 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_manually": "Dodaj ręcznie",
+  "octavia_load_balancer_pools_detail_members_name": "Nazwa",
+  "octavia_load_balancer_pools_detail_members_address": "Adres IP",
+  "octavia_load_balancer_pools_detail_members_protocol_port": "Port",
+  "octavia_load_balancer_pools_detail_members_edit": "Edytuj",
+  "octavia_load_balancer_pools_detail_members_delete": "Usuń"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_pt_PT.json

@@ -0,0 +1,8 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_manually": "Adicionar manualmente",
+  "octavia_load_balancer_pools_detail_members_name": "Nome",
+  "octavia_load_balancer_pools_detail_members_address": "Endereço IP",
+  "octavia_load_balancer_pools_detail_members_protocol_port": "Porta",
+  "octavia_load_balancer_pools_detail_members_edit": "Editar",
+  "octavia_load_balancer_pools_detail_members_delete": "Eliminar"
+}

packages/manager/apps/pci-load-balancer/src/api/data/pool-member.ts

@@ -0,0 +1,27 @@
+import { v6 } from '@ovh-ux/manager-core-api';
+import {
+  LoadBalancerOperatingStatusEnum,
+  LoadBalancerProvisioningStatusEnum,
+} from './load-balancer';
+
+export type TPoolMember = {
+  id: string;
+  name: string;
+  operatingStatus: LoadBalancerOperatingStatusEnum;
+  provisioningStatus: LoadBalancerProvisioningStatusEnum;
+  address: string;
+  protocolPort: number;
+  weight: number;
+  search?: string;
+};
+
+export const getPoolMembers = async (
+  projectId: string,
+  region: string,
+  poolId: string,
+): Promise<TPoolMember[]> => {
+  const { data } = await v6.get<TPoolMember[]>(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/pool/${poolId}/member`,
+  );
+  return data;
+};

packages/manager/apps/pci-load-balancer/src/api/hook/usePoolMember.tsx

@@ -0,0 +1,53 @@
+import { Filter, applyFilters } from '@ovh-ux/manager-core-api';
+import { ColumnSort, PaginationState } from '@ovh-ux/manager-react-components';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { TPoolMember, getPoolMembers } from '@/api/data/pool-member';
+import { paginateResults, sortResults } from '@/helpers';
+
+export const useGetAllPoolMembers = (
+  projectId: string,
+  poolId: string,
+  region: string,
+) =>
+  useQuery({
+    queryKey: ['poolMembers', projectId, 'pool', poolId, region],
+    queryFn: () => getPoolMembers(projectId, region, poolId),
+    select: (poolMembers: TPoolMember[]) =>
+      poolMembers.map((member) => ({
+        ...member,
+        search: `${member.name} ${member.address} ${member.protocolPort}`,
+      })),
+  });
+
+export const usePoolMembers = (
+  projectId: string,
+  policyId: string,
+  region: string,
+  pagination: PaginationState,
+  sorting: ColumnSort,
+  filters: Filter[],
+) => {
+  const {
+    data: allPoolMembers,
+    error,
+    isLoading,
+    isPending,
+  } = useGetAllPoolMembers(projectId, policyId, region);
+  return useMemo(
+    () => ({
+      isLoading,
+      isPending,
+      allPoolMembers,
+      paginatedPoolMembers: paginateResults<TPoolMember>(
+        sortResults<TPoolMember>(
+          applyFilters(allPoolMembers || [], filters),
+          sorting,
+        ),
+        pagination,
+      ),
+      error,
+    }),
+    [allPoolMembers, error, isLoading, isPending, pagination, sorting, filters],
+  );
+};

packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/rules/RuleForm.component.tsx

@@ -59,7 +59,6 @@ export default function RuleForm({
     !formState.value ||
     !formState.key ||
     !formState.compareType;
-
   const [isTouched, setIsTouched] = useState({
     ruleType: false,
     compareType: false,

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/Detail.page.tsx

@@ -52,12 +52,12 @@ export default function PoolDetailPage() {
       title: tPoolsDetail(
         'load_balancer_pools_detail_health_monitor_tab_title',
       ),
-      to: '',
+      to: null,
     },
     {
       name: 'load_balancer_pools_detail_members_tab_title',
       title: tPoolsDetail('load_balancer_pools_detail_members_tab_title'),
-      to: '',
+      to: useResolvedPath(ROUTE_PATHS.POOL_MEMBERS).pathname,
     },
   ];
 

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/Member.page.tsx

@@ -0,0 +1,24 @@
+import { Headers, Notifications } from '@ovh-ux/manager-react-components';
+import { Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Outlet } from 'react-router-dom';
+
+export default function MemberPage() {
+  const { t } = useTranslation('pools/members');
+  return (
+    <>
+      <div className="header mt-8">
+        <Headers
+          description={t(
+            'octavia_load_balancer_pools_detail_members_description_part_1',
+          )}
+          title={t('octavia_load_balancer_pools_detail_members_info_title')}
+        />
+      </div>
+      <Notifications />
+      <Suspense>
+        <Outlet />
+      </Suspense>
+    </>
+  );
+}