fix(dashboard): resolve child wfRuns (#759)

* fix(dashboard): resolve child wfRuns

* ci(dashboard): use Dockerfile.next to build standalone

* feat(dashboard): add link to parent wfRun

.github/workflows/dashboard.yml

@@ -83,4 +83,4 @@ jobs:
         with:
           image-name: lh-standalone-next
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          dockerfile: docker/standalone/Dockerfile
+          dockerfile: docker/standalone/Dockerfile.next

dashboard-new/package.json

@@ -14,14 +14,13 @@
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@tanstack/react-query": "^5.28.6",
-    "@tisoap/react-flow-smart-edge": "^3.0.0",
     "dagre": "^0.8.5",
     "littlehorse-client": "file://../sdk-js",
-    "next": "14.1.3",
+    "next": "^14.2.1",
     "next-auth": "^4.24.7",
-    "react": "^18",
-    "react-dom": "^18",
-    "reactflow": "^11.10.4"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "reactflow": "^11.11.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
@@ -34,7 +33,7 @@
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3",
+    "eslint-config-next": "^14.2.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "nice-grpc-common": "^2.0.2",

dashboard-new/src/app/(authenticated)/components/Principal.tsx

@@ -1,7 +1,7 @@
 import { useWhoAmI } from '@/contexts/WhoAmIContext'
 import { Menu, Transition } from '@headlessui/react'
 import { signOut } from 'next-auth/react'
-import React, { FC, Fragment } from 'react'
+import { FC, Fragment } from 'react'
 function classNames(...classes: Array<string | boolean>) {
   return classes.filter(Boolean).join(' ')
 }

dashboard-new/src/app/(authenticated)/wfRun/[id]/components/Details.tsx → dashboard-new/src/app/(authenticated)/wfRun/[...ids]/components/Details.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { formatDate } from '@/app/utils/date'
+import { concatWfRunIds } from '@/app/utils/wfRun'
 import { WfRun } from 'littlehorse-client/dist/proto/wf_run'
 import Link from 'next/link'
 import { FC } from 'react'
@@ -22,6 +23,14 @@ export const Details: FC<DetailsProps> = ({ id, status, wfSpecId, startTime }) =
     <div className="mb-4">
       <span className="italic">WfRun</span>
       <h1 className="block text-2xl font-bold">{id?.id}</h1>
+      {id?.parentWfRunId && (
+        <div className="flex items-center gap-2">
+          Parent WfRun:
+          <Link href={`/wfRun/${concatWfRunIds(id?.parentWfRunId)}`} className="text-blue-500 underline">
+            {id?.parentWfRunId?.id}
+          </Link>
+        </div>
+      )}
       <div className="flex flex-row gap-2 text-sm text-gray-500">
         <div className="flex items-center gap-2">
           WfSpec:

dashboard-new/src/app/(authenticated)/wfRun/[id]/getWfRun.ts → dashboard-new/src/app/(authenticated)/wfRun/[...ids]/getWfRun.ts

@@ -2,12 +2,13 @@
 
 import { lhClient } from '@/app/lhClient'
 import { NodeRun } from 'littlehorse-client/dist/proto/node_run'
+import { WfRunId } from 'littlehorse-client/dist/proto/object_id'
 import { ThreadRun, WfRun } from 'littlehorse-client/dist/proto/wf_run'
 import { WfSpec } from 'littlehorse-client/dist/proto/wf_spec'
 import { cookies } from 'next/headers'
 
 type Props = {
-  id: string
+  ids: string[]
 }
 
 export type ThreadRunWithNodeRuns = ThreadRun & { nodeRuns: NodeRun[] }
@@ -17,14 +18,15 @@ export type WfRunResponse = {
   wfSpec: WfSpec
   nodeRuns: NodeRun[]
 }
-export const getWfRun = async ({ id }: Props): Promise<WfRunResponse> => {
+export const getWfRun = async ({ ids }: Props): Promise<WfRunResponse> => {
   const tenantId = cookies().get('tenantId')?.value
   const client = await lhClient({ tenantId })
-  const wfRun = await client.getWfRun({ id })
+  const wfRunId = ids.reverse().reduceRight<WfRunId|undefined>((parentWfRunId, id) => ({ id, parentWfRunId }), undefined)
+  const wfRun = await client.getWfRun(wfRunId!)
   const [wfSpec, { results: nodeRuns }] = await Promise.all([
     client.getWfSpec({ ...wfRun.wfSpecId }),
     client.listNodeRuns({
-      wfRunId: wfRun.id,
+      wfRunId
     }),
   ])
 

dashboard-new/src/app/(authenticated)/wfRun/[id]/page.tsx → dashboard-new/src/app/(authenticated)/wfRun/[...ids]/page.tsx

@@ -4,20 +4,20 @@ import { ClientError, Status } from 'nice-grpc-common'
 import { WfRun } from './components/WfRun'
 import { getWfRun } from './getWfRun'
 
-type Props = { params: { id: string } }
+type Props = { params: { ids: string[] } }
 
-export default async function Page({ params: { id } }: Props) {
+export default async function Page({ params: { ids } }: Props) {
   try {
-    const { wfRun, wfSpec, nodeRuns } = await getWfRun({ id })
+    const { wfRun, wfSpec, nodeRuns } = await getWfRun({ ids })
     return <WfRun wfRun={wfRun} wfSpec={wfSpec} nodeRuns={nodeRuns} />
   } catch (error) {
     if (error instanceof ClientError && error.code === Status.NOT_FOUND) return notFound()
     throw error
   }
 }
 
-export async function generateMetadata({ params: { id } }: Props): Promise<Metadata> {
+export async function generateMetadata({ params: { ids } }: Props): Promise<Metadata> {
   return {
-    title: `WfRun ${id} | Littlehorse`,
+    title: `WfRun ${ids[ids.length -1]} | Littlehorse`,
   }
 }

dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Diagram.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { ThreadRunWithNodeRuns } from '@/app/(authenticated)/wfRun/[id]/getWfRun'
+import { ThreadRunWithNodeRuns } from '@/app/(authenticated)/wfRun/[...ids]/getWfRun'
 import { NodeRun } from 'littlehorse-client/dist/proto/node_run'
 import { WfRun } from 'littlehorse-client/dist/proto/wf_run'
 import { WfSpec } from 'littlehorse-client/dist/proto/wf_spec'

dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/EdgeTypes/Default.tsx

@@ -1,6 +1,5 @@
 import { FC, memo } from 'react'
 import { BaseEdge, EdgeLabelRenderer, Position, SmoothStepEdgeProps, getSmoothStepPath } from 'reactflow'
-import { EdgeDetails } from './EdgeDetails'
 
 const Default: FC<SmoothStepEdgeProps> = ({
   id,

dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/EdgeTypes/index.ts

@@ -1,8 +1,6 @@
-import { SmartStepEdge } from '@tisoap/react-flow-smart-edge'
 import { EdgeTypes } from 'reactflow'
 import { DefaultEdge } from './Default'
 
 export const edgeTypes: EdgeTypes = {
   default: DefaultEdge,
-  smart: SmartStepEdge,
 }

dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/WfRuns.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { SearchFooter } from '@/app/(authenticated)/components/SearchFooter'
 import { SEARCH_DEFAULT_LIMIT, TIME_RANGES, TimeRange } from '@/app/constants'
+import { concatWfRunIds } from '@/app/utils/wfRun'
 import { useWhoAmI } from '@/contexts/WhoAmIContext'
 import { ArrowPathIcon } from '@heroicons/react/16/solid'
 import { useInfiniteQuery } from '@tanstack/react-query'
@@ -62,10 +63,10 @@ export const WfRuns: FC<Props> = ({ id }) => {
         <div className="flex min-h-[360px] flex-col gap-4">
           {data?.pages.map((page, i) => (
             <Fragment key={i}>
-              {page.results.map(({ id }) => (
-                <div key={id}>
-                  <Link className="py-2 text-blue-500 hover:underline" href={`/wfRun/${id}`}>
-                    {id}
+              {page.results.map(wfRunId => (
+                <div key={wfRunId.id}>
+                  <Link className="py-2 text-blue-500 hover:underline" href={`/wfRun/${concatWfRunIds(wfRunId)}`}>
+                    {wfRunId.id}
                   </Link>
                 </div>
               ))}

dashboard-new/src/app/utils/wfRun.ts

@@ -0,0 +1,11 @@
+import { WfRunId } from "littlehorse-client/dist/proto/object_id"
+
+export const concatWfRunIds = (wfRunId: WfRunId) => {
+  const ids = []
+  let current: WfRunId | undefined = wfRunId
+  while (current) {
+    ids.push(current.id)
+    current = current.parentWfRunId
+  }
+  return ids.reverse().join('/')
+}

docker/standalone/Dockerfile

@@ -28,11 +28,6 @@ COPY ./dashboard/apps/web/.next/standalone ./
 COPY ./dashboard/apps/web/.next/static ./apps/web/.next/static
 COPY ./dashboard/apps/web/public ./apps/web/public
 
-# New dashboard
-WORKDIR /lh/dashboard-new
-COPY ./dashboard-new/.next/standalone ./
-COPY ./dashboard-new/.next/static ./.next/static
-
 WORKDIR /
 
 COPY ./server/build/libs/server-*-all.jar /lh/server.jar

docker/standalone/Dockerfile.next

@@ -0,0 +1,44 @@
+FROM ubuntu:22.04
+
+LABEL maintainer="[email protected]"
+
+ENV PATH ${PATH}:/kafka/bin:/lh
+
+RUN mkdir /kafka /lh \
+    && apt update && apt install -y tar gzip wget uuid-runtime openjdk-17-jdk curl ca-certificates gnupg \
+    && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
+    && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
+    && apt update && apt install -y nodejs \
+    && npm i -g pnpm \
+    && rm -rf /var/lib/apt/lists/* \
+    && wget -q https://downloads.apache.org/kafka/3.7.0/kafka_2.12-3.7.0.tgz -O /tmp/kafka.tgz \
+    && tar -xzf /tmp/kafka.tgz --strip-components 1 -C /kafka \
+    && rm /tmp/kafka.tgz
+
+COPY ./docker/standalone/kafka-entrypoint.sh /lh
+COPY ./docker/standalone/littlehorse-entrypoint.sh /lh
+COPY ./docker/standalone/dashboard-entrypoint.sh /lh
+COPY ./docker/standalone/docker-entrypoint.sh /lh
+
+WORKDIR /lh/dashboard
+ENV NODE_ENV=production
+EXPOSE 8080
+
+COPY ./dashboard/apps/web/.next/standalone ./
+COPY ./dashboard/apps/web/.next/static ./apps/web/.next/static
+COPY ./dashboard/apps/web/public ./apps/web/public
+
+# New dashboard
+WORKDIR /lh/dashboard-new
+COPY ./dashboard-new/.next/standalone ./
+COPY ./dashboard-new/.next/static ./.next/static
+
+WORKDIR /
+
+COPY ./server/build/libs/server-*-all.jar /lh/server.jar
+
+ENV LHD_API_HOST=localhost
+ENV LHD_API_PORT=2023
+ENV DASHBOARD_NEXT=true
+
+ENTRYPOINT ["/lh/docker-entrypoint.sh"]