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;
+}