feat(ui): explore page (#704)

* feat: implements explore page

* text change

* type fixes

* one fix

* adds types

* types fix

* fix logo

* pull latest version

---------

Co-authored-by: Eduardo Aleixo <eduardo@pyroscope.io>

Author: petethepig

package.json

@@ -30,13 +30,15 @@
     "@types/jest": "^29.5.0",
     "@types/jquery": "^3.5.13",
     "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.groupby": "^4.6.7",
+    "@types/lodash.map": "^4.6.13",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^18.0.0",
     "@types/react-datepicker": "^4.3.4",
     "@types/react-dom": "^18.0.11",
     "@types/react-helmet": "^6.1.5",
     "@types/react-outside-click-handler": "^1.3.1",
     "@types/react-router-dom": "5.3.0",
+    "@types/react": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
     "copy-webpack-plugin": "^11.0.0",
@@ -74,7 +76,7 @@
     "@szhsin/react-menu": "3.5.2",
     "graphviz-react": "^1.2.5",
     "jquery": "^3.6.4",
-    "pyroscope-oss": "git+https://github.com/pyroscope-io/pyroscope.git#b63a15e",
+    "pyroscope-oss": "git+https://github.com/pyroscope-io/pyroscope.git#72e54cc",
     "react": "^18.2.0",
     "react-datepicker": "^4.7.0",
     "react-debounce-input": "^3.2.5",

pkg/querier/http.go

@@ -12,6 +12,7 @@ import (
 	"github.com/prometheus/common/model"
 	"github.com/prometheus/prometheus/model/labels"
 	"github.com/prometheus/prometheus/promql/parser"
+	"github.com/pyroscope-io/pyroscope/pkg/structs/flamebearer"
 	"github.com/pyroscope-io/pyroscope/pkg/util/attime"
 	"golang.org/x/sync/errgroup"
 	"google.golang.org/grpc/codes"
@@ -126,6 +127,8 @@ func (q *QueryHandlers) Render(w http.ResponseWriter, req *http.Request) {
 		return
 	}
 
+	groupBy := req.URL.Query()["groupBy"]
+
 	var resFlame *connect.Response[querierv1.SelectMergeStacktracesResponse]
 	g, ctx := errgroup.WithContext(req.Context())
 	g.Go(func() error {
@@ -143,6 +146,7 @@ func (q *QueryHandlers) Render(w http.ResponseWriter, req *http.Request) {
 				Start:         selectParams.Start,
 				End:           selectParams.End,
 				Step:          timelineStep,
+				GroupBy:       groupBy,
 			}))
 
 		return err
@@ -162,6 +166,21 @@ func (q *QueryHandlers) Render(w http.ResponseWriter, req *http.Request) {
 	fb := ExportToFlamebearer(resFlame.Msg.Flamegraph, profileType)
 	fb.Timeline = timeline.New(seriesVal, selectParams.Start, selectParams.End, int64(timelineStep))
 
+	if len(groupBy) > 0 {
+		fb.Groups = make(map[string]*flamebearer.FlamebearerTimelineV1)
+		for _, s := range resSeries.Msg.Series {
+			key := "*"
+			for _, l := range s.Labels {
+				// right now we only support one group by
+				if l.Name == groupBy[0] {
+					key = l.Value
+					break
+				}
+			}
+			fb.Groups[key] = timeline.New(s, selectParams.Start, selectParams.End, int64(timelineStep))
+		}
+	}
+
 	w.Header().Add("Content-Type", "application/json")
 	if err := json.NewEncoder(w).Encode(fb); err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)

public/app/app.tsx

@@ -12,6 +12,7 @@ import { createBrowserHistory } from 'history';
 import { ROUTES } from '@phlare/pages/routes';
 import { SingleView } from '@phlare/pages/SingleView';
 import { ComparisonView } from '@phlare/pages/ComparisonView';
+import { ExploreView } from '@phlare/pages/ExploreView';
 import { DiffView } from '@phlare/pages/DiffView';
 import { LoadAppNames } from '@phlare/components/LoadAppNames';
 import { Sidebar } from '@phlare/components/Sidebar';
@@ -32,6 +33,9 @@ function App() {
           <TenantWall>
             <LoadAppNames>
               <Switch>
+                <Route exact path={ROUTES.EXPLORE_VIEW}>
+                  <ExploreView />
+                </Route>
                 <Route exact path={ROUTES.SINGLE_VIEW}>
                   <SingleView />
                 </Route>

public/app/components/Sidebar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { faWindowMaximize } from '@fortawesome/free-regular-svg-icons';
+import { faWindowMaximize } from '@fortawesome/free-regular-svg-icons/faWindowMaximize';
+import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import { faChartBar } from '@fortawesome/free-solid-svg-icons/faChartBar';
 import { faColumns } from '@fortawesome/free-solid-svg-icons/faColumns';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
@@ -24,7 +25,7 @@ import clsx from 'clsx';
 import { useWindowWidth } from '@react-hook/window-size';
 import { isRouteActive, ROUTES } from '@phlare/pages/routes';
 import Logo from '@phlare/static/logo.svg';
-import styles from '@webapp/components/Sidebar.module.css';
+import styles from '@phlare/components/Sidebar.module.css';
 import { SidebarTenant } from '@phlare/components/SidebarTenant';
 
 export function Sidebar() {
@@ -59,6 +60,17 @@ export function Sidebar() {
       </SidebarHeader>
       <SidebarContent>
         <Menu iconShape="square" popperArrow>
+          <MenuItem
+            active={isRouteActive(pathname, ROUTES.EXPLORE_VIEW)}
+            icon={<Icon icon={faSearch} />}
+          >
+            Tag Explorer
+            <NavLink
+              activeClassName="active-route"
+              to={{ pathname: ROUTES.EXPLORE_VIEW, search }}
+              exact
+            />
+          </MenuItem>
           <MenuItem
             active={isRouteActive(pathname, ROUTES.SINGLE_VIEW)}
             icon={<Icon icon={faWindowMaximize} />}

public/app/overrides/services/render.ts

@@ -3,6 +3,7 @@ import {
   Profile,
   Groups,
   FlamebearerProfileSchema,
+  GroupsSchema,
 } from '@pyroscope/models/src';
 import { z } from 'zod';
 import type { ZodError } from 'zod';
@@ -112,17 +113,44 @@ export async function renderDiff(
   );
 }
 
-export interface RenderExploreOutput {
-  profile: Profile;
-  groups: Groups;
+const RenderExploreSchema = FlamebearerProfileSchema.extend({
+  groups: z.preprocess((groups) => {
+    const groupNames = Object.keys(groups as Groups);
+    return groupNames.length
+      ? groupNames
+          .filter((g) => !!g.trim())
+          .reduce(
+            (acc, current) => ({
+              ...acc,
+              [current]: (groups as Groups)[current],
+            }),
+            {}
+          )
+      : groups;
+  }, GroupsSchema),
+}).transform((values) => {
+  return {
+    profile: values,
+    groups: values.groups,
+  };
+});
+
+interface RenderExploreProps extends Omit<RenderSingleProps, 'maxNodes'> {
+  groupBy: string;
+  grouByTagValue: string;
 }
+
+export type RenderExploreOutput = z.infer<typeof RenderExploreSchema>;
+
 export async function renderExplore(
-  props: unknown,
+  props: RenderExploreProps,
   controller?: {
     signal?: AbortSignal;
   }
-) {
-  return Result.err<RenderExploreOutput, { message: string }>({
-    message: 'TODO: implement ',
+): Promise<Result<RenderExploreOutput, RequestError | ZodError>> {
+  const url = buildRenderURL(props);
+  const response = await requestWithOrgID(`/pyroscope/${url}&format=json`, {
+    signal: controller?.signal,
   });
+  return parseResponse<RenderExploreOutput>(response, RenderExploreSchema);
 }

public/app/pages/ExploreView.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import TagExplorerView from '@webapp/pages/TagExplorerView';
+
+export function ExploreView() {
+  return <TagExplorerView />;
+}

public/app/pages/routes.ts

@@ -1,5 +1,6 @@
 export enum ROUTES {
   SINGLE_VIEW = '/',
+  EXPLORE_VIEW = '/explore',
   COMPARISON_VIEW = '/comparison',
   COMPARISON_DIFF_VIEW = '/comparison-diff',
 }

yarn.lock

@@ -3148,9 +3148,9 @@
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
 "@pyroscope/nodejs@^0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@pyroscope/nodejs/-/nodejs-0.2.5.tgz#cbfbf3421a12193555d1dbc23107c6f3e7869856"
-  integrity sha512-R36ZooJwSZ+K35RNjBvUDpGyH+ZkkspLNeHVuMl2Nh8HyEKi44IZFksCIGNvThUg8lKQlLKaZKrgYlLG660oEw==
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/@pyroscope/nodejs/-/nodejs-0.2.6.tgz#edc91bb230f36dbddaf854fa5b31257cf7f1ada5"
+  integrity sha512-F37ROH//HzO7zKm2S7CtNG8OAp+i4ADg4erQR9D57BrSgi8+3Jjp5s5PWqyJABC6IzsABgGrentPobBDr8QdsA==
   dependencies:
     axios "^0.26.1"
     debug "^4.3.3"
@@ -3652,6 +3652,20 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.groupby@^4.6.7":
+  version "4.6.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.groupby/-/lodash.groupby-4.6.7.tgz#35fdb9647f100450d1004f65f74cbd964cdb567a"
+  integrity sha512-dFUR1pqdMgjIBbgPJ/8axJX6M1C7zsL+HF4qdYMQeJ7XOp0Qbf37I3zh9gpXr/ks6tgEYPDRqyZRAnFYvewYHQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.map@^4.6.13":
+  version "4.6.13"
+  resolved "https://registry.yarnpkg.com/@types/lodash.map/-/lodash.map-4.6.13.tgz#7d776611d4c0345e48cfdfe466d7b291b31d1d13"
+  integrity sha512-kppRBzlpuvQQsr7R2nv/DDDZds8fglRFNAK70WUOkOC18KOcuQ22oQF9Kgy5Z2v/eDNkBm0ltrT6FThSkuWwow==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*":
   version "4.14.192"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.192.tgz#5790406361a2852d332d41635d927f1600811285"
@@ -3677,11 +3691,16 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@>=13.7.0":
+"@types/node@*":
   version "18.15.11"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
   integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==
 
+"@types/node@>=13.7.0":
+  version "20.2.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.2.3.tgz#b31eb300610c3835ac008d690de6f87e28f9b878"
+  integrity sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw==
+
 "@types/node@^14.14.31":
   version "14.18.43"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.43.tgz#679e000d9f1d914132ea295b4a1ffdf20370ec49"
@@ -10498,6 +10517,11 @@ minipass@^4.0.0:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.5.tgz#9e0e5256f1e3513f8c34691dd68549e85b2c8ceb"
   integrity sha512-+yQl7SX3bIT83Lhb4BVorMAHVuqsskxRdlmO9kTpyukp8vsm2Sn/fUOV9xlnG8/a5JsypJzap21lz/y3FBMJ8Q==
 
+minipass@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
+  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
+
 minizlib@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
@@ -11974,9 +11998,9 @@ pure-rand@^6.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.1.tgz#31207dddd15d43f299fdcdb2f572df65030c19af"
   integrity sha512-t+x1zEHDjBwkDGY5v5ApnZ/utcd4XYDiJsaQQoptTXgUXX95sDg1elCdJghzicm7n2mbCBJ3uYWr6M22SO19rg==
 
-"pyroscope-oss@git+https://github.com/pyroscope-io/pyroscope.git#b63a15e":
+"pyroscope-oss@git+https://github.com/pyroscope-io/pyroscope.git#72e54cc":
   version "0.37.2"
-  resolved "git+https://github.com/pyroscope-io/pyroscope.git#b63a15ec7d8a515229666ed32c5be8f9132e1794"
+  resolved "git+https://github.com/pyroscope-io/pyroscope.git#72e54ccfcbb4812f87f8fc6840545079096c5462"
   dependencies:
     "@babel/plugin-transform-runtime" "^7.16.4"
     "@babel/preset-env" "^7.10.4"
@@ -13814,7 +13838,7 @@ tar@^4.4.12:
     safe-buffer "^5.2.1"
     yallist "^3.1.1"
 
-tar@^6.0.2, tar@^6.1.0, tar@^6.1.11:
+tar@^6.0.2, tar@^6.1.0:
   version "6.1.13"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.13.tgz#46e22529000f612180601a6fe0680e7da508847b"
   integrity sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==
@@ -13826,6 +13850,18 @@ tar@^6.0.2, tar@^6.1.0, tar@^6.1.11:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
+tar@^6.1.11:
+  version "6.1.15"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.15.tgz#c9738b0b98845a3b344d334b8fa3041aaba53a69"
+  integrity sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^5.0.0"
+    minizlib "^2.1.1"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"