wallet logs: less visual clutter, refactor (#2369)

* Remove unnecessary initial state for template logs

* Rename skip to noFetch

* Remove outdated TODO

* Cleaner wallet template logs + refactor

wallets/client/components/logger.js

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useState, Fragment } from 'react'
 import { timeSince } from '@/lib/time'
 import classNames from 'classnames'
 import { ModalClosedError } from '@/components/modal'
+import { isTemplate } from '@/wallets/lib/util'
 
 // TODO(wallet-v2):
 //   when we delete logs for a protocol, the cache is not updated
@@ -28,40 +29,105 @@ export function WalletLogs ({ protocol, className, debug }) {
 
   const embedded = !!protocol
 
+  // avoid unnecessary clutter when attaching new wallet
+  const hideLogs = logs.length === 0 && protocol && isTemplate(protocol)
+  if (hideLogs) return null
+
+  // showing delete button and logs footer for temporary template logs is unnecessary clutter
+  const template = protocol && isTemplate(protocol)
+
   return (
-    <>
+    <div className={className}>
-      <div className={classNames('d-flex w-100 align-items-center mb-3', className)}>
+      {!template && (
-        <span
+        <div className='d-flex w-100 align-items-center mb-3'>
-          style={{ cursor: 'pointer' }}
+          <span
-          className='text-muted fw-bold nav-link ms-auto' onClick={onDelete}
+            style={{ cursor: 'pointer' }}
-        >clear logs
+            className='text-muted fw-bold nav-link ms-auto' onClick={onDelete}
-        </span>
+          >clear logs
-      </div>
+          </span>
+        </div>
+      )}
       <div className={classNames(styles.container, embedded && styles.embedded)}>
         {logs.map((log, i) => (
           <LogMessage
             key={i}
-            tag={log.wallet?.name}
+            tag={protocol ? null : log.wallet?.name}
             level={log.level}
             message={log.message}
             context={log.context}
             ts={log.createdAt}
           />
         ))}
-        {loading
+        {!template && <WalletLogsFooter empty={logs.length === 0} loading={loading} hasMore={hasMore} loadMore={loadMore} />}
-          ? <div className='w-100 text-center'>loading...</div>
-          : logs.length === 0 && <div className='w-100 text-center'>empty</div>}
-        {hasMore
-          ? <div className='w-100 text-center'><Button onClick={loadMore} size='sm' className='mt-3'>more</Button></div>
-          : <div className='w-100 text-center'>------ start of logs ------</div>}
       </div>
+    </div>
+  )
+}
+
+function WalletLogsFooter ({ empty, loading, hasMore, loadMore }) {
+  return (
+    <>
+      {loading
+        ? <div className='w-100 text-center'>loading...</div>
+        : empty && <div className='w-100 text-center'>empty</div>}
+      {hasMore
+        ? <div className='w-100 text-center'><Button onClick={loadMore} size='sm' className='mt-3'>more</Button></div>
+        : <div className='w-100 text-center'>------ start of logs ------</div>}
     </>
   )
 }
 
 export function LogMessage ({ tag, level, message, context, ts }) {
-  const [show, setShow] = useState(false)
+  const [showContext, setShowContext] = useState(false)
 
+  const filtered = context
+    ? Object.keys(context)
+      .filter(key => !['send', 'recv', 'status'].includes(key))
+      .reduce((obj, key) => {
+        obj[key] = context[key]
+        return obj
+      }, {})
+    : {}
+
+  const hasContext = context && Object.keys(filtered).length > 0
+  const handleClick = () => {
+    if (hasContext) { setShowContext(show => !show) }
+  }
+  const style = hasContext ? { cursor: 'pointer' } : { cursor: 'inherit' }
+
+  return (
+    <>
+      <div className={styles.row} onClick={handleClick} style={style}>
+        <TimeSince timestamp={ts} />
+        {tag !== null && <Tag tag={tag?.toLowerCase() ?? 'system'} />}
+        <Level level={level} />
+        <Message message={message} />
+        {hasContext && <Indicator show={showContext} />}
+      </div>
+      {hasContext && showContext && <Context context={filtered} />}
+    </>
+  )
+}
+
+function TimeSince ({ timestamp }) {
+  const [time, setTime] = useState(timeSince(new Date(timestamp)))
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(timeSince(new Date(timestamp)))
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [timestamp])
+
+  return <div className={styles.timestamp}>{time}</div>
+}
+
+function Tag ({ tag }) {
+  return <div className={styles.tag}>{`[${tag}]`}</div>
+}
+
+function Level ({ level }) {
   let className
   switch (level.toLowerCase()) {
     case 'ok':
@@ -80,69 +146,29 @@ export function LogMessage ({ tag, level, message, context, ts }) {
       className = 'text-muted'; break
   }
 
-  const filtered = context
+  return <div className={classNames(styles.level, className)}>{level}</div>
-    ? Object.keys(context)
+}
-      .filter(key => !['send', 'recv', 'status'].includes(key))
-      .reduce((obj, key) => {
-        obj[key] = context[key]
-        return obj
-      }, {})
-    : {}
 
-  const hasContext = context && Object.keys(filtered).length > 0
+function Message ({ message }) {
+  return <div className={styles.message}>{message}</div>
+}
 
-  const handleClick = () => {
+function Indicator ({ show }) {
-    if (hasContext) { setShow(show => !show) }
+  return <div className={styles.indicator}>{show ? '-' : '+'}</div>
-  }
+}
-
-  const style = hasContext ? { cursor: 'pointer' } : { cursor: 'inherit' }
-  const indicator = hasContext ? (show ? '-' : '+') : <></>
-
-  // TODO(wallet-v2): show invoice context
 
+function Context ({ context }) {
   return (
-    <>
+    <div className={styles.context}>
-      <div className={styles.row} onClick={handleClick} style={style}>
+      {Object.entries(context)
-        <TimeSince timestamp={ts} />
+        .map(([key, value], i) => {
-        <div className={styles.tag}>{`[${nameToTag(tag)}]`}</div>
+          return (
-        <div className={`${styles.level} ${className}`}>{level}</div>
+            <Fragment key={i}>
-        <div className={styles.message}>{message}</div>
+              <div>{key}:</div>
-        <div className={styles.indicator}>{indicator}</div>
+              <div className='text-break'>{value}</div>
-      </div>
+            </Fragment>
-      {show && hasContext && (
+          )
-        <div className={styles.context}>
+        })}
-          {Object.entries(filtered)
+    </div>
-            .map(([key, value], i) => {
-              return (
-                <Fragment key={i}>
-                  <div>{key}:</div>
-                  <div className='text-break'>{value}</div>
-                </Fragment>
-              )
-            })}
-        </div>
-      )}
-    </>
   )
 }
-
-function nameToTag (name) {
-  switch (name) {
-    case undefined: return 'system'
-    default: return name.toLowerCase()
-  }
-}
-
-function TimeSince ({ timestamp }) {
-  const [time, setTime] = useState(timeSince(new Date(timestamp)))
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTime(timeSince(new Date(timestamp)))
-    }, 1000)
-
-    return () => clearInterval(timer)
-  }, [timestamp])
-
-  return <div className={styles.timestamp}>{time}</div>
-}

