Remove TRACE level and add help text

Author: Koenvh1

src/components/Connections.tsx

@@ -2,13 +2,39 @@ import React, { useState } from 'react';
 import RrdpTable from './connections/RrdpTable';
 import RsyncTable from './connections/RsyncTable';
 import Status from './connections/Status';
+import Help from './Help';
 
 export default function Connections() {
   const [level, setLevel] = useState<number>(5);
 
   return (
     <div id="connections">
-      <h3>Minimum log level</h3>
+      <h3>Maximum log level
+        <Help>
+          <h2>Maximum log level</h2>
+          <p>
+            The maximum log level determines which publication points are 
+            shown in the RRDP and rsync tables. By selecting <span className='log-label WARN'>WARN</span>, only 
+            publication points with an <span className='log-label ERROR'>ERROR</span> and/or <span className='log-label WARN'>WARN</span> log message
+            are shown.
+          </p>
+          <p>
+            The log messages that can be shown also depends on the <code>log-level</code> setting in your Routinator config. If your <code>log-level</code> is
+            set to <code>WARN</code>, the UI will never show any <span className='log-label INFO'>INFO</span> messages.
+          </p>
+        </Help>
+      </h3>
+
+      <label>
+        <input 
+          type='radio'
+          name='log-level'
+          value='5'
+          checked={level === 5}
+          onChange={e => setLevel(Number(e.target.value))}
+          /> 
+        Display all
+      </label>
       <label>
         <input 
           type='radio'
@@ -49,26 +75,6 @@ export default function Connections() {
           /> 
         <span className='log-label DEBUG'>DEBUG</span>
       </label>
-      <label>
-        <input 
-          type='radio'
-          name='log-level'
-          value='4'
-          checked={level === 4}
-          onChange={e => setLevel(Number(e.target.value))}
-          /> &nbsp;
-        <span className='log-label TRACE'>TRACE</span>
-      </label>
-      <label>
-        <input 
-          type='radio'
-          name='log-level'
-          value='5'
-          checked={level === 5}
-          onChange={e => setLevel(Number(e.target.value))}
-          /> 
-        Display all
-      </label>
       <h3>Rrdp</h3>
       <RrdpTable level={level} />
       <div className="side-by-side">

src/style/connections.css

@@ -13,6 +13,13 @@
   margin: 1rem 0 0 0;
 }
 
+#connections .help {
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--grey-dark);
+  margin-top: -0.2rem;
+}
+
 #connections label input {
   margin-right: 0.3rem;
 }