From f35e41ff99ba6fed81fb7847de2343385d6a77d3 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Fri, 16 Feb 2024 11:19:22 +0100
Subject: [PATCH 1/6] updated action table and detail page

---
 .../actionsTemplate/ActionsTemplate.tsx       |  2 +-
 .../actionsForm/ActionFormTemplate.module.css |  4 --
 .../actionsForm/ActionFormTemplate.tsx        | 47 ++++++++++++++++++-
 3 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/pwa/src/templates/actionsTemplate/ActionsTemplate.tsx b/pwa/src/templates/actionsTemplate/ActionsTemplate.tsx
index ec84a986..e2503a3e 100644
--- a/pwa/src/templates/actionsTemplate/ActionsTemplate.tsx
+++ b/pwa/src/templates/actionsTemplate/ActionsTemplate.tsx
@@ -89,7 +89,7 @@ export const ActionsTemplate: React.FC = () => {
 
                   <TableCell>{action.lastRun ? dateTime(t(i18n.language), action.lastRun) : "-"}</TableCell>
 
-                  <TableCell>{`${action.lastRunTime}ms` ?? "-"}</TableCell>
+                  <TableCell>{`${action.lastRunTime}s` ?? "-"}</TableCell>
 
                   <TableCell>{translateDate(i18n.language, action.dateCreated) ?? "-"}</TableCell>
 
diff --git a/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.module.css b/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.module.css
index 3638d30c..9fe0e619 100644
--- a/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.module.css
+++ b/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.module.css
@@ -6,10 +6,6 @@
   padding-block-end: var(--gateway-ui-size-md);
 }
 
