From f10655841aac3bef5bc6ca7ebcd90a0f466aed3d Mon Sep 17 00:00:00 2001
From: Nelson Kopliku <nelson.kopliku@suse.com>
Date: Tue, 16 Jul 2024 08:59:03 +0200
Subject: [PATCH] Add basic activity log page loading activity log from api

---
 .../pages/ActivityLogPage/ActivityLogPage.jsx | 31 +++++++++++++++++++
 assets/js/pages/ActivityLogPage/index.js      |  3 ++
 assets/js/pages/Layout/Layout.jsx             |  6 ++++
 assets/js/trento.jsx                          |  5 +++
 4 files changed, 45 insertions(+)
 create mode 100644 assets/js/pages/ActivityLogPage/ActivityLogPage.jsx
 create mode 100644 assets/js/pages/ActivityLogPage/index.js

diff --git a/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx b/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx
new file mode 100644
index 0000000000..69122d7702
--- /dev/null
+++ b/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+import { logError } from '@lib/log';
+
+import { getActivityLog } from '../../lib/api/activityLogs';
+
+export default function ActivityLogPage() {
+  const [activityLog, setActivityLog] = useState([]);
+  // const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    getActivityLog()
+      .then((response) => {
+        setActivityLog(response.data);
+        // setIsLoading(false);
+      })
+      .catch((e) => logError(e));
+  }, []);
+
+  return (
+    <div>
+      {activityLog.map(({ id, occurred_on, type }) => (
+        <div key={id}>
+          <div>
+            {occurred_on} - {type}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/assets/js/pages/ActivityLogPage/index.js b/assets/js/pages/ActivityLogPage/index.js
new file mode 100644
index 0000000000..896206b0e2
--- /dev/null
+++ b/assets/js/pages/ActivityLogPage/index.js
@@ -0,0 +1,3 @@
+import ActivityLogPage from './ActivityLogPage';
+
+export default ActivityLogPage;
diff --git a/assets/js/pages/Layout/Layout.jsx b/assets/js/pages/Layout/Layout.jsx
index 7d5153433d..a2ba6bf4e7 100644
--- a/assets/js/pages/Layout/Layout.jsx
+++ b/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',
diff --git a/assets/js/trento.jsx b/assets/js/trento.jsx
index 9189533692..4c21597476 100644
--- a/assets/js/trento.jsx
+++ b/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 />