@@ -19,6 +19,14 @@ import { Header2, Header3 } from "~/components/primitives/Headers";
19
19
import { Paragraph } from "~/components/primitives/Paragraph" ;
20
20
import * as Property from "~/components/primitives/PropertyTable" ;
21
21
import { Spinner } from "~/components/primitives/Spinner" ;
22
+ import {
23
+ Table ,
24
+ TableBody ,
25
+ TableCell ,
26
+ TableHeader ,
27
+ TableHeaderCell ,
28
+ TableRow ,
29
+ } from "~/components/primitives/Table" ;
22
30
import { TabButton , TabContainer } from "~/components/primitives/Tabs" ;
23
31
import { TextLink } from "~/components/primitives/TextLink" ;
24
32
import { InfoIconTooltip , SimpleTooltip } from "~/components/primitives/Tooltip" ;
@@ -28,6 +36,7 @@ import { RunTag } from "~/components/runs/v3/RunTag";
28
36
import { SpanEvents } from "~/components/runs/v3/SpanEvents" ;
29
37
import { SpanTitle } from "~/components/runs/v3/SpanTitle" ;
30
38
import { TaskRunAttemptStatusCombo } from "~/components/runs/v3/TaskRunAttemptStatus" ;
39
+ import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable" ;
31
40
import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus" ;
32
41
import { useOrganization } from "~/hooks/useOrganizations" ;
33
42
import { useProject } from "~/hooks/useProject" ;
@@ -308,30 +317,45 @@ function SpanBody({
308
317
</ Property . Item >
309
318
{ span . triggeredRuns . length > 0 && (
310
319
< Property . Item >
311
- < Property . Label > Triggered runs</ Property . Label >
312
- < Property . Value >
313
- { span . triggeredRuns . map ( ( run ) => (
314
- < TextLink
315
- to = { v3RunSpanPath (
316
- organization ,
317
- project ,
318
- { friendlyId : run . friendlyId } ,
319
- { spanId : run . spanId }
320
- ) }
321
- className = "group flex flex-wrap items-center gap-x-1 gap-y-0"
322
- >
323
- { run . taskIdentifier }
324
- < span className = "break-all text-text-dimmed transition-colors group-hover:text-text-bright/80" >
325
- ({ run . friendlyId } )
326
- </ span >
327
- </ TextLink >
328
- ) ) }
329
- </ Property . Value >
320
+ < div className = "flex flex-col gap-1.5" >
321
+ < Header3 > Triggered runs</ Header3 >
322
+ < Table >
323
+ < TableHeader >
324
+ < TableRow >
325
+ < TableHeaderCell > Run #</ TableHeaderCell >
326
+ < TableHeaderCell > Task</ TableHeaderCell >
327
+ < TableHeaderCell > Version</ TableHeaderCell >
328
+ < TableHeaderCell > Created at</ TableHeaderCell >
329
+ </ TableRow >
330
+ </ TableHeader >
331
+ < TableBody >
332
+ { span . triggeredRuns . map ( ( run ) => {
333
+ const path = v3RunSpanPath (
334
+ organization ,
335
+ project ,
336
+ { friendlyId : run . friendlyId } ,
337
+ { spanId : run . spanId }
338
+ ) ;
339
+ return (
340
+ < TableRow key = { run . friendlyId } >
341
+ < TableCell to = { path } > { run . number } </ TableCell >
342
+ < TableCell to = { path } > { run . taskIdentifier } </ TableCell >
343
+ < TableCell to = { path } >
344
+ { run . lockedToVersion ?. version ?? "–" }
345
+ </ TableCell >
346
+ < TableCell to = { path } >
347
+ < DateTime date = { run . createdAt } />
348
+ </ TableCell >
349
+ </ TableRow >
350
+ ) ;
351
+ } ) }
352
+ </ TableBody >
353
+ </ Table >
354
+ </ div >
330
355
</ Property . Item >
331
356
) }
332
357
</ Property . Table >
333
-
334
- { span . events !== undefined && < SpanEvents spanEvents = { span . events } /> }
358
+ { span . events . length > 0 && < SpanEvents spanEvents = { span . events } /> }
335
359
{ span . properties !== undefined && (
336
360
< CodeBlock
337
361
rowTitle = "Properties"
@@ -448,6 +472,78 @@ function RunBody({
448
472
/>
449
473
</ Property . Value >
450
474
</ Property . Item >
475
+ { run . relationships . root ? (
476
+ run . relationships . root . isParent ? (
477
+ < Property . Item >
478
+ < Property . Label > Root & Parent </ Property . Label >
479
+ < Property . Value >
480
+ < TextLink
481
+ to = { v3RunSpanPath (
482
+ organization ,
483
+ project ,
484
+ {
485
+ friendlyId : run . relationships . root . friendlyId ,
486
+ } ,
487
+ { spanId : run . relationships . root . spanId }
488
+ ) }
489
+ className = "group flex flex-wrap items-center gap-x-1 gap-y-0"
490
+ >
491
+ { run . relationships . root . taskIdentifier }
492
+ < span className = "break-all text-text-dimmed transition-colors group-hover:text-text-bright/80" >
493
+ ({ run . relationships . root . friendlyId } )
494
+ </ span >
495
+ </ TextLink >
496
+ </ Property . Value >
497
+ </ Property . Item >
498
+ ) : (
499
+ < >
500
+ < Property . Item >
501
+ < Property . Label > Root</ Property . Label >
502
+ < Property . Value >
503
+ < TextLink
504
+ to = { v3RunSpanPath (
505
+ organization ,
506
+ project ,
507
+ {
508
+ friendlyId : run . relationships . root . friendlyId ,
509
+ } ,
510
+ { spanId : run . relationships . root . spanId }
511
+ ) }
512
+ className = "group flex flex-wrap items-center gap-x-1 gap-y-0"
513
+ >
514
+ { run . relationships . root . taskIdentifier }
515
+ < span className = "break-all text-text-dimmed transition-colors group-hover:text-text-bright/80" >
516
+ ({ run . relationships . root . friendlyId } )
517
+ </ span >
518
+ </ TextLink >
519
+ </ Property . Value >
520
+ </ Property . Item >
521
+ { run . relationships . parent ? (
522
+ < Property . Item >
523
+ < Property . Label > Parent</ Property . Label >
524
+ < Property . Value >
525
+ < TextLink
526
+ to = { v3RunSpanPath (
527
+ organization ,
528
+ project ,
529
+ {
530
+ friendlyId : run . relationships . parent . friendlyId ,
531
+ } ,
532
+ { spanId : run . relationships . parent . spanId }
533
+ ) }
534
+ className = "group flex flex-wrap items-center gap-x-1 gap-y-0"
535
+ >
536
+ { run . relationships . parent . taskIdentifier }
537
+ < span className = "break-all text-text-dimmed transition-colors group-hover:text-text-bright/80" >
538
+ ({ run . relationships . parent . friendlyId } )
539
+ </ span >
540
+ </ TextLink >
541
+ </ Property . Value >
542
+ </ Property . Item >
543
+ ) : null }
544
+ </ >
545
+ )
546
+ ) : null }
451
547
< Property . Item >
452
548
< Property . Label > Version</ Property . Label >
453
549
< Property . Value >
@@ -601,80 +697,7 @@ function RunBody({
601
697
< TaskRunStatusCombo status = { run . status } className = "text-sm" />
602
698
</ div >
603
699
< RunTimeline run = { run } />
604
- { run . relationships . root ? (
605
- < Property . Table >
606
- { run . relationships . root . isParent ? (
607
- < Property . Item >
608
- < Property . Label > Root & Parent </ Property . Label >
609
- < Property . Value >
610
- < TextLink
611
- to = { v3RunSpanPath (
612
- organization ,
613
- project ,
614
- {
615
- friendlyId : run . relationships . root . friendlyId ,
616
- } ,
617
- { spanId : run . relationships . root . spanId }
618
- ) }
619
- className = "group flex flex-wrap items-center gap-x-1 gap-y-0"
620
- >
621
- { run . relationships . root . taskIdentifier }
622
- < span className = "break-all text-text-dimmed transition-colors group-hover:text-text-bright/80" >
623
- ({ run . relationships . root . friendlyId } )
624
- </ span >
625
- </ TextLink >
626
- </ Property . Value >
627
- </ Property . Item >
628
- ) : (
629
- < >
630
- < Property . Item >
631
- < Property . Label > Root</ Property . Label >
632
- < Property . Value >
633
- < TextLink
634
- to = { v3RunSpanPath (
635
- organization ,
636
- project ,
637
- {
638
- friendlyId : run . relationships . root . friendlyId ,
639
- } ,
640
- { spanId : run . relationships . root . spanId }
641
- ) }
642
- className = "group flex flex-wrap items-center gap-x-1 gap-y-0"
643
- >
644
- { run . relationships . root . taskIdentifier }
645
- < span className = "break-all text-text-dimmed transition-colors group-hover:text-text-bright/80" >
646
- ({ run . relationships . root . friendlyId } )
647
- </ span >
648
- </ TextLink >
649
- </ Property . Value >
650
- </ Property . Item >
651
- { run . relationships . parent ? (
652
- < Property . Item >
653
- < Property . Label > Parent</ Property . Label >
654
- < Property . Value >
655
- < TextLink
656
- to = { v3RunSpanPath (
657
- organization ,
658
- project ,
659
- {
660
- friendlyId : run . relationships . parent . friendlyId ,
661
- } ,
662
- { spanId : run . relationships . parent . spanId }
663
- ) }
664
- className = "group flex flex-wrap items-center gap-x-1 gap-y-0"
665
- >
666
- { run . relationships . parent . taskIdentifier }
667
- < span className = "break-all text-text-dimmed transition-colors group-hover:text-text-bright/80" >
668
- ({ run . relationships . parent . friendlyId } )
669
- </ span >
670
- </ TextLink >
671
- </ Property . Value >
672
- </ Property . Item >
673
- ) : null }
674
- </ >
675
- ) }
676
- </ Property . Table >
677
- ) : null }
700
+
678
701
{ run . payload !== undefined && (
679
702
< PacketDisplay data = { run . payload } dataType = { run . payloadType } title = "Payload" />
680
703
) }
0 commit comments