feat: show callers in console verb page (#3183)

Adds `Callers` to verb right panel. Also cleans up CSS for the identical
`Calls` panel.

<img width="755" alt="Screenshot 2024-10-24 at 4 52 09 PM"
src="https://github.com/user-attachments/assets/e1cc8fdf-486c-42c1-84c7-8bae0c6f9bfb">

frontend/console/src/features/verbs/VerbPage.tsx

@@ -10,13 +10,15 @@ import { SidePanelProvider } from '../../providers/side-panel-provider'
 import { TraceRequestList } from '../traces/TraceRequestList'
 import { VerbRequestForm } from './VerbRequestForm'
 import { verbPanels } from './VerbRightPanel'
+import { type VerbRef, findCallers } from './verb.utils'
 
 export const VerbPage = ({ moduleName, declName }: { moduleName: string; declName: string }) => {
   const notification = useContext(NotificationsContext)
   const navgation = useNavigate()
   const modules = useModules()
   const [module, setModule] = useState<Module | undefined>()
   const [verb, setVerb] = useState<Verb | undefined>()
+  const [callers, setCallers] = useState<VerbRef[] | undefined>()
 
   useEffect(() => {
     if (!modules.isSuccess) return
@@ -35,6 +37,9 @@ export const VerbPage = ({ moduleName, declName }: { moduleName: string; declNam
     setModule(module)
     const verb = module?.verbs.find((verb) => verb.verb?.name.toLocaleLowerCase() === declName?.toLocaleLowerCase())
     setVerb(verb)
+    if (verb) {
+      setCallers(findCallers(verb, moduleName, modules.data.modules))
+    }
   }, [modules.data, moduleName, declName])
 
   if (!module || !verb) {
@@ -59,7 +64,7 @@ export const VerbPage = ({ moduleName, declName }: { moduleName: string; declNam
           <ResizablePanels
             mainContent={<VerbRequestForm module={module} verb={verb} />}
             rightPanelHeader={header}
-            rightPanelPanels={verbPanels(verb)}
+            rightPanelPanels={verbPanels(verb, callers)}
             bottomPanelContent={<TraceRequestList module={module.name} verb={verb.verb?.name} />}
           />
         </div>

frontend/console/src/features/verbs/VerbRightPanel.tsx

@@ -1,10 +1,20 @@
 import { InboxUploadIcon } from 'hugeicons-react'
+import { Link } from 'react-router-dom'
 import { RightPanelAttribute } from '../../components/RightPanelAttribute'
 import type { Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import type { ExpandablePanelProps } from '../console/ExpandablePanel'
-import { httpRequestPath, ingress, isHttpIngress, verbCalls } from './verb.utils'
+import { type VerbRef, httpRequestPath, ingress, isHttpIngress, verbCalls } from './verb.utils'
 
-export const verbPanels = (verb?: Verb) => {
+const PanelRow = ({ verb }: { verb: VerbRef }) => {
+  return (
+    <Link className='flex items-center space-x-2 space-y-1 cursor-pointer' to={`/modules/${verb?.module}/verb/${verb?.name}`}>
+      <InboxUploadIcon className='h-4 w-4 text-blue-600 mt-1' />
+      <div className='truncate text-xs'>{`${verb?.module}.${verb?.name}`}</div>
+    </Link>
+  )
+}
+
+export const verbPanels = (verb?: Verb, callers?: VerbRef[]) => {
   const panels = [] as ExpandablePanelProps[]
 
   if (isHttpIngress(verb)) {
@@ -27,12 +37,15 @@ export const verbPanels = (verb?: Verb) => {
     panels.push({
       title: 'Calls',
       expanded: true,
-      children: calls?.map((c, index) => (
-        <div key={`verb-call-${index}-${c.module}-${c.name}`} className='flex items-center space-x-2 space-y-1'>
-          <InboxUploadIcon className='h-4 w-4 text-blue-600' />
-          <div className='truncate text-xs'>{`${c?.module}.${c?.name}`}</div>
-        </div>
-      )),
+      children: calls?.map((c, index) => <PanelRow key={`verb-call-${index}-${c.module}-${c.name}`} verb={c} />),
+    })
+  }
+
+  if (callers && callers.length > 0) {
+    panels.push({
+      title: 'Callers',
+      expanded: true,
+      children: callers.map((c, index) => <PanelRow key={`verb-caller-${index}-${c.module}-${c.name}`} verb={c} />),
     })
   }
 

frontend/console/src/features/verbs/verb.utils.ts

@@ -199,6 +199,24 @@ export const verbCalls = (verb?: Verb) => {
   return verb?.verb?.metadata.filter((meta) => meta.value.case === 'calls').map((meta) => meta.value.value as MetadataCalls) ?? null
 }
 
+export interface VerbRef {
+  module: string
+  name: string
+}
+
+export const findCallers = (verb: Verb, moduleName: string, modules: Module[]) =>
+  modules.flatMap((m: Module) => {
+    const callers = m.verbs.filter((v: Verb) => {
+      const calls = v.verb?.metadata.find((m) => m.value.case === 'calls')
+      if (!calls) return false
+      return !!(calls.value.value as MetadataCalls)?.calls.find((ref: Ref) => ref.module === moduleName && ref.name === verb.verb?.name)
+    })
+    return callers.map((c) => ({
+      module: m.name,
+      name: c.verb?.name || '',
+    }))
+  })
+
 export const generateCliCommand = (verb: Verb, path: string, header: string, body: string) => {
   const method = requestType(verb)
   return method === 'CALL' ? generateFtlCallCommand(path, body) : generateCurlCommand(method, path, header, body)