show available shortcuts in agent ui (#3673)

agent/ui/dashboard/components/commands_panel.go

@@ -0,0 +1,60 @@
+package components
+
+import (
+	"fmt"
+	"runtime"
+	"strings"
+
+	"github.com/kubeshop/tracetest/agent/ui/dashboard/styles"
+	"github.com/rivo/tview"
+)
+
+type CommandsPanel struct {
+	*tview.Table
+}
+
+type Command struct {
+	Name     string
+	Shortcut string
+}
+
+func (c Command) GetCommand() string {
+	cmd := c.Shortcut
+	ctrl := "Ctrl"
+	alt := "Alt"
+	if runtime.GOOS == "darwin" {
+		ctrl = "⌘"
+		alt = "Opt"
+	}
+
+	cmd = strings.ReplaceAll(cmd, "Ctrl", ctrl)
+	cmd = strings.ReplaceAll(cmd, "Alt", alt)
+
+	return cmd
+}
+
+func NewCommandsPanel(commands []Command) *CommandsPanel {
+	panel := &CommandsPanel{
+		Table: tview.NewTable(),
+	}
+	panel.SetBorderPadding(0, 2, 2, 0)
+	panel.SetBorder(true).SetTitle("Shortcuts")
+	defaultPadding := "     "
+
+	maxItemsPerColumn := 1
+
+	for i, cmd := range commands {
+		padding := defaultPadding
+		row := i % maxItemsPerColumn
+		column := int(i / maxItemsPerColumn)
+
+		if column == 0 {
+			padding = ""
+		}
+
+		panel.SetCell(row, column*2, tview.NewTableCell(fmt.Sprintf("%s%s:", padding, cmd.Name)).SetStyle(styles.MetricNameStyle).SetAlign(tview.AlignLeft))
+		panel.SetCell(row, column*2+1, tview.NewTableCell(cmd.GetCommand()).SetStyle(styles.MetricValueStyle))
+	}
+
+	return panel
+}

agent/ui/dashboard/pages/test_runs_page.go

@@ -16,8 +16,9 @@ const maxTestRuns = 25
 type TestRunPage struct {
 	*tview.Grid
 
-	header      *components.Header
-	testRunList *components.TestRunList
+	header        *components.Header
+	testRunList   *components.TestRunList
+	commandsPanel *components.CommandsPanel
 
 	renderScheduler components.RenderScheduler
 	testRuns        []models.TestRun
@@ -32,6 +33,10 @@ func NewTestRunPage(renderScheduler components.RenderScheduler, sensor sensors.S
 
 	p.header = components.NewHeader(renderScheduler, sensor)
 	p.testRunList = components.NewTestRunList(renderScheduler, sensor)
+	p.commandsPanel = components.NewCommandsPanel([]components.Command{
+		{Name: "Show details", Shortcut: "Enter"},
+		{Name: "Exit", Shortcut: "Esc"},
+	})
 
 	p.Grid.
 		// We gonna use 4 lines (it could be 2, but there's a limitation in tview that only allow
@@ -43,7 +48,8 @@ func NewTestRunPage(renderScheduler components.RenderScheduler, sensor sensors.S
 		// Header starts at (row,column) (0,0) and fills 1 row and 3 columns
 		AddItem(p.header, 0, 0, 1, 3, 0, 0, false).
 		// TestRunList starts at (1,0) and fills 2 rows and 3 columns
-		AddItem(p.testRunList, 1, 0, 2, 3, 0, 0, true)
+		AddItem(p.testRunList, 1, 0, 2, 3, 0, 0, true).
+		AddItem(p.commandsPanel, 3, 0, 1, 3, 0, 0, false)
 
 	sensor.On(events.NewTestRun, func(e sensors.Event) {
 		var testRun models.TestRun