Renamed methods. Initial work on realtime dashboard.

components/pages/RealtimeDashboard.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import Page from '../layout/Page';
+import PageHeader from '../layout/PageHeader';
+import useFetch from '../../hooks/useFetch';
+import DropDown from '../common/DropDown';
+import RealtimeChart from '../metrics/RealtimeChart';
+
+export default function TestConsole() {
+  const user = useSelector(state => state.user);
+  const [website, setWebsite] = useState();
+  const { data } = useFetch('/api/websites');
+
+  if (!data || !user?.is_admin) {
+    return null;
+  }
+
+  const options = [{ label: 'All websites', value: 0 }].concat(
+    data.map(({ name, website_id }) => ({ label: name, value: website_id })),
+  );
+  const selectedValue = options.find(({ value }) => value === website?.website_id)?.value || 0;
+
+  function handleSelect(value) {
+    setWebsite(data.find(({ website_id }) => website_id === value));
+  }
+
+  return (
+    <Page>
+      <PageHeader>
+        <div>Real time</div>
+        <DropDown value={selectedValue} options={options} onChange={handleSelect} />
+      </PageHeader>
+      <RealtimeChart websiteId={website?.website_id} />
+    </Page>
+  );
+}

components/pages/RealtimeDashboard.module.css

@@ -0,0 +1,3 @@
+.container {
+  display: flex;
+}

components/pages/TestConsole.js

@@ -7,7 +7,7 @@ import Page from '../layout/Page';
 import PageHeader from '../layout/PageHeader';
 import useFetch from '../../hooks/useFetch';
 import DropDown from '../common/DropDown';
-import styles from './Test.module.css';
+import styles from './TestConsole.module.css';
 import WebsiteChart from '../metrics/WebsiteChart';
 import EventsChart from '../metrics/EventsChart';
 import Button from '../common/Button';