[ui] Implement creating diffs from UI

alexander-yakushev · alexander-yakushev · commit 99dabd81271c · 2024-10-17T23:58:39.000+03:00
diff --git a/res/ui/index.html b/res/ui/index.html
@@ -2,15 +2,12 @@
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     <link rel='icon' href='favicon.png' type='image/x-icon'/>
     <title>clj-async-profiler</title>
     <style>
       body {margin:1em auto; max-width:800px; background-color:#f9f9f9;}
       img {margin:5px}
-      body, table, input, select {color:#474747; font:0.9em/1.5 Inter, sans-serif;}
+      body, table, input, select {color:#474747; font:0.9em/1.5 Verdana, sans-serif;}
       table, input, select {background-color:white;}
       tbody tr td {border-bottom:1px solid #ededed;}
       tbody tr:last-child td {border-bottom: none;}
@@ -21,23 +18,26 @@
       thead tr.heading {background-color:white;}
       tr.heading td {padding: 1px 10px; font-weight:500; color:black;}
       tr.heading {background-color:#F5F5F5}
-      tr.data td {height:40px}
+      tr.data td {height:35px}
       table th:first-child {border-radius:12px 0 0 0;}
       table th:last-child {border-radius:0 12px 0 0;}
-      th:nth-child(1), td:nth-child(1) {/* max-width:15%; width:15%;  */text-align:right;}
-      /* th:nth-child(2), td:nth-child(2) {max-width:5%; width:5%;} */
-      /* th:nth-child(6), td:nth-child(6) {max-width:10%; width:10%;} */
+      th:nth-child(1), td:nth-child(1) {text-align:right;}
+      th:nth-child(7), td:nth-child(7) {max-width:15%; width:15%; text-align:center;}
       a {text-decoration:none;}
       table {border-collapse: separate; width:100%; box-shadow: 0 8px 10px 0 rgba(0,0,0,0.2);
-             border-spacing: 0;  border-radius: 10px; border: 1px solid #ededed;
-            }
+             border-spacing: 0;  border-radius: 10px; border: 1px solid #ededed;}
       .header {justify-content:space-between; margin-bottom:2em;}
       .flex-center {display:flex; align-items:center;}
       .controls {display:flex; justify-content:center; width:100%;}
-      input[type=submit] {border: none; padding: 4px 10px; border-radius: 4px;
-                          box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);}
-      select {border: 1px solid #878787; border-radius: 4px; accent-color: green;
-              padding: 2px;}
+      input[type=submit] {box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);}
+      input[type=submit] {background-color:#e2e2e2;
+                          border: none; padding: 4px 10px; border-radius: 4px;
+                          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);}
+      select#event {border: 1px solid #878787; border-radius: 4px; accent-color: green;
+                    padding: 2px; min-width: 100px;}
+      button.diff {background-color:inherit; color:inherit; border: 1px solid #8e8e8e;
+                   border-radius:4px; font-size: 0.8em; padding: 2px 6px;}
+      button.diff.cancel {background-color:#ffa5a5;}
     </style>
   </head>
   <body>
diff --git a/src/clj_async_profiler/ui.clj b/src/clj_async_profiler/ui.clj
@@ -18,12 +18,13 @@
 (defn- profiler-controls []
   (let [^String status-msg (core/status)]
     (if (.contains status-msg "is running")
-      (format "<form action=\"/stop-profiler\">[%s] profiling is running&nbsp;
-               <input type=\"submit\" value=\"Stop profiler\"/></form>"
+      (format "<form action='/stop-profiler'>[%s] profiling is running&nbsp;
+               <input type='submit' value='Stop profiler'/></form>"
               (name (@@#'core/start-options :event :cpu)))
-      (format "<form action=\"/start-profiler\">Event:&nbsp;
-               <select name=\"event\">%s</select>&nbsp;
-               <input type=\"submit\" value=\"Start profiler\"/></form>"
+      (format "<form action='/start-profiler'>
+               <label for='event'>Event:</label>&nbsp;
+               <select id='event' name='event'>%s</select>&nbsp;
+               <input type='submit' value='Start profiler'/></form>"
               (forj [ev (remove #{:ClassName.methodName}
                                 (core/list-event-types {:silent? true}))]
                 (format "<option value=%s>%s</option>" (name ev) (name ev)))))))
@@ -46,16 +47,21 @@
 (defn- format-size [sz samples]
   (let [sz (if (< sz 1024) (str sz " b") (format "%.1f Kb" (/ sz 1024.0)))
         samples (cond (nil? samples) nil
-                      (< samples 1000) (str "<br>" samples " samples")
-                      :else (format "<br>%.1fk samples" (/ samples 1e3)))]
-    (cond-> sz samples (str samples))))
+                      (< samples 1000) (str samples " samples")
+                      :else (format "%.1fk samples" (/ samples 1e3)))]
+    (or samples sz)))
+
+(defn- resolve-stacks-file [short-name]
+  (when-let [^File f (some->> short-name (io/file results/root-directory "results"))]
+    (when (.exists f) f)))
 
 (defn- file-table [root files]
   (let [files (sort-by #(.lastModified ^File %) > files) ;; Newer on top
         parsed-files (for [^File f files
                            :let [info (results/parse-results-filename (.getName f))]]
                        [f (update info :date #(or % (Date. (.lastModified f))))])
-        grouped (group-by #(date->local-date (:date (second %))) parsed-files)]
+        grouped (group-by #(date->local-date (:date (second %))) parsed-files)
+        diff-from-file (resolve-stacks-file (@ui-state :diff-from))]
     (format
      "<table><thead>%s</thead><tbody>%s</tbody></table>"
      (row :th "heading"
@@ -86,7 +92,20 @@
                                      id2)
                          stacks (format "<a href='%s'>raw</a>"
                                         (str root (.getName stacks))))
-                   "")))))))
+                   (if diff-from-file
+                     (cond (= diff-from-file stacks)
+                           "<button class='diff cancel' onclick=\"window.location.href='/cancel-diff'\">Cancel</button>"
+                           stacks
+                           (format "<button class='diff' onclick=\"window.location.href='/finish-diff?to=%s'\">...to this</button>"
+                                   (.getName stacks)))
+                     (when stacks
+                       (format "<button class='diff' onclick=\"window.location.href='/start-diff?from=%s'\">Diff to...</button>"
+                               (.getName stacks)))))))))))
+
+(defn- generate-diff [to-file-short-name]
+  (let [from-file (resolve-stacks-file (@ui-state :diff-from))
+        to-file (resolve-stacks-file to-file-short-name)]
+    (core/generate-diffgraph from-file to-file {})))
 
 (defn- main-page [root files]
   (->> {:profiler-controls (profiler-controls)
@@ -110,8 +129,22 @@
             (do (core/clear-results)
                 (redirect "/"))
 
+            (= path "/start-diff")
+            (do (swap! ui-state assoc :diff-from (params "from"))
+                (redirect "/"))
+
+            (= path "/finish-diff")
+            (do (generate-diff (params "to"))
+                (swap! ui-state dissoc :diff-from)
+                (redirect "/"))
+
+            (= path "/cancel-diff")
+            (do (swap! ui-state dissoc :diff-from)
+                (redirect "/"))
+
             (= path "/")
-            {:body (main-page path files)}
+            (let [files (filter #(= (wwws/get-extension (str %)) "html") files)]
+              {:body (main-page path files)})
 
             (= path "/favicon.png")
             {:body (io/resource "favicon.png")
