feat(dashboard): varName of TaskDef in WfSpec (#846)

* feat(dashboard): varName of TaskDef in WfSpec * fix(dashboard): fetch `TaskDef` to get var name * refactor(dashboard): call taskDef details on selected Thanks for the suggestion @mijailr that was good one.
littlehorse-enterprises · Aug 6, 2024 · a576cc4 · a576cc4
1 parent 33133d1
commit a576cc4
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/Task.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/Task.tsx
@@ -10,9 +10,10 @@ const Node: FC<NodeProps> = ({ selected, data }) => {
   const { fade, nodeNeedsToBeHighlighted } = data
   if (!data.task) return null
   const { task } = data
+
   return (
     <>
-      <TaskDetails task={task} nodeRun={data.nodeRun} />
+      <TaskDetails taskNode={task} nodeRun={data.nodeRun} selected={selected} />
       <Fade fade={fade} status={data.nodeRun?.status}>
         <div
           className={

diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/TaskDetails.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/TaskDetails.tsx
@@ -1,3 +1,4 @@
+import { getTaskDef } from '@/app/(authenticated)/taskDef/[name]/getTaskDef'
 import { getVariable, getVariableValue } from '@/app/utils'
 import { useWhoAmI } from '@/contexts/WhoAmIContext'
 import { useQuery } from '@tanstack/react-query'
@@ -9,54 +10,77 @@ import { useModal } from '../../../hooks/useModal'
 import { NodeDetails } from '../NodeDetails'
 import { getTaskRun } from './getTaskRun'
 
-export const TaskDetails: FC<{ task?: TaskNode; nodeRun?: NodeRun }> = ({ task, nodeRun }) => {
+export const TaskDetails: FC<{ taskNode?: TaskNode; nodeRun?: NodeRun; selected: boolean }> = ({
+  taskNode,
+  nodeRun,
+  selected,
+}) => {
   const { tenantId } = useWhoAmI()
   const { data } = useQuery({
     queryKey: ['taskRun', nodeRun, tenantId],
     queryFn: async () => {
-      if (nodeRun?.task?.taskRunId) return await getTaskRun({ tenantId, ...nodeRun.task.taskRunId })
-      return null
+      if (!nodeRun?.task?.taskRunId) return null
+      return await getTaskRun({ tenantId, ...nodeRun.task.taskRunId })
+    },
+  })
+
+  const { data: taskDef } = useQuery({
+    queryKey: ['taskDef', taskNode, tenantId, nodeRun, selected],
+    queryFn: async () => {
+      if (!taskNode?.taskDefId?.name) return null
+      if (nodeRun?.task?.taskRunId) return null
+      if (!selected) return null
+      const taskDef = await getTaskDef({
+        name: taskNode?.taskDefId?.name,
+      })
+
+      console.log('taskDef', taskDef)
+
+      return taskDef
     },
   })
 
   const { setModal, setShowModal } = useModal()
 
   const onClick = useCallback(() => {
-    if (data) {
-      setModal({ type: 'taskRun', data: data })
-      setShowModal(true)
-    }
+    if (!data) return
+
+    setModal({ type: 'taskRun', data })
+    setShowModal(true)
   }, [data, setModal, setShowModal])
 
-  if (!task) return null
+  if (!taskNode || (!taskDef && !nodeRun?.task?.taskRunId)) return null
 
   return (
     <NodeDetails>
       <div className="mb-2">
         <div className="flex items-center gap-1 whitespace-nowrap text-nowrap">
           <h3 className="font-bold">TaskDef</h3>
           {nodeRun ? (
-            <TaskLink taskName={task.taskDefId?.name} />
+            <TaskLink taskName={taskNode.taskDefId?.name} />
           ) : (
             <>
-              {task.taskDefId && <TaskLink taskName={task.taskDefId.name} />}
-              {task.dynamicTask && <>{getVariable(task.dynamicTask)}</>}
+              {taskNode.taskDefId && <TaskLink taskName={taskNode.taskDefId.name} />}
+              {taskNode.dynamicTask && <>{getVariable(taskNode.dynamicTask)}</>}
             </>
           )}
         </div>
         <div className="flex gap-2 text-nowrap">
-          <div className="flex items-center justify-center">Timeout: {task.timeoutSeconds}s</div>
-          <div className="flex items-center justify-center">Retries: {task.retries}</div>
+          <div className="flex items-center justify-center">Timeout: {taskNode.timeoutSeconds}s</div>
+          <div className="flex items-center justify-center">Retries: {taskNode.retries}</div>
         </div>
       </div>
-      {task.variables && task.variables.length > 0 && (
+      {taskNode.variables && taskNode.variables.length > 0 && (
         <div className="whitespace-nowrap">
           <h3 className="font-bold">Inputs</h3>
           <ol className="list-inside list-decimal">
-            {task.variables.map((variable, i) => (
+            {taskNode.variables.map((variable, i) => (
               <li className="mb-1 flex gap-1" key={`variable.${i}`}>
                 <div className="bg-gray-200 px-2 font-mono text-fuchsia-500">
-                  {data?.inputVariables?.[i]?.varName ?? `arg${i}`}
+                  {data?.inputVariables?.[i]?.varName ??
+                    taskDef?.inputVars[i].name ??
+                    variable.variableName ??
+                    `arg${i}`}
                 </div>
                 <div> = </div>
                 <div className="truncate">