feat: Timeline style updates (#387)

<img width="1323" alt="Screenshot 2023-09-15 at 9 59 14 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/4a6ab3b5-c209-42af-a8f2-4bf956082ab9">
<img width="1323" alt="Screenshot 2023-09-15 at 9 59 18 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/86eb9426-2549-4604-9113-cff019909f24">

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

console/client/src/components/CodeBlock.tsx

@@ -13,6 +13,7 @@ interface Props {
 
 export const CodeBlock = ({ code, language, maxHeight }: Props) => {
   useEffect(() => {
+    hljs.configure({ ignoreUnescapedHTML: true })
     hljs.registerLanguage('graphql', graphql)
     hljs.registerLanguage('json', json)
     hljs.registerLanguage('go', go)
@@ -21,7 +22,7 @@ export const CodeBlock = ({ code, language, maxHeight }: Props) => {
 
   return (
     <pre>
-      <code className={`max-h-[${maxHeight}px] language-${language}`}>{code}</code>
+      <code className={`max-h-[${maxHeight}px] language-${language} text-sm`}>{code}</code>
     </pre>
   )
 }

console/client/src/features/logs/LogLevelBadge.tsx

@@ -0,0 +1,11 @@
+import { logLevelBadge, logLevelText } from './log.utils'
+
+export const LogLevelBadge = ({ logLevel }: { logLevel: number }) => {
+  return (
+    <span
+      className={`${logLevelBadge[logLevel]} inline-flex items-center rounded-md px-2 py-1 text-xs font-medium font-roboto-mono`}
+    >
+      {logLevelText[logLevel]}
+    </span>
+  )
+}

console/client/src/features/logs/LogLevelBadgeSmall.tsx

@@ -0,0 +1,11 @@
+import { logLevelBadge, logLevelCharacter } from './log.utils'
+
+export const LogLevelBadgeSmall = ({ logLevel }: { logLevel: number }) => {
+  return (
+    <span
+      className={`flex rounded justify-center items-center pb-0.5 h-4 w-4 text-xs font-roboto-mono ${logLevelBadge[logLevel]}`}
+    >
+      {`${logLevelCharacter[logLevel]}`}
+    </span>
+  )
+}

console/client/src/features/logs/log.utils.tsx

@@ -0,0 +1,31 @@
+export const logLevelCharacter: { [key: number]: string } = {
+  1: 't',
+  5: 'd',
+  9: 'i',
+  13: 'w',
+  17: 'e',
+}
+
+export const logLevelText: { [key: number]: string } = {
+  1: 'Trace',
+  5: 'Debug',
+  9: 'Info',
+  13: 'Warn',
+  17: 'Error',
+}
+
+export const logLevelColor: { [key: number]: string } = {
+  1: 'text-gray-400 dark:text-gray-400',
+  5: 'text-blue-400 dark:text-blue-400',
+  9: 'text-green-500 dark:text-green-300',
+  13: 'text-yellow-400 dark:text-yellow-300',
+  17: 'text-red-400 dark:text-red-400',
+}
+
+export const logLevelBadge: { [key: number]: string } = {
+  1: `${logLevelColor[1]} bg-blue-300/10 dark:bg-blue-700/30`,
+  5: `${logLevelColor[5]} bg-blue-400/10 dark:bg-blue-800/30`,
+  9: `${logLevelColor[9]} bg-green-400/30 dark:bg-green-700/30`,
+  13: `${logLevelColor[13]} bg-yellow-400/10 dark:bg-yellow-600/30`,
+  17: `${logLevelColor[17]} bg-red-500/10 dark:bg-red-700/30`,
+}

console/client/src/features/timeline/TimelineIcon.tsx

@@ -1,47 +1,31 @@
 import { ListBulletIcon, PhoneArrowDownLeftIcon, PhoneIcon, RocketLaunchIcon } from '@heroicons/react/24/outline'
 import { TimelineEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { LogLevelBadgeSmall } from '../logs/LogLevelBadgeSmall'
 
 interface Props {
   entry: TimelineEvent
 }
 
-export const logLevelIconColor: { [key: number]: string } = {
-  1: 'text-indigo-600 dark:text-indigo-600',
-  5: 'text-indigo-600 dark:text-indigo-600',
-  9: 'text-green-500 dark:text-green-400',
-  13: 'text-yellow-400 dark:text-yellow-300',
-  17: 'text-red-500 dark:text-red-400',
-}
-
 export const TimelineIcon = ({ entry }: Props) => {
-  const iconColor = (entry: TimelineEvent) => {
-    switch (entry.entry.case) {
-      case 'call':
-        return entry.entry.value.error ? 'text-red-600' : 'text-indigo-600'
-      case 'log':
-        return `${logLevelIconColor[entry.entry.value.logLevel]}`
-      default:
-        return 'text-indigo-600'
-    }
-  }
-
   const icon = (entry: TimelineEvent) => {
-    const style = 'h4 w-4'
+    const style = 'h4 w-4 text-indigo-600'
     switch (entry.entry.case) {
-      case 'call':
+      case 'call': {
+        const textColor = entry.entry.value.error ? 'text-red-600' : 'text-indigo-600'
         return entry.entry.value.sourceVerbRef ? (
-          <PhoneIcon className={`${style}`} />
+          <PhoneIcon className={`${style} ${textColor}`} />
         ) : (
           <PhoneArrowDownLeftIcon className={`${style}`} />
         )
+      }
       case 'deployment':
         return <RocketLaunchIcon className={`${style}`} />
       case 'log':
-        return <ListBulletIcon className={`${style}`} />
+        return <LogLevelBadgeSmall logLevel={entry.entry.value.logLevel} />
       default:
         return <ListBulletIcon className={`${style}`} />
     }
   }
 
-  return <div className={`${iconColor(entry)}`}>{icon(entry)}</div>
+  return <div>{icon(entry)}</div>
 }

console/client/src/features/timeline/details/TimelineLogDetails.tsx

@@ -1,8 +1,8 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import { CodeBlock } from '../../../components/CodeBlock'
 import { LogEntry, TimelineEvent } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { classNames } from '../../../utils/react.utils'
-import { logLevelBadge, logLevelText, textColor } from '../../../utils/style.utils'
+import { textColor } from '../../../utils/style.utils'
+import { LogLevelBadge } from '../../logs/LogLevelBadge'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
 interface Props {
@@ -27,14 +27,7 @@ export const TimelineLogDetails = ({ entry, log }: Props) => {
         <div className='flex pt-2 justify-between'>
           <dt>Level</dt>
           <dd className={`${textColor}`}>
-            <span
-              className={classNames(
-                `${logLevelBadge[log.logLevel]}`,
-                'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-gray-600',
-              )}
-            >
-              {logLevelText[log.logLevel]}
-            </span>
+            <LogLevelBadge logLevel={log.logLevel} />
           </dd>
         </div>
         <div className='flex pt-2 justify-between'>

console/client/src/features/timeline/filters/FilterPanelSection.tsx

@@ -0,0 +1,32 @@
+import { Disclosure } from '@headlessui/react'
+import { ChevronUpIcon } from '@heroicons/react/20/solid'
+import { textColor } from '../../../utils'
+
+interface Props {
+  title: string
+  children: React.ReactNode
+  defaultOpen?: boolean
+}
+
+export const FilterPanelSection = ({ title, children, defaultOpen = true }: Props) => {
+  return (
+    <Disclosure defaultOpen={defaultOpen}>
+      {({ open }) => (
+        <>
+          <Disclosure.Button
+            className={`flex w-full justify-between rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 py-1 px-2 text-left text-sm font-medium ${textColor} focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75`}
+          >
+            <span>{title}</span>
+            <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 text-gray-500`} />
+          </Disclosure.Button>
+          <Disclosure.Panel className={`px-2 py-2 text-sm ${textColor}`}>
+            <fieldset>
+              <legend className='sr-only'>{title}</legend>
+              <div className='space-y-0.5'>{children}</div>
+            </fieldset>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  )
+}

console/client/src/features/timeline/filters/LogLevelsFilter.tsx

@@ -1,7 +1,8 @@
 import { Popover, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Fragment } from 'react'
-import { logLevelText, textColor } from '../../../utils'
+import { textColor } from '../../../utils'
+import { logLevelText } from '../../logs/log.utils'
 
 const logLevels = [1, 5, 9, 13, 17]