diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_de_DE.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_de_DE.json new file mode 100644 index 000000000000..2d9df7b92211 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_en_GB.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_en_GB.json new file mode 100644 index 000000000000..f28c8a87526f --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_es_ES.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_es_ES.json new file mode 100644 index 000000000000..ef71c9062fc2 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_fr_CA.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_fr_CA.json new file mode 100644 index 000000000000..efe411040f17 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_fr_FR.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_fr_FR.json new file mode 100644 index 000000000000..efe411040f17 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_it_IT.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_it_IT.json new file mode 100644 index 000000000000..c93ba2685f20 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_pl_PL.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_pl_PL.json new file mode 100644 index 000000000000..b1f827187c59 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_pt_PT.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/Messages_pt_PT.json new file mode 100644 index 000000000000..44f1f7d66f9b --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_de_DE.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_de_DE.json new file mode 100644 index 000000000000..e4a11195accb --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_en_GB.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_en_GB.json new file mode 100644 index 000000000000..8952a28cced1 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_es_ES.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_es_ES.json new file mode 100644 index 000000000000..4cd5fa72fe45 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_fr_CA.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_fr_CA.json new file mode 100644 index 000000000000..f09bb3b3362f --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_fr_FR.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_fr_FR.json new file mode 100644 index 000000000000..f09bb3b3362f --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_it_IT.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_it_IT.json new file mode 100644 index 000000000000..e85042e3a880 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_pl_PL.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_pl_PL.json new file mode 100644 index 000000000000..ebec0dd7b358 --- /dev/null +++ b/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ń" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_pt_PT.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/list/Messages_pt_PT.json new file mode 100644 index 000000000000..796c3fba539c --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/src/api/data/pool-member.ts b/packages/manager/apps/pci-load-balancer/src/api/data/pool-member.ts new file mode 100644 index 000000000000..dd90ce1057c2 --- /dev/null +++ b/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 => { + const { data } = await v6.get( + `/cloud/project/${projectId}/region/${region}/loadbalancing/pool/${poolId}/member`, + ); + return data; +}; diff --git a/packages/manager/apps/pci-load-balancer/src/api/hook/usePoolMember.tsx b/packages/manager/apps/pci-load-balancer/src/api/hook/usePoolMember.tsx new file mode 100644 index 000000000000..6f92dc61931b --- /dev/null +++ b/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( + sortResults( + applyFilters(allPoolMembers || [], filters), + sorting, + ), + pagination, + ), + error, + }), + [allPoolMembers, error, isLoading, isPending, pagination, sorting, filters], + ); +}; diff --git a/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/rules/RuleForm.component.tsx b/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/rules/RuleForm.component.tsx index 807f45ae69ab..f1bfdda23b9e 100644 --- a/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/rules/RuleForm.component.tsx +++ b/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, diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/Detail.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/Detail.page.tsx index 244fad828aff..ac85bd883194 100644 --- a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/Detail.page.tsx +++ b/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, }, ]; diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/Member.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/Member.page.tsx new file mode 100644 index 000000000000..6013edd79dc8 --- /dev/null +++ b/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 ( + <> +
+ +
+ + + + + + ); +} diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/List.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/List.page.tsx new file mode 100644 index 000000000000..b97544e773f9 --- /dev/null +++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/List.page.tsx @@ -0,0 +1,201 @@ +import { + Datagrid, + FilterAdd, + FilterList, + useColumnFilters, + useDataGrid, + useNotifications, +} from '@ovh-ux/manager-react-components'; +import { + OsdsButton, + OsdsIcon, + OsdsPopover, + OsdsPopoverContent, + OsdsSearchBar, + OsdsSpinner, +} from '@ovhcloud/ods-components/react'; +import { + ODS_BUTTON_SIZE, + ODS_BUTTON_VARIANT, + ODS_ICON_NAME, + ODS_ICON_SIZE, + ODS_SPINNER_SIZE, +} from '@ovhcloud/ods-components'; +import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { FilterCategories, FilterComparator } from '@ovh-ux/manager-core-api'; +import { Suspense, useRef, useState } from 'react'; +import { Outlet, useNavigate, useParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { usePoolMembers } from '@/api/hook/usePoolMember'; +import { usePoolMemberDatagridColumn } from './usePoolMemberDatagridColumn'; + +export default function PoolMemberList() { + const { t } = useTranslation('pools/members/list'); + const { t: tPoolDetail } = useTranslation('load-balancer-pools-detail'); + const { t: tFilter } = useTranslation('filter'); + + const { projectId, region, poolId } = useParams(); + const { pagination, setPagination, sorting, setSorting } = useDataGrid(); + + const navigate = useNavigate(); + const { clearNotifications } = useNotifications(); + const { filters, addFilter, removeFilter } = useColumnFilters(); + const [searchField, setSearchField] = useState(''); + const filterPopoverRef = useRef(undefined); + + const { paginatedPoolMembers, isPending } = usePoolMembers( + projectId, + poolId, + region, + pagination, + sorting, + filters, + ); + + const columns = usePoolMemberDatagridColumn(); + + return ( + <> +
+
+ { + clearNotifications(); + navigate('./create'); + }} + > + + {t('octavia_load_balancer_pools_detail_members_add_manually')} + + { + clearNotifications(); + navigate('./add-ip-instance'); + }} + > + + {tPoolDetail( + 'octavia_load_balancer_pools_detail_add_ips_instances', + )} + +
+ +
+ { + setPagination({ + pageIndex: 0, + pageSize: pagination.pageSize, + }); + addFilter({ + key: 'search', + value: detail.inputValue, + comparator: FilterComparator.Includes, + label: '', + }); + setSearchField(''); + }} + /> + + + + {tFilter('common_criteria_adder_filter_label')} + + + { + setPagination({ + pageIndex: 0, + pageSize: pagination.pageSize, + }); + addFilter({ + ...addedFilter, + label: column.label, + }); + filterPopoverRef.current?.closeSurface(); + }} + /> + + +
+
+ +
+ +
+ + {isPending ? ( + + ) : ( + + )} + + + + + ); +} diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/usePoolMemberDatagridColumn.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/usePoolMemberDatagridColumn.tsx new file mode 100644 index 000000000000..de456301451a --- /dev/null +++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/usePoolMemberDatagridColumn.tsx @@ -0,0 +1,70 @@ +import { + DatagridColumn, + DataGridTextCell, +} from '@ovh-ux/manager-react-components'; +import { useTranslation } from 'react-i18next'; +import OperatingStatusComponent from '@/components/listing/OperatingStatus.component'; +import ProvisioningStatusComponent from '@/components/listing/ProvisioningStatus.component'; +import ActionsComponent from '@/components/detail/listeners/l7/rules/Actions.component'; +import { TPoolMember } from '@/api/data/pool-member'; + +export const usePoolMemberDatagridColumn = () => { + const { t: tLoadBalancer } = useTranslation('octavia-load-balancer'); + const { t: tPoolMembers } = useTranslation('pools/members/list'); + const columns: DatagridColumn[] = [ + { + id: 'name', + cell: (props: TPoolMember) => ( + {props.name} + ), + label: tPoolMembers('octavia_load_balancer_pools_detail_members_name'), + }, + { + id: 'address', + cell: (props: TPoolMember) => ( + {props.address} + ), + label: tPoolMembers('octavia_load_balancer_pools_detail_members_address'), + }, + { + id: 'protocolPort', + cell: (props: TPoolMember) => ( + {props.protocolPort} + ), + label: tPoolMembers( + 'octavia_load_balancer_pools_detail_members_protocol_port', + ), + }, + { + id: 'provisioningStatus', + cell: (props: TPoolMember) => ( + + ), + label: tLoadBalancer('octavia_load_balancer_provisioning_status'), + }, + { + id: 'operatingStatus', + cell: (props: TPoolMember) => ( + + ), + label: tLoadBalancer('octavia_load_balancer_operating_status'), + }, + { + id: 'actions', + cell: (props: TPoolMember) => ( +
+ +
+ ), + label: '', + }, + ]; + + return columns; +}; diff --git a/packages/manager/apps/pci-load-balancer/src/routes.tsx b/packages/manager/apps/pci-load-balancer/src/routes.tsx index eb49715cad60..1e46e370ecf3 100644 --- a/packages/manager/apps/pci-load-balancer/src/routes.tsx +++ b/packages/manager/apps/pci-load-balancer/src/routes.tsx @@ -29,6 +29,8 @@ export const ROUTE_PATHS = { POOL_LIST: 'list', POOL_DELETE: 'delete', POOL_DETAIL: ':region/:loadBalancerId/pools/:poolId', + POOL_MEMBERS: 'members', + POOL_MEMBERS_LIST: 'list', STATISTICS: 'statistics', CERTIFICATES: 'certificates', LOGS: 'logs', @@ -87,6 +89,12 @@ const ListenersEditPage = lazy(() => ); const PoolsPage = lazy(() => import('@/pages/detail/pools/Pools.page')); +const PoolsMembersListPage = lazy(() => + import('@/pages/detail/pools/detail/members/list/List.page'), +); +const PoolsMembersPage = lazy(() => + import('@/pages/detail/pools/detail/members/Member.page'), +); const PoolsCreatePage = lazy(() => import('@/pages/detail/pools/create/PoolsCreate.page'), ); @@ -138,6 +146,7 @@ const Routes = ( } /> + } /> + + } + /> + +