feat: allow to collapse job's data/options/error, closes #529

felixmosh · Feb 16, 2023 · 59ec961 · 59ec961
1 parent 298b461
commit 59ec961
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 16 deletions.
diff --git a/packages/ui/src/components/Icons/ArrowDownIcon.tsx b/packages/ui/src/components/Icons/ArrowDownIcon.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ArrowDownIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476 12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>
+);
diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
+import { AppJob } from '@bull-board/api/typings/app';
+import React, { useState } from 'react';
 import { TabsType } from '../../../../hooks/useDetailsTabs';
+import { useSettingsStore } from '../../../../hooks/useSettings';
 import { Highlight } from '../../../Highlight/Highlight';
+import { ArrowDownIcon } from '../../../Icons/ArrowDownIcon';
+import { Button } from '../../Button/Button';
 import { JobLogs } from './JobLogs/JobLogs';
-import { AppJob } from '@bull-board/api/typings/app';
 
 interface DetailsContentProps {
   job: AppJob;
@@ -13,26 +16,40 @@ interface DetailsContentProps {
 }
 
 export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProps) => {
+  const { collapseJobData, collapseJobOptions, collapseJobError } = useSettingsStore();
+  const [collapseState, setCollapse] = useState({ data: false, options: false, error: false });
   const { stacktrace, data, returnValue, opts, failedReason } = job;
 
   switch (selectedTab) {
     case 'Data':
-      return (
+      return collapseJobData && !collapseState.data ? (
+        <Button onClick={() => setCollapse({ ...collapseState, data: true })}>
+          Show data <ArrowDownIcon />
+        </Button>
+      ) : (
         <Highlight language="json">{JSON.stringify({ data, returnValue }, null, 2)}</Highlight>
       );
     case 'Options':
-      return <Highlight language="json">{JSON.stringify(opts, null, 2)}</Highlight>;
+      return collapseJobOptions && !collapseState.options ? (
+        <Button onClick={() => setCollapse({ ...collapseState, options: true })}>
+          Show options <ArrowDownIcon />
+        </Button>
+      ) : (
+        <Highlight language="json">{JSON.stringify(opts, null, 2)}</Highlight>
+      );
     case 'Error':
-      return (
-        <>
-          {stacktrace.length === 0 ? (
-            <div className="error">{!!failedReason ? failedReason : 'NA'}</div>
-          ) : (
-            <Highlight language="stacktrace" key="stacktrace">
-              {stacktrace.join('\n')}
-            </Highlight>
-          )}
-        </>
+      if (stacktrace.length === 0) {
+        return <div className="error">{!!failedReason ? failedReason : 'NA'}</div>;
+      }
+
+      return collapseJobError && !collapseState.error ? (
+        <Button onClick={() => setCollapse({ ...collapseState, error: true })}>
+          Show errors <ArrowDownIcon />
+        </Button>
+      ) : (
+        <Highlight language="stacktrace" key="stacktrace">
+          {stacktrace.join('\n')}
+        </Highlight>
       );
     case 'Logs':
       return <JobLogs actions={actions} job={job} />;

diff --git a/packages/ui/src/components/SettingsModal/SettingsModal.tsx b/packages/ui/src/components/SettingsModal/SettingsModal.tsx
@@ -22,8 +22,16 @@ const pollingIntervals = [-1, 3, 5, 10, 20, 60, 60 * 5, 60 * 15].map((interval)
 }));
 
 export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
-  const { pollingInterval, jobsPerPage, confirmQueueActions, confirmJobActions, setSettings } =
-    useSettingsStore((state) => state);
+  const {
+    pollingInterval,
+    jobsPerPage,
+    confirmQueueActions,
+    confirmJobActions,
+    collapseJobData,
+    collapseJobOptions,
+    collapseJobError,
+    setSettings,
+  } = useSettingsStore((state) => state);
 
   return (
     <Modal width="small" open={open} onClose={onClose} title="Settings">
@@ -55,6 +63,24 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
         checked={confirmJobActions}
         onCheckedChange={(checked) => setSettings({ confirmJobActions: checked })}
       />
+      <SwitchField
+        label="Collapse job data"
+        id="collapse-job-data"
+        checked={collapseJobData}
+        onCheckedChange={(checked) => setSettings({ collapseJobData: checked })}
+      />
+      <SwitchField
+        label="Collapse job options"
+        id="collapse-job-options"
+        checked={collapseJobOptions}
+        onCheckedChange={(checked) => setSettings({ collapseJobOptions: checked })}
+      />
+      <SwitchField
+        label="Collapse job error"
+        id="collapse-job-error"
+        checked={collapseJobError}
+        onCheckedChange={(checked) => setSettings({ collapseJobError: checked })}
+      />
     </Modal>
   );
 };
diff --git a/packages/ui/src/hooks/useSettings.ts b/packages/ui/src/hooks/useSettings.ts
@@ -6,6 +6,9 @@ interface SettingsState {
   jobsPerPage: number;
   confirmQueueActions: boolean;
   confirmJobActions: boolean;
+  collapseJobData: boolean;
+  collapseJobOptions: boolean;
+  collapseJobError: boolean;
   setSettings: (settings: Partial<Omit<SettingsState, 'setSettings'>>) => void;
 }
 
@@ -16,6 +19,9 @@ export const useSettingsStore = create<SettingsState>()(
       jobsPerPage: 10,
       confirmJobActions: true,
       confirmQueueActions: true,
+      collapseJobData: false,
+      collapseJobOptions: false,
+      collapseJobError: false,
       setSettings: (settings) => set(() => settings),
     }),
     {