Realtime header component.

components/pages/RealtimeDashboard.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
 import { subMinutes, startOfMinute } from 'date-fns';
 import Page from 'components/layout/Page';
-import PageHeader from 'components/layout/PageHeader';
-import DropDown from 'components/common/DropDown';
 import useFetch from 'hooks/useFetch';
 import RealtimeChart from '../metrics/RealtimeChart';
 import RealtimeLog from '../metrics/RealtimeLog';
+import styles from './RealtimeDashboard.module.css';
+import RealtimeHeader from '../metrics/RealtimeHeader';
 
 const REALTIME_RANGE = 30;
 const REALTIME_INTERVAL = 5000;
@@ -24,28 +24,27 @@ function filterWebsite(data, id) {
 
 export default function RealtimeDashboard() {
   const [data, setData] = useState();
-  const [website, setWebsite] = useState();
+  const [websiteId, setWebsiteId] = useState(0);
   const { data: init, loading } = useFetch('/api/realtime', { params: { type: 'init' } });
   const { data: updates } = useFetch('/api/realtime', {
     params: { type: 'update', start_at: data?.timestamp },
-    disabled: !init?.token || !data,
+    disabled: !init?.websites?.length || !data,
     interval: REALTIME_INTERVAL,
     headers: { 'x-umami-token': init?.token },
   });
 
   const realtimeData = useMemo(() => {
-    if (website) {
-      const { website_id } = website;
+    if (websiteId) {
       const { pageviews, sessions, events, ...props } = data;
       return {
-        pageviews: filterWebsite(pageviews, website_id),
-        sessions: filterWebsite(sessions, website_id),
-        events: filterWebsite(events, website_id),
+        pageviews: filterWebsite(pageviews, websiteId),
+        sessions: filterWebsite(sessions, websiteId),
+        events: filterWebsite(events, websiteId),
         ...props,
       };
     }
     return data;
-  }, [data, website]);
+  }, [data, websiteId]);
 
   useEffect(() => {
     if (init && !data) {
@@ -68,33 +67,27 @@ export default function RealtimeDashboard() {
 
   const { websites } = init;
 
-  const options = [
-    { label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />, value: 0 },
-  ].concat(websites.map(({ name, website_id }) => ({ label: name, value: website_id })));
-  const selectedValue = options.find(({ value }) => value === website?.website_id)?.value || 0;
-
-  function handleSelect(value) {
-    setWebsite(websites.find(({ website_id }) => website_id === value));
-  }
-
   return (
     <Page>
-      <PageHeader>
-        <div>
-          <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
-        </div>
-        <DropDown value={selectedValue} options={options} onChange={handleSelect} />
-      </PageHeader>
-      <RealtimeChart
-        websiteId={website?.website_id}
+      <RealtimeHeader
+        websites={websites}
+        websiteId={websiteId}
         data={realtimeData}
-        unit="minute"
-        records={REALTIME_RANGE}
+        onSelect={setWebsiteId}
       />
-      <div className="row">
-        <div className="col-12">
+      <div className={styles.chart}>
+        <RealtimeChart
+          websiteId={websiteId}
+          data={realtimeData}
+          unit="minute"
+          records={REALTIME_RANGE}
+        />
+      </div>
+      <div className={classNames(styles.tables, 'row')}>
+        <div className="col-12 col-lg-8">
           <RealtimeLog data={realtimeData} websites={websites} />
         </div>
+        <div className="col-12 col-lg-4">hi.</div>
       </div>
     </Page>
   );

components/pages/RealtimeDashboard.module.css

@@ -1,3 +1,7 @@
 .container {
   display: flex;
 }
+
+.chart {
+  margin-bottom: 30px;
+}