Activity Log UI inception

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,70 @@
+import React, { useState, useEffect } from 'react';
+
+import { logError } from '@lib/log';
+
+import Table from '@common/Table';
+import { getActivityLog } from '../../lib/api/activityLogs';
+
+function ActivityLogPage() {
+  const [activityLog, setActivityLog] = useState([]);
+  // const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    getActivityLog()
+      .then((response) => {
+        setActivityLog(response.data);
+        // setIsLoading(false);
+      })
+      .catch((e) => logError(e));
+  }, []);
+
+  const config = {
+    pagination: true,
+    usePadding: false,
+    columns: [
+      {
+        title: 'Time',
+        key: 'occurred_on',
+      },
+      {
+        title: 'Event Type',
+        key: 'type',
+      },
+      {
+        title: 'Resource',
+        key: 'metadata',
+        render: ({ resource_type }, { type }) => {
+          if (['resource_tagging', 'resource_untagging'].includes(type)) {
+            return resource_type;
+          }
+          return 'Resource unavailable';
+        },
+      },
+      {
+        title: 'User',
+        key: 'actor',
+      },
+      {
+        title: 'Message',
+        key: 'metadata',
+        render: (content, { type }) => {
+          if (type === 'resource_tagging') {
+            const { added_tag, resource_id } = content;
+            return `Tag "${added_tag}" added to "${resource_id}"`;
+          }
+
+          if (type === 'resource_untagging') {
+            const { removed_tag, resource_id } = content;
+            return `Tag "${removed_tag}" removed to "${resource_id}"`;
+          }
+
+          return 'message unavailable';
+        },
+      },
+    ],
+  };
+
+  return <Table config={config} data={activityLog} />;
+}
+
+export default ActivityLogPage;

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,12 @@ const navigation = [
     icon: EOS_SUPERVISED_USER_CIRCLE_OUTLINED,
     permittedFor: ['all:users'],
   },
+  {
+    name: 'Activity Log',
+    href: '/activity_log',
+    icon: EOS_ASSIGNMENT,
+    // permittedFor: ['all:users'],
+  },
   {
     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,10 @@ const createRouter = ({ getUser }) =>
                 path="hosts/:hostID/patches/:advisoryID"
                 element={<AdvisoryDetailsPage />}
               />
+              <Route
+                path="activity_log"
+                element={<ActivityLogPage />}
+              />
               <Route
                 element={
                   <ForbiddenGuard permitted={['all:users']} outletMode />