-.gridContainer > *:not(:first-child) {
-  margin-block-start: var(--gateway-ui-size-sm);
-}
-
 .grid {
   display: grid;
   grid-gap: var(--gateway-ui-size-lg);
diff --git a/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.tsx b/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.tsx
index ebde5e48..3fe5167e 100644
--- a/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.tsx
+++ b/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.tsx
@@ -15,6 +15,9 @@ import { SchemaFormTemplate } from "../schemaForm/SchemaFormTemplate";
 import { useIsLoadingContext } from "../../../context/isLoading";
 import { enrichValidation } from "../../../services/enrichReactHookFormValidation";
 import { CodeEditor } from "../../../components/codeEditor/CodeEditor";
+import { translateDate } from "../../../services/dateFormat";
+import { StatusTag } from "../../../components/statusTag/StatusTag";
+import { formatDateTime } from "../../../services/dateTime";
 
 export const formId: string = "action-form";
 
@@ -23,7 +26,7 @@ interface ActionFormTemplateProps {
 }
 
 export const ActionFormTemplate: React.FC<ActionFormTemplateProps> = ({ action }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { setIsLoading, isLoading } = useIsLoadingContext();
 
   const [listensAndThrows, setListensAndThrows] = React.useState<any[]>([]);
@@ -149,7 +152,7 @@ export const ActionFormTemplate: React.FC<ActionFormTemplateProps> = ({ action }
             </Tabs>
 
             <TabPanel className={styles.tabPanel} value="0">
-              <div className={styles.gridContainer}>
+              <div>
                 <div className={styles.grid}>
                   <FormField>
                     <FormFieldInput>
@@ -272,6 +275,46 @@ export const ActionFormTemplate: React.FC<ActionFormTemplateProps> = ({ action }
                     </FormFieldInput>
                   </FormField>
                 </div>
+                <Divider />
+                <div className={styles.grid}>
+                  <FormField>
+                    <FormFieldInput>
+                      <FormFieldLabel>{t("Date Created")}</FormFieldLabel>
+                      <div>{translateDate(i18n.language, action.dateCreated) ?? "-"}</div>
+                    </FormFieldInput>
+                  </FormField>
+
+                  <FormField>
+                    <FormFieldInput>
+                      <FormFieldLabel>{t("Date Modified")}</FormFieldLabel>
+                      <div>{translateDate(i18n.language, action.dateModified) ?? "-"}</div>
+                    </FormFieldInput>
+                  </FormField>
+
+                  <FormField>
+                    <FormFieldInput>
+                      <FormFieldLabel>{t("Last run")}</FormFieldLabel>
+                      <div> {action.lastRun ? formatDateTime(t(i18n.language), action.lastRun) : "-"}</div>
+                    </FormFieldInput>
+                  </FormField>
+
+                  <FormField>
+                    <FormFieldInput>
+                      <FormFieldLabel>{t("Last run time")}</FormFieldLabel>
+                      <div>{`${action.lastRunTime}s` ?? "-"}</div>
+                    </FormFieldInput>
+                  </FormField>
+
+                  <FormField>
+                    <FormFieldInput>
+                      <FormFieldLabel>{t("Status")}</FormFieldLabel>
+                      <StatusTag
+                        type={action.status ? "success" : "default"}
+                        label={action.status ? "Success" : "No status"}
+                      />
+                    </FormFieldInput>
+                  </FormField>
+                </div>
               </div>
             </TabPanel>
 

From 71bb6594b88d6fc4851d765e43bb2bdb78629756 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 19 Feb 2024 16:06:48 +0100
Subject: [PATCH 2/6] Added more context to log

---
 pwa/src/apiService/apiService.ts              |  13 +-
 .../apiService/resources/dashboardCards.tsx   |   4 +-
 pwa/src/apiService/resources/source.ts        |   6 +
 pwa/src/context/logs.ts                       |   1 +
 pwa/src/context/tableColumns.ts               |   1 +
 pwa/src/hooks/dashboardCards.ts               |   1 +
 pwa/src/hooks/source.ts                       |   9 +-
 .../GatewayDetailTemplate.tsx                 |   4 +-
 .../logsDetailTemplate/LogsDetailTemplate.tsx | 191 ++++++++++++++++--
 .../actionsForm/ActionFormTemplate.tsx        |  84 ++++----
 .../logFilters/LogFiltersTemplate.tsx         |  21 +-
 .../logsTable/LogsTableTemplate.tsx           |  14 ++
 12 files changed, 279 insertions(+), 70 deletions(-)

diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts
index b035aab1..3dde8d6b 100644
--- a/pwa/src/apiService/apiService.ts
+++ b/pwa/src/apiService/apiService.ts
@@ -32,6 +32,7 @@ import Upload from "./resources/upload";
 interface PromiseMessage {
   loading?: string;
   success?: string;
+  error?: string;
 }
 
 export type TSendFunction = (
@@ -255,37 +256,35 @@ export default class APIService {
     switch (action) {
       case "GET":
         const response = instance.get(endpoint);
-
-        response.catch((err) => toast.error(err.message));
-
+        response.catch((err) => toast.error(promiseMessage?.error ?? err.message));
         return response;
 
       case "POST":
         return toast.promise(instance.post(endpoint, _payload), {
           loading: promiseMessage?.loading ?? "Creating item...",
           success: promiseMessage?.success ?? "Succesfully created item",
-          error: (err) => err.message,
+          error: (err) => promiseMessage?.error ?? err.message,
         });
 
       case "PUT":
         return toast.promise(instance.put(endpoint, _payload), {
           loading: promiseMessage?.loading ?? "Updating item...",
           success: promiseMessage?.success ?? "Succesfully updated item",
-          error: (err) => err.message,
+          error: (err) => promiseMessage?.error ?? err.message,
         });
 
       case "DELETE":
         return toast.promise(instance.delete(endpoint), {
           loading: promiseMessage?.loading ?? "Deleting item...",
           success: promiseMessage?.success ?? "Succesfully deleted item",
-          error: (err) => err.message,
+          error: (err) => promiseMessage?.error ?? err.message,
         });
 
       case "DOWNLOAD":
         return toast.promise(instance.get(endpoint), {
           loading: promiseMessage?.loading ?? "Downloading item...",
           success: promiseMessage?.success ?? "Succesfully downloaded item",
-          error: (err) => err.message,
+          error: (err) => promiseMessage?.error ?? err.message,
         });
     }
   };
diff --git a/pwa/src/apiService/resources/dashboardCards.tsx b/pwa/src/apiService/resources/dashboardCards.tsx
index 7e3b866a..b9d4975e 100644
--- a/pwa/src/apiService/resources/dashboardCards.tsx
+++ b/pwa/src/apiService/resources/dashboardCards.tsx
@@ -25,7 +25,9 @@ export default class DashboardCards {
   }
 
   public getAll = async (): Promise<any> => {
-    const { data } = await this._send(this._instance, "GET", "/admin/dashboardCards");
+    const { data } = await this._send(this._instance, "GET", "/admin/dashboardCards", undefined, {
+      error: "Could not fetch Dashboardcards.",
+    });
 
     return data;
   };
diff --git a/pwa/src/apiService/resources/source.ts b/pwa/src/apiService/resources/source.ts
index dfdaadb0..82877ff0 100644
--- a/pwa/src/apiService/resources/source.ts
+++ b/pwa/src/apiService/resources/source.ts
@@ -16,6 +16,12 @@ export default class Source {
     return data;
   };
 
+  public getAllSelectOptions = async (): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", "/admin/gateways?limit=200");
+
+    return data?.map((source: any) => ({ label: source.name, value: source.id }));
+  };
+
   public getOne = async (id: string): Promise<any> => {
     const { data } = await this._send(this._instance, "GET", `/admin/gateways/${id}`);
 
diff --git a/pwa/src/context/logs.ts b/pwa/src/context/logs.ts
index 74125129..f3f234b1 100644
--- a/pwa/src/context/logs.ts
+++ b/pwa/src/context/logs.ts
@@ -13,6 +13,7 @@ export interface ILogFiltersContext {
     process?: string;
     endpoint?: string;
     schema?: string;
+    source?: string;
     cronjob?: string;
     action?: string;
     user?: string;
diff --git a/pwa/src/context/tableColumns.ts b/pwa/src/context/tableColumns.ts
index 3d5361b7..e55b307a 100644
--- a/pwa/src/context/tableColumns.ts
+++ b/pwa/src/context/tableColumns.ts
@@ -21,6 +21,7 @@ const logColumns = {
   created: true,
   endpoint: true,
   schema: true,
+  source: true,
   cronjob: true,
   action: true,
   user: true,
diff --git a/pwa/src/hooks/dashboardCards.ts b/pwa/src/hooks/dashboardCards.ts
index 20f79d0e..9b321a5f 100644
--- a/pwa/src/hooks/dashboardCards.ts
+++ b/pwa/src/hooks/dashboardCards.ts
@@ -13,6 +13,7 @@ export const useDashboardCards = (queryClient: QueryClient) => {
       onError: (error) => {
         console.warn(error.message);
       },
+      retry: 0,
     });
 
   const getOne = (dashboardCardsId: string) =>
diff --git a/pwa/src/hooks/source.ts b/pwa/src/hooks/source.ts
index f809615c..b0dfff2d 100644
--- a/pwa/src/hooks/source.ts
+++ b/pwa/src/hooks/source.ts
@@ -18,6 +18,13 @@ export const useSource = (queryClient: QueryClient) => {
       },
     });
 
+  const getAllSelectOptions = () =>
+    useQuery<any[], Error>("source_select_options", API.Sources.getAllSelectOptions, {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
   const getOne = (sourceId: string) =>
     useQuery<any, Error>(["sources", sourceId], () => API?.Sources.getOne(sourceId), {
       initialData: () => queryClient.getQueryData<any[]>("sources")?.find((_sources) => _sources.id === sourceId),
@@ -78,5 +85,5 @@ export const useSource = (queryClient: QueryClient) => {
       },
     });
 
-  return { getAll, getOne, remove, createOrEdit, getProxy };
+  return { getAll, getOne, remove, createOrEdit, getProxy, getAllSelectOptions };
 };
diff --git a/pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx b/pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx
index 88b79bde..43c6f468 100644
--- a/pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx
+++ b/pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx
@@ -70,7 +70,9 @@ export const GatewayDetailTemplate: React.FC = () => {
                     getPlugins.data.update ? getPlugins.data?.version : `Latest (${getPlugins.data?.version})`
                   } `}</p>
                 )}
-                <p>{`last update time: ${new Date(getPlugins.data?.time).toLocaleString()}`}</p>
+                <p>{`last update time: ${new Date(
+                  getPlugins.data?.versions[getPlugins.data?.version].time,
+                ).toLocaleString()}`}</p>
               </div>
 
               <div>
diff --git a/pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.tsx b/pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.tsx
index 14feb4fb..2d7e6267 100644
--- a/pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.tsx
+++ b/pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.tsx
@@ -23,6 +23,8 @@ import { Button } from "../../components/button/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMapping } from "../../hooks/mapping";
 import { useObject } from "../../hooks/object";
+import { CodeEditor } from "../../components/codeEditor/CodeEditor";
+import { useSource } from "../../hooks/source";
 
 interface LogsDetailTemplateProps {
   logId: string;
@@ -31,6 +33,10 @@ interface LogsDetailTemplateProps {
 export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId }) => {
   const { t } = useTranslation();
   const { setLogFilters } = useLogFiltersContext();
+  const [bodyData, setBodyData] = React.useState<any>("");
+  const [exceptionData, setExceptionData] = React.useState<any>("");
+  const [routeParametersData, setRouteParametersData] = React.useState<any>("");
+  const [sourceCallData, setSourceCallData] = React.useState<any>("");
 
   const queryClient = useQueryClient();
 
@@ -44,6 +50,7 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
   const getOrganization = useOrganization(queryClient).getOne(getLog.data?.context?.organization);
   const getMapping = useMapping(queryClient).getOne(getLog.data?.context?.mapping);
   const getObject = useObject().getOne(getLog.data?.context?.object);
+  const getSource = useSource(queryClient).getOne(getLog.data?.context?.source);
 
   const handleSetContextFilter = (
     context:
@@ -51,6 +58,7 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
       | "process"
       | "endpoint"
       | "schema"
+      | "source"
       | "cronjob"
       | "action"
       | "user"
@@ -70,6 +78,13 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
     navigate("/logs");
   };
 
+  React.useEffect(() => {
+    setBodyData(JSON.stringify(getLog.data?.context?.body, null, 2));
+    setExceptionData(JSON.stringify(getLog.data?.context?.exception, null, 2));
+    setRouteParametersData(JSON.stringify(getLog.data?.context?.route_parameters, null, 2));
+    setSourceCallData(JSON.stringify(getLog.data?.context?.sourceCall, null, 2));
+  }, [getLog]);
+
   return (
     <Container layoutClassName={styles.container}>
       <Heading1>{t("Logs detail page")}</Heading1>
@@ -99,22 +114,120 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
                 </TableRow>
               </TableHead>
               <TableBody>
-                <TableRow>
-                  <TableHeader>Host</TableHeader>
-                  <TableCell>{getLog.data.context?.host !== "" ? getLog.data.context?.host : "-"}</TableCell>
-                  <TableCell>-</TableCell>
-                  <TableCell>-</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHeader>IP</TableHeader>
-                  <TableCell>{getLog.data.context?.ip !== "" ? getLog.data.context?.ip : "-"}</TableCell>
-                  <TableCell>-</TableCell>
-                  <TableCell>-</TableCell>
-                </TableRow>
+                {getLog.data.context?.exception && (
+                  <TableRow>
+                    <TableHeader>Exception</TableHeader>
+                    <TableCell colSpan={3}>
+                      <CodeEditor language="json" code={exceptionData} setCode={setExceptionData} readOnly />
+                    </TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.method && (
+                  <TableRow>
+                    <TableHeader>Method</TableHeader>
+                    <TableCell>{getLog.data.context?.method !== "" ? getLog.data.context?.method : "-"}</TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.querystring && (
+                  <TableRow>
+                    <TableHeader>Querystring</TableHeader>
+                    <TableCell>
+                      {getLog.data.context?.querystring !== "" ? getLog.data.context?.querystring : "-"}
+                    </TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.pathRaw && (
+                  <TableRow>
+                    <TableHeader>pathRaw</TableHeader>
+                    <TableCell>{getLog.data.context?.pathRaw !== "" ? getLog.data.context?.pathRaw : "-"}</TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.request_uri && (
+                  <TableRow>
+                    <TableHeader>Request URI</TableHeader>
+                    <TableCell>
+                      {getLog.data.context?.request_uri !== "" ? getLog.data.context?.request_uri : "-"}
+                    </TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.route && (
+                  <TableRow>
+                    <TableHeader>Route</TableHeader>
+                    <TableCell>{getLog.data.context?.route !== "" ? getLog.data.context?.route : "-"}</TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.route_parameters && (
+                  <TableRow>
+                    <TableHeader>Route Parameters</TableHeader>
+                    <TableCell colSpan={3}>
+                      <CodeEditor
+                        language="json"
+                        code={routeParametersData}
+                        setCode={setRouteParametersData}
+                        readOnly
+                      />
+                    </TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.contentType && (
+                  <TableRow>
+                    <TableHeader>Content Type</TableHeader>
+                    <TableCell>
+                      {getLog.data.context?.contentType !== "" ? getLog.data.context?.contentType : "-"}
+                    </TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.body && (
+                  <TableRow>
+                    <TableHeader>Body</TableHeader>
+                    <TableCell colSpan={3}>
+                      <CodeEditor language="json" code={bodyData} setCode={setBodyData} readOnly />
+                    </TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.crude_body && (
+                  <TableRow>
+                    <TableHeader>Crude Body</TableHeader>
+                    <TableCell colSpan={3}>{getLog.data.context?.crude_body}</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.mongoDBFilter && (
+                  <TableRow>
+                    <TableHeader>MongoDB Filter</TableHeader>
+                    <TableCell colSpan={3}>{getLog.data.context?.mongoDBFilter}</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.plugin && (
+                  <TableRow>
+                    <TableHeader>Plugin</TableHeader>
+                    <TableCell>{getLog.data.context?.plugin !== "" ? getLog.data.context?.plugin : "-"}</TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                  </TableRow>
+                )}
+                {getLog.data.context?.sourceCall && (
+                  <TableRow>
+                    <TableHeader>Source Call</TableHeader>
+                    <TableCell colSpan={3}>
+                      <CodeEditor language="json" code={sourceCallData} setCode={setSourceCallData} readOnly />
+                    </TableCell>
+                  </TableRow>
+                )}
                 <TableRow>
                   <TableHeader>Session</TableHeader>
                   <TableCell>{getLog.data.context?.session !== "" ? getLog.data.context?.session : "-"}</TableCell>
-
                   <TableCell>
                     <Button
                       variant="primary"
@@ -130,7 +243,6 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
                 <TableRow>
                   <TableHeader>Process</TableHeader>
                   <TableCell>{getLog.data.context?.process !== "" ? getLog.data.context?.process : "-"}</TableCell>
-
                   <TableCell>
                     <Button
                       variant="primary"
@@ -192,8 +304,8 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
                       variant="primary"
                       label={t("Set filter")}
                       icon={faFilter}
-                      disabled={!getEndpoint.data?.id}
-                      onClick={() => handleSetContextFilter("schema", getEndpoint.data.id)}
+                      disabled={!getSchema.data?.id}
+                      onClick={() => handleSetContextFilter("schema", getSchema.data.id)}
                     />
                   </TableCell>
                   <TableCell>
@@ -206,6 +318,37 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
                     />
                   </TableCell>
                 </TableRow>
+                <TableRow>
+                  <TableHeader>Source</TableHeader>
+                  {getLog.data.context?.source ? (
+                    getSource.isSuccess && <TableCell>{getSource.data.name ?? getLog.data.context?.source}</TableCell>
+                  ) : (
+                    <TableCell>-</TableCell>
+                  )}
+                  {getSource.isLoading && (
+                    <TableCell>
+                      <Skeleton />
+                    </TableCell>
+                  )}
+                  <TableCell>
+                    <Button
+                      variant="primary"
+                      label={t("Set filter")}
+                      icon={faFilter}
+                      disabled={!getSource.data?.id}
+                      onClick={() => handleSetContextFilter("source", getSource.data.id)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      variant="primary"
+                      label={t("Details")}
+                      icon={faArrowRight}
+                      disabled={!getLog.data.context?.source}
+                      onClick={() => navigate(`/sources/${getLog.data.context?.source}`)}
+                    />
+                  </TableCell>
+                </TableRow>
                 <TableRow>
                   <TableHeader>Cronjob</TableHeader>
                   {getLog.data.context?.cronjob ? (
@@ -404,9 +547,7 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
                 <TableRow>
                   <TableHeader>Object</TableHeader>
                   {getLog.data.context?.object ? (
-                    getObject.isSuccess && (
-                      <TableCell>{getObject.data.titel ?? getLog.data.context?.object}</TableCell>
-                    )
+                    getObject.isSuccess && <TableCell>{getObject.data.titel ?? getLog.data.context?.object}</TableCell>
                   ) : (
                     <TableCell>-</TableCell>
                   )}
@@ -434,6 +575,18 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
                     />
                   </TableCell>
                 </TableRow>
+                <TableRow>
+                  <TableHeader>Host</TableHeader>
+                  <TableCell>{getLog.data.context?.host !== "" ? getLog.data.context?.host : "-"}</TableCell>
+                  <TableCell>-</TableCell>
+                  <TableCell>-</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHeader>IP</TableHeader>
+                  <TableCell>{getLog.data.context?.ip !== "" ? getLog.data.context?.ip : "-"}</TableCell>
+                  <TableCell>-</TableCell>
+                  <TableCell>-</TableCell>
+                </TableRow>
               </TableBody>
             </Table>
           </div>
diff --git a/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.tsx b/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.tsx
index 3fe5167e..af1d3315 100644
--- a/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.tsx
+++ b/pwa/src/templates/templateParts/actionsForm/ActionFormTemplate.tsx
@@ -275,46 +275,50 @@ export const ActionFormTemplate: React.FC<ActionFormTemplateProps> = ({ action }
                     </FormFieldInput>
                   </FormField>
                 </div>
-                <Divider />
-                <div className={styles.grid}>
-                  <FormField>
-                    <FormFieldInput>
-                      <FormFieldLabel>{t("Date Created")}</FormFieldLabel>
-                      <div>{translateDate(i18n.language, action.dateCreated) ?? "-"}</div>
-                    </FormFieldInput>
-                  </FormField>
-
-                  <FormField>
-                    <FormFieldInput>
-                      <FormFieldLabel>{t("Date Modified")}</FormFieldLabel>
-                      <div>{translateDate(i18n.language, action.dateModified) ?? "-"}</div>
-                    </FormFieldInput>
-                  </FormField>
-
-                  <FormField>
-                    <FormFieldInput>
-                      <FormFieldLabel>{t("Last run")}</FormFieldLabel>
-                      <div> {action.lastRun ? formatDateTime(t(i18n.language), action.lastRun) : "-"}</div>
-                    </FormFieldInput>
-                  </FormField>
-
-                  <FormField>
-                    <FormFieldInput>
-                      <FormFieldLabel>{t("Last run time")}</FormFieldLabel>
-                      <div>{`${action.lastRunTime}s` ?? "-"}</div>
-                    </FormFieldInput>
-                  </FormField>
-
-                  <FormField>
-                    <FormFieldInput>
-                      <FormFieldLabel>{t("Status")}</FormFieldLabel>
-                      <StatusTag
-                        type={action.status ? "success" : "default"}
-                        label={action.status ? "Success" : "No status"}
-                      />
-                    </FormFieldInput>
-                  </FormField>
-                </div>
+                {action && (
+                  <>
+                    <Divider />
+                    <div className={styles.grid}>
+                      <FormField>
+                        <FormFieldInput>
+                          <FormFieldLabel>{t("Date Created")}</FormFieldLabel>
+                          <div>{translateDate(i18n.language, action.dateCreated) ?? "-"}</div>
+                        </FormFieldInput>
+                      </FormField>
+
+                      <FormField>
+                        <FormFieldInput>
+                          <FormFieldLabel>{t("Date Modified")}</FormFieldLabel>
+                          <div>{translateDate(i18n.language, action.dateModified) ?? "-"}</div>
+                        </FormFieldInput>
+                      </FormField>
+
+                      <FormField>
+                        <FormFieldInput>
+                          <FormFieldLabel>{t("Last run")}</FormFieldLabel>
+                          <div> {action.lastRun ? formatDateTime(t(i18n.language), action.lastRun) : "-"}</div>
+                        </FormFieldInput>
+                      </FormField>
+
+                      <FormField>
+                        <FormFieldInput>
+                          <FormFieldLabel>{t("Last run time")}</FormFieldLabel>
+                          <div>{`${action.lastRunTime}s` ?? "-"}</div>
+                        </FormFieldInput>
+                      </FormField>
+
+                      <FormField>
+                        <FormFieldInput>
+                          <FormFieldLabel>{t("Status")}</FormFieldLabel>
+                          <StatusTag
+                            type={action.status ? "success" : "default"}
+                            label={action.status ? "Success" : "No status"}
+                          />
+                        </FormFieldInput>
+                      </FormField>
+                    </div>
+                  </>
+                )}
               </div>
             </TabPanel>
 
diff --git a/pwa/src/templates/templateParts/logFilters/LogFiltersTemplate.tsx b/pwa/src/templates/templateParts/logFilters/LogFiltersTemplate.tsx
index dcb4cdee..807dcb09 100644
--- a/pwa/src/templates/templateParts/logFilters/LogFiltersTemplate.tsx
+++ b/pwa/src/templates/templateParts/logFilters/LogFiltersTemplate.tsx
@@ -9,6 +9,7 @@ import { useUser } from "../../../hooks/user";
 import { useSchema } from "../../../hooks/schema";
 import { useAction } from "../../../hooks/action";
 import { useObject } from "../../../hooks/object";
+import { useSource } from "../../../hooks/source";
 import { useMapping } from "../../../hooks/mapping";
 import { useCronjob } from "../../../hooks/cronjob";
 import { useEndpoint } from "../../../hooks/endpoint";
@@ -33,6 +34,7 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
 
   const getEndpoints = useEndpoint(queryClient).getAllSelectOptions();
   const getSchemas = useSchema(queryClient).getAllSelectOptions();
+  const getSources = useSource(queryClient).getAllSelectOptions();
   const getCronjobs = useCronjob(queryClient).getAllSelectOptions();
   const getActions = useAction(queryClient).getAllSelectOptions();
   const getUsers = useUser(queryClient).getAllSelectOptions();
@@ -72,6 +74,7 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
         process: formValues.process,
         endpoint: formValues.endpoints?.value,
         schema: formValues.schemas?.value,
+        source: formValues.sources?.value,
         cronjob: formValues.cronjobs?.value,
         action: formValues.actions?.value,
         user: formValues.users?.value,
@@ -114,6 +117,11 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
       getSchemas.data?.find((schema) => schema.value === logFilters.context?.schema),
     );
 
+    setValue(
+      "sources",
+      getSources.data?.find((source) => source.value === logFilters.context?.source),
+    );
+
     setValue(
       "cronjobs",
       getCronjobs.data?.find((cronjob) => cronjob.value === logFilters.context?.cronjob),
@@ -229,6 +237,18 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
           </FormFieldInput>
         </FormField>
 
+        <FormField>
+          <FormFieldInput>
+            <FormFieldLabel>Sources</FormFieldLabel>
+
+            {getSources.isSuccess && (
+              <SelectSingle isClearable name="sources" {...{ register, errors, control }} options={getSources.data} />
+            )}
+
+            {getSources.isLoading && <Skeleton height="50px" />}
+          </FormFieldInput>
+        </FormField>
+
         <FormField>
           <FormFieldInput>
             <FormFieldLabel>Cronjobs</FormFieldLabel>
@@ -322,7 +342,6 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
             {getMappings.isLoading && <Skeleton height="50px" />}
           </FormFieldInput>
         </FormField>
-        <br />
 
         <FormField>
           <FormFieldInput>
diff --git a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
index 7164f965..5beb5569 100644
--- a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
+++ b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
@@ -78,6 +78,7 @@ export const LogsTableTemplate: React.FC<LogsTableTemplateProps> = ({ logs, pagi
               {logColumns.created && <TableHeader>{t("Created")}</TableHeader>}
               {logColumns.endpoint && <TableHeader>{t("Endpoint")}</TableHeader>}
               {logColumns.schema && <TableHeader>{t("Schema")}</TableHeader>}
+              {logColumns.source && <TableHeader>{t("Source")}</TableHeader>}
               {logColumns.cronjob && <TableHeader>{t("Cronjob")}</TableHeader>}
               {logColumns.action && <TableHeader>{t("Action")}</TableHeader>}
               {logColumns.user && <TableHeader>{t("User")}</TableHeader>}
@@ -144,6 +145,19 @@ export const LogsTableTemplate: React.FC<LogsTableTemplateProps> = ({ logs, pagi
                   </TableCell>
                 )}
 
+                {logColumns.source && (
+                  <TableCell>
+                    <Button
+                      variant="primary"
+                      label={t("Source")}
+                      icon={faArrowRight}
+                      className={styles.button}
+                      disabled={!log.context.source}
+                      onClick={(e) => handleResourceClick(e, "sources", log.context.source)}
+                    />
+                  </TableCell>
+                )}
+
                 {logColumns.cronjob && (
                   <TableCell>
                     <Button

From 115fbfd23668d69d222feb39562bbb95a7994911 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 19 Feb 2024 16:24:14 +0100
Subject: [PATCH 3/6] Added horizontaloverflowwrapper

---
 .../HorizontalOverflowWrapper.module.css      |  52 +++
 .../HorizontalOverflowWrapper.tsx             |  84 ++++
 .../logsTable/LogsTableTemplate.module.css    |   4 -
 .../logsTable/LogsTableTemplate.tsx           | 377 +++++++++---------
 4 files changed, 327 insertions(+), 190 deletions(-)
 create mode 100644 pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css
 create mode 100644 pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

diff --git a/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css b/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css
new file mode 100644
index 00000000..8b32a3d9
--- /dev/null
+++ b/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css
@@ -0,0 +1,52 @@
+:root {
+  --conduction-horizontal-overflow-wrapper-background-color: unset;
+  --conduction-horizontal-overflow-wrapper-buttons-top: 12px;
+
+  --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
+}
+
+.container {
+  position: relative;
+  background-color: var(
+    --conduction-horizontal-overflow-wrapper-background-color
+  );
+}
+
+.wrapper {
+  overflow-x: scroll;
+}
+
+.scrollButton {
+  position: sticky;
+  top: var(--conduction-horizontal-overflow-wrapper-buttons-top);
+
+  margin-inline-start: var(
+    --conduction-horizontal-overflow-wrapper-margin-inline-start
+  );
+  margin-inline-end: var(
+    --conduction-horizontal-overflow-wrapper-margin-inline-end
+  );
+  margin-block-start: var(
+    --conduction-horizontal-overflow-wrapper-margin-block-start
+  );
+  margin-block-end: var(
+    --conduction-horizontal-overflow-wrapper-margin-block-end
+  );
+  z-index: 10000;
+}
+
+.scrollButton.right {
+  left: 100%;
+}
+
+/* Hide scrollbar */
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+.wrapper {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
diff --git a/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx b/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx
new file mode 100644
index 00000000..c6385d7d
--- /dev/null
+++ b/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx
@@ -0,0 +1,84 @@
+/**
+ * IMPORTANT: This is a temporary component that will be removed if the @conduction/components package can be updated.
+ */
+
+import * as React from "react";
+import * as styles from "./HorizontalOverflowWrapper.module.css";
+import clsx from "clsx";
+import { Button } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+interface HorizontalOverflowWrapperProps {
+  children: React.ReactNode;
+  ariaLabels: {
+    scrollRightButton: string;
+    scrollLeftButton: string;
+  };
+}
+
+export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
+  const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
+  const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
+
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+
+  const scrollRight = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  const scrollLeft = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  React.useEffect(() => {
+    checkScrollDirections(); // initiate available scroll directions
+
+    window.addEventListener("resize", checkScrollDirections);
+
+    return () => window.removeEventListener("resize", checkScrollDirections);
+  }, []);
+
+  const checkScrollDirections = (): void => {
+    if (!wrapperRef.current) return;
+
+    setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
+    setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
+  };
+
+  return (
+    <div className={styles.container}>
+      {canScrollLeft && (
+        <Button
+          className={clsx(styles.scrollButton)}
+          onClick={scrollLeft}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollLeftButton}
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      )}
+
+      {canScrollRight && (
+        <Button
+          className={clsx(styles.scrollButton, styles.right)}
+          onClick={scrollRight}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollRightButton}
+        >
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      )}
+
+      <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.module.css b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.module.css
index 2d46eeac..bc2070f9 100644
--- a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.module.css
+++ b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.module.css
@@ -17,10 +17,6 @@
   justify-content: space-between;
 }
 
-.tableContainer {
-  max-width: 100%;
-  overflow-x: scroll;
-}
 
 .button > span > svg {
   margin-inline-end: var(--gateway-ui-size-xs);
diff --git a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
index 5beb5569..7a8b1691 100644
--- a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
+++ b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
@@ -16,6 +16,7 @@ import { Link } from "@gemeente-denhaag/components-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { usePagination } from "../../../hooks/usePagination";
 import clsx from "clsx";
+import { HorizontalOverflowWrapper } from "../../../components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
 
 interface LogsTableTemplateProps {
   logs: any[];
@@ -69,206 +70,210 @@ export const LogsTableTemplate: React.FC<LogsTableTemplateProps> = ({ logs, pagi
         <PaginationLocationIndicator />
       </div>
 
-      <div className={styles.tableContainer}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              {logColumns.level && <TableHeader>{t("Level")}</TableHeader>}
-              {logColumns.message && <TableHeader>{t("Message")}</TableHeader>}
-              {logColumns.created && <TableHeader>{t("Created")}</TableHeader>}
-              {logColumns.endpoint && <TableHeader>{t("Endpoint")}</TableHeader>}
-              {logColumns.schema && <TableHeader>{t("Schema")}</TableHeader>}
-              {logColumns.source && <TableHeader>{t("Source")}</TableHeader>}
-              {logColumns.cronjob && <TableHeader>{t("Cronjob")}</TableHeader>}
-              {logColumns.action && <TableHeader>{t("Action")}</TableHeader>}
-              {logColumns.user && <TableHeader>{t("User")}</TableHeader>}
-              {logColumns.organization && <TableHeader>{t("Organization")}</TableHeader>}
-              {logColumns.application && <TableHeader>{t("Application")}</TableHeader>}
-              {logColumns.object && <TableHeader>{t("Object")}</TableHeader>}
-              {logColumns.mapping && <TableHeader>{t("Mapping")}</TableHeader>}
-              <TableHeader></TableHeader>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {logs.map((log: any) => (
-              <TableRow key={log._id.$oid}>
-                {logColumns.level && (
-                  <TableCell>
-                    <StatusTag
-                      type={_.lowerCase(log.level_name) as TStatusTagType}
-                      label={_.upperFirst(_.lowerCase(log.level_name))}
-                    />
-                  </TableCell>
-                )}
+      <HorizontalOverflowWrapper
+        ariaLabels={{ scrollLeftButton: t("Left scroll button"), scrollRightButton: t("Right scroll button") }}
+      >
+        <div>
+          <Table>
+            <TableHead>
+              <TableRow>
+                {logColumns.level && <TableHeader>{t("Level")}</TableHeader>}
+                {logColumns.message && <TableHeader>{t("Message")}</TableHeader>}
+                {logColumns.created && <TableHeader>{t("Created")}</TableHeader>}
+                {logColumns.endpoint && <TableHeader>{t("Endpoint")}</TableHeader>}
+                {logColumns.schema && <TableHeader>{t("Schema")}</TableHeader>}
+                {logColumns.source && <TableHeader>{t("Source")}</TableHeader>}
+                {logColumns.cronjob && <TableHeader>{t("Cronjob")}</TableHeader>}
+                {logColumns.action && <TableHeader>{t("Action")}</TableHeader>}
+                {logColumns.user && <TableHeader>{t("User")}</TableHeader>}
+                {logColumns.organization && <TableHeader>{t("Organization")}</TableHeader>}
+                {logColumns.application && <TableHeader>{t("Application")}</TableHeader>}
+                {logColumns.object && <TableHeader>{t("Object")}</TableHeader>}
+                {logColumns.mapping && <TableHeader>{t("Mapping")}</TableHeader>}
+                <TableHeader></TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {logs.map((log: any) => (
+                <TableRow key={log._id.$oid}>
+                  {logColumns.level && (
+                    <TableCell>
+                      <StatusTag
+                        type={_.lowerCase(log.level_name) as TStatusTagType}
+                        label={_.upperFirst(_.lowerCase(log.level_name))}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.message && (
-                  <TableCell>
-                    <ToolTip tooltip={log.message}>
-                      <div className={styles.message}>{log.message}</div>
-                    </ToolTip>
-                  </TableCell>
-                )}
+                  {logColumns.message && (
+                    <TableCell>
+                      <ToolTip tooltip={log.message}>
+                        <div className={styles.message}>{log.message}</div>
+                      </ToolTip>
+                    </TableCell>
+                  )}
 
-                {logColumns.created && (
-                  <TableCell>
-                    <ToolTip tooltip={formatUnixDateTime(t(i18n.language), log.datetime.$date.$numberLong)}>
-                      <div className={styles.created}>
-                        {formatUnixDateTime(t(i18n.language), log.datetime.$date.$numberLong)}
-                      </div>
-                    </ToolTip>
-                  </TableCell>
-                )}
+                  {logColumns.created && (
+                    <TableCell>
+                      <ToolTip tooltip={formatUnixDateTime(t(i18n.language), log.datetime.$date.$numberLong)}>
+                        <div className={styles.created}>
+                          {formatUnixDateTime(t(i18n.language), log.datetime.$date.$numberLong)}
+                        </div>
+                      </ToolTip>
+                    </TableCell>
+                  )}
 
-                {logColumns.endpoint && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Endpoint")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.endpoint}
-                      onClick={(e) => handleResourceClick(e, "endpoints", log.context.endpoint)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.endpoint && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Endpoint")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.endpoint}
+                        onClick={(e) => handleResourceClick(e, "endpoints", log.context.endpoint)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.schema && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Schema")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.schema}
-                      onClick={(e) => handleResourceClick(e, "schemas", log.context.schema)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.schema && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Schema")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.schema}
+                        onClick={(e) => handleResourceClick(e, "schemas", log.context.schema)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.source && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Source")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.source}
-                      onClick={(e) => handleResourceClick(e, "sources", log.context.source)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.source && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Source")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.source}
+                        onClick={(e) => handleResourceClick(e, "sources", log.context.source)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.cronjob && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Cronjob")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.cronjob}
-                      onClick={(e) => handleResourceClick(e, "cronjobs", log.context.cronjob)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.cronjob && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Cronjob")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.cronjob}
+                        onClick={(e) => handleResourceClick(e, "cronjobs", log.context.cronjob)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.action && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Action")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.action}
-                      onClick={(e) => handleResourceClick(e, "actions", log.context.action)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.action && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Action")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.action}
+                        onClick={(e) => handleResourceClick(e, "actions", log.context.action)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.user && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("User")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.user}
-                      onClick={(e) => handleResourceClick(e, "settings/users", log.context.user)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.user && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("User")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.user}
+                        onClick={(e) => handleResourceClick(e, "settings/users", log.context.user)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.organization && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Organization")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.organization}
-                      onClick={(e) => handleResourceClick(e, "settings/organizations", log.context.organization)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.organization && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Organization")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.organization}
+                        onClick={(e) => handleResourceClick(e, "settings/organizations", log.context.organization)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.application && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Application")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.application}
-                      onClick={(e) => handleResourceClick(e, "settings/applications", log.context.application)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.application && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Application")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.application}
+                        onClick={(e) => handleResourceClick(e, "settings/applications", log.context.application)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.object && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Object")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.object}
-                      onClick={(e) => handleResourceClick(e, "objects", log.context.object)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.object && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Object")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.object}
+                        onClick={(e) => handleResourceClick(e, "objects", log.context.object)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.mapping && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Mapping")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.mapping}
-                      onClick={(e) => handleResourceClick(e, "mappings", log.context.mapping)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.mapping && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Mapping")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.mapping}
+                        onClick={(e) => handleResourceClick(e, "mappings", log.context.mapping)}
+                      />
+                    </TableCell>
+                  )}
 
-                <TableCell onClick={() => navigate(`/logs/${log._id.$oid}`)}>
-                  <Link icon={<FontAwesomeIcon icon={faArrowRight} />} iconAlign="start">
-                    {t("Details")}
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
+                  <TableCell onClick={() => navigate(`/logs/${log._id.$oid}`)}>
+                    <Link icon={<FontAwesomeIcon icon={faArrowRight} />} iconAlign="start">
+                      {t("Details")}
+                    </Link>
+                  </TableCell>
+                </TableRow>
+              ))}
 
-            {!logs.length && (
-              <TableRow>
-                {Object.values(logColumns)
-                  .filter((value) => value)
-                  .map((_, idx) => (
-                    <TableCell key={idx}>{idx === 0 && <>No logs found</>}</TableCell>
-                  ))}
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
+              {!logs.length && (
+                <TableRow>
+                  {Object.values(logColumns)
+                    .filter((value) => value)
+                    .map((_, idx) => (
+                      <TableCell key={idx}>{idx === 0 && <>No logs found</>}</TableCell>
+                    ))}
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </HorizontalOverflowWrapper>
 
       <Pagination layoutClassName={styles.pagination} />
     </div>

From 49bc461c1131d8b901b72d9f0475e4edb1ee2ab2 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 20 Feb 2024 10:54:54 +0100
Subject: [PATCH 4/6] Fixed double / in ADFS redirect

---
 pwa/src/services/removeTrailingSlash.ts   | 4 ++++
 pwa/src/templates/login/LoginTemplate.tsx | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 pwa/src/services/removeTrailingSlash.ts

diff --git a/pwa/src/services/removeTrailingSlash.ts b/pwa/src/services/removeTrailingSlash.ts
new file mode 100644
index 00000000..304ff730
--- /dev/null
+++ b/pwa/src/services/removeTrailingSlash.ts
@@ -0,0 +1,4 @@
+export const removeTrailingSlash = (str: string) => {
+  const newStr = str.endsWith("/") ? str.slice(0, -1) : str;
+  return newStr;
+};
diff --git a/pwa/src/templates/login/LoginTemplate.tsx b/pwa/src/templates/login/LoginTemplate.tsx
index 1d372f6d..8d859454 100644
--- a/pwa/src/templates/login/LoginTemplate.tsx
+++ b/pwa/src/templates/login/LoginTemplate.tsx
@@ -12,6 +12,7 @@ import { useAuthentication } from "../../hooks/useAuthentication";
 import { useIsLoadingContext } from "../../context/isLoading";
 import APIService from "../../apiService/apiService";
 import APIContext from "../../apiService/apiContext";
+import { removeTrailingSlash } from "../../services/removeTrailingSlash";
 
 export const LoginTemplate: React.FC = () => {
   const { t } = useTranslation();
@@ -21,6 +22,8 @@ export const LoginTemplate: React.FC = () => {
   const [API] = React.useState<APIService>(React.useContext(APIContext));
 
   const [dexRedirectURL, setDexRedirectURL] = React.useState<string>("");
+  console.log(window.sessionStorage.getItem("GATSBY_BASE_URL"));
+  console.log(dexRedirectURL);
 
   const queryClient = useQueryClient();
 
@@ -54,7 +57,9 @@ export const LoginTemplate: React.FC = () => {
 
   React.useEffect(() => {
     window.sessionStorage.getItem("GATSBY_BASE_URL") &&
-      setDexRedirectURL(`${window.sessionStorage.getItem("GATSBY_BASE_URL")}/login/oidc/dex`);
+      setDexRedirectURL(
+        `${removeTrailingSlash(window.sessionStorage.getItem("GATSBY_BASE_URL") ?? "")}/login/oidc/dex`,
+      );
   });
 
   return (

From 17e81b05d4f10f2ae3d362442f40a858619a5710 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 20 Feb 2024 10:56:57 +0100
Subject: [PATCH 5/6] cleanup

---
 pwa/src/templates/login/LoginTemplate.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/pwa/src/templates/login/LoginTemplate.tsx b/pwa/src/templates/login/LoginTemplate.tsx
index 8d859454..7f33e33a 100644
--- a/pwa/src/templates/login/LoginTemplate.tsx
+++ b/pwa/src/templates/login/LoginTemplate.tsx
@@ -22,8 +22,6 @@ export const LoginTemplate: React.FC = () => {
   const [API] = React.useState<APIService>(React.useContext(APIContext));
 
   const [dexRedirectURL, setDexRedirectURL] = React.useState<string>("");
-  console.log(window.sessionStorage.getItem("GATSBY_BASE_URL"));
-  console.log(dexRedirectURL);
 
   const queryClient = useQueryClient();
 

From fe98fae347c048ac4be957464e8f706264fb75f3 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 Mar 2024 15:26:23 +0100
Subject: [PATCH 6/6] Quickfix

---
 .../templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx   | 2 +-
 .../templates/logsDetailTemplate/LogsDetailTemplate.module.css  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx b/pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx
index 43c6f468..673b4690 100644
--- a/pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx
+++ b/pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx
@@ -71,7 +71,7 @@ export const GatewayDetailTemplate: React.FC = () => {
                   } `}</p>
                 )}
                 <p>{`last update time: ${new Date(
-                  getPlugins.data?.versions[getPlugins.data?.version].time,
+                  getPlugins.data?.versions[getPlugins.data?.version]?.time,
                 ).toLocaleString()}`}</p>
               </div>
 
diff --git a/pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.module.css b/pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.module.css
index f73f4b63..188a61ec 100644
--- a/pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.module.css
+++ b/pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.module.css
@@ -48,7 +48,7 @@
 }
 
 .warningLevel {
-  --denhaag-alert-info-background-color: #var(
+  --denhaag-alert-info-background-color: var(
     --gateway-ui-color-status-background-warning
   );
   --denhaag-alert-info-icon-color: var(--gateway-ui-color-status-warning);