Refactored realtime components.

components/metrics/DataTable.module.css

@@ -6,6 +6,11 @@
   flex: 1;
 }
 
+.body {
+  position: relative;
+  flex: 1;
+}
+
 .header {
   display: flex;
   align-items: center;
@@ -88,9 +93,3 @@
   background: var(--primary400);
   z-index: -1;
 }
-
-.body {
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-}

components/metrics/MetricsTable.js

@@ -25,6 +25,7 @@ export default function MetricsTable({
   filterOptions,
   limit,
   renderLabel,
+  height,
   onDataLoad = () => {},
 }) {
   const [dateRange] = useDateRange(websiteId);
@@ -75,6 +76,7 @@ export default function MetricsTable({
           className={className}
           renderLabel={renderLabel}
           limit={limit}
+          height={height}
           animate={limit > 0}
         />
       )}

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

components/metrics/RealtimeLog.module.css

@@ -6,12 +6,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  font-size: 16px;
   line-height: 40px;
   font-weight: 600;
 }
 
 .row {
   display: flex;
+  align-items: center;
+  height: 40px;
   border-bottom: 1px solid var(--gray300);
 }
 
@@ -20,17 +23,23 @@
 }
 
 .icon {
-  align-self: center;
-  margin-right: 20px;
+  margin-right: 10px;
+}
+
+.time {
+  min-width: 60px;
+  overflow: hidden;
 }
 
 .website {
+  min-width: 120px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .detail {
+  display: flex;
   flex: 1;
 }
 

components/pages/RealtimeDashboard.js

@@ -16,7 +16,7 @@ import useCountryNames from 'hooks/useCountryNames';
 import { FormattedMessage } from 'react-intl';
 
 const REALTIME_RANGE = 30;
-const REALTIME_INTERVAL = 5000;
+const REALTIME_INTERVAL = 55000;
 
 function mergeData(state, data, time) {
   const ids = state.map(({ __id }) => __id);
@@ -151,17 +151,18 @@ export default function RealtimeDashboard() {
       </div>
       <GridLayout>
         <GridRow>
-          <GridColumn xs={12} lg={8}>
-            <RealtimeLog data={realtimeData} websites={websites} />
-          </GridColumn>
           <GridColumn xs={12} lg={4}>
             <DataTable
               title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
               metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
               data={referrers}
+              height={400}
               animate={false}
             />
           </GridColumn>
+          <GridColumn xs={12} lg={8}>
+            <RealtimeLog data={realtimeData} websites={websites} />
+          </GridColumn>
         </GridRow>
         <GridRow>
           <GridColumn xs={12} lg={4}>
@@ -170,6 +171,7 @@ export default function RealtimeDashboard() {
               metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
               data={countries}
               renderLabel={renderCountryName}
+              height={500}
               animate={false}
             />
           </GridColumn>

components/pages/WebsiteDetails.js

@@ -171,7 +171,7 @@ export default function WebsiteDetails({ websiteId, token }) {
           contentClassName={styles.content}
           menu={menuOptions}
         >
-          <DetailsComponent {...tableProps} limit={false} showFilters={true} />
+          <DetailsComponent {...tableProps} height={500} limit={false} showFilters={true} />
         </MenuLayout>
       )}
     </Page>