Add step runetime on the dashboard if there is space (#198)

* Add more time insights

* Many dependency updates

* Keep firebase admin at version 10 for now

* Fix minor codestyle issues

backend/storage/type/firebase.ts

@@ -58,17 +58,12 @@ class FirebaseStorage extends StorageType {
 
 	async loadModules(): Promise<ModuleSettings> {
 		try {
-			const modules: ModuleSettings = await this.load('modules');
+			const modules = await this.load('modules');
 
-			if (!('triggers' in modules)) {
-				modules.triggers = [];
-			}
-
-			if (!('events' in modules)) {
-				modules.events = [];
-			}
-
-			return modules;
+			return {
+				triggers: modules?.triggers ?? [],
+				events: modules?.events ?? [],
+			};
 		} catch (error) {
 			console.error(`[storage/type/firebase] ${error}`);
 			console.log(`[storage/type/firebase] Returning default settings`);

frontend/App/Statuses/Status/Process/Process.style.tsx

@@ -34,9 +34,12 @@ type StageProps = {
 };
 
 export const Stage = styled.div<StageProps>`
+	display: flex;
+	justify-content: space-between;
 	background: ${(props) => stateDarkColor[props.state] || stateDarkColor.success};
 	padding: 0.3rem 0.5rem;
-	${ellipsis};
+	container-type: inline-size;
+	container-name: info;
 
 	${fromSize.small(css`
 		width: auto;
@@ -73,9 +76,13 @@ type StepProps = {
 };
 
 export const Step = styled.div<StepProps>`
+	display: flex;
 	background: ${(props) => stateDarkColor[props.state] || stateDarkColor.info};
 	padding: 0.3rem 0.5rem 0.3rem 2.3rem;
-	${ellipsis};
+	gap: 0.5rem;
+	justify-content: space-between;
+	container-type: inline-size;
+	container-name: info;
 
 	${fromSize.small(css`
 		border-radius: 0.5rem;
@@ -102,6 +109,18 @@ export const Step = styled.div<StepProps>`
 		`}
 `;
 
+export const Info = styled.div`
+	${ellipsis};
+`;
+
+export const Duration = styled.div`
+	display: none;
+
+	@container info (min-width: 15rem) {
+		display: block;
+	}
+`;
+
 export const StageContainer = styled.div`
 	flex-grow: 1;
 	flex-shrink: 1;

frontend/App/Statuses/Status/Process/Process.tsx

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
 
-import { Details, ProcessContainer, Stage, StageContainer, Stages, Step } from './Process.style';
+import { Details, Duration, Info, ProcessContainer, Stage, StageContainer, Stages, Step } from './Process.style';
 
+import RunTime from '/frontend/App/Statuses/Status/RunTime';
 import Icon from '/frontend/components/Icon';
 import useSetting from '/frontend/hooks/useSetting';
 
@@ -39,15 +40,22 @@ const Process = ({ process }: Props): ReactElement => {
 
 		return (
 			<Step key={step.id} state={step.state} processState={process.state}>
-				<Icon icon={getStateIcon(step.state)} /> {step.title}
+				<Info>
+					<Icon icon={getStateIcon(step.state)} /> {step.title}
+				</Info>
+				<Duration>
+					<RunTime duration={step.duration} noWrap />
+				</Duration>
 			</Step>
 		);
 	};
 
 	const renderStage = (stage: StageType): ReactElement => (
 		<StageContainer key={stage.id}>
 			<Stage state={stage.state} processState={process.state}>
-				<Icon icon={getStateIcon(stage.state, process.state)} /> {stage.title}
+				<Info>
+					<Icon icon={getStateIcon(stage.state, process.state)} /> {stage.title}
+				</Info>
 			</Stage>
 			{!!stage.steps && stage.steps.map((step) => renderStep(step))}
 		</StageContainer>

frontend/App/Statuses/Status/RunTime.tsx

@@ -2,22 +2,25 @@ import { ReactElement, useEffect, useState } from 'react';
 
 import { Duration } from '/types/status';
 
-const getTimeRan = (milliseconds: number = 0) => {
+const getTimeRan = (milliseconds: number = 0, wrap: boolean) => {
 	let seconds = Math.round(milliseconds / 1000);
 	if (seconds === 0) {
 		return '';
 	}
 	const minutes = Math.floor(seconds / 60);
 	seconds = seconds - minutes * 60;
 
-	return `(${minutes}:${seconds < 10 ? `0${seconds}` : seconds})`;
+	const duration = `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
+
+	return wrap ? `(${duration})` : duration;
 };
 
 type Props = {
 	duration?: Duration;
+	noWrap?: boolean;
 };
 
-const RunTime = ({ duration }: Props): ReactElement | null => {
+const RunTime = ({ duration, noWrap = false }: Props): ReactElement | null => {
 	const [runDuration, setRunDuration] = useState(duration?.ran || 0);
 
 	useEffect(() => {
@@ -41,7 +44,8 @@ const RunTime = ({ duration }: Props): ReactElement | null => {
 
 		return () => clearInterval(intervalId);
 	}, [duration, setRunDuration]);
-	return <>{getTimeRan(runDuration)}</>;
+
+	return <>{getTimeRan(runDuration, !noWrap)}</>;
 };
 
 export default RunTime;

frontend/components/Toggle/Toggle.style.tsx

@@ -10,7 +10,9 @@ export const Switch = styled.div`
 	height: 1.25rem;
 	border-radius: 50%;
 	background: ${textMutedColor};
-	transition: right 300ms, background-color 300ms;
+	transition:
+		right 300ms,
+		background-color 300ms;
 `;
 
 type ButtonProps = {

frontend/dashboard.tsx

@@ -1,17 +1,18 @@
 import { StrictMode } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 
 import App from './App';
 import store from './store';
 
 console.log('[frontend] init dashboard.');
 
-render(
+const root = createRoot(document.getElementById('cimonitor'));
+
+root.render(
 	<StrictMode>
 		<Provider store={store}>
 			<App />
 		</Provider>
-	</StrictMode>,
-	document.getElementById('cimonitor')
+	</StrictMode>
 );

frontend/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" translate="no">
 	<head>
 		<meta charset="utf-8" />

package.json

@@ -26,51 +26,51 @@
 		"postinstall": "husky install"
 	},
 	"dependencies": {
-		"axios": "^0.26.1",
+		"axios": "^1.5.1",
 		"body-parser": "^1.20.2",
 		"dotenv": "^16.3.1",
 		"express": "^4.18.2",
-		"firebase-admin": "^10.0.2",
+		"firebase-admin": "^10",
 		"socket.io": "^4.7.2",
 		"socket.io-client": "^4.7.2"
 	},
 	"devDependencies": {
 		"@futureportal/parcel-transformer-package-version": "^1.0.0",
-		"@parcel/packager-raw-url": "2.10.0",
-		"@parcel/transformer-svg-react": "^2.10.0",
-		"@parcel/transformer-typescript-tsc": "^2.10.0",
-		"@parcel/transformer-webmanifest": "2.10.0",
-		"@types/express": "^4.17.19",
-		"@types/node": "^20.8.5",
-		"@types/react": "^17.0.39",
-		"@types/react-dom": "^17.0.11",
-		"@types/react-redux": "^7.1.23",
-		"@types/showdown": "^2.0.0",
+		"@parcel/packager-raw-url": "2.10.1",
+		"@parcel/transformer-svg-react": "^2.10.1",
+		"@parcel/transformer-typescript-tsc": "^2.10.1",
+		"@parcel/transformer-webmanifest": "2.10.1",
+		"@types/express": "^4.17.20",
+		"@types/node": "^20.8.8",
+		"@types/react": "^18.2.31",
+		"@types/react-dom": "^18.2.14",
+		"@types/react-redux": "^7.1.28",
+		"@types/showdown": "^2.0.3",
 		"@types/socket.io": "^3.0.2",
 		"@types/socket.io-client": "^3.0.0",
-		"@types/styled-components": "^5.1.24",
-		"@typescript-eslint/eslint-plugin": "^5.13.0",
-		"@typescript-eslint/parser": "^5.13.0",
+		"@types/styled-components": "^5.1.29",
+		"@typescript-eslint/eslint-plugin": "^6.9.0",
+		"@typescript-eslint/parser": "^6.9.0",
 		"buffer": "^6.0.3",
 		"cypress": "^9.5.1",
-		"eslint": "^7.32.0",
-		"eslint-config-prettier": "^8.5.0",
+		"eslint": "^8.52.0",
+		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-node": "^11.1.0",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.29.3",
-		"eslint-plugin-simple-import-sort": "^7.0.0",
+		"eslint-plugin-prettier": "^5.0.1",
+		"eslint-plugin-react": "^7.33.2",
+		"eslint-plugin-simple-import-sort": "^10.0.0",
 		"husky": "^7.0.0",
-		"lint-staged": "^12.3.4",
-		"nodemon": "^2.0.15",
-		"parcel": "^2.10.0",
-		"prettier": "^2.5.1",
+		"lint-staged": "^15.0.2",
+		"nodemon": "^3.0.1",
+		"parcel": "^2.10.1",
+		"prettier": "^3.0.3",
 		"process": "^0.11.10",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"react-redux": "^7.2.6",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-redux": "^8.1.3",
 		"showdown": "^2.1.0",
-		"styled-components": "^5.3.3",
+		"styled-components": "^6.1.0",
 		"ts-node": "^10.9.1",
-		"typescript": "^4.5.5"
+		"typescript": "^5.2.2"
 	}
 }

types/module.ts

@@ -1,4 +1,4 @@
-import { State } from 'types/status';
+import { State } from './status';
 
 export type GpioModule = {
 	type: 'gpio';