Updated log table rendering.

components/common/Table.js

@@ -3,7 +3,15 @@ import classNames from 'classnames';
 import NoData from 'components/common/NoData';
 import styles from './Table.module.css';
 
-export default function Table({ className, columns, rows, empty }) {
+export default function Table({
+  columns,
+  rows,
+  empty,
+  className,
+  bodyClassName,
+  rowKey,
+  children,
+}) {
   if (empty && rows.length === 0) {
     return empty;
   }
@@ -21,22 +29,29 @@ export default function Table({ className, columns, rows, empty }) {
           </div>
         ))}
       </div>
-      <div className={styles.body}>
+      <div className={classNames(styles.body, bodyClassName)}>
         {rows.length === 0 && <NoData />}
-        {rows.map((row, rowIndex) => (
-          <div className={classNames(styles.row, 'row')} key={rowIndex}>
-            {columns.map(({ key, render, className, style, cell }) => (
-              <div
-                key={`${rowIndex}${key}`}
-                className={classNames(styles.cell, className, cell?.className)}
-                style={{ ...style, ...cell?.style }}
-              >
-                {render ? render(row) : row[key]}
-              </div>
-            ))}
-          </div>
-        ))}
+        {!children &&
+          rows.map((row, index) => {
+            const id = rowKey ? rowKey(row) : index;
+            return <TableRow key={id} columns={columns} row={row} />;
+          })}
+        {children}
       </div>
     </div>
   );
 }
+
+export const TableRow = ({ columns, row }) => (
+  <div className={classNames(styles.row, 'row')}>
+    {columns.map(({ key, render, className, style, cell }, index) => (
+      <div
+        key={`${key}-${index}`}
+        className={classNames(styles.cell, className, cell?.className)}
+        style={{ ...style, ...cell?.style }}
+      >
+        {render ? render(row) : row[key]}
+      </div>
+    ))}
+  </div>
+);

components/metrics/RealtimeLog.js

@@ -1,14 +1,20 @@
 import React, { useMemo } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { FixedSizeList } from 'react-window';
 import firstBy from 'thenby';
 import { format } from 'date-fns';
-import Table from 'components/common/Table';
+import Icon from 'components/common/Icon';
+import Table, { TableRow } from 'components/common/Table';
+import useLocale from 'hooks/useLocale';
+import useCountryNames from 'hooks/useCountryNames';
+import { BROWSERS } from 'lib/constants';
+import Bolt from 'assets/bolt.svg';
+import Visitor from 'assets/visitor.svg';
+import Eye from 'assets/eye.svg';
 import styles from './RealtimeLog.module.css';
