Add ActivityLogPage

assets/js/pages/ActivityLogPage/ActivityLogPage.jsx

@@ -1,31 +1,31 @@
 import React, { useState, useEffect } from 'react';
 
-import { logError } from '@lib/log';
+import PageHeader from '@common/PageHeader';
+import ActivityLogOverview from '@common/ActivityLogOverview';
 
-import { getActivityLog } from '../../lib/api/activityLogs';
+import { getActivityLog } from '@lib/api/activityLogs';
 
-export default function ActivityLogPage() {
+function ActivityLogPage() {
   const [activityLog, setActivityLog] = useState([]);
-  // const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
     getActivityLog()
       .then((response) => {
         setActivityLog(response.data);
-        // setIsLoading(false);
       })
-      .catch((e) => logError(e));
+      .catch(() => setActivityLog([]))
+      .finally(() => {
+        setLoading(false);
+      });
   }, []);
 
   return (
-    <div>
-      {activityLog.map(({ id, occurred_on, type }) => (
-        <div key={id}>
-          <div>
-            {occurred_on} - {type}
-          </div>
-        </div>
-      ))}
-    </div>
+    <>
+      <PageHeader className="font-bold">Activity Log</PageHeader>
+      <ActivityLogOverview activityLog={activityLog} loading={isLoading} />
+    </>
   );
 }
+
+export default ActivityLogPage;

assets/js/pages/ActivityLogPage/ActivityLogPage.test.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { act, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import MockAdapter from 'axios-mock-adapter';
+import { renderWithRouter } from '@lib/test-utils';
+
+import { networkClient } from '@lib/network';
+import {
+  activityLogEntryFactory,
+  taggingMetadataFactory,
+} from '@lib/test-utils/factories/activityLog';
+
+import {
+  RESOURCE_TAGGING,
+  RESOURCE_UNTAGGING,
+  LOGIN_ATTEMPT,
+} from '@lib/model/activityLog';
+
+import ActivityLogPage from './ActivityLogPage';
+
+const axiosMock = new MockAdapter(networkClient);
+
+describe('ActivityLogPage', () => {
+  // beforeEach(() => {
+  //   jest.spyOn(console, 'error').mockImplementation(() => null);
+  // });
+
+  afterEach(() => {
+    // axiosMock.reset();
+    // jest.clearAllMocks();
+  });
+
+  it('should render table without data', async () => {
+    axiosMock.onGet('/api/v1/activity_log').reply(200, []);
+    await act(async () => renderWithRouter(<ActivityLogPage />));
+    expect(screen.getByText('No data available')).toBeVisible();
+  });
+
+  it.each`
+    responseStatus | responseBody
+    ${404}         | ${[]}
+    ${500}         | ${{ error: 'Internal Server Error' }}
+    ${503}         | ${null}
+    ${504}         | ${''}
+  `(
+    'should render empty activity log on error `$responseStatus`',
+    async ({ responseStatus, responseBody }) => {
+      axiosMock
+        .onGet('/api/v1/activity_log')
+        .reply(responseStatus, responseBody);
+
+      await act(() => renderWithRouter(<ActivityLogPage />));
+
+      expect(screen.getByText('No data available')).toBeVisible();
+    }
+  );
+
+  it('should render tracked activity log', async () => {
+    const successfulLoginAttempt = activityLogEntryFactory.build({
+      type: LOGIN_ATTEMPT,
+    });
+    const hostTagging = activityLogEntryFactory.build({
+      type: RESOURCE_TAGGING,
+      metadata: taggingMetadataFactory.build({ resource_type: 'host' }),
+    });
+    const hanaDatabaseUntagging = activityLogEntryFactory.build({
+      type: RESOURCE_UNTAGGING,
+      metadata: taggingMetadataFactory.build({ resource_type: 'database' }),
+    });
+
+    axiosMock
+      .onGet('/api/v1/activity_log')
+      .reply(200, [successfulLoginAttempt, hostTagging, hanaDatabaseUntagging]);
+
+    await act(() => renderWithRouter(<ActivityLogPage />));
+
+    expect(screen.getByText('Login Attempt')).toBeVisible();
+    expect(screen.getByText('Tag Added')).toBeVisible();
+    expect(screen.getByText('Host')).toBeVisible();
+    expect(screen.getByText('Tag Removed')).toBeVisible();
+    expect(screen.getByText('Database')).toBeVisible();
+  });
+});