tooltips, footer, humanize (#28538)

Co-authored-by: lostluck <[email protected]>
apache · Sep 20, 2023 · 79d0a8d · 79d0a8d
1 parent 4184f5e
commit 79d0a8d
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 37 deletions.
diff --git a/sdks/go/pkg/beam/runners/prism/internal/web/assets/style.css b/sdks/go/pkg/beam/runners/prism/internal/web/assets/style.css
@@ -101,10 +101,19 @@ footer {
     color: var(--beam-white);
 }
 
+#page-container {
+    position: relative;
+    min-height: 100vh;
+}
+
+#content-wrap {
+    padding-bottom: 2.5rem;    /* Footer height */
+}
+
 .container {
     width: 100%;
     margin: 0 auto;
-    padding: 80px 20px 40px;
+    padding: 40px 20px 0px;
 }
 
 .child {
@@ -132,6 +141,53 @@ footer {
     padding: 12px 15px;
 }
 
+/* Tooltip container */
+.tooltip {
+    display: inline-block;
+    border-bottom: 1px dotted var(--beam-black);
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: max-content;
+    max-width: 400px;
+    background-color: var(--dark-grey);
+    color: var(--beam-white);
+    text-align: left;
+    padding: 5px 10px;
+    border-radius: 6px;
+
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+
+    /* Fade in tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+/* Tooltip arrow */
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 18%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--dark-grey) transparent transparent transparent;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
 @media screen and (max-width: 550px) {
     header {
         flex-direction: column;

diff --git a/sdks/go/pkg/beam/runners/prism/internal/web/debugz.go b/sdks/go/pkg/beam/runners/prism/internal/web/debugz.go
@@ -21,6 +21,9 @@ import (
 	"runtime/metrics"
 	"runtime/pprof"
 	"strings"
+	"time"
+
+	"github.com/dustin/go-humanize"
 )
 
 type debugzData struct {
@@ -54,16 +57,24 @@ func dumpMetrics() debugzData {
 		name, value := sample.Name, sample.Value
 
 		m := goRuntimeMetric{
-			Name:        name,
+			Name:        strings.TrimSpace(name),
 			Description: descs[i].Description,
 		}
 
 		// Handle each sample.
 		switch value.Kind() {
 		case metrics.KindUint64:
-			m.Value = fmt.Sprintf("%d", value.Uint64())
+			if strings.HasSuffix(name, "bytes") {
+				m.Value = humanize.Bytes(value.Uint64())
+			} else {
+				m.Value = humanize.FormatInteger("", int(value.Uint64()))
+			}
 		case metrics.KindFloat64:
-			m.Value = fmt.Sprintf("%f", value.Float64())
+			if strings.HasSuffix(name, "seconds") {
+				m.Value = time.Duration(float64(time.Second) * value.Float64()).String()
+			} else {
+				m.Value = humanize.FormatFloat("", value.Float64())
+			}
 		case metrics.KindFloat64Histogram:
 			m.Value = fmt.Sprintf("%f", medianBucket(value.Float64Histogram()))
 			// The histogram may be quite large, so let's just pull out
@@ -88,16 +99,16 @@ func dumpMetrics() debugzData {
 
 	data.Metrics = append(data.Metrics, goRuntimeMetric{
 		Name:        "BUILD INFO",
-		Value:       "n/a",
-		Description: b.String(),
+		Value:       b.String(),
+		Description: "result from runtime/debug.ReadBuildInfo()",
 	})
 
 	b.Reset()
 	goroutineDump(&b)
 	data.Metrics = append(data.Metrics, goRuntimeMetric{
 		Name:        "GOROUTINES",
-		Value:       "n/a",
-		Description: b.String(),
+		Value:       b.String(),
+		Description: "consolidated active goroutines",
 	})
 
 	b.Reset()

diff --git a/sdks/go/pkg/beam/runners/prism/internal/web/debugz.html b/sdks/go/pkg/beam/runners/prism/internal/web/debugz.html
@@ -30,14 +30,16 @@
       <table class="main-table">
         <thead>
           <td>ID</td>
-          <td>Name</td>
-          <td>State</td>
+          <td>Value</td>
         </thead>
         {{ range .Metrics }}
         <tr>
-          <td>{{ .Name }}</td>
+          <td>
+            <div class="tooltip">{{ .Name }}
+              <span class="tooltiptext">{{ .Description }}</span>
+            </div>
+          </td>
           <td style="white-space: pre">{{ .Value }}</td>
-          <td style="white-space: pre">{{ .Description }}</td>
         </tr>
         {{ else }}
         <tr>

diff --git a/sdks/go/pkg/beam/runners/prism/internal/web/index.html b/sdks/go/pkg/beam/runners/prism/internal/web/index.html
@@ -22,31 +22,33 @@
 </head>
 
 <body>
-  <main>
-    <header>
-      <a class="logo" href="/">Jobs Console - Beam Prism</a>
-    </header>
-    <section class="container">
-      {{ if .Error}}{{.Error}}{{end}}
-      <table class="main-table">
-        <thead>
-          <td>ID</td>
-          <td>Name</td>
-          <td>State</td>
-        </thead>
-        {{ range .Jobs }}
-        <tr>
-          <td><a href="job/{{ .JobId }}">{{ .JobId }}</a></td>
-          <td>{{ .JobName }}</td>
-          <td>{{ .State }}</td>
-        </tr>
-        {{ else }}
-        <tr>
-          <td>No jobs have been run.</td>
-        </tr>
-        {{ end }}
-      </table>
-    </section>
+  <main id="page-container">
+    <div id="content-wrap">
+      <header>
+        <a class="logo" href="/">Jobs Console - Beam Prism</a>
+      </header>
+      <section class="container">
+        {{ if .Error}}{{.Error}}{{end}}
+        <table class="main-table">
+          <thead>
+            <td>ID</td>
+            <td>Name</td>
+            <td>State</td>
+          </thead>
+          {{ range .Jobs }}
+          <tr>
+            <td><a href="job/{{ .JobId }}">{{ .JobId }}</a></td>
+            <td>{{ .JobName }}</td>
+            <td>{{ .State }}</td>
+          </tr>
+          {{ else }}
+          <tr>
+            <td>No jobs have been run.</td>
+          </tr>
+          {{ end }}
+        </table>
+      </section>
+    </div>
     <footer>
       <a class="logo" href="debugz">debugz</a>
     </footer>