Merge pull request #352 from ConductionNL/feature/GW-1601/LogsTable

feature/GW-1601/LogsTable

pwa/src/apiService/resources/mapping.ts

@@ -22,6 +22,13 @@ export default class Mapping {
     return data;
   };
 
+  public getAllSelectOptions = async (): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", "/admin/mappings?limit=200");
+
+    return data?.map((mapping: any) => ({ label: mapping.name, value: mapping.id }));
+  };
+
+
   public delete = async (variables: { id: string }): Promise<any> => {
     const { id } = variables;
 

pwa/src/apiService/resources/object.ts

@@ -69,6 +69,12 @@ export default class Sources {
     return data;
   };
 
+  public getAllSelectOptions = async (): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", "/admin/objects?limit=200");
+
+    return data?.results?.map((object: any) => ({ label: object.titel, value: object.id }));
+  };
+
   public getAllFromList = async (list: string): Promise<any> => {
     const { data } = await this._send(this._instance, "GET", list);
 

pwa/src/context/logs.ts

@@ -18,7 +18,8 @@ export interface ILogFiltersContext {
     user?: string;
     organization?: string;
     application?: string;
-    template?: string;
+    object?: string;
+    mapping?: string;
   };
 }
 
@@ -65,6 +66,7 @@ export const channels = [
   "organization",
   "user",
   "collection",
-  "template",
+  "object",
+  "mapping",
 ] as const;
 export type TLogChannel = (typeof channels)[number];

pwa/src/context/tableColumns.ts

@@ -26,7 +26,8 @@ const logColumns = {
   user: true,
   organization: true,
   application: true,
-  template: true,
+  object: true,
+  mapping: true,
 };
 
 // Interface combining all above columns

pwa/src/hooks/mapping.ts

@@ -26,6 +26,13 @@ export const useMapping = (queryClient: QueryClient) => {
       enabled: !!mappingId && !isDeleted(mappingId),
     });
 
+    const getAllSelectOptions = () =>
+    useQuery<any[], Error>("mapping_select_options", API.Mapping.getAllSelectOptions, {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
   const remove = () =>
     useMutation<any, Error, any>(API.Mapping.delete, {
       onMutate: ({ id }) => addDeletedItem(id),
@@ -62,5 +69,5 @@ export const useMapping = (queryClient: QueryClient) => {
         console.warn(error.message);
       },
     });
-  return { getAll, getOne, remove, createOrEdit, testMapping };
+  return { getAll, getOne, remove, createOrEdit, testMapping, getAllSelectOptions };
 };

pwa/src/hooks/object.ts

@@ -60,6 +60,13 @@ export const useObject = () => {
       },
     );
 
