event-storage-ui 0.1.0 → 1.0.0-alpha.0

package/README.md

@@ -1 +1,53 @@
-This is a starter template for [Learn Next.js](https://nextjs.org/learn).
+This is an admin dashboard for inspecting a running [node-event-storage](https://github.com/albe/node-event-storage) on the same machine. It is built using [Remix](https://remix.run/) with modern React and based on the [Adminator](https://github.com/puikinsh/Adminator-admin-dashboard) theme.
+
+## Screenshots
+
+### Dashboard
+
+![Dashboard](public/screenshots/dashboard.png)
+
+### Event Stream
+
+![Event Stream](public/screenshots/event-stream.png)
+
+### Consumers (create and list)
+
+![Consumers](public/screenshots/consumers-preview-executed.png)
+
+### Event commit/write
+
+![Write Events](public/screenshots/write-events-filled.png)
+
+## Usage
+
+```
+git clone https://github.com/albe/node-event-storage-ui.git
+cd node-event-storage-ui
+npm install
+npm run dev
+```
+
+or
+
+```
+npm run build && npm start
+```
+for creating a production build and running it. Make sure the webserver is not reachable from the public internet though.
+
+To adjust the path to your local node-event-storage edit the `eventstore.config.json` file and adjust the `storeName` and `options.storageDirectory` JSON properties.
+
+You can also protect the UI with HTTP Basic Auth by setting `basicAuth.username` and `basicAuth.password`. If either value is empty, Basic Auth is disabled.
+**WARNING:** Never expose Basic Auth over plain HTTP in untrusted networks; use HTTPS (or a trusted private network only), because credentials are sent with every request and can be intercepted.
+Configuration is loaded at server startup, so restart the app after changing `eventstore.config.json`.
+
+```json
+{
+  "storeName": "eventstore",
+  "storesDirectory": null,
+  "options": {},
+  "basicAuth": {
+    "username": "admin",
+    "password": "change-me"
+  }
+}
+```

package/app/components/chart.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+let registered = false;
+
+async function ensureChartJsRegistered() {
+  if (registered) return;
+  const { Chart, LineElement, BarElement, PointElement, LineController, BarController,
+    CategoryScale, LinearScale, Filler, Tooltip, Legend } = await import('chart.js');
+  Chart.register(LineElement, BarElement, PointElement, LineController, BarController,
+    CategoryScale, LinearScale, Filler, Tooltip, Legend);
+  registered = true;
+}
+
+export default function Chart({ type, data, options, className }) {
+  const [ChartComponent, setChartComponent] = useState(null);
+
+  useEffect(() => {
+    Promise.all([
+      import('react-chartjs-2'),
+      ensureChartJsRegistered()
+    ]).then(([mod]) => {
+      const Components = { Line: mod.Line, Bar: mod.Bar };
+      setChartComponent(() => Components[type]);
+    });
+  }, [type]);
+
+  if (!ChartComponent) return null;
+
+  return (
+    <div className={className}>
+      <ChartComponent data={data} options={options} />
+    </div>
+  );
+}

package/app/components/date.jsx

@@ -0,0 +1,19 @@
+const formatter = new Intl.DateTimeFormat(undefined, {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit'
+});
+
+export default function DateFormat({ value }) {
+  const date = value instanceof Date ? value : new Date(value);
+
+  try {
+    return formatter.format(date);
+  } catch {
+    console.error(`Can not format '${value}' as a date`);
+    return value;
+  }
+}

package/app/components/json.jsx

@@ -0,0 +1,21 @@
+import JsonViewModule from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+import 'react18-json-view/src/dark.css';
+
+const JsonView = JsonViewModule.default ?? JsonViewModule;
+
+export default function Json({ data, collapsed = true, style = undefined, className = '' }) {
+  const normalizedCollapsed = collapsed === false ? 1 : collapsed === true ? true : collapsed;
+
+  return (
+    <JsonView
+      src={data}
+      collapsed={normalizedCollapsed}
+      displaySize={normalizedCollapsed === false ? false : 'collapsed'}
+      dark={true}
+      theme="default"
+      className={`json-theme-adminator ${className}`.trim()}
+      style={{ background: 'transparent', ...style }}
+    />
+  );
+}

package/app/components/kpi.jsx

@@ -0,0 +1,11 @@
+export default function Kpi({ value, stdDev, className }) {
+	if (stdDev && Math.abs(value) < stdDev) {
+		return (<span className={"kpi-pill flat" + (className ? ' ' + className : '')}><svg viewBox="0 0 24 24"><path d="M5 12h14"></path></svg> ~{value.toFixed(2)}%</span>);
+	} else if (value > 0) {
+		return (<span className={"kpi-pill up" + (className ? ' ' + className : '')}><svg viewBox="0 0 24 24"><path d="M7 17l10-10M7 7h10v10"></path></svg> +{value.toFixed(2)}%</span>);
+	} else if (value === 0) {
+		return (<span className={"kpi-pill info" + (className ? ' ' + className : '')}><svg viewBox="0 0 24 24"><path d="M5 12h14"></path></svg> steady</span>);
+	} else {
+		return (<span className={"kpi-pill down" + (className ? ' ' + className : '')}><svg viewBox="0 0 24 24"><path d="M7 7l10 10M7 17h10V7"></path></svg> {value.toFixed(2)}%</span>);
+	}
+}

package/app/components/radial.jsx

@@ -0,0 +1,16 @@
+export default function Radial({ value, max, label, caption, className }) {
+	max = max || 100;
+	const pct = value * 100 / max;
+	return (<div className="sv-radial">
+		<div className="sv-radial-chart">
+			<svg viewBox="0 0 80 80">
+				<circle className="radial-track" cx="40" cy="40" r="32"></circle>
+				<circle className={"radial-fill " + (pct >= 95 ? "danger" : className ?? "info")} cx="40" cy="40" r="32" pathLength="100" strokeDasharray={pct + ' 100'}></circle>
+			</svg>
+			<span className="pct">{pct.toFixed(0)}%</span></div>
+		<div className="sv-radial-text">
+			{label && <div className="sv-radial-name">{label}</div>}
+			{caption && <div className="sv-radial-caption">{caption}</div>}
+		</div>
+	</div>);
+}

package/app/components/stream-info-panel.jsx

@@ -0,0 +1,64 @@
+import Json from './json';
+
+function FunctionBlock({ value }) {
+  if (!value) {
+    return <div className="stream-info-panel__empty">n/a</div>;
+  }
+
+  return <pre className="stream-info-panel__code">{value}</pre>;
+}
+
+export default function StreamInfoPanel({ streamInfo }) {
+  const matcherIsFunctionExpression = typeof streamInfo.matcher === 'string';
+  const matcherIsJson = streamInfo.matcher !== null && typeof streamInfo.matcher === 'object';
+
+  function renderJson(data) {
+    if (data === null || data === undefined) {
+      return <div className="stream-info-panel__empty">n/a</div>;
+    }
+
+    return (
+      <div className="stream-info-panel__json">
+        <Json data={data} collapsed={1} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="stream-info-panel" role="region" aria-label="Expanded stream info">
+      <div className="row">
+        <div className="col-lg-7 col-md-12">
+          <section className="stream-info-panel__section">
+            <div className="stream-info-panel__label">Matcher</div>
+            {matcherIsJson ? (
+              renderJson(streamInfo.matcher)
+            ) : matcherIsFunctionExpression ? (
+              <FunctionBlock value={streamInfo.matcher} />
+            ) : (
+              <div className="stream-info-panel__empty">n/a</div>
+            )}
+          </section>
+        </div>
+        <div className="col-lg-5 col-md-12">
+          <section className="stream-info-panel__section">
+            <div className="stream-info-panel__label">Partition</div>
+            <div className="stream-info-panel__status">
+              <span className="stream-info-panel__status-label">Write stream</span>
+              <span
+                className={`tag ${streamInfo.isWriteStream ? 't-active' : 't-unavail'}`}
+              >
+                {streamInfo.isWriteStream ? 'Yes' : 'No'}
+              </span>
+            </div>
+            {streamInfo.isWriteStream && (
+              <>
+                <div className="stream-info-panel__sublabel">Metadata</div>
+                {renderJson(streamInfo.partitionMetadata)}
+              </>
+            )}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/consumers.server.js

@@ -0,0 +1,198 @@
+import vm from 'node:vm';
+import { randomUUID } from 'node:crypto';
+import getEventStore from '../eventstore';
+
+const MAX_CONSUMER_LOGIC_LENGTH = 10000;
+const CONSUMER_LOGIC_TIMEOUT_MS = 200;
+
+function normalizeStreamNames(streamNamesInput) {
+  if (Array.isArray(streamNamesInput)) {
+    return Array.from(new Set(streamNamesInput.map((name) => String(name).trim()).filter(Boolean)));
+  }
+
+  return Array.from(
+    new Set(
+      String(streamNamesInput || '')
+        .split(',')
+        .map((name) => name.trim())
+        .filter(Boolean)
+    )
+  );
+}
+
+function validateConsumerLogicInput(consumerLogic) {
+  if (typeof consumerLogic !== 'string' || !consumerLogic.trim()) {
+    throw new Error('Consumer logic is required.');
+  }
+
+  if (consumerLogic.length > MAX_CONSUMER_LOGIC_LENGTH) {
+    throw new Error(`Consumer logic is too large (max ${MAX_CONSUMER_LOGIC_LENGTH} characters).`);
+  }
+
+  const unsafePatterns = [
+    /\b(?:import|export|require)\b/,
+    /import\s*\(/,
+    /\b(?:process|global|globalThis|module)\b/,
+    /\b(?:Function|eval)\b/,
+    /<\s*\/?\s*script\b/i
+  ];
+  if (unsafePatterns.some((pattern) => pattern.test(consumerLogic))) {
+    throw new Error('Consumer logic contains unsafe syntax.');
+  }
+}
+
+function executeConsumerLogic(consumerLogic, event, state, persistState) {
+  let nextState = state;
+  let calledSetState = false;
+  const setState = (update) => {
+    let resolvedState;
+    try {
+      resolvedState = typeof update === 'function' ? update(nextState) : update;
+    } catch (err) {
+      throw new Error(err?.message || 'setState update failed.');
+    }
+    nextState = resolvedState;
+    calledSetState = true;
+    if (persistState) {
+      persistState(resolvedState);
+    }
+  };
+
+  const context = vm.createContext({
+    event,
+    state: nextState,
+    setState
+  });
+
+  const result = vm.runInContext(
+    `(() => {
+      const consumerHandler = (${consumerLogic});
+      if (typeof consumerHandler !== 'function') {
+        throw new Error('Consumer logic must evaluate to a function.');
+      }
+      return consumerHandler(event, state, setState);
+    })()`,
+    context,
+    { timeout: CONSUMER_LOGIC_TIMEOUT_MS }
+  );
+
+  if (!calledSetState && typeof result !== 'undefined') {
+    nextState = result;
+  }
+
+  if (typeof nextState === 'undefined') {
+    throw new Error('Consumer state must not become undefined.');
+  }
+
+  return { nextState, calledSetState };
+}
+
+function readEventsForStreams(eventstore, streamNames) {
+  if (streamNames.length === 0) {
+    throw new Error('At least one stream name is required.');
+  }
+
+  if (streamNames.includes('_all')) {
+    return eventstore.getAllEvents();
+  }
+
+  if (streamNames.length === 1) {
+    const stream = eventstore.getEventStream(streamNames[0]);
+    if (stream === false) {
+      throw new Error(`Stream "${streamNames[0]}" does not exist.`);
+    }
+    return stream;
+  }
+
+  return eventstore.fromStreams(`_internal_preview_${randomUUID()}`, streamNames);
+}
+
+function replayConsumer({ stream, consumerLogic, initialState }) {
+  let state = Object.freeze(initialState ?? {});
+  stream.forEach((payload, metadata, eventStream) => {
+    const execution = executeConsumerLogic(consumerLogic, { payload, metadata, stream: eventStream }, state);
+    state = Object.freeze(execution.nextState);
+  });
+  return state;
+}
+
+export async function previewConsumerState(
+  { streamNames: streamNamesInput, consumerLogic, initialState = {} },
+  storeNameOverride
+) {
+  validateConsumerLogicInput(consumerLogic);
+  const streamNames = normalizeStreamNames(streamNamesInput);
+  const { eventstore } = await getEventStore({ readOnly: true }, storeNameOverride);
+
+  try {
+    const stream = readEventsForStreams(eventstore, streamNames);
+    const state = replayConsumer({ stream, consumerLogic, initialState });
+    return { state, streamNames };
+  } finally {
+    eventstore.close();
+  }
+}
+
+export async function createConsumer(
+  { streamName, consumerName, consumerLogic, initialState = {}, since = 0 },
+  storeNameOverride
+) {
+  validateConsumerLogicInput(consumerLogic);
+
+  if (typeof streamName !== 'string' || !streamName.trim()) {
+    throw new Error('Stream name is required.');
+  }
+
+  if (typeof consumerName !== 'string' || !consumerName.trim()) {
+    throw new Error('Consumer name is required.');
+  }
+
+  const normalizedStreamName = streamName.trim();
+  const normalizedConsumerName = consumerName.trim();
+
+  await previewConsumerState(
+    { streamNames: [normalizedStreamName], consumerLogic, initialState },
+    storeNameOverride
+  );
+
+  const { eventstore } = await getEventStore({ readOnly: false }, storeNameOverride);
+
+  try {
+    if (eventstore.getEventStream(normalizedStreamName) === false) {
+      throw new Error(`Stream "${normalizedStreamName}" does not exist.`);
+    }
+
+    const consumer = eventstore.getConsumer(
+      normalizedStreamName,
+      normalizedConsumerName,
+      initialState,
+      since
+    );
+
+    await new Promise((resolve, reject) => {
+      consumer.on('error', reject);
+      consumer.on('data', (event) => {
+        try {
+          const execution = executeConsumerLogic(consumerLogic, event, consumer.state, (resolvedState) =>
+            consumer.setState(resolvedState)
+          );
+          if (!execution.calledSetState && execution.nextState !== consumer.state) {
+            consumer.setState(execution.nextState);
+          }
+        } catch (err) {
+          reject(err);
+        }
+      });
+      consumer.on('caught-up', () => resolve({ position: consumer.position, state: consumer.state }));
+      consumer.start();
+    });
+
+    return {
+      consumerIdentifier: `${normalizedStreamName}.${normalizedConsumerName}`,
+      streamName: normalizedStreamName,
+      consumerName: normalizedConsumerName
+    };
+  } finally {
+    eventstore.close();
+  }
+}

package/app/entry.client.jsx

@@ -0,0 +1,12 @@
+import { HydratedRouter } from 'react-router/dom';
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>
+  );
+});

package/app/entry.server.jsx

@@ -0,0 +1,153 @@
+import { PassThrough } from 'node:stream';
+import { timingSafeEqual } from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createReadableStreamFromReadable } from '@react-router/node';
+import { ServerRouter } from 'react-router';
+import { isbot } from 'isbot';
+import { renderToPipeableStream } from 'react-dom/server';
+
+const streamTimeout = 5_000;
+const configPath = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../eventstore.config.json'
+);
+let cachedConfig;
+
+function readConfig() {
+  if (cachedConfig) return cachedConfig;
+
+  try {
+    const rawConfig = fs.readFileSync(configPath).toString();
+    cachedConfig = JSON.parse(rawConfig);
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      console.error('Invalid JSON in eventstore.config.json, using empty configuration.', error);
+    } else {
+      console.error('Failed to load eventstore.config.json, using empty configuration.', error);
+    }
+    cachedConfig = {};
+  }
+
+  return cachedConfig;
+}
+
+function safeCompare(a, b) {
+  const aBuffer = Buffer.from(a);
+  const bBuffer = Buffer.from(b);
+  if (aBuffer.length !== bBuffer.length) return false;
+  return timingSafeEqual(aBuffer, bBuffer);
+}
+
+function getBasicAuthCredentials() {
+  const basicAuth = readConfig().basicAuth;
+  if (!basicAuth || typeof basicAuth !== 'object' || Array.isArray(basicAuth)) return null;
+
+  const username = typeof basicAuth.username === 'string' ? basicAuth.username : '';
+  const password = typeof basicAuth.password === 'string' ? basicAuth.password : '';
+  if (!username || !password) return null;
+
+  return { username, password };
+}
+
+function isAuthorized(request, credentials) {
+  const authorization = request.headers.get('authorization');
+  if (!authorization?.startsWith('Basic ')) return false;
+
+  let decoded = '';
+  try {
+    decoded = Buffer.from(authorization.slice(6).trim(), 'base64').toString('utf8');
+  } catch {
+    return false;
+  }
+
+  const separatorIndex = decoded.indexOf(':');
+  if (separatorIndex < 0) return false;
+
+  const username = decoded.slice(0, separatorIndex);
+  const password = decoded.slice(separatorIndex + 1);
+
+  return (
+    safeCompare(username, credentials.username) &&
+    safeCompare(password, credentials.password)
+  );
+}
+
+function unauthorizedResponse() {
+  return new Response('Authentication required', {
+    status: 401,
+    headers: new Headers({
+      'WWW-Authenticate': 'Basic realm="event-storage-ui"',
+      'Content-Type': 'text/plain; charset=utf-8',
+    }),
+  });
+}
+
+export default function handleRequest(
+  request,
+  responseStatusCode,
+  responseHeaders,
+  routerContext
+) {
+  const basicAuthCredentials = getBasicAuthCredentials();
+  if (basicAuthCredentials && !isAuthorized(request, basicAuthCredentials)) {
+    return unauthorizedResponse();
+  }
+
+  if (request.method.toUpperCase() === 'HEAD') {
+    return new Response(null, {
+      status: responseStatusCode,
+      headers: responseHeaders,
+    });
+  }
+
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const userAgent = request.headers.get('user-agent');
+
+    const readyOption =
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode
+        ? 'onAllReady'
+        : 'onShellReady';
+
+    let timeoutId = setTimeout(() => abort(), streamTimeout + 1000);
+
+    const { pipe, abort } = renderToPipeableStream(
+      <ServerRouter context={routerContext} url={request.url} />,
+      {
+        [readyOption]() {
+          shellRendered = true;
+          const body = new PassThrough({
+            final(callback) {
+              clearTimeout(timeoutId);
+              timeoutId = undefined;
+              callback();
+            },
+          });
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set('Content-Type', 'text/html');
+
+          pipe(body);
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            })
+          );
+        },
+        onShellError(error) {
+          reject(error);
+        },
+        onError(error) {
+          responseStatusCode = 500;
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+  });
+}

