feat: more contextual output

Refactor view generation, clean up styles

.gitignore

@@ -3,4 +3,4 @@ act3
 cosign.key
 cosign.pub
 justfile
-docs/sample.html
+examples/html/docs/sample.html

README.md

@@ -6,7 +6,7 @@
 Glance at the results of the last 3 runs of your Github Actions.
 
 <p align="center">
-  <img src="./act3.png" alt="Usage" />
+  <img src="./static/act3.png" alt="Usage" />
 </p>
 
 💾 Installation
@@ -78,7 +78,15 @@ ACT3_GH_ACCESS_TOKEN="<YOUR_GH_TOKEN> \
     -html-template-file=./examples/html/template.html
 ```
 
-A sample page generated via `act3` is running at [https://dhth.github.io/act3](https://dhth.github.io/act3), the source code for which is in the [examples/html](./examples/html) directory.
+The resultant HTML page looks like this.
+
+<p align="center">
+  <img src="./static/act3_html.png" alt="Usage" />
+</p>
+
+A sample page generated via `act3` is running at
+[https://dhth.github.io/act3](https://dhth.github.io/act3), the source code for
+which is in the [examples/html](./examples/html) directory.
 
 Acknowledgements
 ---

examples/html/template.html

@@ -11,9 +11,9 @@
     <div class="container mx-auto p-4">
         <h1 class="text-[#fbf1c7] text-2xl mb-4 font-bold">{{.Title}}</h1>
         <p class="text-stone-300 italic mb-4 mt-8">Generated at {{.Timestamp}}</p>
-        <table class="table-auto font-bold text-left">
+        <table class="table-auto w-full text-left">
             <thead>
-                <tr class="text-[#fbf1c7] bg-[#3c3836]">
+                <tr class="font-bold text-[#fbf1c7] bg-[#3c3836]">
                     {{range .Columns -}}
                     <th class="px-4 py-2">{{.}}</th>
                     {{end -}}
@@ -22,12 +22,26 @@ <h1 class="text-[#fbf1c7] text-2xl mb-4 font-bold">{{.Title}}</h1>
             <tbody>
                 {{range .Rows -}}
                     <tr>
-                    <td class="px-4 py-2 text-[#d3869b]">{{.Key}}</td>
+                    <td class="font-bold px-4 py-2 text-[#d3869b]">{{.Key}}</td>
                     {{range .Data -}}
-                        {{if .Success}}
-                            <td class="px-4 py-2 text-[#b8bb26]">{{.Result}}</td>
+                        {{if .Error}}
+                            <td class="px-4 py-2">
+                                <p class="font-bold inline text-[#fabd2f]">{{.Details.Number}}</p>
+                                <p class="inline text-[#fabd2f]">{{.Details.Indicator}}</p>
+                                <p class="inline italic text-[#fabd2f]">{{.Details.Context}}</p>
+                            </td>
+                        {{else if .Success}}
+                            <td class="px-4 py-2">
+                                <p class="font-bold inline text-[#b8bb26]">{{.Details.Number}}</p>
+                                <p class="inline text-[#b8bb26]">{{.Details.Indicator}}</p>
+                                <p class="inline italic text-[#7c6f64]">{{.Details.Context}}</p>
+                            </td>
                         {{else}}
-                            <td class="px-4 py-2 text-[#fb4934]">{{.Result}}</td>
+                            <td class="px-4 py-2">
+                                <p class="font-bold inline text-[#fb4934]">{{.Details.Number}}</p>
+                                <p class="inline text-[#fb4934]">{{.Details.Indicator}}</p>
+                                <p class="inline italic text-[#7c6f64]">{{.Details.Context}}</p>
+                            </td>
                         {{end}}
                     {{end -}}
                 </tr>
@@ -39,7 +53,7 @@ <h1 class="text-[#fbf1c7] text-2xl mb-4 font-bold">{{.Title}}</h1>
         <br>
         <hr>
         <br>
-        <p class="text-[#fb4934] font-bold italic">Failures</p>
+        <p class="text-[#fb4934] font-bold italic">Failed Runs</p>
             <br>
             {{range $key, $value := .Failures -}}
             <p class="text-[#a89984] italic">{{$key}}: <a class="underline" href="{{$value}}" target="_blank">{{$value}}</a></p>
@@ -51,7 +65,7 @@ <h1 class="text-[#fbf1c7] text-2xl mb-4 font-bold">{{.Title}}</h1>
         <br>
         <hr>
         <br>
-        <p class="text-[#fb4934] font-bold italic">Errors</p>
+        <p class="text-[#fabd2f] font-bold italic">Errors</p>
             <br>
             {{range $index, $error := .Errors -}}
             <p class="text-[#a89984] italic">{{$index}}: {{$error}}</p>

go.mod

@@ -5,6 +5,7 @@ go 1.22.0
 require (
 	github.com/charmbracelet/bubbletea v0.25.0
 	github.com/charmbracelet/lipgloss v0.10.0
+	github.com/dustin/go-humanize v1.0.1
 	github.com/shurcooL/githubv4 v0.0.0-20240120211514-18a1ae0e79dc
 	golang.org/x/oauth2 v0.18.0
 	gopkg.in/yaml.v3 v3.0.1

go.sum

@@ -6,6 +6,8 @@ github.com/charmbracelet/lipgloss v0.10.0 h1:KWeXFSexGcfahHX+54URiZGkBFazf70JNMt
 github.com/charmbracelet/lipgloss v0.10.0/go.mod h1:Wig9DSfvANsxqkRsqj6x87irdy123SR4dOXlKa91ciE=
 github.com/containerd/console v1.0.4-0.20230313162750-1ae8d489ac81 h1:q2hJAaP1k2wIvVRd/hEHD7lacgqrCPS+k8g1MndzfWY=
 github.com/containerd/console v1.0.4-0.20230313162750-1ae8d489ac81/go.mod h1:YynlIjWYF8myEu6sdkwKIvGQq+cOckRm6So2avqoYAk=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
 github.com/golang/protobuf v1.5.3 h1:KhyjKVUg7Usr/dYsdSqoFveMYd5ko72D+zANwlG1mmg=

ui/initial.go

@@ -2,17 +2,13 @@ package ui
 
 import "github.com/shurcooL/githubv4"
 
-func InitialModel(ghClient *githubv4.Client, workflows []Workflow, outputFmt OutputFmt, htmlTemplate string) model {
+const (
+	NUM_RUNS_TO_DISPLAY = 3
+)
 
-	workflowResults := make(map[string][]string)
+func InitialModel(ghClient *githubv4.Client, workflows []Workflow, outputFmt OutputFmt, htmlTemplate string) model {
 
-	for _, w := range workflows {
-		var results []string
-		for i := 0; i < 3; i++ {
-			results = append(results, "...")
-		}
-		workflowResults[w.ID] = results
-	}
+	workflowResults := make(map[string]workflowRunResults)
 
 	errors := make([]error, 0)
 	failedWorkflowRunURLs := make(map[string]string)

ui/model.go

@@ -8,7 +8,7 @@ import (
 type model struct {
 	workflows          []Workflow
 	ghClient           *githubv4.Client
-	workFlowResults    map[string][]string
+	workFlowResults    map[string]workflowRunResults
 	numResults         int
 	outputFmt          OutputFmt
 	message            string

ui/styles.go

@@ -2,11 +2,23 @@ package ui
 
 import "github.com/charmbracelet/lipgloss"
 
+const (
+	BACKGROUND_COLOR   = "#282828"
+	HEADER_COLOR       = "#fe8019"
+	RUN_NUMBER_COLOR   = "#83a598"
+	WORKFLOW_COLOR     = "#d3869b"
+	SUCCESS_COLOR      = "#b8bb26"
+	FAILURE_COLOR      = "#fb4934"
+	ERROR_COLOR        = "#fabd2f"
+	ERROR_DETAIL_COLOR = "#665c54"
+	CONTEXT_COLOR      = "#665c54"
+)
+
 var (
 	fgStyle = lipgloss.NewStyle().
 		PaddingLeft(1).
 		PaddingRight(1).
-		Foreground(lipgloss.Color("#282828"))
+		Foreground(lipgloss.Color(BACKGROUND_COLOR))
 
 	fgStylePlain = lipgloss.NewStyle().
 			PaddingLeft(1).
@@ -15,15 +27,15 @@ var (
 	headerStyle = fgStyle.Copy().
 			Align(lipgloss.Center).
 			Bold(true).
-			Background(lipgloss.Color("#fe8019"))
+			Background(lipgloss.Color(HEADER_COLOR))
 
 	headerStylePlain = fgStylePlain.Copy().
 				Align(lipgloss.Center)
 
 	runNumberStyle = fgStyle.Copy().
 			Align(lipgloss.Center).
 			Bold(true).
-			Background(lipgloss.Color("#83a598")).
+			Background(lipgloss.Color(RUN_NUMBER_COLOR)).
 			Width(RUN_NUMBER_WIDTH)
 
 	nonFgStyle = lipgloss.NewStyle().
@@ -33,26 +45,36 @@ var (
 	workflowStyle = nonFgStyle.Copy().
 			Align(lipgloss.Left).
 			Bold(true).
-			Foreground(lipgloss.Color("#83a598")).
+			Foreground(lipgloss.Color(WORKFLOW_COLOR)).
 			Width(WORKFLOW_NAME_WIDTH)
 
-	successResultStyle = nonFgStyle.Copy().
-				Align(lipgloss.Center).
+	runResultStyle = nonFgStyle.Copy().
+			PaddingLeft((RUN_NUMBER_WIDTH - 20) / 2). // TODO: This is a clumsy hack; make it better
+			Width(RUN_NUMBER_WIDTH + 4)
+
+	successTextStyle = lipgloss.NewStyle().
+				Bold(true).
+				Foreground(lipgloss.Color(SUCCESS_COLOR))
+
+	failureTextStyle = lipgloss.NewStyle().
 				Bold(true).
-				Foreground(lipgloss.Color("#b8bb26")).
-				Width(RUN_NUMBER_WIDTH)
+				Foreground(lipgloss.Color(FAILURE_COLOR))
+
+	errorTextStyle = lipgloss.NewStyle().
+			Bold(true).
+			Foreground(lipgloss.Color(ERROR_COLOR))
+
+	faintStyle = lipgloss.NewStyle().
+			Foreground(lipgloss.Color(CONTEXT_COLOR))
 
-	failureResultStyle = nonFgStyle.Copy().
-				Align(lipgloss.Center).
+	failureHeadingStyle = nonFgStyle.Copy().
 				Bold(true).
-				Foreground(lipgloss.Color("#fb4934")).
-				Width(RUN_NUMBER_WIDTH).
-				Underline(true)
+				Foreground(lipgloss.Color(FAILURE_COLOR))
 
 	errorHeadingStyle = nonFgStyle.Copy().
 				Bold(true).
-				Foreground(lipgloss.Color("#fb4934"))
+				Foreground(lipgloss.Color(ERROR_COLOR))
 
 	errorDetailStyle = nonFgStyle.Copy().
-				Foreground(lipgloss.Color("#665c54"))
+				Foreground(lipgloss.Color(ERROR_DETAIL_COLOR))
 )

ui/template.go

@@ -10,13 +10,13 @@ const (
     <script src="https://cdn.tailwindcss.com"></script>
     <title>{{.Title}}</title>
 </head>
-<body class="bg-slate-900 text-xl">
+<body class="bg-[#282828] text-xl">
     <div class="container mx-auto p-4">
-        <h1 class="text-stone-50 text-2xl mb-4 font-bold">{{.Title}}</h1>
+        <h1 class="text-[#fbf1c7] text-2xl mb-4 font-bold">{{.Title}}</h1>
         <p class="text-stone-300 italic mb-4 mt-8">Generated at {{.Timestamp}}</p>
-        <table class="table-auto font-bold text-left">
+        <table class="table-auto w-full text-left">
             <thead>
-                <tr class="text-stone-50 bg-slate-700">
+                <tr class="font-bold text-[#fbf1c7] bg-[#3c3836]">
                     {{range .Columns -}}
                     <th class="px-4 py-2">{{.}}</th>
                     {{end -}}
@@ -25,12 +25,26 @@ const (
             <tbody>
                 {{range .Rows -}}
                     <tr>
-                    <td class="px-4 py-2 text-blue-400">{{.Key}}</td>
+                    <td class="font-bold px-4 py-2 text-[#d3869b]">{{.Key}}</td>
                     {{range .Data -}}
-                        {{if .Success}}
-                            <td class="px-4 py-2 text-green-400">{{.Result}}</td>
+                        {{if .Error}}
+                            <td class="px-4 py-2">
+                                <p class="font-bold inline text-[#fabd2f]">{{.Details.Number}}</p>
+                                <p class="inline text-[#fabd2f]">{{.Details.Indicator}}</p>
+                                <p class="inline italic text-[#fabd2f]">{{.Details.Context}}</p>
+                            </td>
+                        {{else if .Success}}
+                            <td class="px-4 py-2">
+                                <p class="font-bold inline text-[#b8bb26]">{{.Details.Number}}</p>
+                                <p class="inline text-[#b8bb26]">{{.Details.Indicator}}</p>
+                                <p class="inline italic text-[#7c6f64]">{{.Details.Context}}</p>
+                            </td>
                         {{else}}
-                            <td class="px-4 py-2 text-rose-400">{{.Result}}</td>
+                            <td class="px-4 py-2">
+                                <p class="font-bold inline text-[#fb4934]">{{.Details.Number}}</p>
+                                <p class="inline text-[#fb4934]">{{.Details.Indicator}}</p>
+                                <p class="inline italic text-[#7c6f64]">{{.Details.Context}}</p>
+                            </td>
                         {{end}}
                     {{end -}}
                 </tr>
@@ -42,10 +56,10 @@ const (
         <br>
         <hr>
         <br>
-        <p class="text-[#fb4934] font-bold italic">Failures</p>
+        <p class="text-[#fb4934] font-bold italic">Failed Runs</p>
             <br>
             {{range $key, $value := .Failures -}}
-            <p class="text-gray-400 italic">{{$key}}: <a class="underline" href="{{$value}}" target="_blank">{{$value}}</a></p>
+            <p class="text-[#a89984] italic">{{$key}}: <a class="underline" href="{{$value}}" target="_blank">{{$value}}</a></p>
             <br>
             {{end -}}
         {{end -}}
@@ -54,10 +68,10 @@ const (
         <br>
         <hr>
         <br>
-        <p class="text-red-600 font-bold italic">Errors</p>
+        <p class="text-[#fabd2f] font-bold italic">Errors</p>
             <br>
             {{range $index, $error := .Errors -}}
-            <p class="text-gray-400 italic">{{$index}}: {{$error}}</p>
+            <p class="text-[#a89984] italic">{{$index}}: {{$error}}</p>
             <br>
             {{end -}}
         {{end -}}

ui/types.go

@@ -1,5 +1,7 @@
 package ui
 
+import "github.com/shurcooL/githubv4"
+
 type Workflow struct {
 	ID   string  `yaml:"id"`
 	Repo string  `yaml:"repo"`
@@ -16,7 +18,7 @@ type WorkflowRunNodesResult struct {
 	Id         string
 	RunNumber  int
 	Url        string
-	CreatedAt  string
+	CreatedAt  githubv4.DateTime
 	CheckSuite struct {
 		Commit     CommitResult
 		Conclusion string
@@ -47,20 +49,33 @@ const (
 	HTMLFmt
 )
 
-type HTMLWorkflowResult struct {
-	Result  string
+type workflowRunResults struct {
+	results    []WorkflowRunNodesResult
+	err        error
+	errorIndex int
+}
+
+type htmlRunDetails struct {
+	Number    string
+	Indicator string
+	Context   string
+}
+
+type htmlWorkflowResult struct {
+	Details htmlRunDetails
 	Success bool
+	Error   bool
 }
 
-type HTMLDataRow struct {
+type htmlDataRow struct {
 	Key  string
-	Data []HTMLWorkflowResult
+	Data []htmlWorkflowResult
 }
 
-type HTMLData struct {
+type htmlData struct {
 	Title     string
 	Columns   []string
-	Rows      []HTMLDataRow
+	Rows      []htmlDataRow
 	Failures  map[string]string
 	Errors    *[]error
 	Timestamp string

ui/update.go

@@ -19,17 +19,10 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	case WorkflowRunsFetchedMsg:
 		if msg.err != nil {
 			m.errors = append(m.errors, msg.err)
-			errorIndex := len(m.errors)
-			var results []string
-			for i := 0; i < 3; i++ {
-				results = append(results, fmt.Sprintf("%s [%2d]", "error", errorIndex))
-			}
-			m.workFlowResults[msg.workflow.ID] = results
+			m.workFlowResults[msg.workflow.ID] = workflowRunResults{err: msg.err, errorIndex: len(m.errors) - 1}
 		} else {
-			var results []string
-			var count int
+			m.workFlowResults[msg.workflow.ID] = workflowRunResults{results: msg.query.Workflow.Runs.Nodes, err: msg.err, errorIndex: len(m.errors)}
 			for _, result := range msg.query.NodeResult.Workflow.Runs.Nodes {
-				results = append(results, fmt.Sprintf("#%2d: %s", result.RunNumber, result.CheckSuite.Conclusion))
 				if result.CheckSuite.Conclusion == "FAILURE" {
 					var workflowRunKey string
 					if msg.workflow.Key != nil {
@@ -39,12 +32,8 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 					}
 					m.failedWorkflowURLs[fmt.Sprintf("%s #%2d", workflowRunKey, result.RunNumber)] = result.Url
 				}
-				count += 1
-			}
-			for i := 0; i < 3-count; i++ {
-				results = append(results, "")
 			}
-			m.workFlowResults[msg.workflow.ID] = results
+			m.workFlowResults[msg.workflow.ID] = workflowRunResults{results: msg.query.Workflow.Runs.Nodes}
 		}
 		m.numResults += 1
 		if m.numResults >= len(m.workflows) {