Activity log page (#2774)

* Add activity log retriveal network operation

* Add loading state capabilities to ActivityLogOverview

* Add ActivityLogPage

* Mount ActivityLogPage in the application

assets/js/common/ActivityLogOverview/ActivityLogOverview.jsx

@@ -92,6 +92,7 @@ export const toRenderedEntry = (entry) => ({
 function ActivityLogOverview({
   activityLog,
   activityLogDetailModalOpen = false,
+  loading = false,
   onActivityLogEntryClick = noop,
   onCloseActivityLogEntryDetails = noop,
 }) {
@@ -156,6 +157,7 @@ function ActivityLogOverview({
       <Table
         config={activityLogTableConfig}
         data={activityLog.map(toRenderedEntry)}
+        emptyStateText={loading ? 'Loading...' : 'No data available'}
       />
     </>
   );

assets/js/common/ActivityLogOverview/ActivityLogOverview.stories.jsx

@@ -12,6 +12,10 @@ export default {
         type: 'array',
       },
     },
+    loading: {
+      description: 'Display loading state of the component',
+      control: { type: 'boolean' },
+    },
   },
 };
 
@@ -21,6 +25,13 @@ export const Default = {
   },
 };
 
+export const Loading = {
+  args: {
+    loading: true,
+    activityLog: [],
+  },
+};
+
 export const Empty = {
   args: {
     activityLog: [],

assets/js/common/ActivityLogOverview/ActivityLogOverview.test.jsx

@@ -37,6 +37,12 @@ describe('Activity Log Overview', () => {
     expect(screen.getByText('No data available')).toBeVisible();
   });
 
+  it('should render a loading activity log', () => {
+    render(<ActivityLogOverview activityLog={[]} loading />);
+
+    expect(screen.getByText('Loading...')).toBeVisible();
+  });
+
   const scenarios = [
     {
       name: LOGIN_ATTEMPT,

assets/js/lib/api/activityLogs.js

@@ -0,0 +1,3 @@
+import { networkClient } from '@lib/network';
+
+export const getActivityLog = () => networkClient.get(`/activity_log`);

assets/js/pages/ActivityLogPage/ActivityLogPage.jsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+
+import PageHeader from '@common/PageHeader';
+import ActivityLogOverview from '@common/ActivityLogOverview';
+
+import { getActivityLog } from '@lib/api/activityLogs';
+
+function ActivityLogPage() {
+  const [activityLog, setActivityLog] = useState([]);
+  const [isLoading, setLoading] = useState(true);
+  const [activityLogDetailModalOpen, setActivityLogDetailModalOpen] =
+    useState(false);
+
+  useEffect(() => {
+    getActivityLog()
+      .then((response) => {
+        setActivityLog(response.data);
+      })
+      .catch(() => setActivityLog([]))
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <>
+      <PageHeader className="font-bold">Activity Log</PageHeader>
+      <ActivityLogOverview
+        activityLogDetailModalOpen={activityLogDetailModalOpen}
+        activityLog={activityLog}
+        loading={isLoading}
+        onActivityLogEntryClick={() => setActivityLogDetailModalOpen(true)}
+        onCloseActivityLogEntryDetails={() =>
+          setActivityLogDetailModalOpen(false)
+        }
+      />
+    </>
+  );
+}
+
+export default ActivityLogPage;

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

@@ -0,0 +1,52 @@
+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 } from '@lib/test-utils/factories/activityLog';
+
+import ActivityLogPage from './ActivityLogPage';
+
+const axiosMock = new MockAdapter(networkClient);
+
+describe('ActivityLogPage', () => {
+  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 () => {
+    axiosMock
+      .onGet('/api/v1/activity_log')
+      .reply(200, activityLogEntryFactory.buildList(5));
+
+    const { container } = await act(() =>
+      renderWithRouter(<ActivityLogPage />)
+    );
+
+    expect(container.querySelectorAll('tbody > tr')).toHaveLength(5);
+  });
+});

assets/js/pages/ActivityLogPage/index.js

@@ -0,0 +1,3 @@
+import ActivityLogPage from './ActivityLogPage';
+
+export default ActivityLogPage;

assets/js/pages/Layout/Layout.jsx

@@ -18,6 +18,7 @@ import {
   EOS_KEYBOARD_DOUBLE_ARROW_LEFT,
   EOS_KEYBOARD_DOUBLE_ARROW_RIGHT,
   EOS_SUPERVISED_USER_CIRCLE_OUTLINED,
+  EOS_ASSIGNMENT,
 } from 'eos-icons-react';
 
 import TrentoLogo from '@static/trento-logo-stacked.svg';
@@ -59,6 +60,11 @@ const navigation = [
     icon: EOS_SUPERVISED_USER_CIRCLE_OUTLINED,
     permittedFor: ['all:users'],
   },
+  {
+    name: 'Activity Log',
+    href: '/activity_log',
+    icon: EOS_ASSIGNMENT,
+  },
   {
     name: 'Settings',
     href: '/settings',

assets/js/trento.jsx

@@ -40,6 +40,7 @@ import SettingsPage from '@pages/SettingsPage';
 import SomethingWentWrong from '@pages/SomethingWentWrong';
 import UsersPage, { CreateUserPage, EditUserPage } from '@pages/Users';
 import ProfilePage from '@pages/Profile';
+import ActivityLogPage from '@pages/ActivityLogPage';
 
 import { profile } from '@lib/auth';
 import { networkClient } from '@lib/network';
@@ -113,6 +114,7 @@ const createRouter = ({ getUser }) =>
                 path="hosts/:hostID/patches/:advisoryID"
                 element={<AdvisoryDetailsPage />}
               />
+              <Route path="activity_log" element={<ActivityLogPage />} />
               <Route
                 element={
                   <ForbiddenGuard permitted={['all:users']} outletMode />