MMerge branch 'master' into metrics

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/ExternalEvent/ExternalEvent.tsx

@@ -8,7 +8,6 @@ import { NodeProps } from '..'
 import { Fade } from '../Fade'
 import { NodeDetails } from '../NodeDetails'
 
-import { NodeRunsList } from '../../NodeRunsList'
 import LinkWithTenant from '@/app/(authenticated)/[tenantId]/components/LinkWithTenant'
 import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
 
@@ -19,7 +18,7 @@ const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
   return (
     <>
       <NodeDetails nodeRunList={data.nodeRunsList}>
-        <DiagramDataGroup label="ExternalEvent">
+        <DiagramDataGroup label={nodeRun ? "ExternalEvent" : "ExternalEventDef"}>
           <div>
             <div>
               <div className="flex gap-1 text-nowrap">

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/NodeDetails.tsx

@@ -1,16 +1,13 @@
 'use client'
-import { Separator } from '@/components/ui/separator'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
-import { CSSProperties, FC, PropsWithChildren, ReactNode, useEffect, useMemo, useState } from 'react'
+import { NodeRun } from 'littlehorse-client/proto'
+import React, { CSSProperties, FC, PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { internalsSymbol, useNodeId, useStore } from 'reactflow'
 import { DiagramDataGroup } from './DataGroupComponents/DiagramDataGroup'
-import React from 'react'
-import { NodeRun, TaskRun } from 'littlehorse-client/proto'
+import { DiagramDataGroupIndexer } from './DataGroupComponents/DiagramDataGroupIndexer'
 import { Duration } from './DataGroupComponents/Duration'
 import { Entry } from './DataGroupComponents/Entry'
 import { ErrorMessage } from './DataGroupComponents/ErrorMessage'
 import { Status } from './DataGroupComponents/Status'
-import { DiagramDataGroupIndexer } from './DataGroupComponents/DiagramDataGroupIndexer'
 
 type Props = PropsWithChildren<{ nodeRunList: NodeRun[] | undefined, nodeRunsIndex?: number, setNodeRunsIndex?: (index: number) => void }>
 
@@ -43,7 +40,7 @@ export const NodeDetails: FC<Props> = ({ children, nodeRunList, nodeRunsIndex, s
     if (nodeRunsIndex !== undefined && setNodeRunsIndex !== undefined) {
       setNodeRunsIndex(nodeRunsIndexInternal);
     }
-  }, [nodeRunsIndexInternal, setNodeRunsIndex]);
+  }, [nodeRunsIndex, nodeRunsIndexInternal, setNodeRunsIndex]);
 
   const zIndex: number = Math.max(...nodes.map(node => (node[internalsSymbol]?.z || 1) + 10))
   if (!selectedNode) {
@@ -70,14 +67,9 @@ export const NodeDetails: FC<Props> = ({ children, nodeRunList, nodeRunsIndex, s
     return [];
   }) as React.ReactElement[];
 
-
-  if (!nodeRunList || nodeRunList.length === 0) {
-    return null;
-  }
-
   return (
     <div style={wrapperStyle} className="flex gap-4 justify-center drop-shadow mb-6 items-start select-none">
-      {nodeRunList && (
+      {nodeRunList && nodeRunList[nodeRunsIndexInternal] && (
         <DiagramDataGroup label={nodeRunList.length > 1 ? `NodeRun #${nodeRunsIndexInternal}` : "NodeRun"} >
           <DiagramDataGroupIndexer index={nodeRunsIndexInternal} setIndex={setNodeRunsIndexInternal} indexes={nodeRunList.length} />
           <Entry label="Status:">
@@ -91,6 +83,8 @@ export const NodeDetails: FC<Props> = ({ children, nodeRunList, nodeRunsIndex, s
           </Entry>
         </DiagramDataGroup>
       )}
+      <div>
+      </div>
       {diagramDataGroups.map((element, i) => (
         <span key={i}>
           {element}

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/Task/TaskDetails.tsx

@@ -1,22 +1,22 @@
 'use client'
 import LinkWithTenant from '@/app/(authenticated)/[tenantId]/components/LinkWithTenant'
+import { OverflowText } from '@/app/(authenticated)/[tenantId]/components/OverflowText'
 import { getTaskDef } from '@/app/(authenticated)/[tenantId]/taskDef/[name]/getTaskDef'
-import { getVariable, getVariableValue } from '@/app/utils'
+import { getVariableValue } from '@/app/utils'
 import { useQuery } from '@tanstack/react-query'
 import { NodeRun, TaskNode } from 'littlehorse-client/proto'
 import { ExternalLinkIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { FC, useState } from 'react'
-import { NodeDetails } from '../NodeDetails'
 import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
+import { DiagramDataGroupIndexer } from '../DataGroupComponents/DiagramDataGroupIndexer'
 import { Duration } from '../DataGroupComponents/Duration'
 import { Entry } from '../DataGroupComponents/Entry'
-import { Status } from '../DataGroupComponents/Status'
-import { getTaskRun } from './getTaskRun'
-import { DiagramDataGroupIndexer } from '../DataGroupComponents/DiagramDataGroupIndexer'
 import { Result } from '../DataGroupComponents/Result'
-import { OverflowText } from '@/app/(authenticated)/[tenantId]/components/OverflowText'
+import { Status } from '../DataGroupComponents/Status'
 import { ViewVariableAssignments, ViewVariables } from '../DataGroupComponents/Variables'
+import { NodeDetails } from '../NodeDetails'
+import { getTaskRun } from './getTaskRun'
 
 export const TaskDetails: FC<{
   taskNode?: TaskNode
@@ -84,7 +84,7 @@ export const TaskDetails: FC<{
                 </Entry>
               }
               <Entry label="Worker Log Output:">
-                <div className={"bg-gray-300 rounded-lg text-center border border-black max-w-52 text-nowrap min-h-5"} >
+                <div className={"bg-gray-300 rounded-lg text-center border border-black w-full text-nowrap min-h-5"} >
                   <OverflowText text={taskRunData.attempts[taskAttemptIndex].logOutput?.str ?? "-"} className="text-xs" variant={resultString === "ERROR" ? "error" : undefined} />
                 </div>
               </Entry>

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/ThrowEvent/ThrowEvent.tsx

@@ -8,7 +8,6 @@ import LinkWithTenant from '@/app/(authenticated)/[tenantId]/components/LinkWith
 import { Fade } from '../Fade'
 import { NodeDetails } from '../NodeDetails'
 
-import { NodeRunsList } from '../../NodeRunsList'
 import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
 
 const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
@@ -18,7 +17,7 @@ const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
   return (
     <>
       <NodeDetails nodeRunList={data.nodeRunsList}>
-        <DiagramDataGroup label="WorkflowEvent">
+        <DiagramDataGroup label={nodeRun ? "WorkflowEvent" : "WorkflowEventDef"}>
           <div>
             <div>
               <div className="flex items-center gap-1 text-nowrap">

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserTask.tsx

@@ -1,16 +1,14 @@
 import { UserTaskDefDetails } from '@/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserTaskDefDetails'
-import LinkWithTenant from '@/app/(authenticated)/[tenantId]/components/LinkWithTenant'
-import { ExternalLinkIcon, EyeIcon, UserIcon } from 'lucide-react'
+import { UserIcon } from 'lucide-react'
+import { useParams, useRouter } from 'next/navigation'
 import { FC, memo } from 'react'
 import { Handle, Position } from 'reactflow'
+import { ExternalLinkButton } from '../../ExternalLinkButton'
 import { NodeRunsList } from '../../NodeRunsList'
+import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
 import { Fade } from '../Fade'
 import { NodeProps } from '../index'
 import { NodeDetails } from '../NodeDetails'
-import { useParams, useRouter } from 'next/navigation'
-import { Button } from '@/components/ui/button'
-import { ExternalLinkButton } from '../../ExternalLinkButton'
-import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
 
 const Node: FC<NodeProps> = ({ data, selected }) => {
   const router = useRouter()
@@ -22,7 +20,7 @@ const Node: FC<NodeProps> = ({ data, selected }) => {
   return (
     <>
       <NodeDetails nodeRunList={data.nodeRunsList}>
-        <DiagramDataGroup label="UserTask">
+        <DiagramDataGroup label={nodeRun ? "UserTaskRun" : "UserTaskDef"}>
           <div className="flex flex-col">
             <ExternalLinkButton href={`/userTaskDef/${userTask.userTaskDefName}`} label={userTask.userTaskDefName} />
             {nodeRun && (

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

@@ -1,28 +1,29 @@
 'use client'
 import { Diagram } from '@/app/(authenticated)/[tenantId]/(diagram)/components/Diagram'
 import { Navigation } from '@/app/(authenticated)/[tenantId]/components/Navigation'
+import { useWfRun } from '@/app/hooks/useWfRun'
+import { WfRunId, WfRunVariableAccessLevel } from 'littlehorse-client/proto'
 import { useSearchParams } from 'next/navigation'
-import { FC, useCallback } from 'react'
+import { FC } from 'react'
 import { Details } from './Details'
 import { Variables } from './Variables'
-import { useWfRun } from '@/app/hooks/useWfRun'
-import { WfRunVariableAccessLevel } from 'littlehorse-client/proto'
-import { isExternal } from 'util/types'
 
-export const WfRun: FC<{ id: string, tenantId: string }> = ({ id, tenantId }) => {
+export const WfRun: FC<{ ids: string[], tenantId: string }> = ({ ids, tenantId }) => {
+  const wfRunId = ids.reduce((wfRunId, id, i) => (i === 0 ? { id } : { id, parentWfRunId: wfRunId }), {} as WfRunId);
+
   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 } = 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)!
   });
 
@@ -36,8 +37,9 @@ export const WfRun: FC<{ id: string, tenantId: string }> = ({ id, tenantId }) =>
       <Diagram spec={wfSpec} wfRun={wfRun} nodeRuns={nodeRuns} />
 
       <Variables
-        variableDefs={wfSpec.threadSpecs[wfRun.threadRuns[threadRunNumber].threadSpecName].variableDefs}
-        variables={variables.filter(v => v.id?.threadRunNumber == Number(searchParams.get('threadRunNumber'))).concat(inheritedVariables)}
+        variableDefs={variableDefs}
+        variables={variables.filter(v => v.id?.threadRunNumber == Number(searchParams.get('threadRunNumber')))}
+        inheritedVariables={inheritedVariables}
       />
     </div>
   )

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

@@ -2,14 +2,12 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { ClientError, Status } from 'nice-grpc-common'
 import { WfRun } from './components/WfRun'
-import { getWfRun } from '../../../../../actions/getWfRun'
 
 type Props = { params: { ids: string[]; tenantId: string } }
 
 export default async function Page({ params: { ids, tenantId } }: Props) {
-  const id = ids.join('_');
   try {
-    return <WfRun id={id} tenantId={tenantId} />
+    return <WfRun ids={ids} tenantId={tenantId} />
   } catch (error) {
     if (error instanceof ClientError && error.code === Status.NOT_FOUND) return notFound()
     throw error

dashboard/src/app/(authenticated)/[tenantId]/components/OverflowText.tsx

@@ -1,11 +1,11 @@
 'use client'
-import { FC, useEffect, useRef, useState } from 'react'
-import { cn } from '@/components/utils'
+import { tryFormatAsJson } from '@/app/utils/tryFormatAsJson'
 import { Button } from '@/components/ui/button'
-import { ChevronRight } from 'lucide-react'
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
+import { cn } from '@/components/utils'
+import { ChevronRight } from 'lucide-react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { CopyButton } from './CopyButton'
-import { tryFormatAsJson } from '@/app/utils/tryFormatAsJson'
 
 type OverflowTextProps = {
   text: string
@@ -37,7 +37,7 @@ export const OverflowText: FC<OverflowTextProps> = ({ text, className, variant }
               className
             )}
           >
-            <span className="truncate">{formattedText}</span>
+            <span className="truncate font-code">{formattedText}</span>
             <div className="flex flex-shrink-0 items-center gap-1 text-xs text-muted-foreground text-nowrap">
               View
               <ChevronRight className="h-4 w-4 opacity-50" />
@@ -51,14 +51,14 @@ export const OverflowText: FC<OverflowTextProps> = ({ text, className, variant }
               'bg-status-failed text-red-500': variant === 'error',
             })}
           >
-            <div className="max-w-full whitespace-pre-wrap break-words p-4">{formattedText}</div>
+            <div className="max-w-full whitespace-pre-wrap break-words p-4 font-code">{formattedText}</div>
           </div>
         </DialogContent>
       </Dialog>
     )
   }
   return (
-    <div ref={textRef} className={cn(className, "flex items-center justify-center h-full")}>
+    <div ref={textRef} className={cn(className, "flex items-center justify-center h-full font-code")}>
       {formattedText}
     </div>
   )

dashboard/src/app/(authenticated)/[tenantId]/components/Principal.tsx

@@ -1,20 +1,22 @@
-import { useWhoAmI } from '@/contexts/WhoAmIContext'
 import {
   DropdownMenu,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { useWhoAmI } from '@/contexts/WhoAmIContext'
 import { signOut } from 'next-auth/react'
-import { FC, Fragment } from 'react'
+import { FC } from 'react'
 function classNames(...classes: Array<string | boolean>) {
   return classes.filter(Boolean).join(' ')
 }
 
 export const Principal: FC = () => {
   const { user } = useWhoAmI()
+  const isAuthEnabled = process.env.LHD_OAUTH_ENABLED === 'true'
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className="inline-flex w-full justify-center gap-x-1.5 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm">
@@ -25,9 +27,11 @@ export const Principal: FC = () => {
       <DropdownMenuContent className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
         <DropdownMenuLabel>{user?.name}</DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={() => signOut()} className="block w-full px-4 py-2 text-left text-sm">
-          Sign out
-        </DropdownMenuItem>
+        {isAuthEnabled && (
+          <DropdownMenuItem onClick={() => signOut()} className="block w-full px-4 py-2 text-left text-sm">
+            Sign out
+          </DropdownMenuItem>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   )

dashboard/src/app/(authenticated)/[tenantId]/components/Search.tsx

@@ -1,9 +1,9 @@
 'use client'
 import { SEARCH_DEFAULT_LIMIT, SEARCH_ENTITIES, SearchType } from '@/app/constants'
-import useSWRInfinite from 'swr/infinite'
 import { RefreshCwIcon } from 'lucide-react'
 import { useParams, useSearchParams } from 'next/navigation'
 import { FC, useState } from 'react'
+import useSWRInfinite from 'swr/infinite'
 import { SearchFooter } from './SearchFooter'
 import { SearchHeader } from './SearchHeader'
 import { SearchResponse, search } from './searchAction'

dashboard/src/app/(authenticated)/[tenantId]/components/VersionTag.tsx

@@ -0,0 +1,9 @@
+import { TagIcon } from "lucide-react";
+
+export default function VersionTag({ label }: { label: string }) {
+    return (
+        <div className="flex items-center gap-2 rounded bg-blue-200 px-2 font-mono text-sm text-gray-500">
+            <TagIcon className="h-4 w-4 fill-none stroke-gray-500 stroke-1" />{label}
+        </div>
+    )
+}

dashboard/src/app/(authenticated)/[tenantId]/components/tables/ExternalEventDefTable.tsx

@@ -1,10 +1,10 @@
 import { ExternalEventDefId } from 'littlehorse-client/proto'
-import LinkWithTenant from '../LinkWithTenant'
 import { FC, Fragment } from 'react'
 import { SearchResultProps } from '.'
+import { SelectionLink } from '../SelectionLink'
 
 export const ExternalEventDefTable: FC<SearchResultProps> = ({ pages = [] }) => {
-  if (pages.length === 0) {
+  if (pages.every(page => page.results.length === 0)) {
     return <div className="flex min-h-[360px] items-center justify-center text-center italic">No ExternalEventDefs</div>
   }
 
@@ -13,11 +13,9 @@ export const ExternalEventDefTable: FC<SearchResultProps> = ({ pages = [] }) =>
       {pages.map((page, i) => (
         <Fragment key={i}>
           {page.results.map(({ name }: ExternalEventDefId) => (
-            <div key={name} className="my-2 flex gap-2">
-              <LinkWithTenant className="underline hover:no-underline" href={`/externalEventDef/${name}`}>
-                {name}
-              </LinkWithTenant>
-            </div>
+            <SelectionLink key={name} href={`/externalEventDef/${name}`}>
+              <p className="group">{name}</p>
+            </SelectionLink>
           ))}
         </Fragment>
       ))}