-import useLocale from '../../hooks/useLocale';
-import useCountryNames from '../../hooks/useCountryNames';
-import { BROWSERS } from '../../lib/constants';
 
 export default function RealtimeLog({ data, websites }) {
+  const intl = useIntl();
   const [locale] = useLocale();
   const countryNames = useCountryNames(locale);
   const logs = useMemo(() => {
@@ -19,38 +25,51 @@ export default function RealtimeLog({ data, websites }) {
   const columns = [
     {
       key: 'time',
-      label: <FormattedMessage id="label.type" defaultMessage="Time" />,
-      className: 'col',
+      label: <FormattedMessage id="label.time" defaultMessage="Time" />,
+      className: 'col-1',
       render: ({ created_at }) => format(new Date(created_at), 'H:mm:ss'),
     },
     {
       key: 'website',
       label: <FormattedMessage id="label.website" defaultMessage="Website" />,
-      className: 'col',
+      className: 'col-2',
       render: getWebsite,
     },
     {
       key: 'type',
-      label: <FormattedMessage id="label.type" defaultMessage="Type" />,
-      className: 'col',
-      render: getType,
-    },
-    {
-      key: 'type',
-      className: 'col',
-      render: getDescription,
+      label: <FormattedMessage id="label.event" defaultMessage="Event" />,
+      className: 'col-9',
+      render: row => (
+        <>
+          <Icon className={styles.icon} icon={getIcon(row)} title={getType(row)} />
+          {getDescription(row)}
+        </>
+      ),
     },
   ];
 
   function getType({ view_id, session_id, event_id }) {
     if (event_id) {
-      return <FormattedMessage id="label.event" defaultMessage="Event" />;
+      return intl.formatMessage({ id: 'label.event', defaultMessage: 'Event' });
     }
     if (view_id) {
-      return <FormattedMessage id="label.pageview" defaultMessage="Pageview" />;
+      return intl.formatMessage({ id: 'label.pageview', defaultMessage: 'Pageview' });
     }
     if (session_id) {
-      return <FormattedMessage id="label.visitor" defaultMessage="Visitor" />;
+      return intl.formatMessage({ id: 'label.visitor', defaultMessage: 'Visitor' });
+    }
+    return null;
+  }
+
+  function getIcon({ view_id, session_id, event_id }) {
+    if (event_id) {
+      return <Bolt />;
+    }
+    if (view_id) {
+      return <Eye />;
+    }
+    if (session_id) {
+      return <Visitor />;
     }
     return null;
   }
@@ -71,7 +90,11 @@ export default function RealtimeLog({ data, websites }) {
     device,
   }) {
     if (event_type) {
-      return `${event_type}:${event_value}`;
+      return (
+        <div>
+          <span className={styles.event}>{event_type}</span> {event_value}
+        </div>
+      );
     }
     if (view_id) {
       return url;
@@ -87,9 +110,21 @@ export default function RealtimeLog({ data, websites }) {
     }
   }
 
+  const Row = ({ index, style }) => {
+    return (
+      <div style={style}>
+        <TableRow key={index} columns={columns} row={logs[index]} />
+      </div>
+    );
+  };
+
   return (
     <div className={styles.log}>
-      <Table className={styles.table} columns={columns} rows={logs} />
+      <Table className={styles.table} bodyClassName={styles.body} columns={columns} rows={logs}>
+        <FixedSizeList height={600} itemCount={logs.length} itemSize={46}>
+          {Row}
+        </FixedSizeList>
+      </Table>
     </div>
   );
 }

components/metrics/RealtimeLog.module.css

@@ -6,3 +6,21 @@
   display: flex;
   border-bottom: 1px solid var(--gray300);
 }
+
+.body {
+  height: 600px;
+  overflow: auto;
+}
+
+.event {
+  font-size: var(--font-size-small);
+  padding: 2px 4px;
+  border: 1px solid var(--gray300);
+  border-radius: 4px;
+  margin-right: 10px;
+}
+
+.icon {
+  align-self: center;
+  margin-right: 20px;
+}

hooks/useFetch.js

@@ -40,7 +40,6 @@ export default function useFetch(url, params = {}, options = {}) {
   }
 
   useEffect(() => {
-    console.log('effect', params);
     if (url && !disabled) {
       if (!data) {
         setTimeout(() => loadData(), delay);

lang/da-DK.json

@@ -26,6 +26,7 @@
   "label.default-date-range": "Default date range",
   "label.domain": "Domæne",
   "label.enable-share-url": "Aktivér delings-URL",
+  "label.event": "Event",
   "label.invalid": "Ugyldig",
   "label.invalid-domain": "Ugyldigt domæne",
   "label.last-days": "Sidste {x} dage",
@@ -34,6 +35,7 @@
   "label.logout": "Log ud",
   "label.name": "Navn",
   "label.new-password": "Ny adgangskode",
+  "label.pageview": "Pageview",
   "label.password": "Adgangskode",
   "label.passwords-dont-match": "Adgangskoder matcher ikke",
   "label.profile": "Profil",
@@ -45,8 +47,11 @@
   "label.this-year": "Dette år",
   "label.timezone": "Timezone",
   "label.today": "Idag",
+  "label.type": "Type",
   "label.unknown": "Ukendt",
   "label.username": "Brugernavn",
+  "label.visitor": "Visitor",
+  "label.website": "Website",
   "label.websites": "Hjemmesider",
   "message.active-users": "{x} nuværende {x, plural, one {bruger} other {brugere}}",
   "message.confirm-delete": "Er du sikker på at du vil slette {target}?",
@@ -57,6 +62,7 @@
   "message.get-tracking-code": "Få sporingskode",
   "message.go-to-settings": "Gå til betjeningspanel",
   "message.incorrect-username-password": "Ugyldigt brugernavn/adgangskode.",
+  "message.log.visitor": "A visitor from {country} using {browser} on {os} {device}",
   "message.new-version-available": "A new version of umami {version} is available!",
   "message.no-data-available": "Ingen data tilgængelig.",
   "message.no-websites-configured": "Du har ikke konfigureret nogen websteder.",

lang/de-DE.json

@@ -26,6 +26,7 @@
   "label.default-date-range": "Voreingestellter Datumsbereich",
   "label.domain": "Domain",
   "label.enable-share-url": "Freigabe-URL aktivieren",
+  "label.event": "Event",
   "label.invalid": "Ungültig",
   "label.invalid-domain": "Ungültige Domain",
   "label.last-days": "Letzten {x} Tage",
@@ -34,6 +35,7 @@
   "label.logout": "Abmelden",
   "label.name": "Name",
   "label.new-password": "Neues Passwort",
+  "label.pageview": "Pageview",
   "label.password": "Passwort",
   "label.passwords-dont-match": "Passwörter stimmen nicht überein",
   "label.profile": "Profil",
@@ -45,8 +47,11 @@
   "label.this-year": "Dieses Jahr",
   "label.timezone": "Zeitzone",
   "label.today": "Heute",
+  "label.type": "Type",
   "label.unknown": "Unbekannt",
   "label.username": "Benutzername",
+  "label.visitor": "Visitor",
+  "label.website": "Website",
   "label.websites": "Webseiten",
   "message.active-users": "{x} {x, plural, one {aktiver Besucher} other {aktive Besucher}}",
   "message.confirm-delete": "Sind sie sich sicher {target} zu löschen?",
@@ -57,6 +62,7 @@
   "message.get-tracking-code": "Erstelle Tracking Kennung",
   "message.go-to-settings": "Zu den Einstellungen",
   "message.incorrect-username-password": "Falsches Passwort oder Benutzername.",
+  "message.log.visitor": "A visitor from {country} using {browser} on {os} {device}",
   "message.new-version-available": "Eine neue Version umami {version} ist verfügbar!",
   "message.no-data-available": "Keine Daten vorhanden.",
   "message.no-websites-configured": "Es ist keine Webseite vorhanden.",

lang/el-GR.json

@@ -26,6 +26,7 @@
   "label.default-date-range": "Προεπιλεγμένο εύρος ημερομηνιών",
   "label.domain": "Τομέας",
   "label.enable-share-url": "Ενεργοποίηση κοινής χρήσης URL",
+  "label.event": "Event",
   "label.invalid": "Μη έγκυρο",
   "label.invalid-domain": "Μη έγκυρος τομέας",
   "label.last-days": "Τελευταίες {x} ημέρες",
@@ -34,6 +35,7 @@
   "label.logout": "Αποσύνδεση",
   "label.name": "Όνομα",
   "label.new-password": "Νέος κωδικός",
+  "label.pageview": "Pageview",
   "label.password": "Κωδικός",
   "label.passwords-dont-match": "Οι κωδικοί πρόσβασης δεν ταιριάζουν",
   "label.profile": "Προφίλ",
@@ -45,8 +47,11 @@
   "label.this-year": "Αυτή την χρονιά",
   "label.timezone": "Ζώνη ώρας",
   "label.today": "Σήμερα",
+  "label.type": "Type",
   "label.unknown": "Άγνωστο",
   "label.username": "Όνομα χρήστη",
+  "label.visitor": "Visitor",
+  "label.website": "Website",
   "label.websites": "Ιστότοποι",
   "message.active-users": "{x} ενεργοί {x, plural, one {επισκέπτης} other {επισκέπτες}}",
   "message.confirm-delete": "Είστε βέβαιοι ότι θέλετε να διαγράψετε το {target};",
@@ -57,6 +62,7 @@
   "message.get-tracking-code": "Λήψη κώδικα παρακολούθησης",
   "message.go-to-settings": "Μεταβείτε στις ρυθμίσεις",
   "message.incorrect-username-password": "Εσφαλμένο όνομα χρήστη / κωδικός πρόσβασης.",
+  "message.log.visitor": "A visitor from {country} using {browser} on {os} {device}",
   "message.new-version-available": "A new version of umami {version} is available!",
   "message.no-data-available": "Δεν υπάρχουν διαθέσιμα δεδομένα.",
   "message.no-websites-configured": "Δεν έχετε ρυθμίσει κανένα ιστότοπο.",

lang/en-US.json

@@ -26,6 +26,7 @@
   "label.default-date-range": "Default date range",
   "label.domain": "Domain",
   "label.enable-share-url": "Enable share URL",
+  "label.event": "Event",
   "label.invalid": "Invalid",
   "label.invalid-domain": "Invalid domain",
   "label.last-days": "Last {x} days",
@@ -34,6 +35,7 @@
   "label.logout": "Logout",
   "label.name": "Name",
   "label.new-password": "New password",
+  "label.pageview": "Pageview",
   "label.password": "Password",
   "label.passwords-dont-match": "Passwords don't match",
   "label.profile": "Profile",
@@ -45,8 +47,11 @@
   "label.this-year": "This year",
   "label.timezone": "Timezone",
   "label.today": "Today",
+  "label.type": "Type",
   "label.unknown": "Unknown",
   "label.username": "Username",
+  "label.visitor": "Visitor",
+  "label.website": "Website",
   "label.websites": "Websites",
   "message.active-users": "{x} current {x, plural, one {visitor} other {visitors}}",
   "message.confirm-delete": "Are your sure you want to delete {target}?",
@@ -57,6 +62,7 @@
   "message.get-tracking-code": "Get tracking code",
   "message.go-to-settings": "Go to settings",
   "message.incorrect-username-password": "Incorrect username/password.",
+  "message.log.visitor": "A visitor from {country} using {browser} on {os} {device}",
   "message.new-version-available": "A new version of umami {version} is available!",
   "message.no-data-available": "No data available.",
   "message.no-websites-configured": "You don't have any websites configured.",