Progress check-in.

components/common/HamburgerButton.js

@@ -13,11 +13,11 @@ const menuItems = [
   { label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
   {
     label: <FormattedMessage id="label.settings" defaultMessage="AppLayout" />,
-    value: '/buttons',
+    value: '/input',
   },
   {
     label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
-    value: '/buttons/profile',
+    value: '/input/profile',
   },
   { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: '/logout' },
 ];

components/input/RefreshButton.js

@@ -1,12 +1,14 @@
 import { useState, useEffect, useCallback } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
+import { Button, Icon, Tooltip } from '../react-basics';
 import useStore from 'store/queries';
 import { setDateRange } from 'store/websites';
-import { Button, Icon } from 'react-basics';
 import useDateRange from 'hooks/useDateRange';
 import Icons from 'components/icons';
+import { labels } from 'components/messages';
 
 function RefreshButton({ websiteId }) {
+  const { formatMessage } = useIntl();
   const [dateRange] = useDateRange(websiteId);
   const [loading, setLoading] = useState(false);
   const selector = useCallback(state => state[`/websites/${websiteId}/stats`], [websiteId]);
@@ -28,16 +30,13 @@ function RefreshButton({ websiteId }) {
   }, [completed]);
 
   return (
-    <Button
-      tooltip={<FormattedMessage id="label.refresh" defaultMessage="Refresh" />}
-      tooltipId="button-refresh"
-      size="small"
-      onClick={handleClick}
-    >
-      <Icon>
-        <Icons.Refresh />
-      </Icon>
-    </Button>
+    <Tooltip label={formatMessage(labels.refresh)}>
+      <Button onClick={handleClick}>
+        <Icon>
+          <Icons.Refresh />
+        </Icon>
+      </Button>
+    </Tooltip>
   );
 }
 

components/input/ThemeButton.js

@@ -28,7 +28,7 @@ export default function ThemeButton({ tooltipPosition = 'top' }) {
   }
 
   return (
-    <PopupTrigger action="hover">
+    <Tooltip label={formatMessage(labels.theme)} position={tooltipPosition}>
       <Button variant="quiet" className={styles.button} onClick={handleClick}>
         {transitions((style, item) => (
           <animated.div key={item} style={style}>
@@ -36,7 +36,6 @@ export default function ThemeButton({ tooltipPosition = 'top' }) {
           </animated.div>
         ))}
       </Button>
-      <Tooltip position={tooltipPosition}>{formatMessage(labels.theme)}</Tooltip>
-    </PopupTrigger>
+    </Tooltip>
   );
 }

components/layout/AppLayout.module.css

@@ -1,7 +1,7 @@
 .layout {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: minmax(60px, 200px) 1fr;
+  grid-template-columns: max-content 1fr;
   height: 100vh;
   overflow: hidden;
 }

components/layout/Header.js

@@ -1,13 +1,13 @@
 import HamburgerButton from 'components/common/HamburgerButton';
 import UpdateNotice from 'components/common/UpdateNotice';
-import LanguageButton from 'components/buttons/LanguageButton';
-import ThemeButton from 'components/buttons/ThemeButton';
-import UserButton from 'components/buttons/UserButton';
+import LanguageButton from 'components/input/LanguageButton';
+import ThemeButton from 'components/input/ThemeButton';
+import UserButton from 'components/input/UserButton';
 import useConfig from 'hooks/useConfig';
 import useUser from 'hooks/useUser';
 import { useRouter } from 'next/router';
 import { Column, Row } from 'react-basics';
-import SettingsButton from '../buttons/SettingsButton';
+import SettingsButton from '../input/SettingsButton';
 import styles from './Header.module.css';
 import classNames from 'classnames';
 

components/layout/NavBar.js

@@ -3,9 +3,9 @@ import { useIntl } from 'react-intl';
 import { Icon, Text } from 'react-basics';
 import classNames from 'classnames';
 import Icons from 'components/icons';