wallets/client/hooks/logger.js

@@ -88,21 +88,21 @@ export function useWalletLogs (protocol, debug) {
   const { templateLogs, clearTemplateLogs } = useContext(TemplateLogsContext)
 
   const [cursor, setCursor] = useState(null)
-  // if we're configuring a protocol template, there are no logs to fetch
+  const [logs, setLogs] = useState([])
-  const skip = protocol && isTemplate(protocol)
-  const [logs, setLogs] = useState(skip ? templateLogs : [])
 
   // if no protocol was given, we want to fetch all logs
   const protocolId = protocol ? Number(protocol.id) : undefined
 
+  // if we're configuring a protocol template, there are no logs to fetch
+  const noFetch = protocol && isTemplate(protocol)
   const [fetchLogs, { called, loading, error }] = useLazyQuery(WALLET_LOGS, {
     variables: { protocolId, debug },
-    skip,
+    skip: noFetch,
     fetchPolicy: 'network-only'
   })
 
   useEffect(() => {
-    if (skip) return
+    if (noFetch) return
 
     const interval = setInterval(async () => {
       const { data, error } = await fetchLogs({ variables: { protocolId, debug } })
@@ -118,7 +118,7 @@ export function useWalletLogs (protocol, debug) {
     }, FAST_POLL_INTERVAL)
 
     return () => clearInterval(interval)
-  }, [fetchLogs, called, skip, debug])
+  }, [fetchLogs, called, noFetch, debug])
 
   const loadMore = useCallback(async () => {
     const { data } = await fetchLogs({ variables: { protocolId, cursor, debug } })
@@ -135,14 +135,14 @@ export function useWalletLogs (protocol, debug) {
 
   return useMemo(() => {
     return {
-      loading: skip ? false : (!called ? true : loading),
+      loading: noFetch ? false : (!called ? true : loading),
-      logs: skip ? templateLogs : logs,
+      logs: noFetch ? templateLogs : logs,
       error,
       loadMore,
       hasMore: cursor !== null,
       clearLogs
     }
-  }, [loading, skip, called, templateLogs, logs, error, loadMore, clearLogs])
+  }, [loading, noFetch, called, templateLogs, logs, error, loadMore, clearLogs])
 }
 
 function mapLevelToConsole (level) {