fix(export): ajout des messages d'erreur au niveau de l'UI de l'export (

#1171) * fix(export): done * remise de lexport * fix: erreur * Update targets/frontend/src/components/export-es/Status.tsx Co-authored-by: Martial Maillot <[email protected]> * fix: dataset --------- Co-authored-by: Martial Maillot <[email protected]>
SocialGouv · Dec 18, 2023 · 2375126 · 2375126
1 parent ba7dc37
commit 2375126
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 154 deletions.
diff --git a/shared/types/index.ts b/shared/types/index.ts
@@ -438,6 +438,7 @@ export interface ExportEsStatus {
   created_at: Date;
   updated_at: Date;
   user?: User;
+  error?: string;
 }
 
 export type Answer = {

diff --git a/targets/export-elasticsearch/src/repositories/graphql/mutation.ts b/targets/export-elasticsearch/src/repositories/graphql/mutation.ts
@@ -16,8 +16,8 @@ mutation createExportEsStatus($id: uuid!, $user_id: uuid!, $environment: String!
 }`;
 
 export const updateOneExportEsStatus = `
-mutation updateOneExportEsStatus($id: uuid!, $status: String!, $updated_at: timestamptz) {
-  update_export_es_status_by_pk(pk_columns: {id: $id}, _set: {status: $status, updated_at: $updated_at}) {
+mutation updateOneExportEsStatus($id: uuid!, $status: String!, $updated_at: timestamptz, $error: String) {
+  update_export_es_status_by_pk(pk_columns: {id: $id}, _set: {status: $status, updated_at: $updated_at, error: $error}) {
     id
     environment
     status
@@ -29,26 +29,6 @@ mutation updateOneExportEsStatus($id: uuid!, $status: String!, $updated_at: time
     }
     created_at
     updated_at
-  }
-}`;
-
-export const updateExportEsStatus = `
-mutation updateExportEsStatus($old_status: String!, $new_status: String!, $updated_at: timestamptz) {
-  update_export_es_status(
-    where: {status: {_eq: $old_status }}
-    _set: {status: $new_status, updated_at: $updated_at}) {
-    returning {
-      id
-      environment
-      status
-      user_id
-      user {
-        name
-        email
-        created_at
-      }
-      created_at
-      updated_at
-    }
+    error
   }
 }`;
diff --git a/targets/export-elasticsearch/src/repositories/graphql/queries.ts b/targets/export-elasticsearch/src/repositories/graphql/queries.ts
@@ -1,20 +1,3 @@
-export const getExportEsStatusById = `
-query getExportEsStatusById($id: uuid!) {
-  export_es_status_by_pk(id: $id) {
-    id
-    environment
-    status
-    user_id
-    user {
-      name
-      email
-      created_at
-    }
-    created_at
-    updated_at
-  }
-}`;
-
 export const getAllExport = `
 query getAllExport {
   export_es_status(order_by: {updated_at: desc}) {
@@ -29,6 +12,7 @@ query getAllExport {
     }
     created_at
     updated_at
+    error
   }
 }`;
 
@@ -46,6 +30,7 @@ query getExportEsStatusByEnvironments($environment: String!) {
     }
     created_at
     updated_at
+    error
   }
 }`;
 
@@ -63,6 +48,7 @@ query getLatestExportEsStatus($environment: String!) {
     }
     created_at
     updated_at
+    error
   }
 }
 `;
@@ -81,5 +67,6 @@ query getExportEsStatusByStatus($status: String!) {
     }
     created_at
     updated_at
+    error
   }
 }`;
diff --git a/targets/export-elasticsearch/src/repositories/status.ts b/targets/export-elasticsearch/src/repositories/status.ts
@@ -8,10 +8,8 @@ import {
   createExportEsStatus,
   getAllExport,
   getExportEsStatusByEnvironments,
-  getExportEsStatusById,
   getExportEsStatusByStatus,
   getLatestExportEsStatus,
-  updateExportEsStatus,
   updateOneExportEsStatus,
 } from "./graphql";
 
@@ -52,7 +50,8 @@ export class ExportRepository {
   public async updateOne(
     id: string,
     status: Status,
-    updatedAt: Date
+    updatedAt: Date,
+    error?: string
   ): Promise<ExportEsStatus> {
     const res = await gqlClient()
       .mutation<{ update_export_es_status_by_pk: ExportEsStatus }>(
@@ -61,6 +60,7 @@ export class ExportRepository {
           id,
           status,
           updated_at: updatedAt,
+          error: error ?? null,
         }
       )
       .toPromise();
@@ -73,46 +73,6 @@ export class ExportRepository {
     return res.data.update_export_es_status_by_pk;
   }
 
-  public async updateAll(
-    oldStatus: Status,
-    newStatus: Status,
-    updatedAt: Date
-  ): Promise<ExportEsStatus[]> {
-    const res = await gqlClient()
-      .mutation<{ update_export_es_status_by_pk: ExportEsStatus[] }>(
-        updateExportEsStatus,
-        {
-          new_status: newStatus,
-          old_status: oldStatus,
-          updated_at: updatedAt,
-        }
-      )
-      .toPromise();
-    if (res.error) {
-      throw res.error;
-    }
-    if (!res.data?.update_export_es_status_by_pk) {
-      throw new Error("Failed to update, undefined object");
-    }
-    return res.data.update_export_es_status_by_pk;
-  }
-
-  public async getOneById(id: string): Promise<ExportEsStatus> {
-    const res = await gqlClient()
-      .query<{ export_es_status_by_pk: ExportEsStatus }>(
-        getExportEsStatusById,
-        { id }
-      )
-      .toPromise();
-    if (res.error) {
-      throw res.error;
-    }
-    if (!res.data?.export_es_status_by_pk) {
-      throw new Error("Failed to get, undefined object");
-    }
-    return res.data.export_es_status_by_pk;
-  }
-
   public async getLatestByEnv(
     environment: Environment
   ): Promise<ExportEsStatus> {

diff --git a/targets/export-elasticsearch/src/services/__test__/fake/export.ts b/targets/export-elasticsearch/src/services/__test__/fake/export.ts
@@ -37,36 +37,7 @@ export class FakeExportRepository {
       status,
       updated_at: updatedAt,
       user_id: "updated-id",
-    };
-  }
-
-  async updateAll(
-    _oldStatus: Status,
-    newStatus: Status,
-    updatedAt: Date
-  ): Promise<ExportEsStatus[]> {
-    await wait(100);
-    return [
-      {
-        created_at: new Date(),
-        environment: Environment.preproduction,
-        id: "1",
-        status: newStatus,
-        updated_at: updatedAt,
-        user_id: "updatedAll-id",
-      },
-    ];
-  }
-
-  async getOneById(id: string): Promise<ExportEsStatus> {
-    await wait(100);
-    return {
-      created_at: new Date(),
-      environment: Environment.preproduction,
-      id,
-      status: Status.completed,
-      updated_at: new Date(),
-      user_id: "getOne-id",
+      error: "error",
     };
   }
 

diff --git a/targets/export-elasticsearch/src/services/export.ts b/targets/export-elasticsearch/src/services/export.ts
@@ -65,12 +65,12 @@ export class ExportService {
           Status.completed,
           new Date()
         );
-      } catch (e) {
-        console.error(e);
+      } catch (e: any) {
         return await this.exportRepository.updateOne(
           id,
           Status.failed,
-          new Date()
+          new Date(),
+          e.message
         );
       }
     } else {

diff --git a/targets/export-elasticsearch/src/workers/ingester-preprod.ts b/targets/export-elasticsearch/src/workers/ingester-preprod.ts
@@ -22,7 +22,6 @@ const ingester = async (): Promise<string> => {
       );
       resolve("Export elasticsearch completed successfully");
     } catch (error: unknown) {
-      console.error("Error during export : ", JSON.stringify(error, null, 2));
       reject(error);
     }
   });

