fix: various console fixes (#986)

Fixes: - Deployment page was not showing side panel when timeline entries were tapped - Deployment timeline was reloading excessively - Console service was spamming unnecessary error messages - CodeBlock was not clearing before highlighting
block · Feb 26, 2024 · 4155488 · 4155488
1 parent 016dfdc
commit 4155488
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 50 deletions.
diff --git a/frontend/src/components/CodeBlock.tsx b/frontend/src/components/CodeBlock.tsx
@@ -4,7 +4,7 @@ import graphql from 'highlight.js/lib/languages/graphql'
 import json from 'highlight.js/lib/languages/json'
 import plaintext from 'highlight.js/lib/languages/plaintext'
 import 'highlight.js/styles/atom-one-dark.css'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 interface Props {
   code: string
@@ -13,18 +13,32 @@ interface Props {
 }
 
 export const CodeBlock = ({ code, language, maxHeight }: Props) => {
+  const codeRef = useRef<HTMLElement>(null)
+
   useEffect(() => {
     hljs.configure({ ignoreUnescapedHTML: true })
     hljs.registerLanguage('graphql', graphql)
     hljs.registerLanguage('json', json)
     hljs.registerLanguage('go', go)
     hljs.registerLanguage('plaintext', plaintext)
-    hljs.highlightAll()
-  })
+
+    if (codeRef.current) {
+      codeRef.current.removeAttribute('data-highlighted')
+      hljs.highlightElement(codeRef.current)
+    }
+
+    return () => {
+      if (codeRef.current) {
+        codeRef.current.removeAttribute('data-highlighted')
+      }
+    }
+  }, [code, language])
 
   return (
-    <pre>
-      <code className={`max-h-[${maxHeight}px] language-${language} text-xs`}>{code}</code>
+    <pre style={{ maxHeight: maxHeight ? `${maxHeight}px` : 'auto' }}>
+      <code ref={codeRef} className={`language-${language} text-xs`}>
+        {code}
+      </code>
     </pre>
   )
 }
diff --git a/frontend/src/features/deployments/DeploymentPage.tsx b/frontend/src/features/deployments/DeploymentPage.tsx
@@ -1,5 +1,5 @@
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { ButtonSmall } from '../../components/ButtonSmall'
 import { Card } from '../../components/Card'
@@ -11,6 +11,9 @@ import { modulesFilter } from '../../services/console.service'
 import { Timeline } from '../timeline/Timeline'
 import { verbRefString } from '../verbs/verb.utils'
 import { NotificationType, NotificationsContext } from '../../providers/notifications-provider'
