percentiles chart

attacker/attacker.go

@@ -50,6 +50,12 @@ type Options struct {
 // Result contains the results of a single HTTP request.
 type Result struct {
 	Latency time.Duration
+
+	P50 time.Duration
+	P90 time.Duration
+	P95 time.Duration
+	P99 time.Duration
+
 	// Indicates if the last result in the entire attack.
 	End bool
 }
@@ -112,8 +118,14 @@ func Attack(ctx context.Context, target string, resCh chan *Result, metricsCh ch
 			opts.Attacker.Stop()
 			return
 		default:
-			resCh <- &Result{Latency: res.Latency}
 			metrics.Add(res)
+			resCh <- &Result{
+				Latency: res.Latency,
+				P50:     metrics.Latencies.Quantile(0.50),
+				P90:     metrics.Latencies.Quantile(0.90),
+				P95:     metrics.Latencies.Quantile(0.95),
+				P99:     metrics.Latencies.Quantile(0.99),
+			}
 		}
 	}
 	metrics.Close()

attacker/metrics.go

@@ -73,10 +73,10 @@ func newMetrics(m *vegeta.Metrics) *Metrics {
 		Latencies: LatencyMetrics{
 			Total: m.Latencies.Total,
 			Mean:  m.Latencies.Mean,
-			P50:   m.Latencies.P50,
-			P90:   m.Latencies.P90,
-			P95:   m.Latencies.P95,
-			P99:   m.Latencies.P99,
+			P50:   m.Latencies.Quantile(0.50),
+			P90:   m.Latencies.Quantile(0.90),
+			P95:   m.Latencies.Quantile(0.95),
+			P99:   m.Latencies.Quantile(0.99),
 			Max:   m.Latencies.Max,
 			Min:   m.Latencies.Min,
 		},

gui/drawer.go

@@ -14,6 +14,7 @@ import (
 
 type drawer struct {
 	widgets   *widgets
+	gridOpts  *gridOpts
 	chartCh   chan *attacker.Result
 	gaugeCh   chan bool
 	metricsCh chan *attacker.Metrics
@@ -27,6 +28,16 @@ type drawer struct {
 // TODO: In the future, multiple charts including bytes-in/out etc will be re-drawn.
 func (d *drawer) redrawChart(ctx context.Context, maxSize int) {
 	values := make([]float64, 0, maxSize)
+
+	valuesP50 := make([]float64, 0, maxSize)
+	valuesP90 := make([]float64, 0, maxSize)
+	valuesP95 := make([]float64, 0, maxSize)
+	valuesP99 := make([]float64, 0, maxSize)
+
+	appendValue := func(to []float64, val time.Duration) []float64 {
+		return append(to, float64(val)/float64(time.Millisecond))
+	}
+
 	d.chartDrawing = true
 L:
 	for {
@@ -42,13 +53,34 @@ L:
 				break L
 			}
 			d.gaugeCh <- false
-			values = append(values, float64(res.Latency/time.Millisecond))
+
+			values = appendValue(values, res.Latency)
 			d.widgets.latencyChart.Series("latency", values,
 				linechart.SeriesCellOpts(cell.FgColor(cell.ColorNumber(87))),
 				linechart.SeriesXLabels(map[int]string{
 					0: "req",
 				}),
 			)
+
+			valuesP50 = appendValue(valuesP50, res.P50)
+			d.widgets.percentilesChart.Series("p50", valuesP50,
+				linechart.SeriesCellOpts(d.widgets.p50Legend.cellOpts...),
+			)
+
+			valuesP90 = appendValue(valuesP90, res.P90)
+			d.widgets.percentilesChart.Series("p90", valuesP90,
+				linechart.SeriesCellOpts(d.widgets.p90Legend.cellOpts...),
+			)
+
+			valuesP95 = appendValue(valuesP95, res.P95)
+			d.widgets.percentilesChart.Series("p95", valuesP95,
+				linechart.SeriesCellOpts(d.widgets.p95Legend.cellOpts...),
+			)
+
+			valuesP99 = appendValue(valuesP99, res.P99)
+			d.widgets.percentilesChart.Series("p99", valuesP99,
+				linechart.SeriesCellOpts(d.widgets.p99Legend.cellOpts...),
+			)
 		}
 	}
 	d.chartDrawing = false

gui/drawer_test.go

@@ -18,31 +18,54 @@ func TestRedrawChart(t *testing.T) {
 	defer cancel()
 
 	tests := []struct {
-		name         string
-		results      []*attacker.Result
-		latencyChart LineChart
+		name             string
+		results          []*attacker.Result
+		latencyChart     LineChart
+		percentilesChart LineChart
 	}{
 		{
 			name: "one result received",
 			results: []*attacker.Result{
 				{
 					Latency: 1000000,
+					P50:     500000,
+					P90:     900000,
+					P95:     950000,
+					P99:     990000,
 				},
 			},
 			latencyChart: func() LineChart {
 				l := NewMockLineChart(ctrl)
 				l.EXPECT().Series("latency", []float64{1.0}, gomock.Any())
 				return l
 			}(),
+			percentilesChart: func() LineChart {
+				l := NewMockLineChart(ctrl)
+				gomock.InOrder(
+					l.EXPECT().Series("p50", []float64{0.5}, gomock.Any()),
+					l.EXPECT().Series("p90", []float64{0.9}, gomock.Any()),
+					l.EXPECT().Series("p95", []float64{0.95}, gomock.Any()),
+					l.EXPECT().Series("p99", []float64{0.99}, gomock.Any()),
+				)
+				return l
+			}(),
 		},
 		{
 			name: "two results received",
 			results: []*attacker.Result{
 				{
 					Latency: 1000000,
+					P50:     500000,
+					P90:     900000,
+					P95:     950000,
+					P99:     990000,
 				},
 				{
 					Latency: 2000000,
+					P50:     1000000,
+					P90:     1800000,
+					P95:     1900000,
+					P99:     1980000,
 				},
 			},
 			latencyChart: func() LineChart {
@@ -51,13 +74,27 @@ func TestRedrawChart(t *testing.T) {
 				l.EXPECT().Series("latency", []float64{1.0, 2.0}, gomock.Any())
 				return l
 			}(),
+			percentilesChart: func() LineChart {
+				l := NewMockLineChart(ctrl)
+
+				gomock.InOrder(l.EXPECT().Series("p50", []float64{0.5}, gomock.Any()),
+					l.EXPECT().Series("p90", []float64{0.9}, gomock.Any()),
+					l.EXPECT().Series("p95", []float64{0.95}, gomock.Any()),
+					l.EXPECT().Series("p99", []float64{0.99}, gomock.Any()),
+					l.EXPECT().Series("p50", []float64{0.5, 1.0}, gomock.Any()),
+					l.EXPECT().Series("p90", []float64{0.9, 1.8}, gomock.Any()),
+					l.EXPECT().Series("p95", []float64{0.95, 1.9}, gomock.Any()),
+					l.EXPECT().Series("p99", []float64{0.99, 1.98}, gomock.Any()),
+				)
+				return l
+			}(),
 		},
 	}
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			d := &drawer{
-				widgets: &widgets{latencyChart: tt.latencyChart},
+				widgets: &widgets{latencyChart: tt.latencyChart, percentilesChart: tt.percentilesChart},
 				chartCh: make(chan *attacker.Result),
 				gaugeCh: make(chan bool, 100),
 			}

gui/gui.go

@@ -19,6 +19,7 @@ const (
 	// How often termdash redraws the screen.
 	redrawInterval = 250 * time.Millisecond
 	rootID         = "root"
+	chartID        = "chart"
 )
 
 type runner func(ctx context.Context, t terminalapi.Terminal, c *container.Container, opts ...termdash.Option) error
@@ -49,25 +50,66 @@ func run(t *termbox.Terminal, r runner, targetURL string, opts *attacker.Options
 	if err != nil {
 		return fmt.Errorf("failed to build grid layout: %w", err)
 	}
-	if err := c.Update(rootID, gridOpts...); err != nil {
+	if err := c.Update(rootID, gridOpts.base...); err != nil {
 		return fmt.Errorf("failed to update container: %w", err)
 	}
 
 	d := &drawer{
 		widgets:   w,
+		gridOpts:  gridOpts,
 		chartCh:   make(chan *attacker.Result),
 		gaugeCh:   make(chan bool),
 		metricsCh: make(chan *attacker.Metrics),
 	}
 	go d.redrawMetrics(ctx)
 
-	k := keybinds(ctx, cancel, d, targetURL, *opts)
+	k := keybinds(ctx, cancel, c, d, targetURL, *opts)
 
 	return r(ctx, t, c, termdash.KeyboardSubscriber(k), termdash.RedrawInterval(redrawInterval))
 }
 
-func gridLayout(w *widgets) ([]container.Option, error) {
-	raw1 := grid.RowHeightPerc(70, grid.Widget(w.latencyChart, container.Border(linestyle.Light), container.BorderTitle("Latency (ms)")))
+// newChartWithLegends creates a chart with legends at the bottom.
+// TODO: use it for more charts than percentiles. Any chart that has multiple series would be able to use this func.
+func newChartWithLegends(lineChart LineChart, opts []container.Option, texts ...Text) ([]container.Option, error) {
+	textsInColumns := func() []grid.Element {
+		els := make([]grid.Element, 0, len(texts))
+		for _, text := range texts {
+			els = append(els, grid.ColWidthPerc(3, grid.Widget(text)))
+		}
+		return els
+	}
+
+	lopts := lineChart.Options()
+	el := grid.RowHeightPercWithOpts(70,
+		opts,
+		grid.RowHeightPerc(97, grid.ColWidthPerc(99, grid.Widget(lineChart))),
+		grid.RowHeightPercWithOpts(3,
+			[]container.Option{container.MarginLeftPercent(lopts.MinimumSize.X)},
+			textsInColumns()...,
+		),
+	)
+
+	g := grid.New()
+	g.Add(el)
+	return g.Build()
+}
+
+// gridOpts holds all options in our grid.
+// It basically holds the container options (column, width, padding, etc) of our widgets.
+type gridOpts struct {
+	// base options
+	base []container.Option
+
+	// so we can replace containers
+	latency     []container.Option
+	percentiles []container.Option
+}
+
+func gridLayout(w *widgets) (*gridOpts, error) {
+	raw1 := grid.RowHeightPercWithOpts(70,
+		[]container.Option{container.ID(chartID)},
+		grid.Widget(w.latencyChart, container.Border(linestyle.Light), container.BorderTitle("Latency (ms)")),
+	)
 	raw2 := grid.RowHeightPerc(25,
 		grid.ColWidthPerc(20, grid.Widget(w.paramsText, container.Border(linestyle.Light), container.BorderTitle("Parameters"))),
 		grid.ColWidthPerc(20, grid.Widget(w.latenciesText, container.Border(linestyle.Light), container.BorderTitle("Latencies"))),
@@ -90,5 +132,26 @@ func gridLayout(w *widgets) ([]container.Option, error) {
 		raw3,
 	)
 
-	return builder.Build()
+	baseOpts, err := builder.Build()
+	if err != nil {
+		return nil, err
+	}
+	latencyBuilder := grid.New()
+	latencyBuilder.Add(raw1)
+	latencyOpts, err := latencyBuilder.Build()
+	if err != nil {
+		return nil, err
+	}
+
+	percentilesOpts, err := newChartWithLegends(w.percentilesChart, []container.Option{
+		container.Border(linestyle.Light),
+		container.ID(chartID),
+		container.BorderTitle("Percentiles (ms)"),
+	}, w.p99Legend.text, w.p90Legend.text, w.p95Legend.text, w.p50Legend.text)
+
+	return &gridOpts{
+		latency:     latencyOpts,
+		percentiles: percentilesOpts,
+		base:        baseOpts,
+	}, nil
 }

gui/keybinds.go

@@ -4,19 +4,24 @@ import (
 	"context"
 	"time"
 
+	"github.com/mum4k/termdash/container"
 	"github.com/mum4k/termdash/keyboard"
 	"github.com/mum4k/termdash/terminal/terminalapi"
 
 	"github.com/nakabonne/ali/attacker"
 )
 
-func keybinds(ctx context.Context, cancel context.CancelFunc, dr *drawer, targetURL string, opts attacker.Options) func(*terminalapi.Keyboard) {
+func keybinds(ctx context.Context, cancel context.CancelFunc, c *container.Container, dr *drawer, targetURL string, opts attacker.Options) func(*terminalapi.Keyboard) {
 	return func(k *terminalapi.Keyboard) {
 		switch k.Key {
 		case keyboard.KeyCtrlC: // Quit
 			cancel()
 		case keyboard.KeyEnter: // Attack
 			attack(ctx, dr, targetURL, opts)
+		case keyboard.KeyCtrlP: // percentiles chart
+			c.Update(chartID, dr.gridOpts.percentiles...)
+		case keyboard.KeyCtrlL: // latency chart
+			c.Update(chartID, dr.gridOpts.latency...)
 		}
 	}
 }

gui/keybinds_test.go

@@ -33,7 +33,7 @@ func TestKeybinds(t *testing.T) {
 					}
 				}
 			}(ctx)
-			f := keybinds(ctx, cancel, nil, "", attacker.Options{})
+			f := keybinds(ctx, cancel, nil, nil, "", attacker.Options{})
 			f(&terminalapi.Keyboard{Key: tt.key})
 			// If ctx wasn't expired, goleak will find it.
 		})