webui: show last change and interface layering

The interface detail page lists a fixed set of status fields, so the
new ietf-interfaces leaves did not show up.  Add last change with its
age, and the lower and higher layer interfaces linked to their own
pages.

Signed-off-by: Joachim Wiberg <troglobit@gmail.com>

Author: troglobit

src/webui/internal/handlers/interfaces.go

@@ -3,6 +3,7 @@
 package handlers
 
 import (
+	"time"
 	"fmt"
 	"html/template"
 	"log"
@@ -32,6 +33,9 @@ type ifaceJSON struct {
 	Type              string             `json:"type"`
 	Enabled           *bool              `json:"enabled"`
 	OperStatus        string             `json:"oper-status"`
+	LastChange        string             `json:"last-change"`
+	HigherLayerIf     []string           `json:"higher-layer-if"`
+	LowerLayerIf      []string           `json:"lower-layer-if"`
 	PhysAddress       string             `json:"phys-address"`
 	CustomPhysAddress *customPhysAddress `json:"infix-interfaces:custom-phys-address"`
 	IfIndex           int                `json:"if-index"`
@@ -545,6 +549,9 @@ type ifaceDetailData struct {
 	Type             string
 	Status           string
 	StatusUp         bool
+	LastChange       string   // local time with age, "" if unknown
+	HigherLayer      []string // interfaces stacked on top of this one
+	LowerLayer       []string // interfaces this one is stacked on
 	PhysAddr         string
 	IfIndex          int
 	MTU              int
@@ -646,6 +653,9 @@ func buildDetailData(r *http.Request, iface *ifaceJSON) ifaceDetailData {
 		StatusUp:  iface.OperStatus == "up",
 		PhysAddr:  iface.PhysAddress,
 		IfIndex:   iface.IfIndex,
+		LastChange:  formatLastChange(iface.LastChange),
+		HigherLayer: iface.HigherLayerIf,
+		LowerLayer:  iface.LowerLayerIf,
 	}
 
 	if iface.IPv4 != nil {
@@ -916,6 +926,19 @@ func buildWifiScanEntry(sr wifiScanResultJSON) wifiScanEntry {
 	return e
 }
 
+// formatLastChange renders a YANG date-and-time as local time with its age.
+func formatLastChange(s string) string {
+	if s == "" {
+		return ""
+	}
+	t, err := time.Parse(time.RFC3339, s)
+	if err != nil {
+		return s
+	}
+	return fmt.Sprintf("%s (%s ago)", t.Local().Format("2006-01-02 15:04:05"),
+		formatRelDuration(time.Since(t)))
+}
+
 func formatDuration(secs int64) string {
 	if secs < 60 {
 		return fmt.Sprintf("%ds", secs)
@@ -982,6 +1005,9 @@ func (h *InterfacesHandler) fieldDescriptions() map[string]string {
 	ethPath := ifPath + "/ieee802-ethernet-interface:ethernet"
 	return map[string]string{
 		"mtu":        schema.DescriptionOf(mgr, ifPath+"/ietf-ip:ipv4/mtu"),
+		"last-change":     schema.DescriptionOf(mgr, ifPath+"/last-change"),
+		"higher-layer-if": schema.DescriptionOf(mgr, ifPath+"/higher-layer-if"),
+		"lower-layer-if":  schema.DescriptionOf(mgr, ifPath+"/lower-layer-if"),
 		"speed":      schema.DescriptionOf(mgr, ifPath+"/speed"),
 		"duplex":     schema.DescriptionOf(mgr, ethPath+"/duplex"),
 		"autoneg":    schema.DescriptionOf(mgr, ethPath+"/auto-negotiation/enable"),

src/webui/internal/handlers/interfaces_test.go

@@ -0,0 +1,22 @@
+package handlers
+
+import (
+	"strings"
+	"testing"
+	"time"
+)
+
+func TestFormatLastChange(t *testing.T) {
+	if got := formatLastChange(""); got != "" {
+		t.Errorf("empty: got %q", got)
+	}
+	if got := formatLastChange("garbage"); got != "garbage" {
+		t.Errorf("unparsable: got %q", got)
+	}
+
+	stamp := time.Now().Add(-90 * time.Second).UTC().Format("2006-01-02T15:04:05+00:00")
+	got := formatLastChange(stamp)
+	if !strings.HasSuffix(got, "(1m ago)") {
+		t.Errorf("age: got %q", got)
+	}
+}

src/webui/templates/pages/iface-detail.html

@@ -26,6 +26,9 @@ <h2>{{.Name}}</h2>
         <th>Status</th>
         <td><span class="status-dot {{if .StatusUp}}status-up{{else}}status-down{{end}}"></span>{{.Status}}</td>
       </tr>
+      {{if .LastChange}}<tr><th>Last change{{template "field-info" (index .Desc "last-change")}}</th><td>{{.LastChange}}</td></tr>{{end}}
+      {{if .LowerLayer}}<tr><th>Lower layer{{template "field-info" (index .Desc "lower-layer-if")}}</th><td>{{template "iface-links" .LowerLayer}}</td></tr>{{end}}
+      {{if .HigherLayer}}<tr><th>Higher layer{{template "field-info" (index .Desc "higher-layer-if")}}</th><td>{{template "iface-links" .HigherLayer}}</td></tr>{{end}}
       {{if .PhysAddr}}<tr><th>MAC Address</th><td>{{.PhysAddr}}</td></tr>{{end}}
       {{if .MTU}}<tr><th>MTU{{template "field-info" (index .Desc "mtu")}}</th><td>{{.MTU}}</td></tr>{{end}}
       {{if .Speed}}<tr><th>Speed{{template "field-info" (index .Desc "speed")}}</th><td>{{.Speed}}</td></tr>{{end}}
@@ -176,3 +179,5 @@ <h3>Addresses</h3>
 </section>
 {{end}}
 {{end}}
+
+{{define "iface-links"}}{{range $i, $name := .}}{{if $i}}, {{end}}<a href="/interfaces/{{$name}}" hx-get="/interfaces/{{$name}}" hx-target="#content" hx-push-url="true">{{$name}}</a>{{end}}{{end}}