feat #162: live feed button

src/Serilog.Ui.Web/.prettierrc.yml

@@ -6,4 +6,4 @@ trailingComma: all
 printWidth: 90
 
 plugins:
-  - "prettier-plugin-organize-imports"
+  - 'prettier-plugin-organize-imports'

src/Serilog.Ui.Web/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.1.0",
+  "version": "3.2.0",
   "name": "serilog-ui",
   "private": true,
   "type": "module",
@@ -15,41 +15,41 @@
   },
   "dependencies": {
     "@fontsource/mononoki": "^5.2.5",
-    "@mantine/core": "^7.17.2",
-    "@mantine/dates": "^7.17.2",
-    "@mantine/hooks": "^7.17.2",
-    "@mantine/notifications": "^7.17.2",
+    "@mantine/core": "^7.17.3",
+    "@mantine/dates": "^7.17.3",
+    "@mantine/hooks": "^7.17.3",
+    "@mantine/notifications": "^7.17.3",
     "@tabler/icons-react": "^3.31.0",
-    "@tanstack/react-query": "^5.68.0",
+    "@tanstack/react-query": "^5.71.10",
     "dayjs": "^1.11.13",
     "jose": "^6.0.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.2",
-    "react-router": "^7.3.0",
-    "xml-formatter": "^3.6.4"
+    "react-hook-form": "^7.55.0",
+    "react-router": "^7.5.0",
+    "xml-formatter": "^3.6.5"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.13.10",
+    "@types/node": "^22.14.0",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.8.0",
-    "@vitest/coverage-istanbul": "^3.0.8",
-    "@vitest/ui": "^3.0.8",
+    "@vitejs/plugin-react-swc": "^3.8.1",
+    "@vitest/coverage-istanbul": "^3.1.1",
+    "@vitest/ui": "^3.1.1",
     "@welldone-software/why-did-you-render": "^10.0.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-html": "^8.1.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-testing-library": "^7.1.1",
     "eslint-plugin-vitest": "^0.5.4",
@@ -63,13 +63,13 @@
     "prettier-plugin-organize-imports": "^4.1.0",
     "shiki": "^3.2.1",
     "testing-library-selector": "^0.3.1",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.29.0",
     "vite": "^6.2.5",
-    "vite-plugin-checker": "^0.9.0",
+    "vite-plugin-checker": "^0.9.1",
     "vite-plugin-mkcert": "^1.17.8",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.8",
+    "vitest": "^3.1.1",
     "vitest-sonar-reporter": "^2.0.0"
   },
   "engines": {

src/Serilog.Ui.Web/src/__tests__/_setup/mocks/fetch.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import { http, HttpResponse } from 'msw';
+import { defaultAuthType } from '../../../app/hooks/useSerilogUiProps.tsx';
 import {
   AuthType,
   EncodedSeriLogObject,
@@ -9,7 +10,6 @@ import {
   SortPropertyOptions,
 } from '../../../types/types';
 import { dbKeysMock, fakeLogs, fakeLogs2ndTable, fakeLogs3rdTable } from './samples';
-import { defaultAuthType } from '../../../app/hooks/useSerilogUiProps.tsx';
 
 export const developmentListenersHost = ['https://localhost:3001'];
 
@@ -51,7 +51,9 @@ export const handlers = developmentListenersHost.flatMap((dlh) => [
   http.get(`${dlh}/api/keys`, ({ request }) => {
     const auth = request.headers.get('authorization');
 
-    return defaultAuthType !== AuthType.Custom && !auth ? HttpResponse.error() : HttpResponse.json(dbKeysMock);
+    return defaultAuthType !== AuthType.Custom && !auth
+      ? HttpResponse.error()
+      : HttpResponse.json(dbKeysMock);
   }),
 ]);
 

src/Serilog.Ui.Web/src/__tests__/components/Refresh/RefreshButton.spec.tsx

@@ -0,0 +1,81 @@
+import { act, render, screen, userEvent } from '__tests__/_setup/testing-utils';
+import { RefreshButton } from 'app/components/Refresh/RefreshButton';
+import { liveRefreshOptions } from 'app/hooks/useLiveRefresh';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('react-hook-form', async () => {
+  const actual =
+    await vi.importActual<typeof import('react-hook-form')>('react-hook-form');
+
+  return { ...actual, useWatch: () => 'page' };
+});
+
+const headers = () => {
+  const head = new Headers();
+  head.append('authorization', 'test');
+  return head;
+};
+vi.mock('../../../app/hooks/useAuthProperties', () => ({
+  useAuthProperties: () => ({
+    fetchInfo: {
+      headers: { headers: headers() },
+      routePrefix: '',
+    },
+    isHeaderReady: true,
+  }),
+}));
+
+describe('RefreshButton', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+  afterEach(vi.useRealTimers);
+
+  it('renders', async () => {
+    render(<RefreshButton />);
+
+    const durationSelector = screen.getByLabelText('refresh-duration-selector');
+    expect(durationSelector).toBeInTheDocument();
+
+    await userEvent.click(durationSelector);
+    await act(vi.advanceTimersToNextTimerAsync);
+
+    const times = liveRefreshOptions.map((lro) => lro.value);
+    times.forEach((time) => {
+      expect(screen.getByLabelText('refresh-duration-' + time)).toBeInTheDocument();
+    });
+  });
+
+  it('runs live feed activies with refetch sample', async () => {
+    const spy = vi.spyOn(global, 'fetch');
+    render(<RefreshButton />);
+
+    const durationSelector = screen.getByLabelText('refresh-duration-selector');
+    await userEvent.click(durationSelector);
+    await act(vi.advanceTimersToNextTimerAsync);
+
+    const sampleOpt = liveRefreshOptions[5];
+    const timeSelector = screen.getByLabelText('refresh-duration-' + sampleOpt.value);
+    await userEvent.click(timeSelector);
+    await act(vi.advanceTimersToNextTimerAsync);
+
+    expect(spy).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000 * 300 + 1);
+    });
+    expect(spy).toHaveBeenCalledTimes(2);
+
+    const durationStopper = screen.getByLabelText('refresh-duration-cancel-button');
+    expect(screen.queryByLabelText('refresh-duration-selector')).not.toBeInTheDocument();
+    expect(durationStopper).toBeInTheDocument();
+
+    await userEvent.click(durationStopper);
+    await act(vi.advanceTimersToNextTimerAsync);
+
+    expect(
+      screen.queryByLabelText('refresh-duration-cancel-button'),
+    ).not.toBeInTheDocument();
+    expect(screen.getByLabelText('refresh-duration-selector')).toBeInTheDocument();
+  });
+});

