Refactored realtime components.

components/metrics/RealtimeLog.js

@@ -1,11 +1,9 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { FixedSizeList } from 'react-window';
-import classNames from 'classnames';
 import firstBy from 'thenby';
 import { format } from 'date-fns';
 import Icon from 'components/common/Icon';
-import Table, { TableRow } from 'components/common/Table';
 import Tag from 'components/common/Tag';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
@@ -33,29 +31,6 @@ export default function RealtimeLog({ data, websites }) {
     return [...pageviews, ...sessions, ...events].sort(firstBy('created_at', -1));
   }, [data]);
 
-  const columns = [
-    {
-      key: 'time',
-      className: classNames(styles.time, 'col-3 col-lg-1'),
-      render: ({ created_at }) => format(new Date(created_at), 'h:mm:ss'),
-    },
-    {
-      key: 'website',
-      className: classNames(styles.website, 'col-9 col-lg-2'),
-      render: getWebsite,
-    },
-    {
-      key: 'detail',
-      className: classNames(styles.detail, 'col-12 col-lg-9'),
-      render: row => (
-        <>
-          <Icon className={styles.icon} icon={getIcon(row)} />
-          {getDetail(row)}
-        </>
-      ),
-    },
-  ];
-
   function getType({ view_id, session_id, event_id }) {
     if (event_id) {
       return TYPE_EVENT;
@@ -110,29 +85,29 @@ export default function RealtimeLog({ data, websites }) {
   }
 
   const Row = ({ index, style }) => {
+    const row = logs[index];
     return (
-      <div style={style}>
-        <TableRow key={index} columns={columns} row={logs[index]} />
+      <div className={styles.row} style={style}>
+        <div className={styles.time}>{format(new Date(row.created_at), 'h:mm:ss')}</div>
+        <div className={styles.website}>{getWebsite(row)}</div>
+        <div className={styles.detail}>
+          <Icon className={styles.icon} icon={getIcon(row)} />
+          {getDetail(row)}
+        </div>
       </div>
     );
   };
 
   return (
-    <div className={styles.log}>
+    <div className={styles.table}>
       <div className={styles.header}>
         <FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
       </div>
-      <Table
-        className={styles.table}
-        bodyClassName={styles.body}
-        columns={columns}
-        rows={logs}
-        showHeader={false}
-      >
-        <FixedSizeList height={400} itemCount={logs.length} itemSize={46}>
+      <div className={styles.body}>
+        <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
           {Row}
         </FixedSizeList>
-      </Table>
+      </div>
     </div>
   );
 }