Add activity log feature (#200)

.gitignore

@@ -1,6 +1,4 @@
 # Logs
-logs
-*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
@@ -88,11 +86,9 @@ typings/
 # Electron-Forge
 out/
 dist/
+.idea/
 
 # Project
-
-.idea/
-*.sqlite*
-release-builds/
-/admin/database.sqlite*
-/logo.*
+/serverDevLogs/*
+/serverDevImages/*
+/paradise-development-database.sqlite*

.vscode/launch.json

@@ -15,6 +15,13 @@
 			"type": "node",
 			"request": "launch",
 			"cwd": "${workspaceRoot}/server",
+			"env": {
+				"NODE_ENV": "development",
+				"PARADISE_LOG_PATH": "${workspaceRoot}/serverDevLogs",
+				"PARADISE_IMAGE_PATH": "${workspaceRoot}/serverDevImages",
+				"PARADISE_DATABASE_PATH": "${workspaceRoot}/paradise-development-database.sqlite"
+			},
+			"outputCapture": "std",
 			"runtimeExecutable": "npm",
 			"runtimeArgs": ["run", "develop"],
 			"preLaunchTask": "NPM Install - Server"

.vscode/settings.json

@@ -14,14 +14,17 @@
 		"Gilles",
 		"Logline",
 		"Mantine",
+		"maxsize",
 		"Millis",
 		"paradisepi",
 		"portfinder",
 		"postfade",
 		"prefade",
 		"qrcode",
 		"tagline",
+		"tailable",
 		"typeorm",
+		"undefinedbuild",
 		"xair",
 		"xremote"
 	],

balena.yml

@@ -32,4 +32,4 @@ data:
         - intel-nuc
         - generic-amd64
         - generic-aarch64
-version: 3.0.4
+version: 3.1.0

client/Components/ControlPanel/Fader.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { MantineTheme, Slider } from '@mantine/core'
+import { useTimeout } from '@mantine/hooks'
+import React from 'react'
 
 /**
  * Notches on the fader used for the metering, available in decibels
@@ -72,44 +73,58 @@ export const Fader = (props: {
 	meterValue: number
 	value: number | false
 	onChange: (value: number) => void
-}) => (
-	<Slider
-		disabled={props.disabled}
-		onChange={value => (!props.disabled ? props.onChange(value) : false)}
-		value={props.value !== false ? props.value : null}
-		radius={'lg'}
-		showLabelOnHover={false}
-		size={'xl'}
-		marks={percentageMarks}
-		step={1}
-		min={0}
-		max={100}
-		precision={0}
-		label={() => null}
-		styles={theme => ({
-			track: {
-				'&:before': {
-					background: metering(theme, props.meterValue),
+	onSettle: () => void
+}) => {
+	// The timeout function debounces the fader for use in the history module, to avoid filling up the logs with every value. This calls a function after a second of inactivity on the fader.
+	const { start, clear } = useTimeout(() => props.onSettle(), 1000, {
+		autoInvoke: false,
+	})
+	return (
+		<Slider
+			disabled={props.disabled}
+			onChange={value => {
+				if (props.disabled) return false
+				else {
+					clear()
+					start()
+					props.onChange(value)
+				}
+			}}
+			value={props.value !== false ? props.value : null}
+			radius={'lg'}
+			showLabelOnHover={false}
+			size={'xl'}
+			marks={percentageMarks}
+			step={1}
+			min={0}
+			max={100}
+			precision={0}
+			label={() => null}
+			styles={theme => ({
+				track: {
+					'&:before': {
+						background: metering(theme, props.meterValue),
+					},
+				},
+				bar: {
+					backgroundColor: 'transparent',
+				},
+				mark: {
+					border: 0,
+					height: 12,
+					width: 1,
 				},
-			},
-			bar: {
-				backgroundColor: 'transparent',
-			},
-			mark: {
-				border: 0,
-				height: 12,
-				width: 1,
-			},
-			thumb: {
-				display: 'block',
-				height: props.disabled ? '1em' : '2em',
-				width: props.disabled ? '0.5em' : '1em',
-				backgroundColor: 'white',
-			},
-			root: {
-				paddingTop: '1em',
-				paddingBottom: '2em',
-			},
-		})}
-	/>
-)
+				thumb: {
+					display: 'block',
+					height: props.disabled ? '1em' : '2em',
+					width: props.disabled ? '0.5em' : '1em',
+					backgroundColor: 'white',
+				},
+				root: {
+					paddingTop: '1em',
+					paddingBottom: '2em',
+				},
+			})}
+		/>
+	)
+}

client/Components/ControlPanel/PresetFaders.tsx

@@ -50,6 +50,13 @@ export const PresetFaders = (props: { faders: Array<DatabaseFader> }) => {
 										value: val / 100,
 									})
 								}
+								onSettle={() =>
+									ApiCall.post('/faders/log', {
+										address: '/' + faderString + '/mix/fader',
+										id: fader.id,
+										name: fader.name,
+									})
+								}
 							/>
 						</div>
 					)

client/Components/ErrorBoundary.tsx

@@ -1,5 +1,4 @@
-import { Accordion, Box, Button, Code, Container, Divider, Text, Title } from '@mantine/core'
-import { QRCodeSVG } from 'qrcode.react'
+import { Button, Container, Title } from '@mantine/core'
 import React, { Component, ErrorInfo, ReactNode } from 'react'
 
 interface Props {
@@ -47,7 +46,7 @@ class ErrorBoundary extends Component<Props, State> {
 						</Button>
 					</a>
 
-					<a href="http://localhost/logs" target="_blank" rel="noreferrer">
+					<a href={`http://${sessionStorage.getItem('paradiseServerAddress') || window.location.host}/error-logs`} target="_blank" rel="noreferrer">
 						<Button variant="default" color="dark" size="lg" mx="xs">
 							Download Logs
 						</Button>

client/Pages/Admin/Configuration.tsx

@@ -1,13 +1,15 @@
 import { Tabs } from '@mantine/core'
-import { FaDatabase } from '@react-icons/all-files/fa/FaDatabase'
 import { FaDrum } from '@react-icons/all-files/fa/FaDrum'
+import { FaHistory } from '@react-icons/all-files/fa/FaHistory'
 import { FaLightbulb } from '@react-icons/all-files/fa/FaLightbulb'
 import { FaPaintBrush } from '@react-icons/all-files/fa/FaPaintBrush'
+import { FaStethoscope } from '@react-icons/all-files/fa/FaStethoscope'
 import { FaTools } from '@react-icons/all-files/fa/FaTools'
 import React, { ReactNode } from 'react'
-import { DatabaseAndLogsConfigurationPage } from './ModuleConfiguration/DatabaseAndLogs'
+import { DiagnosticsConfigurationPage } from './ModuleConfiguration/Diagnostics'
 import { E131ModuleConfigurationPage } from './ModuleConfiguration/E131'
 import { GeneralConfigurationPage } from './ModuleConfiguration/General'
+import { HistoryConfigurationPage } from './ModuleConfiguration/History'
 import { OSCModuleConfigurationPage } from './ModuleConfiguration/OSC'
 import { ScreensaverConfigurationPage } from './ModuleConfiguration/Screensaver'
 
@@ -25,15 +27,18 @@ export const ConfigurationPage = () => {
 					<Tabs.Tab value="Screensaver" icon={<FaPaintBrush />}>
 						Screensaver
 					</Tabs.Tab>
-					<Tabs.Tab value="Logs" icon={<FaDatabase />}>
-						Database & Logs
-					</Tabs.Tab>
 					<Tabs.Tab value="sACN" icon={<FaLightbulb />}>
 						sACN (E1.31)
 					</Tabs.Tab>
 					<Tabs.Tab value="OSC" icon={<FaDrum />}>
 						OSC
 					</Tabs.Tab>
+					<Tabs.Tab value="history" icon={<FaHistory />}>
+						History Recording
+					</Tabs.Tab>
+					<Tabs.Tab value="diagnostics" icon={<FaStethoscope />}>
+						Diagnostics
+					</Tabs.Tab>
 				</Tabs.List>
 				<Tabs.Panel value="General" pt="xs">
 					<ScrollAreaForConfigModule>
@@ -45,11 +50,6 @@ export const ConfigurationPage = () => {
 						<ScreensaverConfigurationPage />
 					</ScrollAreaForConfigModule>
 				</Tabs.Panel>
-				<Tabs.Panel value="Logs" pt="xs">
-					<ScrollAreaForConfigModule>
-						<DatabaseAndLogsConfigurationPage />
-					</ScrollAreaForConfigModule>
-				</Tabs.Panel>
 				<Tabs.Panel value="sACN" pt="xs">
 					<ScrollAreaForConfigModule>
 						<E131ModuleConfigurationPage />
@@ -60,6 +60,16 @@ export const ConfigurationPage = () => {
 						<OSCModuleConfigurationPage />
 					</ScrollAreaForConfigModule>
 				</Tabs.Panel>
+				<Tabs.Panel value="history" pt="xs">
+					<ScrollAreaForConfigModule>
+						<HistoryConfigurationPage />
+					</ScrollAreaForConfigModule>
+				</Tabs.Panel>
+				<Tabs.Panel value="diagnostics" pt="xs">
+					<ScrollAreaForConfigModule>
+						<DiagnosticsConfigurationPage />
+					</ScrollAreaForConfigModule>
+				</Tabs.Panel>
 			</Tabs>
 		</>
 	)

client/Pages/Admin/ModuleConfiguration/Diagnostics.tsx

@@ -0,0 +1,36 @@
+import { Button, Container, Divider } from '@mantine/core'
+import { useViewportSize } from '@mantine/hooks'
+import { Prism } from '@mantine/prism'
+import React from 'react'
+import { useAppSelector } from '../../../apis/redux/mainStore'
+
+const Logs = () => {
+	const { width } = useViewportSize()
+	const logs = useAppSelector(state => state.logs.logs)
+	return (
+		<Container size={width}>
+			<Prism
+				withLineNumbers
+				language="json"
+				copyLabel="Copy code to clipboard"
+				copiedLabel="Code copied to clipboard"
+			>
+				{logs.map(logLine => JSON.stringify(JSON.parse(logLine), null, 2)).join('\n')}
+			</Prism>
+		</Container>
+	)
+}
+export const DiagnosticsConfigurationPage = () => (
+	<>
+		<a
+			href={`http://${sessionStorage.getItem('paradiseServerAddress') || window.location.host}/error-logs`}
+			target="_blank"
+		>
+			<Button variant="default" color="dark" size="md" mx="xs" my="xs">
+				Download Diagnostics Logs
+			</Button>
+		</a>
+		<Divider my={'sm'} label="Live diagnostic logging" labelPosition="center" />
+		<Logs />
+	</>
+)