+import { SidePanelProvider } from '../../providers/side-panel-provider'
+
+const timeSettings = { isTailing: true, isPaused: false }
 
 export const DeploymentPage = () => {
   const navigate = useNavigate()
@@ -21,6 +24,12 @@ export const DeploymentPage = () => {
   const [module, setModule] = useState<Module | undefined>()
   const [calls, setCalls] = useState<VerbRef[]>([])
 
+  const filters = useMemo(() => {
+    if (!module?.deploymentName) return []
+
+    return [modulesFilter([module.deploymentName])]
+  }, [module?.deploymentName])
+
   useEffect(() => {
     if (modules.modules.length > 0 && deploymentName) {
       let module = modules.modules.find((module) => module.deploymentName === deploymentName)
@@ -75,48 +84,45 @@ export const DeploymentPage = () => {
   }
 
   return (
-    <Page>
-      <Page.Header
-        icon={<RocketLaunchIcon />}
-        title={module?.deploymentName || 'Loading...'}
-        breadcrumbs={[{ label: 'Deployments', link: '/deployments' }]}
-      />
+    <SidePanelProvider>
+      <Page>
+        <Page.Header
+          icon={<RocketLaunchIcon />}
+          title={module?.deploymentName || 'Loading...'}
+          breadcrumbs={[{ label: 'Deployments', link: '/deployments' }]}
+        />
 
-      <Page.Body>
-        <div className='flex-1 flex flex-col h-full'>
-          <div className='flex-1 h-1/2 mb-4 p-4'>
-            <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
-              {module?.verbs.map((verb) => (
-                <Card
-                  key={verb.verb?.name}
-                  topBarColor='bg-green-500'
-                  onClick={() => navigate(`/deployments/${module.deploymentName}/verbs/${verb.verb?.name}`)}
-                >
-                  {verb.verb?.name}
-                  <p className='text-xs text-gray-400'>{verb.verb?.name}</p>
-                </Card>
-              ))}
+        <Page.Body>
+          <div className='flex-1 flex flex-col h-full'>
+            <div className='flex-1 h-1/2 mb-4 p-4'>
+              <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
+                {module?.verbs.map((verb) => (
+                  <Card
+                    key={verb.verb?.name}
+                    topBarColor='bg-green-500'
+                    onClick={() => navigate(`/deployments/${module.deploymentName}/verbs/${verb.verb?.name}`)}
+                  >
+                    {verb.verb?.name}
+                    <p className='text-xs text-gray-400'>{verb.verb?.name}</p>
+                  </Card>
+                ))}
+              </div>
+              <h2 className='pt-4'>Calls</h2>
+              {calls.length === 0 && <p className='pt-2 text-sm text-gray-400'>Does not call other verbs</p>}
+              <ul className='pt-2 flex space-x-2'>
+                {calls?.map((verb) => (
+                  <li key={`${module?.name}-${verb.module}-${verb.name}`} className='text-xs'>
+                    <ButtonSmall onClick={() => handleCallClick(verb)}>{verbRefString(verb)}</ButtonSmall>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className='flex-1 h-1/2 overflow-y-auto'>
+              {module?.deploymentName && <Timeline timeSettings={timeSettings} filters={filters} />}
             </div>
-            <h2 className='pt-4'>Calls</h2>
-            {calls.length === 0 && <p className='pt-2 text-sm text-gray-400'>Does not call other verbs</p>}
-            <ul className='pt-2 flex space-x-2'>
-              {calls?.map((verb) => (
-                <li key={`${module?.name}-${verb.module}-${verb.name}`} className='text-xs'>
-                  <ButtonSmall onClick={() => handleCallClick(verb)}>{verbRefString(verb)}</ButtonSmall>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className='flex-1 h-1/2 overflow-y-auto'>
-            {module?.deploymentName && (
-              <Timeline
-                timeSettings={{ isTailing: true, isPaused: false }}
-                filters={[modulesFilter([module?.deploymentName])]}
-              />
-            )}
           </div>
-        </div>
-      </Page.Body>
-    </Page>
+        </Page.Body>
+      </Page>
+    </SidePanelProvider>
   )
 }
diff --git a/frontend/src/providers/side-panel-provider.tsx b/frontend/src/providers/side-panel-provider.tsx
@@ -19,7 +19,7 @@ export const SidePanelContext = React.createContext<SidePanelContextType>(defaul
 
 export const SidePanelProvider = ({ children }: PropsWithChildren) => {
   const [isOpen, setIsOpen] = useState(false)
-  const [component, setComponent] = useState<React.ReactNode>()
+  const [component, setComponent] = useState<React.ReactNode | null>(null)
   const [onCloseCallback, setOnCloseCallback] = useState<(() => void) | null>(null)
 
   const openPanel = React.useCallback((comp: React.ReactNode, onClose?: () => void) => {
@@ -32,7 +32,7 @@ export const SidePanelProvider = ({ children }: PropsWithChildren) => {
 
   const closePanel = React.useCallback(() => {
     setIsOpen(false)
-    setComponent(undefined)
+    setComponent(null)
     if (onCloseCallback) {
       onCloseCallback()
     }

diff --git a/frontend/src/services/console.service.ts b/frontend/src/services/console.service.ts
@@ -154,8 +154,17 @@ export const getEvents = async ({
   order?: EventsQuery_Order
   filters?: EventsQuery_Filter[]
 }): Promise<Event[]> => {
-  const response = await client.getEvents({ filters, limit, order }, { signal: abortControllerSignal })
-  return response.events
+  try {
+    const response = await client.getEvents({ filters, limit, order }, { signal: abortControllerSignal })
+    return response.events
+  } catch (error) {
+    if (error instanceof ConnectError) {
+      if (error.code === Code.Canceled) {
+        return []
+      }
+    }
+    throw error
+  }
 }
 
 export const streamEvents = async ({