api/ui: show peak/total samples in analyze (#7269)

Show the new peak/total fields in analyze output next to each operator.
Add tooltips to explain what is the meaning of each field.

Signed-off-by: Giedrius Statkevičius <giedrius.statkevicius@vinted.com>

pkg/api/query/v1.go

@@ -304,6 +304,8 @@ type queryTelemetry struct {
 	// TODO(saswatamcode): Add aggregate fields to enrich data.
 	OperatorName string           `json:"name,omitempty"`
 	Execution    string           `json:"executionTime,omitempty"`
+	PeakSamples  int64            `json:"peakSamples,omitempty"`
+	TotalSamples int64            `json:"totalSamples,omitempty"`
 	Children     []queryTelemetry `json:"children,omitempty"`
 }
 
@@ -472,6 +474,8 @@ func processAnalysis(a *engine.AnalyzeOutputNode) queryTelemetry {
 	var analysis queryTelemetry
 	analysis.OperatorName = a.OperatorTelemetry.String()
 	analysis.Execution = a.OperatorTelemetry.ExecutionTimeTaken().String()
+	analysis.PeakSamples = a.PeakSamples()
+	analysis.TotalSamples = a.TotalSamples()
 	for _, c := range a.Children {
 		analysis.Children = append(analysis.Children, processAnalysis(&c))
 	}

pkg/ui/react-app/package.json

@@ -54,7 +54,8 @@
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
     "eject": "react-scripts eject",
     "lint:ci": "eslint --quiet \"src/**/*.{ts,tsx}\"",
-    "lint": "eslint --fix \"src/**/*.{ts,tsx}\""
+    "lint": "eslint --fix \"src/**/*.{ts,tsx}\"",
+    "prettier-format": "prettier 'src/**/*.ts' --write"
   },
   "prettier": {
     "singleQuote": true,

pkg/ui/react-app/src/components/ListTree.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import { InputProps, Collapse, ListGroupItem, ListGroup } from 'reactstrap';
+import { InputProps, Collapse, ListGroupItem, ListGroup, Tooltip } from 'reactstrap';
 import { ExplainTree } from '../pages/graph/ExpressionInput';
 
 export interface QueryTree {
   name: string;
   executionTime?: string;
+  peakSamples?: number;
+  totalSamples?: number;
   children?: QueryTree[];
 }
 
@@ -18,6 +20,30 @@ const ListTree: React.FC<NodeProps> = ({ id, node }) => {
   };
 
   const [mapping, setMapping] = useState<idMapping>({});
+  const [peakSamplesTooltipOpen, setPeakSamplesTooltipOpen] = useState<idMapping>({});
+  const [totalSamplesTooltipOpen, setTotalSamplesTooltipOpen] = useState<idMapping>({});
+  const [executionTimeTooltipOpen, setExecutionTimeTooltipOpen] = useState<idMapping>({});
+  const toggleTotalSamplesTooltip = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = e.target as HTMLDivElement;
+    const id = el.getAttribute('id');
+    if (id) {
+      setTotalSamplesTooltipOpen({ ...totalSamplesTooltipOpen, [id]: !totalSamplesTooltipOpen[id] });
+    }
+  };
+  const toggleExecutionTimeTooltip = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = e.target as HTMLDivElement;
+    const id = el.getAttribute('id');
+    if (id) {
+      setExecutionTimeTooltipOpen({ ...executionTimeTooltipOpen, [id]: !executionTimeTooltipOpen[id] });
+    }
+  };
+  const togglePeakSamplesTooltip = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = e.target as HTMLDivElement;
+    const id = el.getAttribute('id');
+    if (id) {
+      setPeakSamplesTooltipOpen({ ...peakSamplesTooltipOpen, [id]: !peakSamplesTooltipOpen[id] });
+    }
+  };
   const toggle = (e: React.MouseEvent<HTMLDivElement>) => {
     const el = e.target as HTMLDivElement;
     const id = el.getAttribute('id');
@@ -44,7 +70,51 @@ const ListTree: React.FC<NodeProps> = ({ id, node }) => {
                 )}
                 <div id={id} style={{ cursor: `${node.children ? 'pointer' : 'inherit'}` }} onClick={toggle}>
                   {node.name}
