Add cursor to tappable things. Clean up log levels (#366)

Fixes #350 Fixes #363 <img width="150" alt="Screenshot 2023-09-07 at 8 34 43 AM" src="https://github.com/TBD54566975/ftl/assets/51647/3f4de21f-139d-4776-bf9a-34c8cdda4a55">
TBD54566975 · Sep 7, 2023 · cf4ff97 · cf4ff97
1 parent 0070255
commit cf4ff97
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 8 deletions.
diff --git a/console/client/src/features/modules/ModuleDetails.tsx b/console/client/src/features/modules/ModuleDetails.tsx
@@ -65,7 +65,7 @@ export function ModuleDetails() {
               onClick={() => {
                 handleVerbClicked(verb)
               }}
-              className='rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white text-center
+              className='rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white text-center cursor-pointer
             shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
             >
               {verb.verb?.name}

diff --git a/console/client/src/features/timeline/Timeline.tsx b/console/client/src/features/timeline/Timeline.tsx
@@ -25,7 +25,7 @@ export const Timeline = () => {
     'deployment',
   ])
   const [selectedLogLevels, setSelectedLogLevels] = React.useState<number[]>([
-    0, 1, 5, 9, 13, 17,
+    1, 5, 9, 13, 17,
   ])
 
   React.useEffect(() => {
@@ -136,7 +136,7 @@ export const Timeline = () => {
         {filteredEntries.map((entry, index) => (
           <li
             key={entry.id.toString()}
-            className='relative flex gap-x-4'
+            className='relative flex gap-x-4 cursor-pointer'
             onClick={() => handleEntryClicked(entry)}
           >
             <div

diff --git a/console/client/src/features/timeline/TimelineFilterBar.tsx b/console/client/src/features/timeline/TimelineFilterBar.tsx
@@ -3,7 +3,7 @@ import {ChevronDownIcon} from '@heroicons/react/20/solid'
 import {Fragment} from 'react'
 import {logLevelText, panelColor, textColor} from '../../utils/style.utils'
 
-const logLevels = [0, 1, 5, 9, 13, 17]
+const logLevels = [1, 5, 9, 13, 17]
 
 type Props = {
   selectedEventTypes: string[]
@@ -108,7 +108,7 @@ export const TimelineFilterBar = ({
                           name={`log-level-${level}`}
                           defaultValue={level}
                           type='checkbox'
-                          className='h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600'
+                          className='h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer'
                           checked={selectedLogLevels.includes(level)}
                           onChange={e =>
                             onLogLevelsChanged(level, e.target.checked)

diff --git a/console/client/src/features/verbs/VerbCalls.tsx b/console/client/src/features/verbs/VerbCalls.tsx
@@ -79,6 +79,7 @@ export const VerbCalls: React.FC<Props> = ({module, verb}) => {
               <tr
                 key={index}
                 onClick={() => handleClick(call)}
+                className='cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800'
               >
                 <td className='hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8'>
                   <div className='flex gap-x-3'>

diff --git a/console/client/src/layout/Tabs.tsx b/console/client/src/layout/Tabs.tsx
@@ -88,7 +88,7 @@ export const Tabs = () => {
               return (
                 <TabComponent
                   key={tab.id}
-                  className='flex items-center mr-1 relative'
+                  className='flex items-center mr-1 relative cursor-pointer'
                   as='span'
                 >
                   <span

diff --git a/console/client/src/utils/style.utils.ts b/console/client/src/utils/style.utils.ts
@@ -18,7 +18,6 @@ export const environments = {
 }
 
 export const logLevelText = {
-  0: 'Default',
   1: 'Trace',
   5: 'Debug',
   9: 'Info',
@@ -27,7 +26,6 @@ export const logLevelText = {
 }
 
 export const logLevelBadge = {
-  0: 'text-gray-400 bg-gray-400/10 dark:text-gray-300 dark:bg-gray-700/10',
   1: 'text-blue-350 bg-blue-300/10 dark:text-blue-300 dark:bg-blue-700/10',
   5: 'text-blue-350 bg-blue-400/10 dark:text-blue-300 dark:bg-blue-800/10',
   9: 'text-green-600 bg-green-400/30 dark:text-green-300 dark:bg-green-700/10',