highlight status codes in vcl log tree

Author: aorith

assets/static/styles.css

@@ -536,23 +536,27 @@ table.headers-table tbody tr.hdr-type th abbr {
   text-decoration: none;
 }
 
-.diffOriginal {
+.diffOriginal,
+.s3xx {
   color: var(--fg-1);
 }
 
-.diffAdded {
+.diffAdded,
+.s2xx {
   color: var(--green-0);
 }
 
-.diffModified {
+.diffModified,
+.s4xx {
   color: var(--yellow-0);
 }
 
 .diffDeleted {
   color: var(--red-0);
 }
 
-.errorRecord {
+.errorRecord,
+.s5xx {
   color: var(--red-0);
 }
 
@@ -562,6 +566,13 @@ table.headers-table tbody tr.hdr-type th abbr {
   font-size: var(--code-font-size);
 }
 
+.s2xx,
+.s3xx,
+.s4xx,
+.s5xx {
+  font-weight: bold;
+}
+
 table.headers-legend th {
   text-align: right;
   vertical-align: top;

pkg/render/vcltree.go

@@ -61,6 +61,8 @@ func renderTxTree(s *rowBuilder, tx *vsl.Transaction, visited map[string]bool, c
 			s.addRow(r.Tag(), "", record.Size().String(), "")
 		case vsl.VCLLogRecord:
 			s.addRow(r.Tag(), "", record.Key()+": "+record.Value(), "")
+		case vsl.StatusRecord:
+			s.addRow(r.Tag(), "", r.Value(), statusCSSClass(record.Status()))
 
 		case vsl.LinkRecord:
 			childTx := tx.Children()[record.TXID()]
@@ -106,3 +108,16 @@ func (s *rowBuilder) addRow(a, classA, b, classB string) {
 	s.WriteString(fmt.Sprintf(`<div%s>%s</div>`, formatClass(classA), a))
 	s.WriteString(fmt.Sprintf(`<div%s>%s</div>`, formatClass(classB), b))
 }
+
+func statusCSSClass(s int) string {
+	if s >= 500 {
+		return "s5xx"
+	} else if s >= 400 {
+		return "s4xx"
+	} else if s >= 300 {
+		return "s3xx"
+	} else if s >= 200 {
+		return "s2xx"
+	}
+	return ""
+}