feat: add deployment name to the timeline (#449)

Fixes #443 Also add some deployment cards to event detail sidebar ![Screenshot 2023-10-05 at 9 39 27 AM](https://github.com/TBD54566975/ftl/assets/51647/45734e2e-278a-4e59-b388-a40d4aa495d7) ![Screenshot 2023-10-05 at 9 39 32 AM](https://github.com/TBD54566975/ftl/assets/51647/30f2d60f-c40f-495c-aac3-b70a4cc690b6) ![Screenshot 2023-10-05 at 9 39 34 AM](https://github.com/TBD54566975/ftl/assets/51647/0dc6462a-742c-4e51-a4a5-f20f7186427c) ![Screenshot 2023-10-05 at 9 39 37 AM](https://github.com/TBD54566975/ftl/assets/51647/61dd6cf1-8241-4ac4-adf4-eb3247f968d2)
block · Oct 5, 2023 · 23716b1 · 23716b1
1 parent 90ee4d4
commit 23716b1
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 13 deletions.
diff --git a/console/client/src/components/Card.tsx b/console/client/src/components/Card.tsx
@@ -1,13 +1,17 @@
 interface Props {
   topBarColor?: string
+  className?: string
   onClick?: () => void
   children: React.ReactNode
 }
-export const Card = ({ topBarColor, onClick, children }: Props) => {
+
+export const Card = ({ topBarColor, className, onClick, children }: Props) => {
   return (
     <div
       onClick={onClick}
-      className={`relative rounded-md border border-gray-200 dark:border-gray-500 ${onClick ? 'cursor-pointer' : ''}`}
+      className={`relative rounded-md border border-gray-200 dark:border-gray-500 ${
+        onClick ? 'cursor-pointer' : ''
+      } ${className}`}
     >
       {topBarColor && (
         <div className='absolute top-0 left-0 right-0 h-1 bg-green-400 rounded-t-md -mt-px -ml-px -mr-px'></div>

diff --git a/console/client/src/features/timeline/Timeline.tsx b/console/client/src/features/timeline/Timeline.tsx
@@ -116,6 +116,21 @@ export const Timeline = ({ timeSettings, filters }: Props) => {
     setSearchParams({ ...Object.fromEntries(searchParams.entries()), id: entry.id.toString() })
   }
 
+  const deploymentName = (event: Event) => {
+    switch (event.entry?.case) {
+      case 'call':
+        return event.entry.value.deploymentName
+      case 'log':
+        return event.entry.value.deploymentName
+      case 'deploymentCreated':
+        return event.entry.value.name
+      case 'deploymentUpdated':
+        return event.entry.value.name
+      default:
+        return ''
+    }
+  }
+
   return (
     <div className='border border-gray-100 dark:border-slate-700 rounded m-2'>
       <div className='overflow-x-hidden'>
@@ -124,6 +139,9 @@ export const Timeline = ({ timeSettings, filters }: Props) => {
             <tr className='flex text-xs'>
               <th className='p-1 text-left border-b w-8 border-gray-100 dark:border-slate-700 flex-none'></th>
               <th className='p-1 text-left border-b w-40 border-gray-100 dark:border-slate-700 flex-none'>Date</th>
+              <th className='p-1 text-left border-b w-40 border-gray-100 dark:border-slate-700 flex-none'>
+                Deployment
+              </th>
               <th className='p-1 text-left border-b border-gray-100 dark:border-slate-700 flex-grow flex-shrink'>
                 Content
               </th>
@@ -144,6 +162,12 @@ export const Timeline = ({ timeSettings, filters }: Props) => {
                 <td className='p-1 w-40 items-center flex-none text-gray-400 dark:text-gray-400'>
                   {formatTimestampShort(entry.timeStamp)}
                 </td>
+                <td
+                  title={deploymentName(entry)}
+                  className='p-1 pr-2 w-40 items-center flex-none truncate text-indigo-500 dark:text-indigo-300'
+                >
+                  {deploymentName(entry)}
+                </td>
                 <td className='p-1 flex-grow truncate'>
                   {(() => {
                     switch (entry.entry?.case) {

diff --git a/console/client/src/features/timeline/TimelinePage.tsx b/console/client/src/features/timeline/TimelinePage.tsx
@@ -15,13 +15,14 @@ export const TimelinePage = () => {
   const [selectedTimeRange, setSelectedTimeRange] = React.useState(TIME_RANGES['tail'])
   const [isTimelinePaused, setIsTimelinePaused] = React.useState(false)
 
+  const initialEventId = searchParams.get('id')
   React.useEffect(() => {
-    if (searchParams.get('id')) {
+    if (initialEventId) {
       // if we're loading a specific event, we don't want to tail.
       setSelectedTimeRange(TIME_RANGES['5m'])
       setIsTimelinePaused(true)
     }
-  }, [searchParams])
+  }, [])
 
   const handleTimeSettingsChanged = (settings: TimeSettings) => {
     setTimeSettings(settings)

diff --git a/console/client/src/features/timeline/details/TimelineCallDetails.tsx b/console/client/src/features/timeline/details/TimelineCallDetails.tsx
@@ -1,5 +1,7 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Card } from '../../../components'
 import { AttributeBadge } from '../../../components/AttributeBadge'
 import { CloseButton } from '../../../components/CloseButton'
 import { CodeBlock } from '../../../components/CodeBlock'
@@ -20,6 +22,7 @@ interface Props {
 
 export const TimelineCallDetails = ({ timestamp, call }: Props) => {
   const client = useClient(ConsoleService)
+  const navigate = useNavigate()
   const { closePanel } = React.useContext(SidePanelContext)
   const [requestCalls, setRequestCalls] = useState<CallEvent[]>([])
   const [selectedCall, setSelectedCall] = useState(call)
@@ -83,10 +86,17 @@ export const TimelineCallDetails = ({ timestamp, call }: Props) => {
         </>
       )}
 
+      <Card
+        key={call.deploymentName}
+        topBarColor='bg-green-500'
+        className='mt-4'
+        onClick={() => navigate(`/deployments/${call.deploymentName}`)}
+      >
+        {call.deploymentName}
+        <p className='text-xs text-gray-400'>{call.deploymentName}</p>
+      </Card>
+
       <ul className='pt-4 space-y-2'>
-        <li>
-          <AttributeBadge name='Deployment' value={selectedCall.deploymentName} />
-        </li>
         {selectedCall.requestName && (
           <li>
             <AttributeBadge name='Request' value={selectedCall.requestName} />

diff --git a/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
@@ -1,6 +1,8 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
+import { Card } from '../../../components/Card'
 import { CloseButton } from '../../../components/CloseButton'
 import { DeploymentCreatedEvent, Event } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../../providers/side-panel-provider'
@@ -13,6 +15,8 @@ interface Props {
 
 export const TimelineDeploymentCreatedDetails = ({ event, deployment }: Props) => {
   const { closePanel } = React.useContext(SidePanelContext)
+  const navigate = useNavigate()
+
   return (
     <>
       <div className={`bg-green-500 dark:bg-green-300 h-2 w-full`}></div>
@@ -31,10 +35,17 @@ export const TimelineDeploymentCreatedDetails = ({ event, deployment }: Props) =
           <CloseButton onClick={closePanel} />
         </div>
 
+        <Card
+          key={deployment.name}
+          topBarColor='bg-green-500'
+          className='mt-4'
+          onClick={() => navigate(`/deployments/${deployment.name}`)}
+        >
+          {deployment.name}
+          <p className='text-xs text-gray-400'>{deployment.name}</p>
+        </Card>
+
         <ul className='pt-4 space-y-2'>
-          <li>
-            <AttributeBadge name='Name' value={deployment.name} />
-          </li>
           <li>
             <AttributeBadge name='Module' value={deployment.moduleName} />
           </li>

diff --git a/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
@@ -1,6 +1,8 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
+import { Card } from '../../../components/Card'
 import { CloseButton } from '../../../components/CloseButton'
 import { DeploymentUpdatedEvent, Event } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../../providers/side-panel-provider'
@@ -13,6 +15,8 @@ interface Props {
 
 export const TimelineDeploymentUpdatedDetails = ({ event, deployment }: Props) => {
   const { closePanel } = React.useContext(SidePanelContext)
+  const navigate = useNavigate()
+
   return (
     <>
       <div className={`bg-blue-500 dark:bg-blue-300 h-2 w-full`}></div>
@@ -31,6 +35,16 @@ export const TimelineDeploymentUpdatedDetails = ({ event, deployment }: Props) =
           <CloseButton onClick={closePanel} />
         </div>
 
+        <Card
+          key={deployment.name}
+          topBarColor='bg-green-500'
+          className='mt-4'
+          onClick={() => navigate(`/deployments/${deployment.name}`)}
+        >
+          {deployment.name}
+          <p className='text-xs text-gray-400'>{deployment.name}</p>
+        </Card>
+
         <ul className='pt-4 space-y-2'>
           <li>
             <AttributeBadge name='Name' value={deployment.name} />

diff --git a/console/client/src/features/timeline/details/TimelineLogDetails.tsx b/console/client/src/features/timeline/details/TimelineLogDetails.tsx
@@ -1,6 +1,8 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
+import { Card } from '../../../components/Card'
 import { CloseButton } from '../../../components/CloseButton'
 import { CodeBlock } from '../../../components/CodeBlock'
 import { Event, LogEvent } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
@@ -17,6 +19,8 @@ interface Props {
 
 export const TimelineLogDetails = ({ event, log }: Props) => {
   const { closePanel } = React.useContext(SidePanelContext)
+  const navigate = useNavigate()
+
   return (
     <>
       <div className={`${logLevelBgColor[log.logLevel]} h-2 w-full`}></div>
@@ -35,10 +39,16 @@ export const TimelineLogDetails = ({ event, log }: Props) => {
         <h2 className='pt-4 text-sm'>Attributes</h2>
         <CodeBlock code={JSON.stringify(log.attributes, null, 2)} language='json' />
 
+        <Card
+          key={log.deploymentName}
+          topBarColor='bg-green-500'
+          className='mt-4'
+          onClick={() => navigate(`/deployments/${log.deploymentName}`)}
+        >
+          {log.deploymentName}
+          <p className='text-xs text-gray-400'>{log.deploymentName}</p>
+        </Card>
         <ul className='pt-4 space-y-2'>
-          <li>
-            <AttributeBadge name='Deployment' value={log.deploymentName} />
-          </li>
           {log.requestName && (
             <li>
               <AttributeBadge name='Request' value={log.requestName} />