fix(dashboard): wfrun blank page

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/wfRun/[...ids]/components/Variables.tsx

@@ -7,6 +7,7 @@ import { OverflowText } from '../../../../components/OverflowText'
 type VariablesProps = {
   variableDefs: ThreadVarDef[]
   variables: Variable[]
+  inheritedVariables: (Variable | null)[]
 }
 
 const accessLevels: { [key in WfRunVariableAccessLevel]: string } = {
@@ -16,9 +17,11 @@ const accessLevels: { [key in WfRunVariableAccessLevel]: string } = {
   UNRECOGNIZED: '',
 }
 
-export const Variables: FC<VariablesProps> = ({ variableDefs, variables }) => {
+export const Variables: FC<VariablesProps> = ({ variableDefs, variables, inheritedVariables }) => {
   if (variableDefs.length === 0) return <></>
 
+  const allVariables = [...variables, ...inheritedVariables]
+
   return (
     <div className="">
       <h2 className="text-md mb-2 font-bold">Variables</h2>
@@ -34,7 +37,7 @@ export const Variables: FC<VariablesProps> = ({ variableDefs, variables }) => {
             <OverflowText
               className="max-w-96"
               text={
-                getVariableValue(variables.find(v => v.id?.name === variable.varDef?.name)?.value)?.toString() ?? ''
+                getVariableValue(allVariables.find(v => v?.id?.name === variable.varDef?.name)?.value)?.toString() ?? ''
               }
             />
           </span>

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/wfRun/[...ids]/components/WfRun.tsx

@@ -6,23 +6,23 @@ import { FC, useCallback } from 'react'
 import { Details } from './Details'
 import { Variables } from './Variables'
 import { useWfRun } from '@/app/hooks/useWfRun'
-import { WfRunVariableAccessLevel } from 'littlehorse-client/proto'
+import { WfRunId, WfRunVariableAccessLevel } from 'littlehorse-client/proto'
 import { isExternal } from 'util/types'
 
-export const WfRun: FC<{ id: string, tenantId: string }> = ({ id, tenantId }) => {
+export const WfRun: FC<{ wfRunId: WfRunId, tenantId: string }> = ({ wfRunId, tenantId }) => {
   const searchParams = useSearchParams()
   const threadRunNumber = Number(searchParams.get('threadRunNumber'))
-  const { wfRunData, isLoading, isError } = useWfRun({ id: id, tenantId })
-  const { wfRunData: parentWfRunData } = useWfRun({ id: wfRunData?.wfRun?.id?.parentWfRunId?.id ?? '', tenantId })
+  const { wfRunData, isLoading, isError } = useWfRun({ wfRunId, tenantId })
+  const { wfRunData: parentWfRunData } = useWfRun({ wfRunId: wfRunData?.wfRun?.id?.parentWfRunId ?? { id: '', parentWfRunId: undefined }, tenantId })
 
   if (!wfRunData) return null
   const { wfRun, wfSpec, nodeRuns, variables } = wfRunData;
 
   if (!wfRun) return null
-  if (!wfRun.id?.parentWfRunId || !parentWfRunData) return null
 
   const variableDefs = wfSpec.threadSpecs[wfRun.threadRuns[threadRunNumber].threadSpecName].variableDefs;
   const inheritedVariables = variableDefs.filter(vD => vD.accessLevel === WfRunVariableAccessLevel.INHERITED_VAR).map(vD => {
+    if (!wfRun.id?.parentWfRunId || !parentWfRunData) return null
     return parentWfRunData.variables.find(v => v.id?.name === vD.varDef?.name)!
   });
 
@@ -37,7 +37,8 @@ export const WfRun: FC<{ id: string, tenantId: string }> = ({ id, tenantId }) =>
 
       <Variables
         variableDefs={wfSpec.threadSpecs[wfRun.threadRuns[threadRunNumber].threadSpecName].variableDefs}
-        variables={variables.filter(v => v.id?.threadRunNumber == Number(searchParams.get('threadRunNumber'))).concat(inheritedVariables)}
+        variables={variables.filter(v => v.id?.threadRunNumber == Number(searchParams.get('threadRunNumber')))}
+        inheritedVariables={inheritedVariables}
       />
     </div>
   )

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/wfRun/[...ids]/page.tsx

@@ -3,13 +3,27 @@ import { notFound } from 'next/navigation'
 import { ClientError, Status } from 'nice-grpc-common'
 import { WfRun } from './components/WfRun'
 import { getWfRun } from '../../../../../actions/getWfRun'
+import { WfRunId } from 'littlehorse-client/proto'
 
 type Props = { params: { ids: string[]; tenantId: string } }
 
 export default async function Page({ params: { ids, tenantId } }: Props) {
-  const id = ids.join('_');
+  let wfRunId: WfRunId;
+  if (ids[1]) {
+    wfRunId = {
+      id: ids[1],
+      parentWfRunId: {
+        id: ids[0],
+      }
+    }
+  } else {
+    wfRunId = {
+      id: ids[0],
+    }
+  }
+
   try {
-    return <WfRun id={id} tenantId={tenantId} />
+    return <WfRun wfRunId={wfRunId} tenantId={tenantId} />
   } catch (error) {
     if (error instanceof ClientError && error.code === Status.NOT_FOUND) return notFound()
     throw error

dashboard/src/app/actions/getWfRun.ts

@@ -4,7 +4,7 @@ import { lhClient } from '@/app/lhClient'
 import { NodeRun, ThreadRun, Variable, WfRun, WfRunId, WfSpec } from 'littlehorse-client/proto'
 
 type Props = {
-  ids: string[]
+  wfRunId: WfRunId
   tenantId: string
 }
 
@@ -16,12 +16,9 @@ export type WfRunResponse = {
   nodeRuns: NodeRun[]
   variables: Variable[]
 }
-export const getWfRun = async ({ ids, tenantId }: Props): Promise<WfRunResponse> => {
+export const getWfRun = async ({ wfRunId, tenantId }: Props): Promise<WfRunResponse> => {
   const client = await lhClient({ tenantId })
-  const wfRunId = ids
-    .reverse()
-    .reduceRight<WfRunId | undefined>((parentWfRunId, id) => ({ id, parentWfRunId }), undefined)
-  const wfRun = await client.getWfRun(wfRunId!)
+  const wfRun = await client.getWfRun(wfRunId)
   const [wfSpec, { results: nodeRuns }, { results: variables }] = await Promise.all([
     client.getWfSpec({ ...wfRun.wfSpecId }),
     client.listNodeRuns({

dashboard/src/app/hooks/useWfRun.tsx

@@ -1,19 +1,25 @@
 "use client";
 import useSWR from "swr";
-import { getWfRun } from "../actions/getWfRun";
+import { getWfRun, WfRunResponse } from "../actions/getWfRun";
+import { useState } from "react";
+import { WfRunId } from "littlehorse-client/proto";
 
 type Props = {
-    id: string
+    wfRunId: WfRunId
     tenantId: string
 }
 
-export function useWfRun({ id, tenantId }: Props) {
-    const { data, error, isLoading } = useSWR(`wfRun/${tenantId}/${id}`, () => {
-        return getWfRun({ ids: [id], tenantId })
+export function useWfRun({ wfRunId, tenantId }: Props) {
+    const [dataCache, setDataCache] = useState<WfRunResponse | null>(null)
+
+    const { error, isLoading } = useSWR(`wfRun/${tenantId}/${wfRunId.id}/${wfRunId.parentWfRunId?.id}`, async () => {
+        if (!wfRunId.id) return dataCache
+        const data = await getWfRun({ wfRunId, tenantId })
+        setDataCache(data)
     })
 
     return {
-        wfRunData: data,
+        wfRunData: dataCache,
         isLoading,
         isError: error
     }