+  const getAllSelectOptions = () =>
+    useQuery<any[], Error>("objects_select_options", API.Object.getAllSelectOptions, {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
   const getAllFromList = (list: string) =>
     useQuery<any[], Error>(["objects", list], () => API.Object.getAllFromList(list), {
       onError: (error) => {
@@ -114,5 +121,5 @@ export const useObject = () => {
       },
     });
 
-  return { getAll, getOne, getAllFromEntity, getAllFromList, getSchema, remove, createOrEdit, downloadPDF };
+  return { getAll, getOne, getAllFromEntity, getAllFromList, getSchema, remove, createOrEdit, downloadPDF, getAllSelectOptions };
 };

pwa/src/services/getStatusTag.tsx

@@ -1,8 +1,29 @@
+import _ from "lodash";
 import { StatusTag } from "../components/statusTag/StatusTag";
 
 export const getStatusTag = (value: unknown): JSX.Element => {
-  if (value === "200" || value === true) {
-    return <StatusTag type="success" label={value.toString()} />;
+  const isInInfoRange = (value: number): boolean => {
+    return _.inRange(value, 100, 200);
+  };
+
+  const isInSuccesRange = (value: number): boolean => {
+    return _.inRange(value, 200, 300);
+  };
+
+  const isInRedirectRange = (value: number): boolean => {
+    return _.inRange(value, 300, 400);
+  };
+
+  if (isInSuccesRange(_.toNumber(value)) || value === true) {
+    return <StatusTag type="success" label={_.toString(value)} />;
+  }
+
+  if (isInInfoRange(_.toNumber(value))) {
+    return <StatusTag type="info" label={_.toString(value)} />;
+  }
+
+  if (isInRedirectRange(_.toNumber(value))) {
+    return <StatusTag type="error" label={_.toString(value)} />;
   }
 
   if (
@@ -14,5 +35,5 @@ export const getStatusTag = (value: unknown): JSX.Element => {
     return <StatusTag label={value ?? "No status"} />;
   }
 
-  return <StatusTag type="critical" label={value.toString()} />;
+  return <StatusTag type="critical" label={_.toString(value)} />;
 };

pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.tsx

@@ -21,6 +21,8 @@ import { useLog } from "../../hooks/log";
 import { useLogFiltersContext } from "../../context/logs";
 import { Button } from "../../components/button/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useMapping } from "../../hooks/mapping";
+import { useObject } from "../../hooks/object";
 
 interface LogsDetailTemplateProps {
   logId: string;
@@ -40,6 +42,8 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
   const getAction = useAction(queryClient).getOne(getLog.data?.context?.action);
   const getUser = useUser(queryClient).getOne(getLog.data?.context?.user);
   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 handleSetContextFilter = (
     context:
@@ -51,10 +55,17 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
       | "action"
       | "user"
       | "organization"
-      | "application",
+      | "application"
+      | "mapping"
+      | "object",
     value: string,
   ) => {
-    setLogFilters({ context: { [context]: value } });
+    setLogFilters({
+      context: { [context]: value },
+      "_order[datetime]": "asc",
+      "datetime[before]": "",
+      "datetime[after]": "",
+    });
 
     navigate("/logs");
   };
@@ -262,13 +273,36 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
                 <TableRow>
                   <TableHeader>Mapping</TableHeader>
                   {getLog.data.context?.mapping ? (
-                    <TableCell>{getLog.data.context?.mapping}</TableCell>
+                    getMapping.isSuccess && (
+                      <TableCell>{getMapping.data.name ?? getLog.data.context?.mapping}</TableCell>
+                    )
                   ) : (
                     <TableCell>-</TableCell>
                   )}
 
-                  <TableCell>-</TableCell>
-                  <TableCell>-</TableCell>
+                  {getMapping.isLoading && (
+                    <TableCell>
+                      <Skeleton />
+                    </TableCell>
+                  )}
+                  <TableCell>
+                    <Button
+                      variant="primary"
+                      label={t("Set filter")}
+                      icon={faFilter}
+                      disabled={!getMapping.data?.id}
+                      onClick={() => handleSetContextFilter("mapping", getMapping.data.id)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      variant="primary"
+                      label={t("Details")}
+                      icon={faArrowRight}
+                      disabled={!getLog.data.context?.mapping}
+                      onClick={() => navigate(`/mappings/${getLog.data.context?.mapping}`)}
+                    />
+                  </TableCell>
                 </TableRow>
                 <TableRow>
                   <TableHeader>User</TableHeader>
@@ -367,6 +401,39 @@ export const LogsDetailTemplate: React.FC<LogsDetailTemplateProps> = ({ logId })
                     />
                   </TableCell>
                 </TableRow>
+                <TableRow>
+                  <TableHeader>Object</TableHeader>
+                  {getLog.data.context?.object ? (
+                    getObject.isSuccess && (
+                      <TableCell>{getObject.data.titel ?? getLog.data.context?.object}</TableCell>
+                    )
+                  ) : (
+                    <TableCell>-</TableCell>
+                  )}
+                  {getObject.isLoading && (
+                    <TableCell>
+                      <Skeleton />
+                    </TableCell>
+                  )}
+                  <TableCell>
+                    <Button
+                      variant="primary"
+                      label={t("Set filter")}
+                      icon={faFilter}
+                      disabled={!getObject.data?.id}
+                      onClick={() => handleSetContextFilter("object", getObject.data.id)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      variant="primary"
+                      label={t("Details")}
+                      icon={faArrowRight}
+                      disabled={!getLog.data.context?.object}
+                      onClick={() => navigate(`/objects/${getLog.data.context?.object}`)}
+                    />
+                  </TableCell>
+                </TableRow>
               </TableBody>
             </Table>
           </div>

pwa/src/templates/templateParts/logFilters/LogFiltersTemplate.tsx

@@ -8,6 +8,8 @@ import Skeleton from "react-loading-skeleton";
 import { useUser } from "../../../hooks/user";
 import { useSchema } from "../../../hooks/schema";
 import { useAction } from "../../../hooks/action";
+import { useObject } from "../../../hooks/object";
+import { useMapping } from "../../../hooks/mapping";
 import { useCronjob } from "../../../hooks/cronjob";
 import { useEndpoint } from "../../../hooks/endpoint";
 import { useApplication } from "../../../hooks/application";
@@ -18,7 +20,6 @@ import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/for
 import { InputDate } from "@conduction/components";
 import clsx from "clsx";
 import { validateStringAs24DigitHex } from "../../../services/validateJSON";
-import { useTemplate } from "../../../hooks/template";
 
 interface LogFiltersTemplateProps {
   layoutClassName?: string;
@@ -37,7 +38,8 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
   const getUsers = useUser(queryClient).getAllSelectOptions();
   const getOrganizations = useOrganization(queryClient).getAllSelectOptions();
   const getApplications = useApplication(queryClient).getAllSelectOptions();
-  const getTemplates = useTemplate(queryClient).getAllSelectOptions();
+  const getObjects = useObject().getAllSelectOptions();
+  const getMappings = useMapping(queryClient).getAllSelectOptions();
 
   const {
     register,
@@ -75,7 +77,8 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
         user: formValues.users?.value,
         organization: formValues.organizations?.value,
         application: formValues.applications?.value,
-        template: formValues.templates?.value,
+        object: formValues.objects?.value,
+        mapping: formValues.mappings?.value,
       },
     };
 
@@ -137,8 +140,13 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
     );
 
     setValue(
-      "templates",
-      getTemplates.data?.find((template) => template.value === logFilters.context?.template),
+      "objects",
+      getObjects.data?.find((object) => object.value === logFilters.context?.object),
+    );
+
+    setValue(
+      "mappings",
+      getMappings.data?.find((mapping) => mapping.value === logFilters.context?.mapping),
     );
   }, []);
 
@@ -293,20 +301,28 @@ export const LogFiltersTemplate: React.FC<LogFiltersTemplateProps> = ({ layoutCl
 
         <FormField>
           <FormFieldInput>
-            <FormFieldLabel>Templates</FormFieldLabel>
+            <FormFieldLabel>Objects</FormFieldLabel>
 
-            {getTemplates.isSuccess && (
-              <SelectSingle
-                isClearable
-                name="templates"
-                {...{ register, errors, control }}
-                options={getTemplates.data}
-              />
+            {getObjects.isSuccess && (
+              <SelectSingle isClearable name="objects" {...{ register, errors, control }} options={getObjects.data} />
+            )}
+
+            {getObjects.isLoading && <Skeleton height="50px" />}
+          </FormFieldInput>
+        </FormField>
+
+        <FormField>
+          <FormFieldInput>
+            <FormFieldLabel>Mappings</FormFieldLabel>
+
+            {getMappings.isSuccess && (
+              <SelectSingle isClearable name="mappings" {...{ register, errors, control }} options={getMappings.data} />
             )}
 
-            {getTemplates.isLoading && <Skeleton height="50px" />}
+            {getMappings.isLoading && <Skeleton height="50px" />}
           </FormFieldInput>
         </FormField>
+        <br />
 
         <FormField>
           <FormFieldInput>

pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx

@@ -83,7 +83,8 @@ export const LogsTableTemplate: React.FC<LogsTableTemplateProps> = ({ logs, pagi
               {logColumns.user && <TableHeader>{t("User")}</TableHeader>}
               {logColumns.organization && <TableHeader>{t("Organization")}</TableHeader>}
               {logColumns.application && <TableHeader>{t("Application")}</TableHeader>}
-              {logColumns.template && <TableHeader>{t("Template")}</TableHeader>}
+              {logColumns.object && <TableHeader>{t("Object")}</TableHeader>}
+              {logColumns.mapping && <TableHeader>{t("Mapping")}</TableHeader>}
               <TableHeader></TableHeader>
             </TableRow>
           </TableHead>
@@ -208,15 +209,28 @@ export const LogsTableTemplate: React.FC<LogsTableTemplateProps> = ({ logs, pagi
                   </TableCell>
                 )}
 
-                {logColumns.template && (
+                {logColumns.object && (
                   <TableCell>
                     <Button
                       variant="primary"
-                      label={t("Template")}
+                      label={t("Object")}
                       icon={faArrowRight}
                       className={styles.button}
-                      disabled={!log.context.template}
-                      onClick={(e) => handleResourceClick(e, "templates", log.context.template)}
+                      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>
                 )}