From 4bf4378a50bbf0b34ffb6858b766c505631ca46f Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Wed, 20 Sep 2023 09:16:38 -0700
Subject: [PATCH] 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">
---
 .../client/src/features/logs/log.utils.tsx    | 16 +++++++
 .../timeline/filters/TimelineFilterPanel.tsx  | 43 ++++++++++---------
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/console/client/src/features/logs/log.utils.tsx b/console/client/src/features/logs/log.utils.tsx
index c7af586a5..a62cb7674 100644
--- a/console/client/src/features/logs/log.utils.tsx
+++ b/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`,
diff --git a/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx b/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx
index b6e784363..b28b29465 100644
--- a/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx
+++ b/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'>