Improves logs, Basic light color scheme fix, closes #41

client/src/Theme.module.css

@@ -1,3 +1,9 @@
+body {
+  @mixin light {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+
 .container {
   background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
   border: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));

client/src/components/Layout/Navbar.module.css

@@ -1,5 +1,5 @@
 .navbar {
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
   height: 100%;
   padding: var(--mantine-spacing-md);
   padding-top: 0;

client/src/components/Logs/Logs.tsx

@@ -1,10 +1,12 @@
-import { Container, Button, Paper, Table, Badge, Tabs, Select, TextInput, Group } from "@mantine/core";
+import { Container, Button, Paper, Table, Badge, Tabs, Select, TextInput, Group, Text, Modal, Box, Code, Title, List, ActionIcon, Indicator } from "@mantine/core";
 import { DatePickerInput } from '@mantine/dates';
 import Head from "../Common/Head";
 import useAPI from "../../hooks/useAPI";
 import { ReactElement, useEffect, useState } from "react";
 import classes from '../../Theme.module.css';
-import { IconRefresh, IconSearch, IconTrash } from "@tabler/icons-react";
+import { IconDots, IconRefresh, IconSearch, IconTrash } from "@tabler/icons-react";
+import Evaluate from "../Rules/Run/Evaluate";
+import { modals } from "@mantine/modals";
 
 const colors: {[color: string]: string} = {
   silly: 'indigo',
@@ -43,21 +45,62 @@ function Generic( { endpoint, extraTh, extraTd, extraButtons, extraFilters }: Ge
   const [level, setLevel] = useState<string | null>('all');
   const [limit, setLimit] = useState<string | null>('50');
   const [query, search] = useState<string>('');
+  const [viewing, view] = useState<log|undefined>(undefined);
   const { data: logs, fetch, del, loading } = useAPI<log[]>({
       url: `/log/${endpoint}?level=${level}&limit=${limit}${!date[0]?'':`&date=${String(date[0])}${!date[1]?'':`,${String(date[1])}`}`}`,
       default: [],
   });
   const filtered = (logs||[]).filter(log=>find(query, log));
   useEffect(()=>{ fetch() },[ date, level, limit ]);
+
+  const clear = () =>
+    modals.openConfirmModal({
+        title: 'Clear log?',
+        centered: true,
+        children: (
+        <Text size="sm">
+            Are you sure you want to empty the {endpoint} log?<br/>
+            This action is destructive and cannot be reversed.<br/>
+        </Text>
+        ),
+        labels: { confirm: 'Reset', cancel: "No, don't clear" },
+        confirmProps: { color: 'red' },
+        onConfirm: () => del(),
+    });
+
   return (<>
   <Paper mt="lg" mb="xs" pl="xl" pr="xl" >
+    <Modal size="auto" opened={!!viewing} onClose={()=>(view(undefined))} title="Log Viewer">
+        {viewing&&
+        <Box>
+          <List pb="xs">
+            <List.Item>level: <Code>{viewing.level}</Code></List.Item>
+            <List.Item>timestamp: <Code>{viewing.timestamp}</Code></List.Item>
+            <List.Item>message: <Code>{viewing.message}</Code></List.Item>
+            {viewing.schema&&<List.Item>schema: <Code>{viewing.schema}</Code></List.Item>}
+            {viewing.rule&&<List.Item>rule: <Code>{viewing.rule}</Code></List.Item>}
+          </List>
+          {viewing.stack&&
+          <Box>
+            <Title size="h4">Error Stack</Title>
+            <Code c="red">{viewing.stack}</Code>
+          </Box>}
+          {viewing.evaluated&&<Evaluate
+          evaluated={viewing.evaluated as unknown as []}
+          setEvaluated={()=>{}}
+          initActions={(viewing.initActions||[]) as unknown as []}
+          finalActions={(viewing.finalActions||[]) as unknown as []}
+          executed
+          />}
+        </Box>}
+    </Modal>
     <Group justify="space-between">
       <Button onClick={()=>fetch()}
       variant="subtle" loading={loading}
       size="xs"
       leftSection={<IconRefresh stroke={1.5} size={16}/>}
       >refresh</Button>
-      <Button color="red" onClick={()=>del()}
+      <Button color="red" onClick={()=>clear()}
       variant="subtle" loading={loading}
       size="xs"
       leftSection={<IconTrash stroke={1.5} size={16}/>}
@@ -93,21 +136,23 @@ function Generic( { endpoint, extraTh, extraTd, extraButtons, extraFilters }: Ge
       />
     </Group>
   </Paper>
-  <Table stickyHeader>
+  <Table highlightOnHover stickyHeader>
     <Table.Thead>
       <Table.Tr>
-        <Table.Th>Level</Table.Th>
+        <Table.Th w={"32px"} />
+        <Table.Th w={"128px"}>Level</Table.Th>
         <Table.Th>Time</Table.Th>
         <Table.Th>Message</Table.Th>
         {extraTh}
       </Table.Tr>
     </Table.Thead>
     <Table.Tbody>
       {filtered.map((log, key)=>
-        <Table.Tr key={key}>
-          <Table.Td><Badge color={colors[log.level]} fullWidth variant="light">{log.level}</Badge></Table.Td>
+        <Table.Tr key={key} >
+          <Table.Td><ActionIcon onClick={()=>view(log)} variant="subtle" color="gray"><IconDots size={16} stroke={1.5} /></ActionIcon></Table.Td>
+          <Table.Td><Indicator disabled={!log.stack&&!log.evaluated} ><Badge radius="xs" color={colors[log.level]} fullWidth variant="light">{log.level}</Badge></Indicator></Table.Td>
           <Table.Td>{log.timestamp}</Table.Td>
-          <Table.Td>{log.message}</Table.Td>
+          <Table.Td><Text size="sm" truncate="end">{log.message}</Text></Table.Td>
           {extraTd&&extraTd(log, endpoint)}
         </Table.Tr>
       )}
@@ -133,7 +178,7 @@ export default function Logs() {
           <Tabs.Panel value="history">
             <Generic endpoint="history"
             extraTh={<><Table.Th>Schema</Table.Th><Table.Th>Rule</Table.Th></>}
-            extraTd={(log)=><><Table.Td><Badge variant="light">{log.schema}</Badge></Table.Td><Table.Td><Badge variant="light" color="orange">{log.rule}</Badge></Table.Td></>}
+            extraTd={(log)=><><Table.Td><Badge radius="xs" variant="light">{log.schema}</Badge></Table.Td><Table.Td><Badge radius="xs" variant="light" color="orange">{log.rule}</Badge></Table.Td></>}
             />
           </Tabs.Panel>
         </Tabs>

client/src/components/Settings/Settings.tsx

@@ -86,7 +86,7 @@ export default function Settings() {
     useEffect(()=>{ if (version) check(); }, [ version ]);
 
     return (
-    <Container label={<Head rightSection={<Button onClick={()=>save()} leftSection={<IconDeviceFloppy size={16} />} loading={loading} variant="light">Save</Button>} >Application Settings</Head>} >
+    <Container label={<Head rightSection={<Button onClick={()=>save()} leftSection={<IconDeviceFloppy size={16} />} loading={loading}>Save</Button>} >Application Settings</Head>} >
         <Input.Wrapper mt="xs"
         label="Theme"
         description="Change colours of the application"

server/src/routes/log.ts

@@ -11,8 +11,8 @@ interface Log {
 }
 const loggers: { [k: string]: { logger: winston.Logger, fields: string[] } } = {};
 function init() {
-    loggers.general = { logger: log, fields: ['message', 'level', 'timestamp'] };
-    loggers.history = { logger: history, fields: ['message', 'level', 'timestamp', 'rule', 'schema'] };
+    loggers.general = { logger: log, fields: ['message', 'level', 'timestamp', 'stack'] };
+    loggers.history = { logger: history, fields: ['message', 'level', 'timestamp', 'rule', 'schema', 'stack', 'evaluated'] };
 }
 
 export default async function (route: FastifyInstance) {