src/Serilog.Ui.Web/src/__tests__/components/ShellStructure/Header.spec.tsx

@@ -23,8 +23,8 @@ describe('Header', () => {
     await waitFor(() => {
       expect(screen.getByRole('button', { name: 'Filter' })).toBeInTheDocument();
     });
-    await waitFor(() => {
-      expect(screen.getByText('Serilog UI')).toBeInTheDocument();
-    });
+
+    expect(screen.getByText('Serilog UI')).toBeInTheDocument();
+    expect(screen.getByLabelText('refresh-duration-selector')).toBeInTheDocument();
   });
 });

src/Serilog.Ui.Web/src/__tests__/hooks/useLiveRefresh.spec.ts

@@ -0,0 +1,76 @@
+import { act, renderHook } from '__tests__/_setup/testing-utils';
+import { describe, expect, it } from 'vitest';
+import { useLiveRefresh } from '../../app/hooks/useLiveRefresh';
+
+describe('useLiveRefresh', () => {
+  it('returns base properties', () => {
+    const { result } = renderHook(() => useLiveRefresh());
+
+    expect(result.current.isLiveRefreshRunning).toBeFalsy();
+    expect(result.current.liveRefreshLabel).toBe('');
+    expect(result.current.refetchInterval).toBe(0);
+  });
+
+  it.each([
+    { refetch: 5000, label: '5s', time: 'five' },
+    { refetch: 15000, label: '15s', time: 'fifteen' },
+    { refetch: 30000, label: '30s', time: 'thirty' },
+    { refetch: 60000, label: '1m', time: 'sixty' },
+    { refetch: 120000, label: '2m', time: 'onehundredtwenty' },
+    { refetch: 300000, label: '5m', time: 'threehundred' },
+    { refetch: 900000, label: '15m', time: 'ninehundred' },
+  ])('starts fetch interval', ({ label, refetch, time }) => {
+    const { result } = renderHook(() => useLiveRefresh());
+
+    act(() => {
+      result.current.startLiveRefresh(time);
+    });
+
+    expect(result.current.isLiveRefreshRunning).toBeTruthy();
+    expect(result.current.liveRefreshLabel).toBe(label);
+    expect(result.current.refetchInterval).toBe(refetch);
+  });
+
+  it('stops fetch interval', () => {
+    const { result } = renderHook(() => useLiveRefresh());
+
+    act(() => {
+      result.current.startLiveRefresh('five');
+    });
+    expect(result.current.refetchInterval).toBe(5000);
+
+    act(() => {
+      result.current.stopLiveRefresh();
+    });
+
+    expect(result.current.isLiveRefreshRunning).toBeFalsy();
+    expect(result.current.refetchInterval).toBe(0);
+  });
+
+  it('does not activate on invalid time', () => {
+    const { result } = renderHook(() => useLiveRefresh());
+
+    act(() => {
+      result.current.startLiveRefresh('five');
+    });
+    expect(result.current.refetchInterval).toBe(5000);
+
+    act(() => {
+      result.current.startLiveRefresh(null);
+    });
+
+    expect(result.current.isLiveRefreshRunning).toBeFalsy();
+    expect(result.current.refetchInterval).toBe(0);
+  });
+
+  it('set activation time to 0 on unexpected time', () => {
+    const { result } = renderHook(() => useLiveRefresh());
+
+    act(() => {
+      result.current.startLiveRefresh('uhm');
+    });
+
+    expect(result.current.isLiveRefreshRunning).toBeFalsy();
+    expect(result.current.refetchInterval).toBe(0);
+  });
+});

