-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dashboard): interactive nodes (#775)
* feat(dashboard): add taskRun details * feat(wfRun): improve thread selector
- Loading branch information
Showing
56 changed files
with
348 additions
and
107 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
10 changes: 10 additions & 0 deletions
10
dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/Modals.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { FC } from 'react' | ||
| import { ModalComponents } from '.' | ||
| import { useModal } from '../../hooks/useModal' | ||
|
|
||
| export const Modals: FC = () => { | ||
| const { modal } = useModal() | ||
| if (!modal) return null | ||
| const Component = ModalComponents[modal.type] | ||
| return <Component {...modal} /> | ||
| } |
69 changes: 69 additions & 0 deletions
69
dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/TaskRun.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { getVariableValue } from '@/app/utils' | ||
| import { Dialog } from '@headlessui/react' | ||
| import { ClipboardDocumentIcon } from '@heroicons/react/24/outline' | ||
| import { FC, useMemo, useState } from 'react' | ||
| import { Modal } from '../../context' | ||
| import { useModal } from '../../hooks/useModal' | ||
|
|
||
| export const TaskRun: FC<Modal> = ({ data }) => { | ||
| const { showModal, setShowModal } = useModal() | ||
| const [attemptIndex, setAttemptIndex] = useState(data.attempts.length - 1) | ||
| const attempt = useMemo(() => data.attempts[attemptIndex], [attemptIndex, data.attempts]) | ||
| return ( | ||
| <Dialog open={showModal} className="relative z-50" onClose={() => setShowModal(false)}> | ||
| <div className="fixed inset-0 bg-black/30" aria-hidden="true" /> | ||
| <div className="fixed inset-0 flex items-center justify-center p-4"> | ||
| <Dialog.Panel className="w-1/3 min-w-fit rounded bg-white p-2"> | ||
| <Dialog.Title className="mb-2 flex items-center justify-between"> | ||
| <h2 className="text-lg font-bold">TaskRun</h2> | ||
| <div className="item-center flex gap-1 bg-gray-200 px-2 py-1"> | ||
| <span className="font-mono text-sm">{data.id?.taskGuid}</span> | ||
| <ClipboardDocumentIcon className="h-4 w-4 fill-transparent stroke-blue-500" /> | ||
| </div> | ||
| </Dialog.Title> | ||
| <Dialog.Description> | ||
| <div className=""> | ||
| <div className="flex items-center justify-between bg-green-200 p-2"> | ||
| <div className="flex items-center gap-1"> | ||
| <div className="flex gap-1"> | ||
| {data.attempts.reverse().map((_, i) => { | ||
| const index = data.attempts.length - i - 1 | ||
| return ( | ||
| <button | ||
| key={`attempt-${index}`} | ||
| className={`border-2 border-blue-500 px-2 ${attemptIndex === index ? 'text-blue-500' : 'bg-blue-500 text-white'}`} | ||
| onClick={() => setAttemptIndex(index)} | ||
| > | ||
| {index} | ||
| </button> | ||
| ) | ||
| })} | ||
| </div> | ||
| </div> | ||
| <div className=""> | ||
| <div className="">{attempt.status}</div> | ||
| </div> | ||
| </div> | ||
| <div className="p-2"> | ||
| <div className="flex items-center gap-2"> | ||
| <div className="font-bold">startTime:</div> | ||
| <div className="">{attempt.startTime}</div> | ||
| </div> | ||
| <div className="flex items-center gap-2"> | ||
| <div className="font-bold">endTime:</div> | ||
| <div className="">{attempt.endTime}</div> | ||
| </div> | ||
| </div> | ||
| {attempt.output && ( | ||
| <div className="mt-2 flex flex-col rounded bg-zinc-500 p-1 text-white"> | ||
| <h3 className="font-bold">Output</h3> | ||
| <pre className="overflow-x-auto">{getVariableValue(attempt.output)}</pre> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </Dialog.Description> | ||
| </Dialog.Panel> | ||
| </div> | ||
| </Dialog> | ||
| ) | ||
| } |
13 changes: 13 additions & 0 deletions
13
dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { FC } from 'react' | ||
| import { Modal } from '../../context' | ||
| import { TaskRun } from './TaskRun' | ||
|
|
||
| export * from './Modals' | ||
|
|
||
| export type ModalComponent = FC<Modal> | ||
|
|
||
| export const ModalComponents = { | ||
| taskRun: TaskRun, | ||
| } as const | ||
|
|
||
| export type ModalType = keyof typeof ModalComponents |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/getTaskRun.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| 'use server' | ||
| import { lhClient } from '@/app/lhClient' | ||
| import { WithTenant } from '@/types' | ||
| import { TaskRunId } from 'littlehorse-client/dist/proto/object_id' | ||
|
|
||
| export type TaskRunRequestProps = TaskRunId & WithTenant | ||
| export const getTaskRun = async ({ tenantId, ...req }: TaskRunRequestProps) => { | ||
| const client = await lhClient({ tenantId }) | ||
| return client.getTaskRun(req) | ||
| } |
1 change: 1 addition & 0 deletions
1
dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './Task' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
14 changes: 7 additions & 7 deletions
14
.../[...props]/components/NodeTypes/index.ts → ...)/(diagram)/components/NodeTypes/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
dashboard-new/src/app/(authenticated)/(diagram)/components/ThreadPanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid' | ||
| import { WfRun } from 'littlehorse-client/dist/proto/wf_run' | ||
| import { WfSpec } from 'littlehorse-client/dist/proto/wf_spec' | ||
| import { FC, useEffect, useMemo } from 'react' | ||
| import { useScrollbar } from '../hooks/useScrollbar' | ||
| import { useThread } from '../hooks/useThread' | ||
|
|
||
| export const ThreadPanel: FC<{ spec: WfSpec; wfRun?: WfRun }> = ({ spec, wfRun }) => { | ||
| const { thread, setThread } = useThread() | ||
| const threads = useMemo(() => extractThreads(spec, wfRun), [spec, wfRun]) | ||
| const { scroll, itemsRef, containerRef, maxScroll, scrollLeft, scrollRight } = useScrollbar() | ||
|
|
||
| return ( | ||
| <div className="relative mb-2 flex items-center"> | ||
| <div | ||
| className={`absolute left-0 top-0 z-10 flex after:h-[38px] after:w-[50px] after:bg-gradient-to-r after:from-white after:to-transparent after:content-[''] ${scroll === 0 ? 'hidden' : ''}`} | ||
| > | ||
| <button className="bg-white" onClick={() => scrollLeft()}> | ||
| <ChevronLeftIcon className="h-6 w-6" /> | ||
| </button> | ||
| </div> | ||
| <div className="flex touch-pan-y items-center overflow-hidden text-nowrap" ref={containerRef}> | ||
| <div | ||
| className="flex gap-2 duration-[15ms] ease-[cubic-bezier(.05,0,0,1)] will-change-transform " | ||
| style={{ transform: `translateX(${scroll}px)` }} | ||
| ref={itemsRef} | ||
| > | ||
| {threads.map(({ name, number }) => ( | ||
| <button | ||
| className={ | ||
| 'border-[1px] p-2 text-sm shadow ' + | ||
| (name === thread.name && number !== undefined && number === thread.number | ||
| ? 'bg-blue-500 text-white' | ||
| : 'bg-white text-black') | ||
| } | ||
| key={`${name}-${number}`} | ||
| onClick={() => { | ||
| setThread(prev => { | ||
| const current = number === undefined ? { name } : { name, number } | ||
| return { | ||
| ...prev, | ||
| ...current, | ||
| } | ||
| }) | ||
| }} | ||
| > | ||
| {`${name}${number !== undefined ? `-${number}` : ''}`} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={`absolute right-0 top-0 flex before:h-[38px] before:w-[50px] before:bg-gradient-to-l before:from-white before:to-transparent before:content-[''] ${!maxScroll || -scroll >= maxScroll ? 'hidden' : ''}`} | ||
| > | ||
| <button className="bg-white" onClick={() => scrollRight()}> | ||
| <ChevronRightIcon className="h-6 w-6" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const extractThreads = (spec: WfSpec, wfRun?: WfRun): { name: string; number?: number }[] => { | ||
| if (wfRun) { | ||
| return wfRun.threadRuns.map(threadRun => ({ | ||
| name: threadRun.threadSpecName, | ||
| number: threadRun.number, | ||
| })) | ||
| } | ||
| return Object.keys(spec.threadSpecs).map(name => ({ name })) | ||
| } |
23 changes: 23 additions & 0 deletions
23
dashboard-new/src/app/(authenticated)/(diagram)/context/ModalContext.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { TaskRun } from 'littlehorse-client/dist/proto/task_run' | ||
| import { Dispatch, SetStateAction, createContext } from 'react' | ||
| import { ModalType } from '../components/Modals' | ||
|
|
||
| export type Modal = { | ||
| type: ModalType | ||
| data: TaskRun | ||
| } | ||
|
|
||
| type ModalContextType = { | ||
| modal: Modal | null | ||
| setModal: Dispatch<SetStateAction<Modal | null>> | ||
| showModal: boolean | ||
| setShowModal: Dispatch<SetStateAction<boolean>> | ||
| } | ||
| export const ModalContext = createContext<ModalContextType>({ | ||
| modal: null, | ||
| setModal: () => {}, | ||
| showModal: false, | ||
| setShowModal: () => {}, | ||
| }) | ||
|
|
||
| export const ModalProvider = ModalContext.Provider |
13 changes: 13 additions & 0 deletions
13
dashboard-new/src/app/(authenticated)/(diagram)/context/ThreadContext.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { Dispatch, SetStateAction, createContext } from 'react' | ||
|
|
||
| export type ThreadType = { | ||
| name: string | ||
| number: number | ||
| } | ||
| type ThreadContextType = { | ||
| thread: ThreadType | ||
| setThread: Dispatch<SetStateAction<ThreadType>> | ||
| } | ||
| export const ThreadContext = createContext<ThreadContextType>({ thread: { name: '', number: 0 }, setThread: () => {} }) | ||
|
|
||
| export const ThreadProvider = ThreadContext.Provider |
2 changes: 2 additions & 0 deletions
2
dashboard-new/src/app/(authenticated)/(diagram)/context/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './ModalContext' | ||
| export * from './ThreadContext' |
Oops, something went wrong.