Refactored realtime API. Add dot component and colored dots in log.

components/metrics/ActiveUsers.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import useFetch from 'hooks/useFetch';
+import Dot from 'components/common/Dot';
 import styles from './ActiveUsers.module.css';
 
 export default function ActiveUsers({ websiteId, token, className }) {
@@ -19,7 +20,7 @@ export default function ActiveUsers({ websiteId, token, className }) {
 
   return (
     <div className={classNames(styles.container, className)}>
-      <div className={styles.dot} />
+      <Dot />
       <div className={styles.text}>
         <div>
           <FormattedMessage

components/metrics/ActiveUsers.module.css

@@ -12,11 +12,3 @@
   font-weight: 600;
   margin-right: 4px;
 }
-
-.dot {
-  background: var(--green400);
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-  margin-right: 10px;
-}

components/metrics/RealtimeHeader.js

@@ -8,7 +8,13 @@ import styles from './RealtimeHeader.module.css';
 export default function RealtimeHeader({ websites, data, websiteId, onSelect }) {
   const options = [
     { label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />, value: 0 },
-  ].concat(websites.map(({ name, website_id }) => ({ label: name, value: website_id })));
+  ].concat(
+    websites.map(({ name, website_id }, index) => ({
+      label: name,
+      value: website_id,
+      divider: index === 0,
+    })),
+  );
 
   const { pageviews, sessions, events, countries } = data;
 

components/metrics/RealtimeLog.js

@@ -11,7 +11,9 @@ import { BROWSERS } from 'lib/constants';
 import Bolt from 'assets/bolt.svg';
 import Visitor from 'assets/visitor.svg';
 import Eye from 'assets/eye.svg';
+import { stringToColor } from 'lib/format';
 import styles from './RealtimeLog.module.css';
+import Dot from '../common/Dot';
 
 const TYPE_PAGEVIEW = 0;
 const TYPE_SESSION = 1;
@@ -26,11 +28,19 @@ const TYPE_ICONS = {
 export default function RealtimeLog({ data, websites }) {
   const [locale] = useLocale();
   const countryNames = useCountryNames(locale);
+
   const logs = useMemo(() => {
     const { pageviews, sessions, events } = data;
     return [...pageviews, ...sessions, ...events].sort(firstBy('created_at', -1));
   }, [data]);
 
+  const uuids = useMemo(() => {
+    return data.sessions.reduce((obj, { session_id, session_uuid }) => {
+      obj[session_id] = session_uuid;
+      return obj;
+    }, {});
+  }, [data]);
+
   function getType({ view_id, session_id, event_id }) {
     if (event_id) {
       return TYPE_EVENT;
@@ -88,6 +98,9 @@ export default function RealtimeLog({ data, websites }) {
     const row = logs[index];
     return (
       <div className={styles.row} style={style}>
+        <div>
+          <Dot color={stringToColor(uuids[row.session_id] || `${row.session_id}`)} />
+        </div>
         <div className={styles.time}>{format(new Date(row.created_at), 'h:mm:ss')}</div>
         <div className={styles.detail}>
           <Icon className={styles.icon} icon={getIcon(row)} />