feat serilog-contrib#162: implement live-feed button

Author: followynne

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/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,58 @@
+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"
+          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"
+            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"
+            >
+              {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>

src/Serilog.Ui.Web/src/app/hooks/useLiveRefresh.ts

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+enum options {
+  'zero' = 0,
+  'five' = 5,
+  'fifteen' = 15,
+  'thirty' = 30,
+  'sixty' = 60,
+  'onehundredtwenty' = 120,
+  'threehundred' = 300,
+  'ninehundred' = 900,
+}
+
+export const liveRefreshOptions = [
+  { label: '5s', liveLabel: '5s', value: 'five' },
+  { label: '15s', liveLabel: '15s', value: 'fifteen' },
+  { label: '30s', liveLabel: '30s', value: 'thirty' },
+  { label: '1m', liveLabel: '1m', value: 'sixty' },
+  { label: '2m', liveLabel: '2m', value: 'onehundredtwenty' },
+  { label: '5m', liveLabel: '5m', value: 'threehundred' },
+  { label: '15m', liveLabel: '15m', value: 'ninehundred' },
+];
+
+export const useLiveRefresh = () => {
+  const [refetchInterval, setRefetchInterval] = useState(0);
+
+  const isLiveRefreshRunning = refetchInterval > 0;
+  const liveRefreshLabel = !isLiveRefreshRunning
+    ? ''
+    : liveRefreshOptions.find((lr) => lr.value === options[refetchInterval / 1000])
+        ?.liveLabel;
+
+  const startLiveRefresh = (v: string | null) => {
+    if (v === null) {
+      return setRefetchInterval(0);
+    }
+
+    const eachSecond = options[v];
+    setRefetchInterval(eachSecond * 1000);
+  };
+
+  const stopLiveRefresh = () => {
+    setRefetchInterval(0);
+  };
+
+  return {
+    isLiveRefreshRunning,
+    liveRefreshLabel,
+    refetchInterval,
+    startLiveRefresh,
+    stopLiveRefresh,
+  };
+};

src/Serilog.Ui.Web/src/app/hooks/useQueryLogs.ts

@@ -1,34 +1,50 @@
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useWatch } from 'react-hook-form';
 import { fetchLogs } from '../queries/logs';
 import { useAuthProperties } from './useAuthProperties';
+import { useLiveRefresh } from './useLiveRefresh';
 import { useSearchForm } from './useSearchForm';
-import { useWatch } from 'react-hook-form';
 
 const useQueryLogs = () => {
   const { fetchInfo, isHeaderReady } = useAuthProperties();
   const { getValues } = useSearchForm();
+  const {
+    isLiveRefreshRunning,
+    liveRefreshLabel,
+    refetchInterval,
+    startLiveRefresh,
+    stopLiveRefresh,
+  } = useLiveRefresh();
 
-  const currentDbKey = useWatch({ name: 'table' })
-  const entriesPerPage = useWatch({ name: 'entriesPerPage' })
-  const page = useWatch({ name: 'page' })
-  const sortBy = useWatch({ name: 'sortBy' })
-  const sortOn = useWatch({ name: 'sortOn' })
+  const currentDbKey = useWatch({ name: 'table' });
+  const entriesPerPage = useWatch({ name: 'entriesPerPage' });
+  const page = useWatch({ name: 'page' });
+  const sortBy = useWatch({ name: 'sortBy' });
+  const sortOn = useWatch({ name: 'sortOn' });
 
-  return useQuery({
-    enabled: true,
-    queryKey: ['get-logs', entriesPerPage, page, sortBy, sortOn, currentDbKey],
-    queryFn: async () => {
-      if (!isHeaderReady) return null;
+  return {
+    ...useQuery({
+      enabled: true,
+      queryKey: ['get-logs', entriesPerPage, page, sortBy, sortOn, currentDbKey],
+      queryFn: async () => {
+        if (!isHeaderReady) return null;
+        const values = getValues();
 
-      return currentDbKey
-        ? await fetchLogs(getValues(), fetchInfo.headers, fetchInfo.routePrefix)
-        : null;
-    },
-    placeholderData: keepPreviousData,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    retry: false,
-  });
+        return currentDbKey
+          ? await fetchLogs(values, fetchInfo.headers, fetchInfo.routePrefix)
+          : null;
+      },
+      placeholderData: keepPreviousData,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      retry: false,
+      refetchInterval,
+    }),
+    isLiveRefreshRunning,
+    liveRefreshLabel,
+    startLiveRefresh,
+    stopLiveRefresh,
+  };
 };
 
 export default useQueryLogs;

src/Serilog.Ui.Web/src/style/search.module.css

@@ -30,3 +30,32 @@
     justify-self: end;
   }
 }
+
+.refreshButton {
+  @keyframes blink {
+    0% {
+      box-shadow: 'transparent';
+    }
+    50% {
+      box-shadow: 0 0 0.7em #efeff0;
+    }
+    100% {
+      box-shadow: 'transparent';
+    }
+  }
+
+  border: 4px solid transparent;
+  animation: blink 2.5s ease-in infinite;
+  border-radius: 50%;
+  height: 30px;
+  padding: 2px;
+  width: 30px;
+}
+
+.activateRefreshButton {
+  border: 4px solid transparent;
+  border-radius: 50%;
+  height: 30px;
+  padding: 2px;
+  width: 30px;
+}