Merge branch 'dev' into all-time-filter

components/metrics/MetricCard.js

@@ -9,6 +9,7 @@ const MetricCard = ({
   label,
   reverseColors = false,
   format = formatNumber,
+  hideComparison = false,
 }) => {
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
   const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
@@ -18,8 +19,8 @@ const MetricCard = ({
       <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
       <div className={styles.label}>
         {label}
-        {~~change === 0 && <span className={styles.change}>{format(0)}</span>}
-        {~~change !== 0 && (
+        {~~change === 0 && !hideComparison && <span className={styles.change}>{format(0)}</span>}
+        {~~change !== 0 && !hideComparison && (
           <animated.span
             className={`${styles.change} ${
               change >= 0

components/metrics/RealtimeHeader.js

@@ -30,18 +30,22 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
         <MetricCard
           label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
           value={pageviews.length}
+          hideComparison
         />
         <MetricCard
           label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
           value={sessions.length}
+          hideComparison
         />
         <MetricCard
           label={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
           value={events.length}
+          hideComparison
         />
         <MetricCard
           label={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
           value={countries.length}
+          hideComparison
         />
       </div>
     </>

components/settings/WebsiteSettings.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Table from 'components/common/Table';
@@ -25,6 +26,7 @@ import useFetch from 'hooks/useFetch';
 import styles from './WebsiteSettings.module.css';
 
 export default function WebsiteSettings() {
+  const user = useSelector(state => state.user);
   const [editWebsite, setEditWebsite] = useState();
   const [resetWebsite, setResetWebsite] = useState();
   const [deleteWebsite, setDeleteWebsite] = useState();
@@ -33,7 +35,9 @@ export default function WebsiteSettings() {
   const [showUrl, setShowUrl] = useState();
   const [saved, setSaved] = useState(0);
   const [message, setMessage] = useState();
-  const { data } = useFetch(`/api/websites`, {}, [saved]);
+  const { data } = useFetch(`/api/websites` + (user.is_admin ? '?include_all=true' : ''), {}, [
+    saved,
+  ]);
 
   const Buttons = row => (
     <ButtonLayout align="right">
@@ -55,15 +59,27 @@ export default function WebsiteSettings() {
         tooltipId={`button-code-${row.website_id}`}
         onClick={() => setShowCode(row)}
       />
-      <Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
-        <FormattedMessage id="label.edit" defaultMessage="Edit" />
-      </Button>
-      <Button icon={<Reset />} size="small" onClick={() => setResetWebsite(row)}>
-        <FormattedMessage id="label.reset" defaultMessage="Reset" />
-      </Button>
-      <Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
-        <FormattedMessage id="label.delete" defaultMessage="Delete" />
-      </Button>
+      <Button
+        icon={<Pen />}
+        size="small"
+        tooltip={<FormattedMessage id="label.edit" defaultMessage="Edit" />}
+        tooltipId={`button-edit-${row.website_id}`}
+        onClick={() => setEditWebsite(row)}
+      />
+      <Button
+        icon={<Reset />}
+        size="small"
+        tooltip={<FormattedMessage id="label.reset" defaultMessage="Reset" />}
+        tooltipId={`button-reset-${row.website_id}`}
+        onClick={() => setResetWebsite(row)}
+      />
+      <Button
+        icon={<Trash />}
+        size="small"
+        tooltip={<FormattedMessage id="label.delete" defaultMessage="Delete" />}
+        tooltipId={`button-delete-${row.website_id}`}
+        onClick={() => setDeleteWebsite(row)}
+      />
     </ButtonLayout>
   );
 
@@ -74,6 +90,30 @@ export default function WebsiteSettings() {
     </Link>
   );
 
+  const adminColumns = [
+    {
+      key: 'name',
+      label: <FormattedMessage id="label.name" defaultMessage="Name" />,
+      className: 'col-4 col-xl-3',
+      render: DetailsLink,
+    },
+    {
+      key: 'domain',
+      label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
+      className: 'col-4 col-xl-3',
+    },
+    {
+      key: 'account',
+      label: <FormattedMessage id="label.owner" defaultMessage="Owner" />,
+      className: 'col-4 col-xl-1',
+    },
+    {
+      key: 'action',
+      className: classNames(styles.buttons, 'col-12 col-xl-5 pt-2 pt-xl-0'),
+      render: Buttons,
+    },
+  ];
+
   const columns = [
     {
       key: 'name',
@@ -137,7 +177,7 @@ export default function WebsiteSettings() {
           <FormattedMessage id="label.add-website" defaultMessage="Add website" />
         </Button>
       </PageHeader>
-      <Table columns={columns} rows={data} empty={empty} />
+      <Table columns={user.is_admin ? adminColumns : columns} rows={data} empty={empty} />
       {editWebsite && (
         <Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
           <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />