feat: workflow visualization and qol improvements (#140)

* feat: workflow visualization and qol improvements

* fix: npm build

api-contracts/openapi/components/schemas/workflow_run.yaml

@@ -11,6 +11,8 @@ WorkflowRun:
       $ref: "./_index.yaml#/WorkflowVersion"
     status:
       $ref: "#/WorkflowRunStatus"
+    displayName:
+      type: string
     jobRuns:
       type: array
       items:
@@ -182,15 +184,23 @@ StepRun:
     startedAt:
       type: string
       format: date-time
+    startedAtEpoch:
+      type: integer
     finishedAt:
       type: string
       format: date-time
+    finishedAtEpoch:
+      type: integer
     timeoutAt:
       type: string
       format: date-time
+    timeoutAtEpoch:
+      type: integer
     cancelledAt:
       type: string
       format: date-time
+    cancelledAtEpoch:
+      type: integer
     cancelledReason:
       type: string
     cancelledError:

api/v1/server/oas/transformers/workflow_run.go

@@ -9,6 +9,7 @@ import (
 	"github.com/hatchet-dev/hatchet/internal/repository"
 	"github.com/hatchet-dev/hatchet/internal/repository/prisma/db"
 	"github.com/hatchet-dev/hatchet/internal/repository/prisma/dbsqlc"
+	"github.com/hatchet-dev/hatchet/internal/repository/prisma/sqlchelpers"
 )
 
 func ToWorkflowRun(run *db.WorkflowRunModel) (*gen.WorkflowRun, error) {
@@ -19,6 +20,10 @@ func ToWorkflowRun(run *db.WorkflowRunModel) (*gen.WorkflowRun, error) {
 		WorkflowVersionId: run.WorkflowVersionID,
 	}
 
+	if displayName, ok := run.DisplayName(); ok {
+		res.DisplayName = &displayName
+	}
+
 	if startedAt, ok := run.StartedAt(); ok && !startedAt.IsZero() {
 		res.StartedAt = &startedAt
 	}
@@ -159,14 +164,17 @@ func ToStepRun(stepRun *db.StepRunModel) (*gen.StepRun, error) {
 
 	if startedAt, ok := stepRun.StartedAt(); ok && !startedAt.IsZero() {
 		res.StartedAt = &startedAt
+		res.StartedAtEpoch = getEpochFromTime(startedAt)
 	}
 
 	if finishedAt, ok := stepRun.FinishedAt(); ok && !finishedAt.IsZero() {
 		res.FinishedAt = &finishedAt
+		res.FinishedAtEpoch = getEpochFromTime(finishedAt)
 	}
 
 	if cancelledAt, ok := stepRun.CancelledAt(); ok && !cancelledAt.IsZero() {
 		res.CancelledAt = &cancelledAt
+		res.CancelledAtEpoch = getEpochFromTime(cancelledAt)
 	}
 
 	if cancelledError, ok := stepRun.CancelledError(); ok {
@@ -183,6 +191,7 @@ func ToStepRun(stepRun *db.StepRunModel) (*gen.StepRun, error) {
 
 	if timeoutAt, ok := stepRun.TimeoutAt(); ok && !timeoutAt.IsZero() {
 		res.TimeoutAt = &timeoutAt
+		res.TimeoutAtEpoch = getEpochFromTime(timeoutAt)
 	}
 
 	if workerId, ok := stepRun.WorkerID(); ok {
@@ -216,6 +225,11 @@ func ToStepRun(stepRun *db.StepRunModel) (*gen.StepRun, error) {
 	return res, nil
 }
 
+func getEpochFromTime(t time.Time) *int {
+	epoch := int(t.UnixMilli())
+	return &epoch
+}
+
 func ToWorkflowRunTriggeredBy(triggeredBy *db.WorkflowRunTriggeredByModel) *gen.WorkflowRunTriggeredBy {
 	res := &gen.WorkflowRunTriggeredBy{
 		Metadata: *toAPIMetadata(triggeredBy.ID, triggeredBy.CreatedAt, triggeredBy.UpdatedAt),
@@ -263,15 +277,18 @@ func ToWorkflowRunFromSQLC(row *dbsqlc.ListWorkflowRunsRow) *gen.WorkflowRun {
 
 	triggeredBy := &gen.WorkflowRunTriggeredBy{
 		Metadata: *toAPIMetadata(pgUUIDToStr(runTriggeredBy.ID), runTriggeredBy.CreatedAt.Time, runTriggeredBy.UpdatedAt.Time),
-		ParentId: runTriggeredBy.ParentId,
+		ParentId: sqlchelpers.UUIDToStr(runTriggeredBy.ParentId),
 	}
 
 	if event != nil {
 		triggeredBy.Event = event
 	}
 
+	workflowRunId := sqlchelpers.UUIDToStr(run.ID)
+
 	res := &gen.WorkflowRun{
-		Metadata:          *toAPIMetadata(run.ID, run.CreatedAt.Time, run.UpdatedAt.Time),
+		Metadata:          *toAPIMetadata(workflowRunId, run.CreatedAt.Time, run.UpdatedAt.Time),
+		DisplayName:       &run.DisplayName.String,
 		TenantId:          pgUUIDToStr(run.TenantId),
 		StartedAt:         startedAt,
 		FinishedAt:        finishedAt,

examples/dag/main.go

@@ -65,6 +65,8 @@ func run(ch <-chan interface{}, events chan<- string) error {
 					input := &userCreateEvent{}
 					ctx.WorkflowInput(input)
 
+					time.Sleep(1 * time.Second)
+
 					return &stepOutput{
 						Message: "Step 1 got username: " + input.Username,
 					}, nil
@@ -74,6 +76,8 @@ func run(ch <-chan interface{}, events chan<- string) error {
 					input := &userCreateEvent{}
 					ctx.WorkflowInput(input)
 
+					time.Sleep(2 * time.Second)
+
 					return &stepOutput{
 						Message: "Step 2 got username: " + input.Username,
 					}, nil
@@ -85,6 +89,8 @@ func run(ch <-chan interface{}, events chan<- string) error {
 					step2Out := &stepOutput{}
 					ctx.StepOutput("step-two", step2Out)
 
+					time.Sleep(3 * time.Second)
+
 					return &stepOutput{
 						Message: "Step 3: has parents 1 and 2:" + step1Out.Message + ", " + step2Out.Message,
 					}, nil
@@ -96,6 +102,8 @@ func run(ch <-chan interface{}, events chan<- string) error {
 					step3Out := &stepOutput{}
 					ctx.StepOutput("step-three", step3Out)
 
+					time.Sleep(4 * time.Second)
+
 					return &stepOutput{
 						Message: "Step 4: has parents 1 and 3" + step1Out.Message + ", " + step3Out.Message,
 					}, nil
@@ -104,6 +112,8 @@ func run(ch <-chan interface{}, events chan<- string) error {
 					step4Out := &stepOutput{}
 					ctx.StepOutput("step-four", step4Out)
 
+					time.Sleep(5 * time.Second)
+
 					return &stepOutput{
 						Message: "Step 5: has parent 4" + step4Out.Message,
 					}, nil

frontend/app/package.json

@@ -52,6 +52,7 @@
     "cmdk": "^0.2.0",
     "cron-parser": "^4.9.0",
     "cronstrue": "^2.47.0",
+    "dagre": "^0.8.5",
     "jotai": "^2.6.0",
     "prism-react-renderer": "^2.3.0",
     "qs": "^6.11.2",
@@ -60,12 +61,14 @@
     "react-hook-form": "^7.48.2",
     "react-router-dom": "^6.20.0",
     "react-syntax-highlighter": "^15.5.0",
+    "reactflow": "^11.10.3",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tiny-invariant": "^1.3.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/dagre": "^0.7.52",
     "@types/node": "^20.10.1",
     "@types/qs": "^6.9.10",
     "@types/react": "^18.2.37",