From 3ff0539a259044a709a50a18f375ea31b6fbeadf Mon Sep 17 00:00:00 2001
From: Nelson Kopliku <nelson.kopliku@suse.com>
Date: Fri, 19 Jul 2024 15:37:48 +0200
Subject: [PATCH] Iconify log level

---
 .../ActivityLogDetailModal.jsx                | 15 +++++++---
 .../ActivityLogOverview.jsx                   | 28 +++++++++++++++++--
 .../ActivityLogOverview.test.jsx              | 12 ++++----
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/assets/js/common/ActivityLogDetailsModal/ActivityLogDetailModal.jsx b/assets/js/common/ActivityLogDetailsModal/ActivityLogDetailModal.jsx
index 43fc81ba4e..f2a6356cc1 100644
--- a/assets/js/common/ActivityLogDetailsModal/ActivityLogDetailModal.jsx
+++ b/assets/js/common/ActivityLogDetailsModal/ActivityLogDetailModal.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { noop } from 'lodash';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 import Button from '@common/Button';
 import Modal from '@common/Modal';
@@ -19,6 +21,7 @@ import {
   USER_DELETION,
   USER_MODIFICATION,
 } from '@lib/model/activityLog';
+import classNames from 'classnames';
 
 const activityTypesLabels = {
   [LOGIN_ATTEMPT]: 'Login Attempt',
@@ -85,7 +88,9 @@ const toResource = (activityLogEntry) => {
 };
 
 const renderMetadata = (metadata) => (
-  <pre>{JSON.stringify(metadata, null, 2)}</pre>
+  <ReactMarkdown className="markdown text-sm" remarkPlugins={[remarkGfm]}>
+    {`\`\`\`json\n${JSON.stringify(metadata, null, 2)}\n\`\`\``}
+  </ReactMarkdown>
 );
 
 const renderType = (type) => activityTypesLabels[type] ?? type;
@@ -105,7 +110,9 @@ function ActivityLogDetailModal({ open = false, entry, onClose = noop }) {
     title: keyToLabel[key] || key,
     content: key === 'resource' ? entry : entry[key],
     render: keyRenderers[key] || undefined,
-    className: 'col-span-5',
+    className: classNames('col-span-5', {
+      'text-gray-500': key !== 'metadata',
+    }),
   }));
 
   return (
@@ -116,12 +123,12 @@ function ActivityLogDetailModal({ open = false, entry, onClose = noop }) {
       onClose={onClose}
     >
       <ListView
-        titleClassName="col-span-2"
+        titleClassName="col-span-2 text-gray-500"
         className="text-sm"
         orientation="horizontal"
         data={data}
       />
-      <div className="flex flex-row w-1/6 space-x-2">
+      <div className="flex flex-row w-24 space-x-2 mt-3">
         <Button type="primary-white" className="w-1/2" onClick={onClose}>
           Close
         </Button>
diff --git a/assets/js/common/ActivityLogOverview/ActivityLogOverview.jsx b/assets/js/common/ActivityLogOverview/ActivityLogOverview.jsx
index 80b7d01f81..89d82d016d 100644
--- a/assets/js/common/ActivityLogOverview/ActivityLogOverview.jsx
+++ b/assets/js/common/ActivityLogOverview/ActivityLogOverview.jsx
@@ -1,7 +1,15 @@
 import React, { useState } from 'react';
 import { noop } from 'lodash';
-import { EOS_KEYBOARD_ARROW_RIGHT_FILLED } from 'eos-icons-react';
+import {
+  EOS_BUG_REPORT_OUTLINED,
+  EOS_ERROR_OUTLINED,
+  EOS_INFO_OUTLINED,
+  EOS_KEYBOARD_ARROW_RIGHT_FILLED,
+  EOS_QUESTION_MARK,
+  EOS_WARNING_OUTLINED,
+} from 'eos-icons-react';
 import Table from '@common/Table';
+import Tooltip from '@common/Tooltip';
 
 import {
   API_KEY_GENERATION,
@@ -58,6 +66,12 @@ const toMessage = (activityLogEntry) => {
   }
 };
 
+const logLevelToIcon = {
+  [LEVEL_DEBUG]: <EOS_BUG_REPORT_OUTLINED className="w-full" />,
+  [LEVEL_INFO]: <EOS_INFO_OUTLINED className="w-full" />,
+  [LEVEL_WARNING]: <EOS_WARNING_OUTLINED className="fill-yellow-500 w-full" />,
+  [LEVEL_ERROR]: <EOS_ERROR_OUTLINED className="fill-red-500 w-full" />,
+};
 const logLevelToLabel = {
   [LEVEL_DEBUG]: 'Debug',
   [LEVEL_INFO]: 'Info',
@@ -71,7 +85,7 @@ export const toRenderedEntry = (entry) => ({
   time: format(entry.occurred_on, 'yyyy-MM-dd HH:mm:ss'),
   message: toMessage(entry),
   user: entry.actor,
-  level: logLevelToLabel[entry.level] ?? 'Unknown',
+  level: entry.level,
   metadata: entry.metadata,
 });
 
@@ -102,6 +116,16 @@ function ActivityLogOverview({
       {
         title: 'Level',
         key: 'level',
+        className: 'text-center',
+        render: (level) => (
+          <Tooltip content={logLevelToLabel[level] ?? 'Unknown'} wrap={false}>
+            <span aria-label={`log-level-${level}`}>
+              {logLevelToIcon[level] ?? (
+                <EOS_QUESTION_MARK className="w-full" />
+              )}
+            </span>
+          </Tooltip>
+        ),
       },
       {
         title: '',
diff --git a/assets/js/common/ActivityLogOverview/ActivityLogOverview.test.jsx b/assets/js/common/ActivityLogOverview/ActivityLogOverview.test.jsx
index ec1e1feadc..2bcb91c591 100644
--- a/assets/js/common/ActivityLogOverview/ActivityLogOverview.test.jsx
+++ b/assets/js/common/ActivityLogOverview/ActivityLogOverview.test.jsx
@@ -48,7 +48,7 @@ describe('Activity Log Overview', () => {
       }),
       expectedUser: 'admin',
       expectedMessage: 'User logged in',
-      expectedLevel: 'Debug',
+      expectedLevel: 'debug',
     },
     {
       name: RESOURCE_TAGGING,
@@ -64,7 +64,7 @@ describe('Activity Log Overview', () => {
       }),
       expectedUser: 'foo',
       expectedMessage: 'Tag "bar" added to "foo-bar"',
-      expectedLevel: 'Info',
+      expectedLevel: 'info',
     },
     {
       name: RESOURCE_UNTAGGING,
@@ -80,7 +80,7 @@ describe('Activity Log Overview', () => {
       }),
       expectedUser: 'bar',
       expectedMessage: 'Tag "foo" removed from "bar-foo"',
-      expectedLevel: 'Warning',
+      expectedLevel: 'warning',
     },
     {
       name: API_KEY_GENERATION,
@@ -91,7 +91,7 @@ describe('Activity Log Overview', () => {
       }),
       expectedUser: 'baz',
       expectedMessage: 'API Key was generated',
-      expectedLevel: 'Error',
+      expectedLevel: 'error',
     },
     {
       name: SAVING_SUMA_SETTINGS,
@@ -175,7 +175,9 @@ describe('Activity Log Overview', () => {
       expect(screen.getByText(expectedMessage)).toBeVisible();
       expect(screen.getByText(expectedUser)).toBeVisible();
       if (expectedLevel) {
-        expect(screen.getByText(expectedLevel)).toBeVisible();
+        expect(
+          screen.getByLabelText(`log-level-${expectedLevel}`)
+        ).toBeVisible();
       }
     }
   );