Merge pull request #80 from bekk/AccordionCleanup

Accordion cleanup
bekk · Sep 29, 2023 · 8af5b84 · 8af5b84
2 parents c19b972 + dc17f36
commit 8af5b84
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/db-scheduler-ui-frontend/src/components/history/LogAccordionItem.tsx b/db-scheduler-ui-frontend/src/components/history/LogAccordionItem.tsx
@@ -11,7 +11,7 @@
  * express or implied. See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AccordionPanel, Box, VStack } from '@chakra-ui/react';
+import { AccordionPanel, Box, Divider, Text, VStack } from '@chakra-ui/react';
 import colors from 'src/styles/colors';
 import { LogDataRow } from 'src/components/history/LogDataRow';
 interface LogAccordionItemProps {
@@ -24,17 +24,32 @@ export const LogAccordionItem: React.FC<LogAccordionItemProps> = ({
   taskData,
 }) => {
   return (
-    <AccordionPanel overflowX="auto">
+    <AccordionPanel overflowX="auto" p={0}>
       <Box display={'flex'} justifyContent={'space-between'}></Box>
       <VStack
         align="start"
         spacing={2}
         bgColor={colors.primary['100']}
-        p={2}
+        p={0}
         w={'100%'}
         borderRadius={4}
       >
-        <pre>{stackTrace}</pre>
+        <Text
+          ml={'16px'}
+          textDecoration={'underline'}
+          color={colors.primary['500']}
+        >
+          Stacktrace
+        </Text>
+        <pre style={{ marginLeft: '16px', marginTop: '8px' }}>{stackTrace}</pre>
+        <Divider color={colors.primary['300']} />
+        <Text
+          ml={'16px'}
+          textDecoration={'underline'}
+          color={colors.primary['500']}
+        >
+          Taskdata
+        </Text>
         <LogDataRow taskData={taskData} />
       </VStack>
     </AccordionPanel>

diff --git a/db-scheduler-ui-frontend/src/components/history/LogDataRow.tsx b/db-scheduler-ui-frontend/src/components/history/LogDataRow.tsx
@@ -20,12 +20,12 @@ export const LogDataRow: React.FC<{ taskData: object | null }> = ({
   taskData,
 }) => {
   return (
-    <>
+    <Box ml={'16px'}>
       {taskData !== null && (
         <Box display={'flex'} flexDirection={'column'}>
           <JsonViewer data={taskData} />
         </Box>
       )}
-    </>
+    </Box>
   );
 };