updated action table and detail page

ConductionNL · Feb 16, 2024 · f35e41f · f35e41f
1 parent 0fe31a9
commit f35e41f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>