feat(logs): auto scroll to top & log filter

GZTimeWalker · Apr 24, 2024 · 021a448 · 021a448
1 parent cbb052a
commit 021a448
Showing 1 changed file with 66 additions and 44 deletions.
diff --git a/src/GZCTF/ClientApp/src/pages/admin/Logs.tsx b/src/GZCTF/ClientApp/src/pages/admin/Logs.tsx
@@ -57,6 +57,12 @@ const Logs: FC = () => {
 
   const { t } = useTranslation()
 
+  const viewport = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    viewport.current?.scrollTo({ top: 0, behavior: 'smooth' })
+  }, [activePage, level, viewport])
+
   useEffect(() => {
     api.admin
       .adminLogs({
@@ -80,6 +86,10 @@ const Logs: FC = () => {
     }
   }, [activePage, level])
 
+  useEffect(() => {
+    setPage(1)
+  }, [level])
+
   useEffect(() => {
     const connection = new signalR.HubConnectionBuilder()
       .withUrl('/hub/admin')
@@ -116,49 +126,56 @@ const Logs: FC = () => {
     }
   }, [])
 
-  const rows = [...(activePage === 1 ? newLogs.current : []), ...(logs ?? [])].map((item, i) => (
-    <tr
-      key={`${item.time}@${i}`}
-      className={
-        i === 0 && activePage === 1 && newLogs.current.length > 0 ? cx(classes.fade) : undefined
-      }
-    >
-      <td className={cx(classes.mono)}>
-        <Badge size="sm" color="indigo">
-          {dayjs(item.time).format('MM/DD HH:mm:ss')}
-        </Badge>
-      </td>
-      <td className={cx(classes.mono)}>
-        <Text ff={theme.fontFamilyMonospace} size="sm" fw={300}>
-          {item.ip || 'localhost'}
-        </Text>
-      </td>
-      <td className={cx(classes.mono)}>
-        <Text ff={theme.fontFamilyMonospace} size="sm" fw="bold" lineClamp={1}>
-          {item.name}
-        </Text>
-      </td>
-      <td>
-        <Input
-          variant="unstyled"
-          value={item.msg || ''}
-          readOnly
-          size="sm"
-          sx={() => ({
-            input: {
-              userSelect: 'none',
-              lineHeight: 1,
-            },
-          })}
-        />
-      </td>
-      <td className={cx(classes.mono)}>
-        <Badge size="sm" color={TaskStatusColorMap.get(item.status as TaskStatus) ?? 'gray'}>
-          {item.status}
-        </Badge>
-      </td>
-    </tr>
-  ))
+  const rows = [...(activePage === 1 ? newLogs.current : []), ...(logs ?? [])]
+    .filter((item) => item.level === level)
+    .map((item, i) => (
+      <tr
+        key={`${item.time}@${i}`}
+        className={
+          i === 0 &&
+          activePage === 1 &&
+          newLogs.current.length > 0 &&
+          newLogs.current[0].level === level
+            ? cx(classes.fade)
+            : undefined
+        }
+      >
+        <td className={cx(classes.mono)}>
+          <Badge size="sm" color="indigo">
+            {dayjs(item.time).format('MM/DD HH:mm:ss')}
+          </Badge>
+        </td>
+        <td className={cx(classes.mono)}>
+          <Text ff={theme.fontFamilyMonospace} size="sm" fw={300}>
+            {item.ip || 'localhost'}
+          </Text>
+        </td>
+        <td className={cx(classes.mono)}>
+          <Text ff={theme.fontFamilyMonospace} size="sm" fw="bold" lineClamp={1}>
+            {item.name}
+          </Text>
+        </td>
+        <td>
+          <Input
+            variant="unstyled"
+            value={item.msg || ''}
+            readOnly
+            size="sm"
+            sx={() => ({
+              input: {
+                userSelect: 'none',
+                lineHeight: 1,
+              },
+            })}
+          />
+        </td>
+        <td className={cx(classes.mono)}>
+          <Badge size="sm" color={TaskStatusColorMap.get(item.status as TaskStatus) ?? 'gray'}>
+            {item.status}
+          </Badge>
+        </td>
+      </tr>
+    ))
 
   return (
     <AdminPage
@@ -202,7 +219,12 @@ const Logs: FC = () => {
       }
     >
       <Paper shadow="md" p="md" w="100%">
-        <ScrollArea offsetScrollbars scrollbarSize={4} h="calc(100vh - 190px)">
+        <ScrollArea
+          viewportRef={viewport}
+          offsetScrollbars
+          scrollbarSize={4}
+          h="calc(100vh - 190px)"
+        >
           <Table className={cx(classes.table, noPaddingClasses.table)}>
             <thead>
               <tr>