package/app/hooks/paginate.js

@@ -0,0 +1,24 @@
+import { useCallback, useState } from 'react';
+
+export default function usePagination(length) {
+  const [page, setPage] = useState({ start: 0, size: 10 });
+  const nextPage = useCallback(
+    () => setPage((current) => ({ ...current, start: current.start + current.size })),
+    []
+  );
+  const prevPage = useCallback(
+    () =>
+      setPage((current) => ({
+        ...current,
+        start: Math.max(0, current.start - current.size)
+      })),
+    []
+  );
+  const setPageSize = useCallback(
+    (size) => setPage((current) => ({ ...current, size })),
+    []
+  );
+  const hasNext = page.start + page.size < length;
+  const hasPrev = page.start > 0;
+  return [page.start, page.start + page.size, nextPage, prevPage, hasNext, hasPrev, setPageSize];
+}

package/app/hooks/sysinfo.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+export default function useSysinfo() {
+  const [sysinfo, setSysinfo] = useState({
+    fsSize: null,
+    fsStats: null,
+    currentLoad: null,
+    processLoad: null,
+    mem: null,
+    networkStats: null,
+    history: {
+      cpu: [],
+      cpus: [],
+      mem: [],
+      network: []
+    }
+  });
+
+  useEffect(() => {
+    let interval;
+    let stopped = false;
+
+    const refresh = async () => {
+      const response = await fetch('/resources/sysinfo');
+      const data = await response.json();
+      if (stopped) {
+        return;
+      }
+
+      setSysinfo(data);
+    };
+
+    refresh().catch((error) => {
+      console.error('Failed to load sysinfo', error);
+    });
+    interval = setInterval(() => {
+      refresh().catch((error) => {
+        console.error('Failed to load sysinfo', error);
+      });
+    }, 5000);
+
+    return () => {
+      stopped = true;
+      clearInterval(interval);
+    };
+  }, []);
+
+  return sysinfo;
+}