Organized the console better and added the icon from the block

This commit is contained in:
Emir Karabeg
2025-01-31 14:41:20 -08:00
parent 282d4a62a0
commit 5a5450f19e
3 changed files with 43 additions and 29 deletions
@@ -9,12 +9,14 @@ import {
} from 'lucide-react'
import { ConsoleEntry as ConsoleEntryType } from '@/stores/console/types'
import { JSONView } from '../json-view/json-view'
import { getBlock } from '@/blocks'
interface ConsoleEntryProps {
entry: ConsoleEntryType
consoleWidth: number
}
export function ConsoleEntry({ entry }: ConsoleEntryProps) {
export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
const [isExpanded, setIsExpanded] = useState(false)
const timeAgo = useMemo(
@@ -25,29 +27,53 @@ export function ConsoleEntry({ entry }: ConsoleEntryProps) {
[entry.startedAt]
)
const blockConfig = useMemo(() => {
if (!entry.blockName) return null
const blockType = entry.blockName.split(' ')[0].toLowerCase()
return getBlock(blockType)
}, [entry.blockName])
const BlockIcon = blockConfig?.toolbar.icon
const statusIcon = entry.error ? (
<AlertCircle className="h-4 w-4 text-destructive" />
) : (
<CheckCircle2 className="h-4 w-4 text-success" />
<CheckCircle2 className="h-4 w-4 text-muted-foreground" />
)
return (
<div className="border-b border-border hover:bg-accent/50 transition-colors">
<div className="p-4 space-y-4">
{entry.blockName && (
<div className="flex items-center gap-2 text-sm">
{statusIcon}
<span className="text-muted-foreground">{entry.blockName}</span>
</div>
)}
<div className="grid grid-cols-2 gap-4 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<Calendar className="h-4 w-4" />
<span>{format(new Date(entry.startedAt), 'HH:mm:ss')}</span>
</div>
<div className="flex items-center gap-2">
<Clock className="h-4 w-4" />
<span>Duration: {entry.durationMs}ms</span>
<div
className={`${
consoleWidth >= 400
? 'flex items-center justify-between'
: 'grid gap-4 grid-cols-1'
}`}
>
{entry.blockName && (
<div className="flex items-center gap-2 text-sm">
{BlockIcon ? (
<BlockIcon className="h-4 w-4 text-muted-foreground" />
) : (
<Terminal className="h-4 w-4 text-muted-foreground" />
)}
<span className="text-muted-foreground">{entry.blockName}</span>
</div>
)}
<div
className={`${
consoleWidth >= 400 ? 'flex gap-4' : 'grid grid-cols-2 gap-4'
} text-sm text-muted-foreground`}
>
<div className="flex items-center gap-2">
<Calendar className="h-4 w-4" />
<span>{format(new Date(entry.startedAt), 'HH:mm:ss')}</span>
</div>
<div className="flex items-center gap-2">
<Clock className="h-4 w-4" />
<span>Duration: {entry.durationMs}ms</span>
</div>
</div>
</div>
+1 -1
View File
@@ -99,7 +99,7 @@ export function Console() {
</div>
) : (
filteredEntries.map((entry) => (
<ConsoleEntry key={entry.id} entry={entry} />
<ConsoleEntry key={entry.id} entry={entry} consoleWidth={width} />
))
)}
</ScrollArea>
-12
View File
@@ -50,18 +50,6 @@ export function useWorkflowExecution() {
})
}
// Add final execution result to console
addConsole({
output: result.output,
error: result.error,
durationMs: result.metadata?.duration ?? -1,
startedAt: result.metadata?.startTime || new Date().toISOString(),
endedAt: result.metadata?.endTime || new Date().toISOString(),
workflowId: activeWorkflowId,
timestamp: result.metadata?.startTime || new Date().toISOString(),
blockName: 'Workflow Result'
})
if (result.logs) {
console.group('Detailed Block Logs')
result.logs.forEach((log) => {