src/Serilog.Ui.Web/src/app/components/Authorization/AuthorizeButton.tsx

@@ -3,6 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconLockCheck, IconLockOpen } from '@tabler/icons-react';
 import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps';
 import { lazy, memo, Suspense } from 'react';
+import { theme } from 'style/theme';
 import { AuthType } from 'types/types';
 import { useAuthProperties } from '../../hooks/useAuthProperties';
 
@@ -18,7 +19,7 @@ const AuthorizeButton = () => {
 
   return (
     <>
-      <Button color="green" size="compact-md" onClick={open}>
+      <Button color={theme.colors?.green?.[7]} size="compact-md" onClick={open}>
         {isHeaderReady ? <IconClose /> : <IconOpen />}
         Authorize
       </Button>

src/Serilog.Ui.Web/src/app/components/Refresh/RefreshButton.tsx

@@ -0,0 +1,61 @@
+import { Button, Popover, Tooltip } from '@mantine/core';
+import { IconRefresh } from '@tabler/icons-react';
+import { liveRefreshOptions } from 'app/hooks/useLiveRefresh';
+import useQueryLogs from 'app/hooks/useQueryLogs';
+import classes from 'style/search.module.css';
+import { theme } from 'style/theme';
+
+export const RefreshButton = () => {
+  const { isLiveRefreshRunning, liveRefreshLabel, startLiveRefresh, stopLiveRefresh } =
+    useQueryLogs();
+
+  if (isLiveRefreshRunning)
+    return (
+      <Tooltip label="Stop live refresh">
+        <Button
+          fz={9}
+          size="compact-md"
+          aria-label="refresh-duration-cancel-button"
+          color={theme.colors?.green?.[7]}
+          onClick={stopLiveRefresh}
+          className={classes.refreshButton}
+        >
+          {liveRefreshLabel}
+        </Button>
+      </Tooltip>
+    );
+
+  return (
+    <Popover width={105} trapFocus position="bottom" withArrow shadow="md">
+      <Popover.Target>
+        <Tooltip label="Start live refresh">
+          <Button
+            fz={9}
+            size="compact-md"
+            aria-label="refresh-duration-selector"
+            color={theme.colors?.gray?.[7]}
+            className={classes.activateRefreshButton}
+          >
+            <IconRefresh />
+          </Button>
+        </Tooltip>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Button.Group orientation="vertical">
+          {liveRefreshOptions.map((p) => (
+            <Button
+              key={p.value}
+              onClick={() => {
+                startLiveRefresh(p.value);
+              }}
+              variant="default"
+              aria-label={`refresh-duration-${p.value}`}
+            >
+              {p.label}
+            </Button>
+          ))}
+        </Button.Group>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};

src/Serilog.Ui.Web/src/app/components/ShellStructure/Header.tsx

@@ -11,6 +11,7 @@ import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps';
 import { isStringGuard } from 'app/util/guards';
 import { Suspense, lazy } from 'react';
 import classes from 'style/header.module.css';
+import { RefreshButton } from '../Refresh/RefreshButton';
 import BrandBadge from './BrandBadge';
 
 const HeaderActivity = lazy(() => import('./HeaderActivity'));
@@ -69,6 +70,8 @@ const Head = ({ isMobileOpen, toggleMobile }: IProps) => {
             <IconMoonStars size="1rem" stroke="3" />
           )}
         </ActionIcon>
+
+        <RefreshButton />
         <BrandBadge size={isMobileSize ? 'sm' : 'lg'} />
       </Group>
     </Group>