feat: Style log level filter to be like a meter (#411)

Fixes #368 
<img width="206" alt="Screenshot 2023-09-20 at 9 10 43 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/cce5610f-bd7f-4840-9239-69cddb6c8b1e">
<img width="207" alt="Screenshot 2023-09-20 at 9 11 00 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/7e8053f2-1e97-4f91-81aa-f6510f76d284">
<img width="210" alt="Screenshot 2023-09-20 at 9 11 11 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/0f529cca-b7cc-4324-bb48-cf63c0622ae9">

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

@@ -22,6 +22,22 @@ export const logLevelColor: { [key: number]: string } = {
  17: 'text-red-400 dark:text-red-400',
 }
 
+export const logLevelBgColor: { [key: number]: string } = {
+ 1: 'bg-gray-400 dark:bg-gray-400',
+ 5: 'bg-blue-400 dark:bg-blue-400',
+ 9: 'bg-green-500 dark:bg-green-300',
+ 13: 'bg-yellow-400 dark:bg-yellow-300',
+ 17: 'bg-red-400 dark:bg-red-400',
+}
+
+export const logLevelRingColor: { [key: number]: string } = {
+ 1: 'ring-gray-400 dark:ring-gray-400',
+ 5: 'ring-blue-400 dark:ring-blue-400',
+ 9: 'ring-green-500 dark:ring-green-300',
+ 13: 'ring-yellow-400 dark:ring-yellow-300',
+ 17: 'ring-red-400 dark:ring-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`,

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

@@ -5,7 +5,7 @@ import { modulesContext } from '../../../providers/modules-provider'
 import { eventTypesFilter, logLevelFilter, modulesFilter } from '../../../services/console.service'
 import { textColor } from '../../../utils'
 import { LogLevelBadgeSmall } from '../../logs/LogLevelBadgeSmall'
-import { logLevelColor } from '../../logs/log.utils'
+import { logLevelBgColor, logLevelColor, logLevelRingColor } from '../../logs/log.utils'
 import { FilterPanelSection } from './FilterPanelSection'
 
 interface EventFilter {
@@ -115,25 +115,28 @@ export const TimelineFilterPanel = ({ onFiltersChanged }: Props) => {
  </FilterPanelSection>
 
  <FilterPanelSection title='Log level'>
- {Object.keys(LOG_LEVELS).map((key) => (
- <div key={key} className='relative flex items-start'>
- <div className='flex h-6 items-center'>
- <input
- id={`log-level-${key}`}
- name={`log-level-${key}`}
- type='checkbox'
- checked={selectedLogLevel <= Number(key)}
- onChange={() => handleLogLevelChanged(key)}
- className='h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer'
- />
- </div>
- <div className={`ml-2 text-sm leading-6 w-full`}>
- <label htmlFor={`log-level-${key}`} className={`${logLevelColor[Number(key)]} flex cursor-pointer`}>
- {LOG_LEVELS[Number(key)]}
- </label>
- </div>
- </div>
- ))}
+ <ul role='list' className='space-y-1'>
+ {Object.keys(LOG_LEVELS).map((key) => (
+ <li
+ key={key}
+ onClick={() => handleLogLevelChanged(key)}
+ className='relative flex gap-x-2 cursor-pointer'
+ >
+ <div className='relative flex h-5 w-3 flex-none items-center justify-center'>
+ <div
+ className={`${selectedLogLevel <= Number(key) ? 'h-2.5 w-2.5' : 'h-0.5 w-0.5'} ${
+ selectedLogLevel <= Number(key)
+ ? `${logLevelBgColor[Number(key)]} ${logLevelRingColor[Number(key)]}`
+ : 'bg-gray-300 ring-gray-300'
+ } rounded-full ring-1`}
+ ></div>
+ </div>
+ <p className='flex-auto text-sm leading-5 text-gray-500'>
+ <span className={`${logLevelColor[Number(key)]} flex`}>{LOG_LEVELS[Number(key)]}</span>
+ </p>
+ </li>
+ ))}
+ </ul>
  </FilterPanelSection>
 
  <FilterPanelSection title='Modules'>