Initial version of repository log messages in UI

Author: Koenvh1

src/components/LogMessages.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface LogMessagesProps {
+  text: string;
+  children: JSX.Element | JSX.Element[];
+}
+
+export default function LogMessages({ text, children }: LogMessagesProps) {
+  const [show, setShow] = useState<boolean>(false);
+
+  return (
+    <>
+      <a href='#' onClick={() => setShow(!show)}>
+        {text}
+      </a>
+      {createPortal(
+        <div
+          className={`log-overlay ${show ? 'visible' : 'hidden'}`}
+          onClick={() => setShow(false)}
+        >
+          <div className="bar">{show && children}</div>
+        </div>,
+        document.body,
+        'help'
+      )}
+    </>
+  );
+}

src/components/connections/RrdpTable.tsx

@@ -3,6 +3,7 @@ import { t, tryFormatNumber } from '../../core/util';
 import { Rrdp } from '../../types';
 import Duration from './Duration';
 import { StatusContext } from '../../hooks/useStatus';
+import LogMessages from '../LogMessages';
 
 type RrdpKey = keyof Rrdp;
 
@@ -59,9 +60,18 @@ export default function RrdpTable() {
             {values.map(([key, rrdp]: [string, Rrdp]) => (
               <tr key={key}>
                 <th role="column" title={key}>
-                  <a href={key} target="_blank" rel="noreferrer">
-                    {key}
-                  </a>
+                  {!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>}
                 </th>
                 <td>
                   <Duration value={rrdp.duration} max={maxDuration} />

src/components/connections/RsyncTable.tsx

@@ -3,6 +3,7 @@ import { t, tryFormatNumber } from '../../core/util';
 import { Rsync } from '../../types';
 import Duration from './Duration';
 import { StatusContext } from '../../hooks/useStatus';
+import LogMessages from '../LogMessages';
 
 type RsyncKey = keyof Rsync;
 
@@ -52,9 +53,18 @@ export default function RsyncTable() {
               ([key, rsync]: [string, Rsync]) => (
                 <tr key={key}>
                   <th role="column" title={key}>
-                    <a href={key} target="_blank" rel="noreferrer">
-                      {key}
-                    </a>
+                    {!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>}
                   </th>
                   <td>
                     <Duration value={rsync.duration} max={maxDuration} />

src/core/util.ts

@@ -54,7 +54,7 @@ export function arrayToCommaSeperated(arr: string[]): string {
 }
 
 export function tryFormatNumber(
-  v: string | number | boolean | null | undefined
+  v: string | number | boolean | any | null | undefined
 ) {
   return Number.isInteger(v) ? (v || 0).toLocaleString('en') : v;
 }

src/style/index.css

@@ -12,3 +12,4 @@
 @import './prefix-check-sidebar.css';
 @import './prefix-check.css';
 @import './help.css';
+@import './log-messages.css';

src/style/log-messages.css

@@ -0,0 +1,106 @@
+.log-overlay {
+  visibility: hidden;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  z-index: 10;
+  transition: all 200ms ease-in-out;
+  opacity: 0;
+}
+
+.log-overlay.visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.log-overlay .bar {
+  position: absolute;
+  right: -100%;
+  width: 85vw;
+  height: 100%;
+  max-width: 90%;
+  line-height: 1.4;
+  background: var(--white);
+  padding: 1.5rem;
+  color: var(--dark);
+  overflow-y: auto;
+  transition: all 200ms ease-in-out;
+}
+
+.log-overlay.visible .bar {
+  right: 0;
+}
+
+.log-overlay .bar h3,
+.log-overlay .bar h2 {
+  font-weight: 500;
+  font-size: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.log-overlay .bar h2 {
+  font-size: 1.2rem;
+}
+
+.log-overlay .bar p {
+  margin-bottom: 0.5rem;
+}
+
+.log-overlay .bar ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+
+.log-messages {
+    width: 100%;    
+}
+
+.log-messages td {
+    padding: 0.2rem;
+}
+
+.log-messages td:first-child {
+    text-align: right;
+}
+
+.log-messages .label {
+    border-radius: 0.2rem;
+    padding: 0.2rem;
+    font-weight: bold;
+}
+
+.log-messages .label.TRACE {
+    background-color: white;
+    color: black;
+}
+
+.log-messages .label.DEBUG {
+    background-color: white;
+    color: black;
+}
+
+.log-messages .label.INFO {
+    background-color: #1976D2;
+    color: white;
+}
+
+.log-messages .label.WARN {
+    background-color: #FFA000;
+    color: white;
+}
+
+.log-messages .label.ERROR {
+    background-color: #E64A19;
+    color: white;
+}
+
+.log-messages .message {
+    font-family: monospace;
+}

src/types.ts

@@ -90,11 +90,18 @@ export interface Rrdp {
   session?: null | string;
   delta?: boolean;
   snapshot_reason?: null;
+  issues?: Issue[];
 }
 
 export interface Rsync {
   status: number;
   duration: number;
+  issues: Issue[];
+}
+
+export interface Issue {
+  level: string;
+  messages: string;
 }
 
 export interface Rtr {