diff --git a/targets/frontend/src/components/export-es/Status.tsx b/targets/frontend/src/components/export-es/Status.tsx
@@ -1,18 +1,44 @@
 import { Status as StatusType } from "@shared/types";
-import { MdTimelapse } from "react-icons/md";
-import { Box, Typography } from "@mui/material";
+import {
+  Box,
+  CircularProgress,
+  Popover,
+  Typography,
+  Button,
+  IconButton,
+} from "@mui/material";
 import { fr } from "@codegouvfr/react-dsfr";
+import React from "react";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 
 type StatusProps = {
   status?: StatusType;
+  error?: string;
 };
 
-export function Status({ status }: StatusProps): JSX.Element {
+export function Status({ status, error }: StatusProps): JSX.Element {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
+    null
+  );
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+  const errorDisplayed =
+    error ?? "Aucune  information sur l'erreur n'a été enregistrée";
+
   if (!status) {
     return (
       <Box sx={{ alignItems: "center", display: "flex" }}>
+        <CircularProgress size="25px" style={{ marginRight: "1rem" }} />
         <Typography>En cours</Typography>{" "}
-        <MdTimelapse style={{ marginBottom: "-.3rem", marginLeft: ".4rem" }} />
       </Box>
     );
   }
@@ -32,17 +58,50 @@ export function Status({ status }: StatusProps): JSX.Element {
     case StatusType.running:
       return (
         <Box sx={{ alignItems: "center", display: "flex" }}>
-          <Typography>En cours</Typography>{" "}
-          <MdTimelapse
-            style={{ marginBottom: "-.2rem", marginLeft: ".3rem" }}
-          />
+          <CircularProgress size="25px" style={{ marginRight: "1rem" }} />
+          <Typography>En cours</Typography>
         </Box>
       );
     case StatusType.failed:
       return (
-        <Typography color={fr.colors.decisions.text.default.error.default}>
-          Erreur
-        </Typography>
+        <>
+          <Button
+            aria-describedby={id}
+            variant="outlined"
+            onClick={handleClick}
+            color="error"
+          >
+            Erreur
+          </Button>
+          <Popover
+            id={id}
+            open={open}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "left",
+            }}
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography sx={{ p: 2 }}>
+              {errorDisplayed}{" "}
+              <IconButton
+                aria-label="close"
+                onClick={() => {
+                  navigator.clipboard.writeText(errorDisplayed);
+                  handleClose();
+                }}
+              >
+                <ContentCopyIcon />
+              </IconButton>
+            </Typography>
+          </Popover>
+        </>
       );
     default:
       return <Typography>{status}</Typography>;

