Reuse summarize template, but different layout for standalone pages i…

…ncluding style/js inline Signed-off-by: Rohit Nayak <[email protected]>
planetscale · Dec 16, 2024 · f6737fd · f6737fd
1 parent b045146
commit f6737fd
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 395 deletions.
diff --git a/go/summarize/summarize.go b/go/summarize/summarize.go
@@ -52,6 +52,11 @@ func Run(files []string, hotMetric string, showGraph bool, outputFormat string,
 	var traces []traceSummary
 	var workers []summaryWorker
 
+	if launchWebServer && outputFormat != "html" {
+		fmt.Println("cannot use --web flag without --format=html")
+		os.Exit(1)
+	}
+
 	for _, file := range files {
 		typ, err := data.GetFileType(file)
 		exitIfError(err)
@@ -137,7 +142,7 @@ func printSummary(hotMetric string, workers []summaryWorker, outputFormat string
 				return s, err
 			}
 		} else {
-			html, err := utils.RenderFile("summarize_standalone.html", "summarize_standalone.html", summarizeOutput)
+			html, err := utils.RenderFile("summarize.html", "layout_standalone.html", summarizeOutput)
 			if err != nil {
 				return nil, err
 			}

diff --git a/go/utils/utils.go b/go/utils/utils.go
@@ -58,10 +58,10 @@ func GetFuncMap() template.FuncMap {
 
 func RenderFile(tplFileName, layoutFileName string, data any) (*bytes.Buffer, error) {
 	tmpl := template.Must(template.New(tplFileName).Funcs(GetFuncMap()).ParseFiles(
-		"go/web/templates/layout.html",
 		"go/web/templates/footer.html",
 		"go/web/templates/header.html",
 		fmt.Sprintf("go/web/templates/%s", tplFileName),
+		fmt.Sprintf("go/web/templates/%s", layoutFileName),
 	))
 
 	var buf bytes.Buffer

diff --git a/go/web/templates/layout_standalone.html b/go/web/templates/layout_standalone.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+            background-color: #f9f9f9;
+            color: #333;
+            overflow:auto;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        a {
+            text-decoration: none;
+            color: #007BFF;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        header {
+            background-color: black;
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 60px; /* Fixed height */
+            width: 100%;
+            margin: 0;
+            padding: 10px;
+            box-sizing: border-box;
+        }
+
+        header h1 {
+            margin: 0;
+            font-size: 24px;
+        }
+
+        header nav a {
+            margin-left: 15px;
+            font-size: 16px;
+            font-weight: bold;
+            color: white;
+        }
+
+        header nav a:hover {
+            color: #FFD700;
+        }
+
+        main {
+            height: calc(100% - 150px); /* Adjusted for header and footer heights */
+            overflow-y: auto; /* Enable vertical scrolling if content overflows */
+            overflow-x: hidden; /* Prevent horizontal scrolling */
+            padding: 20px;
+            background: white;
+            margin: 0 auto;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            width: 100%;
+        }
+
+        /* Footer Styles */
+        footer {
+            background-color: orange;
+            color: black;
+            text-align: center;
+            height: 40px; /* Fixed height */
+            line-height: 40px; /* Vertically center content */
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+        }
+
+        footer p {
+            margin: 0;
+            padding: 0;
+            font-size: 14px;
+        }
+
+        h1, h2, h3, h4 {
+            color: #333;
+            font-family: Arial, sans-serif;
+            text-align: center;
+        }
+
+        table {
+            width: 80%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+            margin-left: 10%;
+            margin-right: 10%;
+        }
+
+        th, td {
+            border: 1px solid #ddd;
+            padding: 8px;
+        }
+
+        th {
+            background-color: orange;
+            text-align: center;
+        }
+
+        td {
+            text-align: right;
+        }
+
+        .fixed-header {
+            top: 60px;
+            position: fixed;
+            width: 100%;
+            background-color: white;
+            z-index: 1000;
+            text-align: center;
+            margin-bottom: 200px;
+            border-bottom: 1px solid #ddd;
+        }
+
+        /* Collapsible section styles */
+        .collapsible {
+            cursor: pointer;
+            padding: 10px;
+            border: none;
+            text-align: left;
+            outline: none;
+            font-size: 18px;
+            background-color: #e1bc98;
+            margin-top: 20px;
+        }
+
+        .collapsible.active {
+            background-color: orange; /* Color when expanded */
+        }
+
+        .collapsible:after {
+            content: '\002B'; /* Unicode character for "plus" sign */
+            font-size: 13px;
+            color: #777;
+            float: right;
+            margin-left: 5px;
+        }
+
+        .collapsible.active:after {
+            content: "\2212"; /* Unicode character for "minus" sign */
+        }
+
+        .content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.2s ease-out;
+            background-color: #f9f9f9;
+            padding: 0 18px;
+        }
+
+        .columnUsage {
+            padding-top:10px;
+            padding-bottom:10px;
+        }
+
+        .columnUsage.odd {
+            background-color: #ddd; /* Background color for odd divs */
+        }
+
+        .columnUsage.even {
+            background-color: #eee; /* Background color for even divs */
+        }
+
+
+    </style>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            var coll = document.getElementsByClassName("collapsible");
+            for (var i = 0; i < coll.length; i++) {
+                coll[i].addEventListener("click", function() {
+                    this.classList.toggle("active");
+                    var content = this.nextElementSibling;
+                    if (content.style.maxHeight) {
+                        content.style.maxHeight = null;
+                    } else {
+                        content.style.maxHeight = content.scrollHeight + "px";
+                    }
+                });
+            }
+        });
+
+        document.addEventListener("DOMContentLoaded", function() {
+            var columnUsages = document.getElementsByClassName("columnUsage");
+            for (var i = 0; i < columnUsages.length; i++) {
+                if (i % 2 === 0) {
+                    columnUsages[i].classList.add("even");
+                } else {
+                    columnUsages[i].classList.add("odd");
+                }
+            }
+        });
+    </script>
+</head>
+<body>
+<main>
+    {{template "content" .}}
+</main>
+</body>
+</html>