-import ThemeButton from 'components/buttons/ThemeButton';
-import LanguageButton from 'components/buttons/LanguageButton';
-import LogoutButton from 'components/buttons/LogoutButton';
+import ThemeButton from 'components/input/ThemeButton';
+import LanguageButton from 'components/input/LanguageButton';
+import LogoutButton from 'components/input/LogoutButton';
 import { labels } from 'components/messages';
 import useUser from 'hooks/useUser';
 import NavGroup from './NavGroup';

components/layout/NavGroup.js

@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Icon, Text, Icons } from 'react-basics';
+import { Icon, Text, Tooltip } from 'react-basics';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
+import Icons from 'components/icons';
 import styles from './NavGroup.module.css';
 
 export default function NavGroup({
@@ -35,17 +36,19 @@ export default function NavGroup({
       <div className={styles.body}>
         {items.map(({ label, url, icon, divider }) => {
           return (
-            <Link key={label} href={url}>
-              <a
-                className={classNames(styles.item, {
-                  [styles.divider]: divider,
-                  [styles.selected]: pathname.startsWith(url),
-                })}
-              >
-                <Icon>{icon}</Icon>
-                <Text className={styles.text}>{label}</Text>
-              </a>
-            </Link>
+            <Tooltip key={label} label={label} position="right" disabled={!minimized}>
+              <Link href={url}>
+                <a
+                  className={classNames(styles.item, {
+                    [styles.divider]: divider,
+                    [styles.selected]: pathname.startsWith(url),
+                  })}
+                >
+                  <Icon>{icon}</Icon>
+                  <Text className={styles.text}>{label}</Text>
+                </a>
+              </Link>
+            </Tooltip>
           );
         })}
       </div>

components/layout/NavGroup.module.css

@@ -24,15 +24,6 @@
   display: block;
 }
 
-.items {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  margin-right: -2px;
-  width: 200px;
-}
-
 .item {
   position: relative;
   display: flex;
@@ -43,6 +34,7 @@
   gap: var(--size500);
   font-weight: 600;
   width: 200px;
+  margin-right: -2px;
 }
 
 a.item {

components/messages.js

@@ -66,6 +66,19 @@ export const labels = defineMessages({
   dateRange: { id: 'label.date-range', defaultMessage: 'Date range' },
   viewDetails: { id: 'label.view-details', defaultMessage: 'View details' },
   deleteTeam: { id: 'label.delete-team', defaultMessage: 'Delete team' },
+  refresh: { id: 'label.refresh', defaultMessage: 'Refresh' },
+  pages: { id: 'label.pages', defaultMessage: 'Pages' },
+  referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
+  screens: { id: 'label.screens', defaultMessage: 'Screens' },
+  browsers: { id: 'label.browsers', defaultMessage: 'Browsers' },
+  os: { id: 'label.operating-systems', defaultMessage: 'Operating systems' },
+  devices: { id: 'label.devices', defaultMessage: 'Devices' },
+  countries: { id: 'label.countries', defaultMessage: 'Countries' },
+  languages: { id: 'label.languages', defaultMessage: 'Languages' },
+  events: { id: 'label.events', defaultMessage: 'Events' },
+  query: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
+  back: { id: 'label.back', defaultMessage: 'Back' },
+  visitors: { id: 'label.visitors', defaultMessage: 'Visitors' },
 });
 
 export const messages = defineMessages({
@@ -78,6 +91,10 @@ export const messages = defineMessages({
     id: 'message.delete-user-warning',
     defaultMessage: 'Are you sure you want to delete the user {username}?',
   },
+  deleteTeamWarning: {
+    id: 'message.delete-team-warning',
+    defaultMessage: 'Are you sure you want to delete the team {name}?',
+  },
   minPasswordLength: {
     id: 'message.min-password-length',
     defaultMessage: 'Minimum length of 8 characters',
@@ -133,10 +150,6 @@ export const messages = defineMessages({
     id: 'message.team-not-found',
     defaultMessage: 'Team not found.',
   },
-  deleteTeam: {
-    id: 'message.delete-team',
-    defaultMessage: 'To delete this team, type {confirmation} in the box below to confirm.',
-  },
 });
 
 export const devices = defineMessages({

components/metrics/EventsChart.js

@@ -67,7 +67,7 @@ export default function EventsChart({ websiteId, className, token }) {
   }
 
   if (isLoading) {
-    return <Loading variant="dots" />;
+    return <Loading icon="dots" />;
   }
 
   if (!data) {

components/metrics/MetricCard.module.css

@@ -6,7 +6,7 @@
 }
 
 .value {
-  font-size: var(--font-size-xxl);
+  font-size: var(--font-size-2xl);
   line-height: 40px;
   min-height: 40px;
   font-weight: 600;

components/metrics/MetricsBar.js

@@ -19,7 +19,7 @@ export default function MetricsBar({ websiteId, className }) {
     query: { url, referrer, os, browser, device, country },
   } = usePageQuery();
 
-  const { data, error, isLoading } = useQuery(
+  const { data, error, isLoading, isFetched } = useQuery(
     ['websites:stats', { websiteId, modified, url, referrer, os, browser, device, country }],
     () =>
       get(`/websites/${websiteId}/stats`, {
@@ -53,9 +53,9 @@ export default function MetricsBar({ websiteId, className }) {
 
   return (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
-      {isLoading && <Loading variant="dots" />}
+      {isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
-      {data && !error && (
+      {data && !error && isFetched && (
         <>
           <MetricCard
             label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}

components/metrics/MetricsTable.js

@@ -37,7 +37,7 @@ export default function MetricsTable({
   const { formatMessage } = useIntl();
   const { get, useQuery } = useApi();
 
-  const { data, isLoading, error } = useQuery(
+  const { data, isLoading, isFetched, error } = useQuery(
     [
       'websites:mnetrics',
       { websiteId, type, modified, url, referrer, os, browser, device, country },
@@ -73,7 +73,7 @@ export default function MetricsTable({
 
   return (
     <div className={classNames(styles.container, className)}>
-      {!data && isLoading && <Loading variant="dots" />}
+      {!data && isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
       {data && !error && <DataTable {...props} data={filteredData} className={className} />}
       <div className={styles.footer}>

components/metrics/OSTable.js

@@ -1,8 +1,11 @@
+import { useIntl } from 'react-intl';
 import MetricsTable from './MetricsTable';
-import { FormattedMessage } from 'react-intl';
 import FilterLink from 'components/common/FilterLink';
+import { labels } from 'components/messages';
 
 export default function OSTable({ websiteId, ...props }) {
+  const { formatMessage } = useIntl();
+
   function renderLink({ x: os }) {
     return <FilterLink id="os" value={os} />;
   }
@@ -10,11 +13,11 @@ export default function OSTable({ websiteId, ...props }) {
   return (
     <MetricsTable
       {...props}
-      title={<FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />}
-      type="os"
-      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
-      renderLabel={renderLink}
       websiteId={websiteId}
+      title={formatMessage(labels.os)}
+      metric={formatMessage(labels.visitors)}
+      renderLabel={renderLink}
+      type="os"
     />
   );
 }

components/metrics/WebsiteChart.js

@@ -83,7 +83,7 @@ export default function WebsiteChart({
   }
 
   if (isLoading) {
-    return <Loading variant="dots" />;
+    return <Loading icon="dots" />;
   }
 
   return (

components/pages/settings/teams/TeamDeleteForm.js

@@ -1,22 +1,12 @@
-import {
-  Button,
-  Form,
-  FormRow,
-  FormButtons,
-  FormInput,
-  SubmitButton,
-  TextField,
-} from 'react-basics';
-import { useIntl } from 'react-intl';
+import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
+import { useIntl, FormattedMessage } from 'react-intl';
 import { labels, messages } from 'components/messages';
 import useApi from 'hooks/useApi';
 
-const CONFIRM_VALUE = 'DELETE';
-
-export default function TeamDeleteForm({ teamId, onSave, onClose }) {
+export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
   const { formatMessage } = useIntl();
   const { del, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => del(`/teams/${teamId}`, data));
+  const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
 
   const handleSubmit = async data => {
     mutate(data, {
@@ -29,14 +19,13 @@ export default function TeamDeleteForm({ teamId, onSave, onClose }) {
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <p>{formatMessage(messages.deleteTeam, { confirmation: CONFIRM_VALUE })}</p>
-      <FormRow label={formatMessage(labels.confirm)}>
-        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
+      <p>
+        <FormattedMessage {...messages.deleteTeamWarning} values={{ name: <b>{teamName}</b> }} />
+      </p>
       <FormButtons flex>
-        <SubmitButton variant="danger">{formatMessage(labels.delete)}</SubmitButton>
+        <SubmitButton variant="danger" disabled={isLoading}>
+          {formatMessage(labels.delete)}
+        </SubmitButton>
         <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
       </FormButtons>
     </Form>

components/pages/settings/teams/TeamsTable.js

@@ -52,9 +52,9 @@ export default function TeamsTable({ data = [], onDelete }) {
                   <a>
                     <Button>
                       <Icon>
-                        <Icons.ArrowRight />
+                        <Icons.Edit />
                       </Icon>
-                      <Text>{formatMessage(labels.settings)}</Text>
+                      <Text>{formatMessage(labels.edit)}</Text>
                     </Button>
                   </a>
                 </Link>
@@ -66,7 +66,14 @@ export default function TeamsTable({ data = [], onDelete }) {
                     <Text>{formatMessage(labels.delete)}</Text>
                   </Button>
                   <Modal title={formatMessage(labels.deleteTeam)}>
-                    {close => <TeamDeleteForm teamId={row.id} onSave={onDelete} onClose={close} />}
+                    {close => (
+                      <TeamDeleteForm
+                        teamId={row.id}
+                        teamName={row.name}
+                        onSave={onDelete}
+                        onClose={close}
+                      />
+                    )}
                   </Modal>
                 </ModalTrigger>
               </Flexbox>

components/pages/settings/websites/WebsitesTable.js

@@ -45,9 +45,9 @@ export default function WebsitesTable({ data = [] }) {
                 <a>
                   <Button>
                     <Icon>
-                      <Icons.ArrowRight />
+                      <Icons.Edit />
                     </Icon>
-                    <Text>Settings</Text>
+                    <Text>{formatMessage(labels.edit)}</Text>
                   </Button>
                 </a>
               </Link>
@@ -57,7 +57,7 @@ export default function WebsitesTable({ data = [] }) {
                     <Icon>
                       <Icons.External />
                     </Icon>
-                    <Text>View</Text>
+                    <Text>{formatMessage(labels.view)}</Text>
                   </Button>
                 </a>
               </Link>

components/pages/websites/WebsiteDetails.js

@@ -1,69 +1,31 @@
-import { Icons } from 'react-basics';
+import { useState } from 'react';
+import { Icons, Loading } from 'react-basics';
+import { useIntl } from 'react-intl';
+import Link from 'next/link';
 import classNames from 'classnames';
-import Link from 'components/common/Link';
-import WorldMap from 'components/common/WorldMap';
-import GridRow from 'components/layout/GridRow';
 import MenuLayout from 'components/layout/MenuLayout';
 import Page from 'components/layout/Page';
-import BrowsersTable from 'components/metrics/BrowsersTable';
-import CountriesTable from 'components/metrics/CountriesTable';
-import DevicesTable from 'components/metrics/DevicesTable';
-import LanguagesTable from 'components/metrics/LanguagesTable';
-import OSTable from 'components/metrics/OSTable';
-import PagesTable from 'components/metrics/PagesTable';
-import QueryParametersTable from 'components/metrics/QueryParametersTable';
-import ReferrersTable from 'components/metrics/ReferrersTable';
-import ScreenTable from 'components/metrics/ScreenTable';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import useApi from 'hooks/useApi';
 import usePageQuery from 'hooks/usePageQuery';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-import { useState } from 'react';
-import { Column, Loading } from 'react-basics';
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import EventDataButton from '../../common/EventDataButton';
-import EventsChart from '../../metrics/EventsChart';
-import EventsTable from '../../metrics/EventsTable';
+import { labels, messages } from 'components/messages';
 import styles from './WebsiteDetails.module.css';
-
-const messages = defineMessages({
-  pages: { id: 'metrics.pages', defaultMessage: 'Pages' },
-  referrers: { id: 'metrics.referrers', defaultMessage: 'Referrers' },
-  screens: { id: 'metrics.screens', defaultMessage: 'Screens' },
-  browsers: { id: 'metrics.browsers', defaultMessage: 'Browsers' },
-  os: { id: 'metrics.operating-systems', defaultMessage: 'Operating system' },
-  devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
-  countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
-  languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
-  events: { id: 'metrics.events', defaultMessage: 'Events' },
-  query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
-});
-
-const views = {
-  url: PagesTable,
-  referrer: ReferrersTable,
-  browser: BrowsersTable,
-  os: OSTable,
-  device: DevicesTable,
-  screen: ScreenTable,
-  country: CountriesTable,
-  language: LanguagesTable,
-  event: EventsTable,
-  query: QueryParametersTable,
-};
+import WebsiteTableView from './WebsiteTableView';
+import WebsiteMenuView from './WebsiteMenuView';
 
 export default function WebsiteDetails({ websiteId }) {
+  const { formatMessage } = useIntl();
   const { get, useQuery } = useApi();
-  const { data, isLoading } = useQuery(['websites', websiteId], () =>
+  const { data, isLoading, error } = useQuery(['websites', websiteId], () =>
     get(`/websites/${websiteId}`),
   );
   const [chartLoaded, setChartLoaded] = useState(false);
-  const [countryData, setCountryData] = useState();
+
   const {
     resolve,
     query: { view },
   } = usePageQuery();
-  const { formatMessage } = useIntl();
 
   const BackButton = () => (
     <div key="back-button" className={classNames(styles.backButton, 'col-12')}>
@@ -73,147 +35,34 @@ export default function WebsiteDetails({ websiteId }) {
         icon={<Icons.ArrowRight />}
         sizes="small"
       >
-        <FormattedMessage id="label.back" defaultMessage="Back" />
+        {formatMessage(labels.back)}
       </Link>
     </div>
   );
 
-  const menuOptions = [
-    {
-      render: BackButton,
-    },
-    {
-      label: formatMessage(messages.pages),
-      value: resolve({ view: 'url' }),
-    },
-    {
-      label: formatMessage(messages.referrers),
-      value: resolve({ view: 'referrer' }),
-    },
-    {
-      label: formatMessage(messages.browsers),
-      value: resolve({ view: 'browser' }),
-    },
-    {
-      label: formatMessage(messages.os),
-      value: resolve({ view: 'os' }),
-    },
-    {
-      label: formatMessage(messages.devices),
-      value: resolve({ view: 'device' }),
-    },
-    {
-      label: formatMessage(messages.countries),
-      value: resolve({ view: 'country' }),
-    },
-    {
-      label: formatMessage(messages.languages),
-      value: resolve({ view: 'language' }),
-    },
-    {
-      label: formatMessage(messages.screens),
-      value: resolve({ view: 'screen' }),
-    },
-    {
-      label: formatMessage(messages.events),
-      value: resolve({ view: 'event' }),
-    },
-    {
-      label: formatMessage(messages.query),
-      value: resolve({ view: 'query' }),
-    },
-  ];
-
-  const tableProps = {
-    websiteId,
-    websiteDomain: data?.domain,
-    limit: 10,
-  };
-
-  const DetailsComponent = views[view];
-
   function handleDataLoad() {
     if (!chartLoaded) {
       setTimeout(() => setChartLoaded(true), DEFAULT_ANIMATION_DURATION);
     }
   }
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
-  if (!data) {
-    return null;
-  }
-
   return (
-    <Page>
+    <Page loading={isLoading} error={error}>
       <WebsiteChart
         websiteId={websiteId}
-        title={data.name}
-        domain={data.domain}
+        title={data?.name}
+        domain={data?.domain}
         onDataLoad={handleDataLoad}
         showLink={false}
         stickyHeader
       />
-      {!chartLoaded && <Loading variant="dots" />}
-      {chartLoaded && !view && (
+      {!chartLoaded && <Loading icon="dots" />}
+      {chartLoaded && (
         <>
-          <GridRow>
-            <Column variant="two" className={styles.column}>
-              <PagesTable {...tableProps} />
-            </Column>
-            <Column variant="two" className={styles.column}>
-              <ReferrersTable {...tableProps} />
-            </Column>
-          </GridRow>
-          <GridRow>
-            <Column variant="three" className={styles.column}>
-              <BrowsersTable {...tableProps} />
-            </Column>
-            <Column variant="three" className={styles.column}>
-              <OSTable {...tableProps} />
-            </Column>
-            <Column variant="three" className={styles.column}>
-              <DevicesTable {...tableProps} />
-            </Column>
-          </GridRow>
-          <GridRow>
-            <Column xs={12} sm={12} md={12} defaultSize={8}>
-              <WorldMap data={countryData} />
-            </Column>
-            <Column xs={12} sm={12} md={12} defaultSize={4}>
-              <CountriesTable {...tableProps} onDataLoad={setCountryData} />
-            </Column>
-          </GridRow>
-          <GridRow>
-            <Column xs={12} md={12} lg={4} defaultSize={4}>
-              <EventsTable {...tableProps} />
-            </Column>
-            <Column xs={12} md={12} lg={8} defaultSize={8}>
-              <EventDataButton websiteId={websiteId} />
-              <EventsChart className={styles.eventschart} websiteId={websiteId} />
-            </Column>
-          </GridRow>
+          {!view && <WebsiteTableView websiteId={websiteId} />}
+          {view && <WebsiteMenuView websiteId={websiteId} />}
         </>
       )}
-      {view && chartLoaded && (
-        <MenuLayout
-          className={styles.view}
-          menuClassName={styles.menu}
-          contentClassName={styles.content}
-          menu={menuOptions}
-        >
-          <DetailsComponent
-            {...tableProps}
-            height={500}
-            limit={false}
-            animte={false}
-            showFilters
-            virtualize
-          />
-        </MenuLayout>
-      )}
     </Page>
   );
 }

components/pages/websites/WebsiteMenuView.js

@@ -0,0 +1,115 @@
+import { Row, Column, Menu, Item, Icon, Text, Button } from 'react-basics';
+import Link from 'next/link';
+import BrowsersTable from 'components/metrics/BrowsersTable';
+import CountriesTable from 'components/metrics/CountriesTable';
+import DevicesTable from 'components/metrics/DevicesTable';
+import LanguagesTable from 'components/metrics/LanguagesTable';
+import OSTable from 'components/metrics/OSTable';
+import PagesTable from 'components/metrics/PagesTable';
+import QueryParametersTable from 'components/metrics/QueryParametersTable';
+import ReferrersTable from 'components/metrics/ReferrersTable';
+import ScreenTable from 'components/metrics/ScreenTable';
+import EventsTable from 'components/metrics/EventsTable';
+import usePageQuery from 'hooks/usePageQuery';
+import Icons from 'components/icons';
+import { labels } from '../../messages';
+import { useIntl } from 'react-intl';
+
+const views = {
+  url: PagesTable,
+  referrer: ReferrersTable,
+  browser: BrowsersTable,
+  os: OSTable,
+  device: DevicesTable,
+  screen: ScreenTable,
+  country: CountriesTable,
+  language: LanguagesTable,
+  event: EventsTable,
+  query: QueryParametersTable,
+};
+
+export default function WebsiteMenuView({ websiteId, websiteDomain }) {
+  const { formatMessage } = useIntl();
+  const {
+    resolve,
+    query: { view },
+  } = usePageQuery();
+
+  const items = [
+    {
+      label: formatMessage(labels.pages),
+      value: resolve({ view: 'url' }),
+    },
+    {
+      label: formatMessage(labels.referrers),
+      value: resolve({ view: 'referrer' }),
+    },
+    {
+      label: formatMessage(labels.browsers),
+      value: resolve({ view: 'browser' }),
+    },
+    {
+      label: formatMessage(labels.os),
+      value: resolve({ view: 'os' }),
+    },
+    {
+      label: formatMessage(labels.devices),
+      value: resolve({ view: 'device' }),
+    },
+    {
+      label: formatMessage(labels.countries),
+      value: resolve({ view: 'country' }),
+    },
+    {
+      label: formatMessage(labels.languages),
+      value: resolve({ view: 'language' }),
+    },
+    {
+      label: formatMessage(labels.screens),
+      value: resolve({ view: 'screen' }),
+    },
+    {
+      label: formatMessage(labels.events),
+      value: resolve({ view: 'event' }),
+    },
+    {
+      label: formatMessage(labels.query),
+      value: resolve({ view: 'query' }),
+    },
+  ];
+
+  const DetailsComponent = views[view];
+
+  return (
+    <Row>
+      <Column>
+        <Button>
+          <Icon rotate={180}>
+            <Icons.ArrowRight />
+          </Icon>
+          {formatMessage(labels.back)}
+        </Button>
+        <Menu items={items}>
+          {({ value, label }) => (
+            <Link href={resolve()}>
+              <a>
+                <Item key={value}>{label}</Item>
+              </a>
+            </Link>
+          )}
+        </Menu>
+      </Column>
+      <Column>
+        <DetailsComponent
+          websiteId={websiteId}
+          websiteDomain={websiteDomain}
+          height={500}
+          limit={false}
+          animate={false}
+          showFilters
+          virtualize
+        />
+      </Column>
+    </Row>
+  );
+}

components/pages/websites/WebsiteTableView.js

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { Row, Column } from 'react-basics';
+import PagesTable from 'components/metrics/PagesTable';
+import ReferrersTable from 'components/metrics/ReferrersTable';
+import BrowsersTable from 'components/metrics/BrowsersTable';
+import OSTable from 'components/metrics/OSTable';
+import DevicesTable from 'components/metrics/DevicesTable';
+import WorldMap from 'components/common/WorldMap';
+import CountriesTable from 'components/metrics/CountriesTable';
+import EventsTable from 'components/metrics/EventsTable';
+import EventsChart from 'components/metrics/EventsChart';
+
+export default function WebsiteTableView({ websiteId }) {
+  const [countryData, setCountryData] = useState();
+  const tableProps = {
+    websiteId,
+    limit: 10,
+  };
+
+  return (
+    <>
+      <Row>
+        <Column variant="two">
+          <PagesTable {...tableProps} />
+        </Column>
+        <Column variant="two">
+          <ReferrersTable {...tableProps} />
+        </Column>
+      </Row>
+      <Row>
+        <Column variant="three">
+          <BrowsersTable {...tableProps} />
+        </Column>
+        <Column variant="three">
+          <OSTable {...tableProps} />
+        </Column>
+        <Column variant="three">
+          <DevicesTable {...tableProps} />
+        </Column>
+      </Row>
+      <Row>
+        <Column xs={12} sm={12} md={12} defaultSize={8}>
+          <WorldMap data={countryData} />
+        </Column>
+        <Column xs={12} sm={12} md={12} defaultSize={4}>
+          <CountriesTable {...tableProps} onDataLoad={setCountryData} />
+        </Column>
+      </Row>
+      <Row>
+        <Column xs={12} md={12} lg={4} defaultSize={4}>
+          <EventsTable {...tableProps} />
+        </Column>
+        <Column xs={12} md={12} lg={8} defaultSize={8}>
+          <EventsChart websiteId={websiteId} />
+        </Column>
+      </Row>
+    </>
+  );
+}