diff --git a/targets/frontend/src/hooks/exportEs.ts b/targets/frontend/src/hooks/exportEs.ts
@@ -14,7 +14,8 @@ type ExportEsState = {
 export function useExportEs(): [
   ExportEsState,
   () => void,
-  (environment: Environment, user: User) => void
+  (environment: Environment, user: User) => void,
+  (env: Environment) => Date
 ] {
   const [state, setState] = useState<ExportEsState>({
     error: null,
@@ -57,6 +58,14 @@ export function useExportEs(): [
       });
   };
 
+  const getLatestDeployDate = (env: Environment) => {
+    const lastestCompleted = state?.exportData.filter(
+      (data) => data.status === Status.completed && data.environment === env
+    )[0];
+
+    return lastestCompleted?.created_at;
+  };
+
   const runExportEs = (environment: Environment, user: User) => {
     const newExportEs: ExportEsStatus = {
       created_at: new Date(),
@@ -131,5 +140,5 @@ export function useExportEs(): [
       });
   };
 
-  return [state, getExportEs, runExportEs];
+  return [state, getExportEs, runExportEs, getLatestDeployDate];
 }
diff --git a/targets/frontend/src/modules/export/components/document-list.tsx b/targets/frontend/src/modules/export/components/document-list.tsx
@@ -30,7 +30,7 @@ export default function DocumentList({
 
         {isLoadingDocs ? (
           <Stack mt={2} justifyContent="center">
-            <Spinner></Spinner>
+            <Spinner />
           </Stack>
         ) : (
           <>