-                  {node.executionTime && ` · ${node.executionTime}`}
+                  {node.executionTime && (
+                    <>
+                      <span id={`executionTime-${id}`} style={{ paddingLeft: `20px` }}>
+                        {node.executionTime}
+                      </span>
+                      <Tooltip
+                        isOpen={executionTimeTooltipOpen[`executionTime-${id}`]}
+                        toggle={toggleExecutionTimeTooltip}
+                        target={`executionTime-${id}`}
+                        placement="right"
+                      >
+                        Wall clock time
+                      </Tooltip>
+                    </>
+                  )}
+                  {node.peakSamples && (
+                    <>
+                      <span id={`peakSamples-${id}`} style={{ paddingLeft: `20px` }}>
+                        {node.peakSamples}
+                      </span>
+                      <Tooltip
+                        isOpen={peakSamplesTooltipOpen[`peakSamples-${id}`]}
+                        toggle={togglePeakSamplesTooltip}
+                        target={`peakSamples-${id}`}
+                        placement="right"
+                      >
+                        Peak samples (in all steps)
+                      </Tooltip>
+                    </>
+                  )}
+                  {node.totalSamples && (
+                    <>
+                      <span id={`totalSamples-${id}`} style={{ paddingLeft: `20px` }}>
+                        {node.totalSamples}
+                      </span>
+                      <Tooltip
+                        isOpen={totalSamplesTooltipOpen[`totalSamples-${id}`]}
+                        toggle={toggleTotalSamplesTooltip}
+                        target={`totalSamples-${id}`}
+                        placement="right"
+                      >
+                        Total samples (sum of all steps)
+                      </Tooltip>
+                    </>
+                  )}
                 </div>
               </div>
             }

pkg/ui/static/react/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "./static/css/main.5a4981c4.css",
-    "main.js": "./static/js/main.f9e9438f.js",
+    "main.js": "./static/js/main.0792ff52.js",
     "static/media/codicon.ttf": "./static/media/codicon.b3726f0165bf67ac6849.ttf",
     "index.html": "./index.html",
     "static/media/index.cjs": "./static/media/index.cd351d7c31d0d3fccf96.cjs",
     "main.5a4981c4.css.map": "./static/css/main.5a4981c4.css.map",
-    "main.f9e9438f.js.map": "./static/js/main.f9e9438f.js.map"
+    "main.0792ff52.js.map": "./static/js/main.0792ff52.js.map"
   },
   "entrypoints": [
     "static/css/main.5a4981c4.css",
-    "static/js/main.f9e9438f.js"
+    "static/js/main.0792ff52.js"
   ]
 }

pkg/ui/static/react/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}"</script><script>const THANOS_COMPONENT="{{ .Component }}",THANOS_QUERY_URL="{{ .queryURL }}",THANOS_TENANT_HEADER="{{ .tenantHeader }}",THANOS_DEFAULT_TENANT="{{ .defaultTenant }}",THANOS_DISPLAY_TENANT_BOX="{{ .displayTenantBox }}"</script><link rel="manifest" href="./manifest.json"/><title>Thanos | Highly available Prometheus setup</title><script defer="defer" src="./static/js/main.f9e9438f.js"></script><link href="./static/css/main.5a4981c4.css" rel="stylesheet"></head><body class="bootstrap"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}"</script><script>const THANOS_COMPONENT="{{ .Component }}",THANOS_QUERY_URL="{{ .queryURL }}",THANOS_TENANT_HEADER="{{ .tenantHeader }}",THANOS_DEFAULT_TENANT="{{ .defaultTenant }}",THANOS_DISPLAY_TENANT_BOX="{{ .displayTenantBox }}"</script><link rel="manifest" href="./manifest.json"/><title>Thanos | Highly available Prometheus setup</title><script defer="defer" src="./static/js/main.0792ff52.js"></script><link href="./static/css/main.5a4981c4.css" rel="stylesheet"></head><body class="bootstrap"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>