Add icon in table (and update styling)

Author: Koenvh1

src/components/LogMessages.tsx

@@ -1,28 +1,53 @@
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
+import { Issue } from '../types';
 
 interface LogMessagesProps {
   text: string;
-  children: JSX.Element | JSX.Element[];
+  issues: Issue[];
+  type: string;
 }
 
-export default function LogMessages({ text, children }: LogMessagesProps) {
+export default function LogMessages({ text, issues, type }: LogMessagesProps) {
   const [show, setShow] = useState<boolean>(false);
 
+  // Please make sure you check that issues.length > 0
+  const logLevels = ["ERROR", "WARN", "INFO", "DEBUG", "TRACE", "NONE"];
+  let logLevel = Math.min(...issues.map(issue => logLevels.indexOf(issue.level)));
+  let logLevelText = logLevels[logLevel];
+
   return (
     <>
-      <a href='#' onClick={() => setShow(!show)}>
-        {text}
-      </a>
+      <span onClick={() => setShow(!show)}>  
+        <div className='log-label-container'>
+          <span className={`log-label ${logLevelText}`}>{logLevelText.slice(0, 1)}</span>
+        </div>
+        <a href='#'>
+          {text}
+        </a>
+      </span>
       {createPortal(
-        <div
-          className={`log-overlay ${show ? 'visible' : 'hidden'}`}
-          onClick={() => setShow(false)}
-        >
-          <div className="bar">{show && children}</div>
-        </div>,
+        <>
+          <div
+            className={`log-overlay ${show ? 'visible' : 'hidden'}`}
+            onClick={() => setShow(false)}
+          >
+            <div className="bar">{show && <>
+              <h2>{type} log messages</h2> 
+              <div className='log-messages'>
+              {issues.map(issue => <div className=''>
+                <div className='log-label-container'>
+                  <span className={`log-label ${issue.level}`}>{issue.level}</span>
+                </div>
+                <span className='message'>{issue.messages}</span>
+              </div>)}
+              </div>
+            </>}
+            </div>
+          </div>
+        </>,
         document.body,
-        'help'
+        'log-messages'
       )}
     </>
   );

src/components/connections/RrdpTable.tsx

@@ -60,18 +60,11 @@ export default function RrdpTable() {
             {values.map(([key, rrdp]: [string, Rrdp]) => (
               <tr key={key}>
                 <th role="column" title={key}>
-                  {!rrdp.issues && <span>{key}</span>}
-                  {rrdp.issues && <LogMessages text={key}>
-                    <h2>RRDP log messages</h2>
-                    <table className='log-messages'>
-                      <tbody>
-                        {rrdp.issues.map(issue => <tr>
-                          <td><span className={`label ${issue.level}`}>{issue.level}</span></td>
-                          <td><span className='message'>{issue.messages}</span></td>
-                        </tr>)}
-                      </tbody>
-                    </table>
-                  </LogMessages>}
+                  {rrdp.issues.length == 0 && <span>{key}</span>}
+                  {rrdp.issues.length > 0 && <LogMessages 
+                    text={key} 
+                    issues={rrdp.issues} 
+                    type='RRDP' />}
                 </th>
                 <td>
                   <Duration value={rrdp.duration} max={maxDuration} />

src/components/connections/RsyncTable.tsx

@@ -53,18 +53,11 @@ export default function RsyncTable() {
               ([key, rsync]: [string, Rsync]) => (
                 <tr key={key}>
                   <th role="column" title={key}>
-                    {!rsync.issues && <span>{key}</span>}
-                    {rsync.issues && <LogMessages text={key}>
-                      <h2>rsync log messages</h2>
-                      <table className='log-messages'>
-                        <tbody>
-                          {rsync.issues.map(issue => <tr>
-                            <td><span className={`label ${issue.level}`}>{issue.level}</span></td>
-                            <td><span className='message'>{issue.messages}</span></td>
-                          </tr>)}
-                        </tbody>
-                      </table>
-                    </LogMessages>}
+                    {rsync.issues.length == 0 && <span>{key}</span>}
+                    {rsync.issues.length > 0 && <LogMessages 
+                      text={key} 
+                      issues={rsync.issues} 
+                      type='rsync' />}
                   </th>
                   <td>
                     <Duration value={rsync.duration} max={maxDuration} />

src/style/log-messages.css

@@ -62,42 +62,43 @@
     width: 100%;    
 }
 
-.log-messages td {
-    padding: 0.2rem;
+.log-messages div {
+    padding: 0.1rem 0;
 }
 
-.log-messages td:first-child {
-    text-align: right;
-    width: 1%;
+.log-label {
+    border-radius: 0.3rem;
+    padding: 0.2rem 0.4rem;
+    font-weight: bold;
+    font-family: monospace, monospace;
 }
 
-.log-messages .label {
-    border-radius: 0.2rem;
-    padding: 0.2rem;
-    font-weight: bold;
+.log-label-container {
+  display: inline-block;
+  margin-right: 0.5rem;
 }
 
-.log-messages .label.TRACE {
+.log-label.TRACE {
     background-color: white;
     color: black;
 }
 
-.log-messages .label.DEBUG {
-    background-color: white;
+.log-label.DEBUG {
+    background-color: #EEEEEE;
     color: black;
 }
 
-.log-messages .label.INFO {
+.log-label.INFO {
     background-color: #1976D2;
     color: white;
 }
 
-.log-messages .label.WARN {
+.log-label.WARN {
     background-color: #FFA000;
     color: white;
 }
 
-.log-messages .label.ERROR {
+.log-label.ERROR {
     background-color: #E64A19;
     color: white;
 }

src/types.ts

@@ -90,7 +90,7 @@ export interface Rrdp {
   session?: null | string;
   delta?: boolean;
   snapshot_reason?: null;
-  issues?: Issue[];
+  issues: Issue[];
 }
 
 export interface Rsync {