Préavis – Traque le temps d'affichage du spinner et de l'activation d…

…u bouton télécharger (#3618)

## Linked issues

- #3579

----

- [ ] Tests E2E (Cypress)

frontend/src/features/PriorNotification/components/LogbookPriorNotificationForm/index.tsx

@@ -2,6 +2,7 @@ import { verifyAndSendPriorNotification } from '@features/PriorNotification/useC
 import { getPriorNotificationIdentifier } from '@features/PriorNotification/utils'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
+import { customSentry, CustomSentryMeasurementName } from '@libs/customSentry'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { assertNotNullish } from '@utils/assertNotNullish'
 
@@ -41,6 +42,11 @@ export function LogbookPriorNotificationForm() {
     return <PriorNotificationCard detail={undefined} isLoading />
   }
 
+  customSentry.endMeasurement(
+    CustomSentryMeasurementName.LOGBOOK_PRIOR_NOTIFICATION_FORM_SPINNER,
+    openedPriorNotificationDetail.reportId
+  )
+
   return (
     <PriorNotificationCard
       bodyChildren={

frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/index.tsx

@@ -3,6 +3,7 @@ import { verifyAndSendPriorNotification } from '@features/PriorNotification/useC
 import { getPriorNotificationIdentifier } from '@features/PriorNotification/utils'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
+import { customSentry, CustomSentryMeasurementName } from '@libs/customSentry'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { assertNotNullish } from '@utils/assertNotNullish'
 import { Formik } from 'formik'
@@ -86,6 +87,13 @@ export function ManualPriorNotificationForm() {
     )
   }
 
+  if (openedPriorNotificationDetail?.reportId) {
+    customSentry.endMeasurement(
+      CustomSentryMeasurementName.MANUAL_PRIOR_NOTIFICATION_FORM_SPINNER,
+      openedPriorNotificationDetail.reportId
+    )
+  }
+
   return (
     <Formik
       initialValues={editedManualPriorNotificationFormValues}

frontend/src/features/PriorNotification/components/shared/DownloadButton/index.tsx

@@ -6,10 +6,11 @@ import {
   StatusBodyEnum,
   useGetPriorNotificationPdfExistenceQuery
 } from '@features/PriorNotification/priorNotificationApi'
-import { Accent, Button, customDayjs, Dropdown, Icon } from '@mtes-mct/monitor-ui'
+import { customSentry, CustomSentryMeasurementName } from '@libs/customSentry'
+import { Accent, Button, customDayjs, Dropdown, Icon, usePrevious } from '@mtes-mct/monitor-ui'
 import { downloadAsPdf } from '@utils/downloadAsPdf'
 import printJS from 'print-js'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 
 import { HTML_STYLE } from './template'
 import { getHasAuthorizedLandingDownload, getHtmlContent } from './utils'
@@ -33,6 +34,8 @@ export function DownloadButton({
   const getGearsApiQuery = useGetGearsQuery()
   const { data } = useGetPriorNotificationPdfExistenceQuery(reportId, RTK_ONE_MINUTE_POLLING_QUERY_OPTIONS)
 
+  const wasDisabled = usePrevious(isDisabled)
+
   const isPriorNotificationDocumentAvailable = useMemo(() => data?.status === StatusBodyEnum.FOUND, [data])
 
   const hasAuthorizedLandingDownload =
@@ -76,6 +79,18 @@ export function DownloadButton({
     downloadAsPdf(fileName, blob)
   }
 
+  useEffect(() => {
+    if (isDisabled === wasDisabled) {
+      return
+    }
+
+    if (isDisabled) {
+      customSentry.startMeasurement(CustomSentryMeasurementName.PRIOR_NOTIFICATION_CARD_DOWNLOAD_BUTTON, reportId)
+    } else {
+      customSentry.endMeasurement(CustomSentryMeasurementName.PRIOR_NOTIFICATION_CARD_DOWNLOAD_BUTTON, reportId)
+    }
+  }, [isDisabled, reportId, wasDisabled])
+
   return (
     <>
       {hasAuthorizedLandingDownload && (

frontend/src/features/PriorNotification/useCases/openLogbookPriorNotificationForm.ts

@@ -1,5 +1,6 @@
 import { RtkCacheTagType } from '@api/constants'
 import { addMainWindowBanner } from '@features/SideWindow/useCases/addMainWindowBanner'
+import { customSentry, CustomSentryMeasurementName } from '@libs/customSentry'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { FrontendApiError } from '@libs/FrontendApiError'
 import { FrontendError } from '@libs/FrontendError'
@@ -19,6 +20,11 @@ export const openLogbookPriorNotificationForm =
   (identifier: PriorNotification.Identifier, fingerprint?: string): MainAppThunk<Promise<void>> =>
   async dispatch => {
     try {
+      customSentry.startMeasurement(
+        CustomSentryMeasurementName.LOGBOOK_PRIOR_NOTIFICATION_FORM_SPINNER,
+        identifier.reportId
+      )
+
       dispatch(displayedErrorActions.unset(DisplayedErrorKey.SIDE_WINDOW_PRIOR_NOTIFICATION_FORM_ERROR))
       dispatch(priorNotificationActions.closePriorNotificationCardAndForm())
       dispatch(priorNotificationActions.openPriorNotification(OpenedPriorNotificationType.LogbookForm))

frontend/src/features/PriorNotification/useCases/openManualPriorNotificationForm.ts

@@ -1,4 +1,5 @@
 import { RtkCacheTagType } from '@api/constants'
+import { customSentry, CustomSentryMeasurementName } from '@libs/customSentry'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { FrontendApiError } from '@libs/FrontendApiError'
 import { FrontendError } from '@libs/FrontendError'
@@ -24,6 +25,13 @@ export const openManualPriorNotificationForm =
   ): MainAppThunk<Promise<void>> =>
   async dispatch => {
     try {
+      if (identifier) {
+        customSentry.startMeasurement(
+          CustomSentryMeasurementName.LOGBOOK_PRIOR_NOTIFICATION_FORM_SPINNER,
+          identifier.reportId
+        )
+      }
+
       dispatch(displayedErrorActions.unset(DisplayedErrorKey.SIDE_WINDOW_PRIOR_NOTIFICATION_FORM_ERROR))
       dispatch(priorNotificationActions.closePriorNotificationCardAndForm())
       dispatch(priorNotificationActions.openPriorNotification(OpenedPriorNotificationType.ManualForm))

frontend/src/libs/customSentry.ts

@@ -0,0 +1,61 @@
+/* eslint-disable no-empty */
+
+import { metrics, setMeasurement } from '@sentry/react'
+
+type CustomSentryMeasurementValue = {
+  id: string
+  value: number
+}
+
+export enum CustomSentryMeasurementName {
+  LOGBOOK_PRIOR_NOTIFICATION_FORM_SPINNER = 'LOGBOOK_PRIOR_NOTIFICATION_FORM_SPINNER',
+  MANUAL_PRIOR_NOTIFICATION_FORM_SPINNER = 'MANUAL_PRIOR_NOTIFICATION_FORM_SPINNER',
+  PRIOR_NOTIFICATION_CARD_DOWNLOAD_BUTTON = 'PRIOR_NOTIFICATION_CARD_DOWNLOAD_BUTTON'
+}
+
+class CustomSentry {
+  mesurements: Map<string, CustomSentryMeasurementValue> = new Map()
+
+  clearMeasurement(name: CustomSentryMeasurementName, id: string) {
+    try {
+      const key = `${name}-${id}`
+      if (!this.mesurements.has(key)) {
+        return
+      }
+
+      this.mesurements.delete(key)
+    } catch (_) {}
+  }
+
+  startMeasurement(name: CustomSentryMeasurementName, id: string) {
+    try {
+      const key = `${name}-${id}`
+      const value = Date.now()
+      if (this.mesurements.has(key)) {
+        return
+      }
+
+      this.mesurements.set(key, { id, value })
+    } catch (_) {}
+  }
+
+  endMeasurement(name: CustomSentryMeasurementName, id: string) {
+    try {
+      const key = `${name}-${id}`
+      const measurement = this.mesurements.get(key)
+      if (!measurement) {
+        return
+      }
+
+      setMeasurement(name, Date.now() - measurement.value, 'millisecond')
+      metrics.distribution(name, measurement.value, {
+        tags: { type: 'important' },
+        unit: 'millisecond'
+      })
+
+      this.mesurements.delete(key)
+    } catch (_) {}
+  }
+}
+
+export const customSentry = new CustomSentry()