Pass domain to realtime components.

components/common/OverflowText.js

@@ -1,60 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import ReactTooltip from 'react-tooltip';
-
-import styles from './OverflowText.module.css';
-
-const OverflowText = ({ children, tooltipId }) => {
-  const measureEl = useRef();
-  const [isOverflown, setIsOverflown] = useState(false);
-
-  const measure = useCallback(
-    el => {
-      if (!el) return;
-      setIsOverflown(el.scrollWidth > el.clientWidth);
-    },
-    [setIsOverflown],
-  );
-
-  // Do one measure on mount
-  useEffect(() => {
-    measure(measureEl.current);
-  }, [measure]);
-
-  // Set up resize listener for subsequent measures
-  useEffect(() => {
-    if (!measureEl.current) return;
-
-    // Destructure ref in case it changes out from under us
-    const el = measureEl.current;
-
-    if ('ResizeObserver' in global) {
-      // Ideally, we have access to ResizeObservers
-      const observer = new ResizeObserver(() => {
-        measure(el);
-      });
-      observer.observe(el);
-      return () => observer.unobserve(el);
-    } else {
-      // Otherwise, fall back to measuring on window resizes
-      const handler = () => measure(el);
-
-      window.addEventListener('resize', handler, { passive: true });
-      return () => window.removeEventListener('resize', handler, { passive: true });
-    }
-  });
-
-  return (
-    <span
-      ref={measureEl}
-      data-tip={children.toString()}
-      data-effect="solid"
-      data-for={tooltipId}
-      className={styles.root}
-    >
-      {children}
-      {isOverflown && <ReactTooltip id={tooltipId}>{children}</ReactTooltip>}
-    </span>
-  );
-};
-
-export default OverflowText;

components/common/OverflowText.module.css

@@ -1,6 +0,0 @@
-.root {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

components/input/WebsiteSelect.js

@@ -22,7 +22,7 @@ export default function WebsiteSelect({ websiteId, onSelect }) {
       placeholder={formatMessage(labels.selectWebsite)}
       style={{ width: 200 }}
     >
-      {item => <Item key={item.id}>{item.name}</Item>}
+      {({ id, name }) => <Item key={id}>{name}</Item>}
     </Dropdown>
   );
 }

components/metrics/WebsiteHeader.js

@@ -1,6 +1,5 @@
-import { Row, Column } from 'react-basics';
+import { Row, Column, Text } from 'react-basics';
 import Favicon from 'components/common/Favicon';
-import OverflowText from 'components/common/OverflowText';
 import ActiveUsers from './ActiveUsers';
 import styles from './WebsiteHeader.module.css';
 
@@ -9,7 +8,7 @@ export default function WebsiteHeader({ websiteId, title, domain, children }) {
     <Row className={styles.header} justifyContent="center">
       <Column className={styles.title} variant="two">
         <Favicon domain={domain} />
-        <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
+        <Text>{title}</Text>
       </Column>
       <Column className={styles.body} variant="two">
         <ActiveUsers websiteId={websiteId} />

components/pages/realtime/RealtimeDashboard.js

@@ -32,11 +32,12 @@ export default function RealtimeDashboard({ websiteId }) {
   const router = useRouter();
   const [currentData, setCurrentData] = useState();
   const { get, useQuery } = useApi();
+  const { data: website } = useQuery(['websites', websiteId], () => get(`/websites/${websiteId}`));
   const { data, isLoading, error } = useQuery(
     ['realtime', websiteId],
     () => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp || 0 }),
     {
-      enabled: !!websiteId,
+      enabled: !!(websiteId && website),
       refetchInterval: REALTIME_INTERVAL,
       cache: false,
     },
@@ -111,10 +112,10 @@ export default function RealtimeDashboard({ websiteId }) {
       </div>
       <GridRow>
         <GridColumn xs={12} sm={12} md={12} lg={4} xl={4}>
-          <RealtimeUrls websiteId={websiteId} data={realtimeData} />
+          <RealtimeUrls websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
         </GridColumn>
         <GridColumn xs={12} sm={12} md={12} lg={8} xl={8}>
-          <RealtimeLog websiteId={websiteId} data={realtimeData} />
+          <RealtimeLog websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
         </GridColumn>
       </GridRow>
       <GridRow>

components/pages/realtime/RealtimeHome.js

@@ -17,10 +17,10 @@ export default function RealtimeHome() {
     if (data?.length) {
       router.push(`realtime/${data[0].id}`);
     }
-  }, [data]);
+  }, [data, router]);
 
   return (
-    <Page loading={isLoading || !data} error={error}>
+    <Page loading={isLoading || data?.length > 0} error={error}>
       <PageHeader title={formatMessage(labels.realtime)} />
       {data?.length === 0 && <EmptyPlaceholder message={formatMessage(messages.noWebsites)} />}
     </Page>