Merge remote-tracking branch 'origin/dev' into dev

components/metrics/RealtimeHeader.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PageHeader from '../layout/PageHeader';
 import DropDown from '../common/DropDown';
+import ActiveUsers from './ActiveUsers';
 import MetricCard from './MetricCard';
 import styles from './RealtimeHeader.module.css';
 
@@ -24,6 +25,9 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
         <div>
           <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
         </div>
+        <div>
+          <ActiveUsers className={styles.active} websiteId={websiteId} />
+        </div>
         <DropDown value={websiteId} options={options} onChange={onSelect} />
       </PageHeader>
       <div className={styles.metrics}>

components/metrics/RealtimeLog.js

@@ -7,7 +7,7 @@ import Tag from 'components/common/Tag';
 import Dot from 'components/common/Dot';
 import FilterButtons from 'components/common/FilterButtons';
 import NoData from 'components/common/NoData';
-import { devices } from 'components/messages';
+import { devices, getDeviceMessage } from 'components/messages';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
@@ -137,7 +137,7 @@ export default function RealtimeLog({ data, websites, websiteId }) {
             ),
             browser: <b>{BROWSERS[browser]}</b>,
             os: <b>{os}</b>,
-            device: <b>{intl.formatMessage(devices[device])?.toLowerCase()}</b>,
+            device: <b>{getDeviceMessage(devices[device])}</b>,
           }}
         />
       );

pages/api/collect.js

@@ -9,6 +9,8 @@ import { createToken } from 'lib/crypto';
 export default async (req, res) => {
   await useCors(req, res);
 
+  console.log('hi!');
+
   if (isbot(req.headers['user-agent'])) {
     return ok(res);
   }