Add website/reports to top nav.

components/pages/reports/ReportsPage.js

@@ -1,13 +1,24 @@
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import Link from 'next/link';
-import { Button, Icon, Icons, Text } from 'react-basics';
 import { useMessages, useReports } from 'hooks';
+import Link from 'next/link';
+import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
 import ReportsTable from './ReportsTable';
 
 export function ReportsPage() {
-  const { formatMessage, labels } = useMessages();
-  const { reports, error, isLoading } = useReports();
+  const { formatMessage, labels, messages } = useMessages();
+  const {
+    reports,
+    error,
+    isLoading,
+    filter,
+    handleFilterChange,
+    handlePageChange,
+    handlePageSizeChange,
+  } = useReports();
+
+  const hasData = (reports && reports?.data.length !== 0) || filter;
 
   return (
     <Page loading={isLoading} error={error}>
@@ -21,7 +32,22 @@ export function ReportsPage() {
           </Button>
         </Link>
       </PageHeader>
-      <ReportsTable data={reports} />
+
+      {hasData && (
+        <ReportsTable
+          data={reports}
+          showSearch={true}
+          showPaging={true}
+          onFilterChange={handleFilterChange}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          filterValue={filter}
+          showDomain={true}
+        />
+      )}
+      {!hasData && (
+        <EmptyPlaceholder message={formatMessage(messages.noReportsConfigured)}></EmptyPlaceholder>
+      )}
     </Page>
   );
 }

components/pages/reports/ReportsTable.js

@@ -12,14 +12,23 @@ export function ReportsTable({
   onFilterChange,
   onPageChange,
   onPageSizeChange,
+  showDomain,
 }) {
   const [report, setReport] = useState(null);
   const { formatMessage, labels } = useMessages();
 
+  const domainColumn = [
+    {
+      name: 'domain',
+      label: formatMessage(labels.domain),
+    },
+  ];
+
   const columns = [
     { name: 'name', label: formatMessage(labels.name) },
     { name: 'description', label: formatMessage(labels.description) },
     { name: 'type', label: formatMessage(labels.type) },
+    ...(showDomain ? domainColumn : []),
     { name: 'action', label: ' ' },
   ];
 
@@ -41,6 +50,9 @@ export function ReportsTable({
       >
         {row => {
           const { id } = row;
+          if (showDomain) {
+            row.domain = row.website.domain;
+          }
 
           return (
             <Flexbox gap={10}>