-
Notifications
You must be signed in to change notification settings - Fork 98
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(zimbra): intialize diagnostics page
ref: MANAGER-16089 Signed-off-by: Tristan WAGNER <[email protected]>
- Loading branch information
1 parent
5095aa4
commit 50349c5
Showing
12 changed files
with
268 additions
and
80 deletions.
There are no files selected for viewing
3 changes: 1 addition & 2 deletions
3
packages/manager/apps/zimbra/public/translations/domains/Messages_fr_FR.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,13 @@ | ||
| { | ||
| "zimbra_domains_add_domain_title": "Ajouter un domaine", | ||
| "zimbra_domains_datagrid_account_label": "Nombre de comptes", | ||
| "zimbra_domains_datagrid_diagnostic_label": "Diagnostique", | ||
| "zimbra_domains_datagrid_diagnostic_configuration_ok": "Configuration OK", | ||
| "zimbra_domains_datagrid_diagnostic_tooltip_title": "Diagnostic {{ diagType }}", | ||
| "zimbra_domains_datagrid_domain_label": "Domaine", | ||
| "zimbra_domains_datagrid_organization_label": "Organisation", | ||
| "zimbra_domains_datagrid_status_label": "Statut", | ||
| "zimbra_domains_datagrid_account_number": "Nombre de comptes", | ||
| "zimbra_domains_tooltip_configure": "Configurer", | ||
| "zimbra_domains_tooltip_delete": "Supprimer", | ||
| "zimbra_domains_tooltip_diagnostics": "Diagnostiques", | ||
| "zimbra_domains_tooltip_need_organization": "Veuillez d'abord configurer une organisation" | ||
| } |
72 changes: 37 additions & 35 deletions
72
packages/manager/apps/zimbra/public/translations/domains/diagnostic/Messages_fr_FR.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,39 @@ | ||
| { | ||
| "zimbra_domain_modal_diagnostic_guide": "guide", | ||
| "zimbra_domain_modal_diagnostic_srv_title": "Diagnostique SRV", | ||
| "zimbra_domain_modal_diagnostic_srv_content_header": "Pour faciliter la configuration des boites mails sur vos terminaux, veuillez ajouter cette configuration à votre DNS (consulter notre <guide/>)", | ||
| "zimbra_domain_modal_diagnostic_srv_content_header_ovh_hosted_domain_part1": "La configuration SRV permet la configuration automatique de vos boites mails sur vos clients de messagerie.", | ||
| "zimbra_domain_modal_diagnostic_srv_content_header_ovh_hosted_domain_part2": "Votre domaine est hébergé chez OVH Cloud, nous allons procéder à la configuration de votre champ SRV.", | ||
| "zimbra_domain_modal_diagnostic_srv_domain": "Domaine", | ||
| "zimbra_domain_modal_diagnostic_fields": "Champs", | ||
| "zimbra_domain_modal_diagnostic_srv_action_validate": "Valider", | ||
| "zimbra_domain_modal_diagnostic_srv_action_cancel": "Annuler", | ||
| "zimbra_domain_modal_diagnostic_srv_action_close": "Fermer", | ||
| "zimbra_domain_modal_diagnostic_field_subdomain": "Sous domaine :", | ||
| "zimbra_domain_modal_diagnostic_field_priority": "Priorité :", | ||
| "zimbra_domain_modal_diagnostic_field_weight": "Poids :", | ||
| "zimbra_domain_modal_diagnostic_field_port": "Port :", | ||
| "zimbra_domain_modal_diagnostic_field_target": "Cible :", | ||
| "zimbra_domain_modal_diagnostic_mx_title": "Diagnostique MX", | ||
| "zimbra_domain_modal_diagnostic_mx_content_header_part1": "La configuration de l'enregistrement MX permet de recevoir vos emails dans vos boites mail.", | ||
| "zimbra_domain_modal_diagnostic_mx_content_header_part2": "Votre domaine n'étant pas géré par OVH Cloud, cette action doit être effectuée manuellement.", | ||
| "zimbra_domain_modal_diagnostic_mx_content_header_part3": "Veuillez créer les champs MX sur ce domaine en donnant les mêmes informations que ci-dessous.", | ||
| "zimbra_domain_modal_diagnostic_mx_content_header_ovh_hosted_domain_part1": "La configuration de l'enregistrement MX permet de recevoir vos emails dans vos boites mail.", | ||
| "zimbra_domain_modal_diagnostic_mx_content_header_ovh_hosted_domain_part2": "Votre domaine étant hébergé chez OVH Cloud, nous allons effectuer la configuration pour vous.", | ||
| "zimbra_domain_modal_diagnostic_mx_content_header_ovh_hosted_domain_part3": "Souhaitez-vous commencer à recevoir les mails du domaine <strong>{{domain}}</strong> sur ce service ?", | ||
| "zimbra_domain_modal_diagnostic_mx_content_footer": "En cas de problème, consultez la documentation de votre fournisseur de domaine.", | ||
| "zimbra_domain_modal_diagnostic_mx_action_validate": "Confirmer", | ||
| "zimbra_domain_modal_diagnostic_mx_action_test": "Tester", | ||
| "zimbra_domain_modal_diagnostic_mx_action_cancel": "Annuler", | ||
| "zimbra_domain_modal_diagnostic_mx_action_close": "Fermer", | ||
| "zimbra_domain_modal_diagnostic_spf_title": "Diagnostique SPF", | ||
| "zimbra_domain_modal_diagnostic_spf_content_header": "Si le domaine n'est pas géré par le même identifiant client que le service Exchange ou si votre domaine n'est pas hébergé chez OVHcloud, la configuration automatique n'est pas possible. Veuillez créer le champ SPF sur ce domaine manuellement en donnant les mêmes informations que ci-dessous.", | ||
| "zimbra_domain_modal_diagnostic_spf_content_header_ovh_hosted_domain_part1": "SPF permet de valider qu'OVHCloud est un émetteur légitime de mails avec votre nom de domaine.", | ||
| "zimbra_domain_modal_diagnostic_spf_content_header_ovh_hosted_domain_part2": "Votre domaine étant hébergé chez OVHCloud, nous pouvons procéder à la configuration automatique.", | ||
| "zimbra_domain_modal_diagnostic_spf_content_header_ovh_hosted_domain_part3": "Souhaitez-vous effectuer la configuration ?", | ||
| "zimbra_domain_modal_diagnostic_spf_action_cancel": "Annuler", | ||
| "zimbra_domain_modal_diagnostic_spf_action_close": "Fermer", | ||
| "zimbra_domain_modal_diagnostic_spf_action_validate": "Ok" | ||
| "zimbra_domain_diagnostic_cta_back": "Retour aux domaines", | ||
| "zimbra_domain_diagnostic_guide": "guide", | ||
| "zimbra_domain_diagnostic_subtitle": "Diagnostiques du domaine {{domain}}", | ||
| "zimbra_domain_diagnostic_srv_title": "Diagnostique SRV", | ||
| "zimbra_domain_diagnostic_srv_content_header": "Pour faciliter la configuration des boites mails sur vos terminaux, veuillez ajouter cette configuration à votre DNS (consulter notre <guide/>)", | ||
| "zimbra_domain_diagnostic_srv_content_header_ovh_hosted_domain_part1": "La configuration SRV permet la configuration automatique de vos boites mails sur vos clients de messagerie.", | ||
| "zimbra_domain_diagnostic_srv_content_header_ovh_hosted_domain_part2": "Votre domaine est hébergé chez OVH Cloud, nous allons procéder à la configuration de votre champ SRV.", | ||
| "zimbra_domain_diagnostic_srv_domain": "Domaine", | ||
| "zimbra_domain_diagnostic_fields": "Champs", | ||
| "zimbra_domain_diagnostic_srv_action_validate": "Valider", | ||
| "zimbra_domain_diagnostic_srv_action_cancel": "Annuler", | ||
| "zimbra_domain_diagnostic_srv_action_close": "Fermer", | ||
| "zimbra_domain_diagnostic_field_subdomain": "Sous domaine :", | ||
| "zimbra_domain_diagnostic_field_priority": "Priorité :", | ||
| "zimbra_domain_diagnostic_field_weight": "Poids :", | ||
| "zimbra_domain_diagnostic_field_port": "Port :", | ||
| "zimbra_domain_diagnostic_field_target": "Cible :", | ||
| "zimbra_domain_diagnostic_mx_title": "Diagnostique MX", | ||
| "zimbra_domain_diagnostic_mx_content_header_part1": "La configuration de l'enregistrement MX permet de recevoir vos emails dans vos boites mail.", | ||
| "zimbra_domain_diagnostic_mx_content_header_part2": "Votre domaine n'étant pas géré par OVH Cloud, cette action doit être effectuée manuellement.", | ||
| "zimbra_domain_diagnostic_mx_content_header_part3": "Veuillez créer les champs MX sur ce domaine en donnant les mêmes informations que ci-dessous.", | ||
| "zimbra_domain_diagnostic_mx_content_header_ovh_hosted_domain_part1": "La configuration de l'enregistrement MX permet de recevoir vos emails dans vos boites mail.", | ||
| "zimbra_domain_diagnostic_mx_content_header_ovh_hosted_domain_part2": "Votre domaine étant hébergé chez OVH Cloud, nous allons effectuer la configuration pour vous.", | ||
| "zimbra_domain_diagnostic_mx_content_header_ovh_hosted_domain_part3": "Souhaitez-vous commencer à recevoir les mails du domaine <strong>{{domain}}</strong> sur ce service ?", | ||
| "zimbra_domain_diagnostic_mx_content_footer": "En cas de problème, consultez la documentation de votre fournisseur de domaine.", | ||
| "zimbra_domain_diagnostic_mx_action_validate": "Confirmer", | ||
| "zimbra_domain_diagnostic_mx_action_test": "Tester", | ||
| "zimbra_domain_diagnostic_mx_action_cancel": "Annuler", | ||
| "zimbra_domain_diagnostic_mx_action_close": "Fermer", | ||
| "zimbra_domain_diagnostic_spf_title": "Diagnostique SPF", | ||
| "zimbra_domain_diagnostic_spf_content_header": "Si le domaine n'est pas géré par le même identifiant client que le service Exchange ou si votre domaine n'est pas hébergé chez OVHcloud, la configuration automatique n'est pas possible. Veuillez créer le champ SPF sur ce domaine manuellement en donnant les mêmes informations que ci-dessous.", | ||
| "zimbra_domain_diagnostic_spf_content_header_ovh_hosted_domain_part1": "SPF permet de valider qu'OVHCloud est un émetteur légitime de mails avec votre nom de domaine.", | ||
| "zimbra_domain_diagnostic_spf_content_header_ovh_hosted_domain_part2": "Votre domaine étant hébergé chez OVHCloud, nous pouvons procéder à la configuration automatique.", | ||
| "zimbra_domain_diagnostic_spf_content_header_ovh_hosted_domain_part3": "Souhaitez-vous effectuer la configuration ?", | ||
| "zimbra_domain_diagnostic_spf_action_cancel": "Annuler", | ||
| "zimbra_domain_diagnostic_spf_action_close": "Fermer", | ||
| "zimbra_domain_diagnostic_spf_action_validate": "Ok" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,33 @@ | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import { | ||
| useQuery, | ||
| UseQueryOptions, | ||
| UseQueryResult, | ||
| } from '@tanstack/react-query'; | ||
| import { usePlatform } from '@/hooks'; | ||
|
|
||
| import { | ||
| DomainType, | ||
| getZimbraPlatformDomainDetail, | ||
| getZimbraPlatformDomainQueryKey, | ||
| } from '@/api/domain'; | ||
|
|
||
| export const useDomain = (domainId: string, noCache?: boolean) => { | ||
| type UseDomainParams = Omit<UseQueryOptions, 'queryKey' | 'queryFn'> & { | ||
| domainId: string; | ||
| }; | ||
|
|
||
| export const useDomain = (params: UseDomainParams) => { | ||
| const { domainId, ...options } = params; | ||
| const { platformId } = usePlatform(); | ||
|
|
||
| return useQuery({ | ||
| queryKey: getZimbraPlatformDomainQueryKey(platformId, domainId), | ||
| queryFn: () => getZimbraPlatformDomainDetail(platformId, domainId), | ||
| enabled: !!platformId && !!domainId, | ||
| gcTime: noCache ? 0 : 5000, | ||
| }); | ||
| enabled: (query) => | ||
| (typeof options.enabled === 'function' | ||
| ? options.enabled(query) | ||
| : typeof options.enabled !== 'boolean' || options.enabled) && | ||
| !!platformId && | ||
| !!domainId, | ||
| ...options, | ||
| }) as UseQueryResult<DomainType>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
142 changes: 142 additions & 0 deletions
142
packages/manager/apps/zimbra/src/pages/dashboard/Domains/Diagnostics.page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { | ||
| LinkType, | ||
| Links, | ||
| IconLinkAlignmentType, | ||
| Subtitle, | ||
| } from '@ovh-ux/manager-react-components'; | ||
|
|
||
| import { useTranslation } from 'react-i18next'; | ||
| import { | ||
| useLocation, | ||
| useMatches, | ||
| useNavigate, | ||
| useSearchParams, | ||
| } from 'react-router-dom'; | ||
| import { ODS_LINK_COLOR } from '@ovhcloud/ods-components'; | ||
| import { useGenerateUrl, useDomain, usePlatform } from '@/hooks'; | ||
| import Loading from '@/components/Loading/Loading'; | ||
| import TabsPanel, { | ||
| activatedTabs, | ||
| computePathMatchers, | ||
| TabItemProps, | ||
| } from '@/components/layout-helpers/Dashboard/TabsPanel'; | ||
| import { urls } from '@/routes/routes.constants'; | ||
|
|
||
| export default function DomainDiagnostics() { | ||
| const { t } = useTranslation('domains/diagnostic'); | ||
| const { platformId } = usePlatform(); | ||
| const location = useLocation(); | ||
| const [searchParams] = useSearchParams(); | ||
| const params = Object.fromEntries(searchParams.entries()); | ||
| const navigate = useNavigate(); | ||
| const goBackUrl = useGenerateUrl('../..', 'href'); | ||
| const onClose = () => navigate(goBackUrl); | ||
|
|
||
| const matches = useMatches(); | ||
|
|
||
| console.log(matches); | ||
| const domainId = searchParams.get('domainId'); | ||
| const { data: domain, isLoading } = useDomain({ | ||
| domainId, | ||
| }); | ||
|
|
||
| const pathMatcherMXTab = computePathMatchers( | ||
| [urls.domains_diagnostic_mx], | ||
| platformId, | ||
| ); | ||
|
|
||
| const pathMatcherSRVTab = computePathMatchers( | ||
| [urls.domains_diagnostic_srv], | ||
| platformId, | ||
| ); | ||
|
|
||
| const pathMatcherSPFTab = computePathMatchers( | ||
| [urls.domains_diagnostic_spf], | ||
| platformId, | ||
| ); | ||
|
|
||
| const pathMatcherDKIMTab = computePathMatchers( | ||
| [urls.domains_diagnostic_dkim], | ||
| platformId, | ||
| ); | ||
|
|
||
| const [isMXTab, setIsMXTab] = useState( | ||
| activatedTabs(pathMatcherMXTab, location), | ||
| ); | ||
| const [isSRVTab, setIsSRVTab] = useState( | ||
| activatedTabs(pathMatcherSRVTab, location), | ||
| ); | ||
| const [isSPFTab, setIsSPFTab] = useState( | ||
| activatedTabs(pathMatcherSPFTab, location), | ||
| ); | ||
| const [isDKIMTab, setIsDKIMTab] = useState( | ||
| activatedTabs(pathMatcherDKIMTab, location), | ||
| ); | ||
|
|
||
| const tabsList: TabItemProps[] = [ | ||
| { | ||
| name: 'mx', | ||
| title: 'MX', | ||
| to: useGenerateUrl('../diagnostics/mx', 'path', params), | ||
| pathMatchers: pathMatcherMXTab, | ||
| }, | ||
| { | ||
| name: 'srv', | ||
| title: 'SRV', | ||
| to: useGenerateUrl('../diagnostics/srv', 'path', params), | ||
| pathMatchers: pathMatcherSRVTab, | ||
| }, | ||
| { | ||
| name: 'spf', | ||
| title: 'SPF', | ||
| to: useGenerateUrl('../diagnostics/spf', 'path', params), | ||
| pathMatchers: pathMatcherSPFTab, | ||
| }, | ||
| { | ||
| name: 'dkim', | ||
| title: 'DKIM', | ||
| to: useGenerateUrl('../diagnostics/dkim', 'path', params), | ||
| pathMatchers: pathMatcherDKIMTab, | ||
| }, | ||
| ]; | ||
|
|
||
| useEffect(() => { | ||
| setIsMXTab(activatedTabs(pathMatcherMXTab, location)); | ||
| setIsSRVTab(activatedTabs(pathMatcherSRVTab, location)); | ||
| setIsSPFTab(activatedTabs(pathMatcherSPFTab, location)); | ||
| setIsDKIMTab(activatedTabs(pathMatcherDKIMTab, location)); | ||
| console.log(isMXTab, isSRVTab, isSPFTab, isDKIMTab); | ||
| }, [location, isLoading]); | ||
|
|
||
| if (isLoading) { | ||
| return <Loading />; | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className="flex flex-col w-full gap-4 mb-5" | ||
| data-testid="domain-diagnostic-page" | ||
| > | ||
| <Links | ||
| iconAlignment={IconLinkAlignmentType.left} | ||
| type={LinkType.back} | ||
| href={goBackUrl} | ||
| color={ODS_LINK_COLOR.primary} | ||
| label={t('zimbra_domain_diagnostic_cta_back')} | ||
| /> | ||
| <Subtitle> | ||
| {t('zimbra_domain_diagnostic_subtitle', { | ||
| domain: domain?.currentState.name, | ||
| })} | ||
| </Subtitle> | ||
| <div className="mt-5 mb-8"> | ||
| <TabsPanel tabs={tabsList} /> | ||
| </div> | ||
| {isMXTab && <div>MX</div>} | ||
| {isSRVTab && <div>SRV</div>} | ||
| {isSPFTab && <div>SPF</div>} | ||
| {isDKIMTab && <div>DKIM</div>} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.