From bec80dc38ef7636102c958f8366b6383427c2b7b Mon Sep 17 00:00:00 2001 From: William Date: Thu, 29 Aug 2024 16:54:46 +0200 Subject: [PATCH] Logs fetched only when clicking on a urlCard (#90) Logs fetched only when clicking on a urlCard and used as props to LogsModal --- .../src/common/components/UrlCard/UrlCard.tsx | 2 +- .../common/components/logsModal/LogsModal.tsx | 66 +++++++------------ frontend/src/common/models/Log.ts | 8 +++ frontend/src/common/models/UrlDataWithLogs.ts | 4 ++ frontend/src/pages/dashboard/Dashboard.tsx | 16 +++-- 5 files changed, 46 insertions(+), 50 deletions(-) create mode 100644 frontend/src/common/models/Log.ts create mode 100644 frontend/src/common/models/UrlDataWithLogs.ts diff --git a/frontend/src/common/components/UrlCard/UrlCard.tsx b/frontend/src/common/components/UrlCard/UrlCard.tsx index 646368a..02e8352 100644 --- a/frontend/src/common/components/UrlCard/UrlCard.tsx +++ b/frontend/src/common/components/UrlCard/UrlCard.tsx @@ -214,7 +214,7 @@ function UrlCard({ urlData, onClick }: UrlCardProps) { id="outlined-basic" label="Fréquence (min)" variant="outlined" - color={parseInt(editedFrequency) >= 1 && parseInt(editedFrequency) <= 60 ? "secondary" : "warning"} + color={editedFrequency >= 1 && editedFrequency <= 60 ? "secondary" : "warning"} value={editedFrequency || ""} onChange={(e) => setEditedFrequency(parseInt(e.target.value) || 0)} /> diff --git a/frontend/src/common/components/logsModal/LogsModal.tsx b/frontend/src/common/components/logsModal/LogsModal.tsx index f17b935..88b144c 100644 --- a/frontend/src/common/components/logsModal/LogsModal.tsx +++ b/frontend/src/common/components/logsModal/LogsModal.tsx @@ -1,46 +1,27 @@ import "./LogsModal.scss" -import { CircularProgress, Dialog, DialogContent, DialogTitle } from "@mui/material"; +import { Dialog, DialogContent, DialogTitle } from "@mui/material"; import { UrlData } from "@/common/components/UrlCard/UrlCard.tsx"; -import { useQuery } from "@apollo/client"; -import { GET_LOGS } from "@/common/graphql/queries.ts"; +import {Log} from "@/common/models/Log.ts"; interface LogModalProps { open: boolean; handleClose: () => void; urlData: UrlData | null; + logs: Log[] | null; } -interface Log { - _id: string; - date: string; - response_time: number; - status: number; - status_code: number; - status_message: string; -} - -const LogsModal: React.FC = ({ open, handleClose, urlData }) => { - - const { data, loading, error } = useQuery(GET_LOGS, { - variables: { savedQueryId: urlData?._id }, - skip: !urlData?._id, - }); +const LogsModal: React.FC = ({ open, handleClose, urlData, logs }) => { if (!urlData) { return null; } return ( - + {`Historique de la requête "${urlData?.name}"`} - {loading && } - {error &&

Error: {error.message}

}
Date @@ -49,27 +30,24 @@ const LogsModal: React.FC = ({ open, handleClose, urlData }) => { Code de retour Message
- {data && data.getLogsForSavedQuery && ( - data.getLogsForSavedQuery.map((log: Log) => { - const localeDate = new Date(log.date); - return ( -
- {localeDate.toLocaleDateString("fr-FR")} - - {localeDate.toLocaleTimeString("fr-FR", { - hour: '2-digit', - minute: '2-digit' - })} - - {log.response_time} ms - {log.status_code} - {log.status_message} -
- ); - }) - )} + {logs && logs.map((log: Log) => { + const localeDate = new Date(log.date); + return ( +
+ {localeDate.toLocaleDateString("fr-FR")} + + {localeDate.toLocaleTimeString("fr-FR", { + hour: '2-digit', + minute: '2-digit' + })} + + {log.response_time} ms + {log.status_code} + {log.status_message} +
+ ); + })}
- ); diff --git a/frontend/src/common/models/Log.ts b/frontend/src/common/models/Log.ts new file mode 100644 index 0000000..2bc6f85 --- /dev/null +++ b/frontend/src/common/models/Log.ts @@ -0,0 +1,8 @@ +export interface Log { + _id: string; + date: string; + response_time: number; + status: number; + status_code: number; + status_message: string; +} diff --git a/frontend/src/common/models/UrlDataWithLogs.ts b/frontend/src/common/models/UrlDataWithLogs.ts new file mode 100644 index 0000000..b3d570c --- /dev/null +++ b/frontend/src/common/models/UrlDataWithLogs.ts @@ -0,0 +1,4 @@ +import {UrlData} from "@/common/components/UrlCard/UrlCard.tsx"; +import {Log} from "@/common/models/Log.ts"; + +export type UrlDataWithLogs = UrlData & { logs: Log[] }; diff --git a/frontend/src/pages/dashboard/Dashboard.tsx b/frontend/src/pages/dashboard/Dashboard.tsx index cafa1ee..608e4c8 100644 --- a/frontend/src/pages/dashboard/Dashboard.tsx +++ b/frontend/src/pages/dashboard/Dashboard.tsx @@ -1,16 +1,17 @@ import "./Dashboard.scss" -import {GET_SAVED_QUERIES} from "@/common/graphql/queries.ts"; +import {GET_LOGS, GET_SAVED_QUERIES} from "@/common/graphql/queries.ts"; import {useQuery} from "@apollo/client"; import UrlCard, {UrlData} from "../../common/components/UrlCard/UrlCard.tsx"; import {CircularProgress} from "@mui/material"; import SaveQueryBarUrl from "@/common/components/saveQueryBarUrl/SaveQueryBarUrl.tsx"; import {useState, useEffect} from "react"; import LogsModal from "@/common/components/logsModal/LogsModal.tsx"; +import {UrlDataWithLogs} from "@/common/models/UrlDataWithLogs.ts"; const Dashboard = () => { const [savedQueries, setSavedQueries] = useState([]); - const [selectedQuery, setSelectedQuery] = useState(null); + const [selectedQuery, setSelectedQuery] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); const {data, loading, error} = useQuery(GET_SAVED_QUERIES, { @@ -18,14 +19,19 @@ const Dashboard = () => { fetchPolicy: "cache-and-network" }); + const { refetch } = useQuery(GET_LOGS, { + skip: true, // Don't fetch automatically, the logs will be fetched only when clicking on a card + }); + useEffect(() => { if (data) { setSavedQueries(data.getSavedQueries); } }, [data]); - const handleCardClick = (query: UrlData) => { - setSelectedQuery(query); + const handleCardClick = async (query: UrlData) => { + const { data } = await refetch({ savedQueryId: query._id }); + setSelectedQuery({ ...query, logs: data?.getLogsForSavedQuery || [] }); setIsModalOpen(true); }; @@ -56,7 +62,7 @@ const Dashboard = () => { })} - + ); };