feat: enhance tag explorer view (grafana#1329)

* add buttons which allow you to hop to single/comparison/diff page
* add flamegraph.com export and add groupBy/groupByValues to /export request
* add "where" dropdown
* add ability to choose tagValue using legend

cypress/integration/webapp/e2e.ts

@@ -92,6 +92,21 @@ describe('E2E Tests', () => {
     findFlamegraph(2).waitForFlamegraphToRender();
   });
 
+  // TODO(dogfrogfog): fix when app selector modal and explore tag modal will be combined
+  it.skip('tests /explore view', () => {
+    const params = new URLSearchParams();
+    params.set('query', appName);
+    params.set('from', t0);
+    params.set('until', t4);
+
+    cy.visit(`/explore?${params.toString()}`);
+
+    cy.findByTestId('explore-header');
+    cy.findByTestId('timeline-explore-page');
+    cy.findByTestId('explore-table');
+    cy.findByTestId('tag-explorer-view').waitForFlamegraphToRender();
+  });
+
   it('works with standalone view', () => {
     const params = new URLSearchParams();
     params.set('query', appName);

packages/pyroscope-flamegraph/src/NoProfiingData.spec.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NoProfilingData from './NoProfilingData';
+
+describe('NoProfilingData', () => {
+  it('should render correctly', () => {
+    render(<NoProfilingData />);
+
+    expect(screen.getByTestId('no-profiling-data')).toBeInTheDocument();
+    expect(screen.getByTestId('no-profiling-data')).toHaveTextContent(
+      'No profiling data available for this application / time range.'
+    );
+  });
+});

packages/pyroscope-flamegraph/src/NoProfilingData.tsx

@@ -4,7 +4,7 @@ import styles from './NoProfilingData.module.scss';
 
 export default function NoProfilingData() {
   return (
-    <div className={styles.noProfilingData}>
+    <div data-testid="no-profiling-data" className={styles.noProfilingData}>
       <span>
         No profiling data available for this application / time range.
       </span>

webapp/javascript/components/AppSelector/SelectorModal.module.scss

@@ -34,7 +34,7 @@
 
 .sectionTitle {
   margin-left: 10px;
-  color: #888;
+  color: var(--ps-select-modal-title);
   font-weight: 700;
   font-size: 0.8em;
 }

webapp/javascript/components/TagsBar.tsx

@@ -13,7 +13,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { Prism } from '@webapp/util/prism';
 import { Query, brandQuery } from '@webapp/models/query';
 import Input from '@webapp/ui/Input';
-import { appendLabelToQuery } from '@webapp/util/appendLabelToQuery';
+import { appendLabelToQuery } from '@webapp/util/query';
 import styles from './TagsBar.module.css';
 
 interface TagsBarProps {

webapp/javascript/components/TimelineChartWrapper.tsx

@@ -39,8 +39,12 @@ type TimelineDataProps =
   | {
       /** timelineGroups refers to group of timelines, useful for explore view */
       timelineGroups: TimelineGroupData[];
+      /** if there is active group, the other groups should "dim" themselves */
+      activeGroup: string;
       /** show or hide tags legend, useful forr disabling single timeline legend */
       showTagsLegend: boolean;
+      /** to set active tagValue using <Legend /> */
+      handleGroupByTagValueChange: (groupByTagValue: string) => void;
       /** to manage strict data type */
       mode: 'multiple';
     };
@@ -199,7 +203,8 @@ class TimelineChartWrapper extends React.Component<
     const { flotOptions } = this.state;
 
     if (this.props.mode === 'multiple') {
-      const { timelineGroups, showTagsLegend, id, timezone } = this.props;
+      const { timelineGroups, activeGroup, showTagsLegend, id, timezone } =
+        this.props;
 
       const customFlotOptions = {
         ...flotOptions,
@@ -212,10 +217,13 @@ class TimelineChartWrapper extends React.Component<
 
       const centeredTimelineGroups =
         timelineGroups &&
-        timelineGroups.map(({ data, color }) => {
+        timelineGroups.map(({ data, color, tagName }) => {
           return {
             data: centerTimelineData({ data }),
-            color,
+            color:
+              activeGroup && activeGroup !== tagName
+                ? color?.fade(0.75)
+                : color,
           };
         });
 
@@ -232,7 +240,14 @@ class TimelineChartWrapper extends React.Component<
             width="100%"
             height={this.props.height || '100px'}
           />
-          {showTagsLegend && <Legend groups={timelineGroups} />}
+          {showTagsLegend && (
+            <Legend
+              groups={timelineGroups}
+              handleGroupByTagValueChange={
+                this.props.handleGroupByTagValueChange
+              }
+            />
+          )}
         </>
       );
     }

webapp/javascript/components/exportToFlamegraphDotCom.hook.ts

@@ -3,7 +3,11 @@ import { shareWithFlamegraphDotcom } from '@webapp/services/share';
 import { useAppDispatch } from '@webapp/redux/hooks';
 import handleError from '@webapp/util/handleError';
 
-export default function useExportToFlamegraphDotCom(flamebearer?: Profile) {
+export default function useExportToFlamegraphDotCom(
+  flamebearer?: Profile,
+  groupByTag?: string,
+  groupByTagValue?: string
+) {
   const dispatch = useAppDispatch();
 
   return async (name?: string) => {
@@ -14,6 +18,9 @@ export default function useExportToFlamegraphDotCom(flamebearer?: Profile) {
     const res = await shareWithFlamegraphDotcom({
       flamebearer,
       name,
+      // or we should add this to name ?
+      groupByTag,
+      groupByTagValue,
     });
 
     if (res.isErr) {

webapp/javascript/hooks/populateLeftRightQuery.hook.ts

@@ -2,17 +2,26 @@ import { useEffect } from 'react';
 import { actions, selectQueries } from '@webapp/redux/reducers/continuous';
 import { useAppDispatch, useAppSelector } from '@webapp/redux/hooks';
 
+function isQueriesHasSameApp(queries: string[]): boolean {
+  const appName = queries[0].split('{')[0];
+
+  return queries.every((query) => query.match(appName));
+}
+
 // usePopulateLeftRightQuery populates the left and right queries using the main query
 export default function usePopulateLeftRightQuery() {
   const dispatch = useAppDispatch();
-  const { query } = useAppSelector(selectQueries);
+  const { query, leftQuery, rightQuery } = useAppSelector(selectQueries);
+  // should not populate queries when was redirected
+  const shouldResetQuery =
+    query && !isQueriesHasSameApp([query, leftQuery, rightQuery]);
 
   // When the query changes (ie the app has changed)
   // We populate left and right tags to reflect that application
   useEffect(() => {
-    if (query) {
+    if (shouldResetQuery) {
       dispatch(actions.setRightQuery(query));
       dispatch(actions.setLeftQuery(query));
     }
-  }, [query]);
+  }, [shouldResetQuery]);
 }

webapp/javascript/pages/TagExplorerView.module.scss

@@ -11,6 +11,8 @@
   }
 
   .tableDescription {
+    display: flex;
+    justify-content: space-between;
     margin: 0 10px 10px;
   }
 
@@ -21,6 +23,38 @@
     margin-right: 5px;
   }
 
+  .buttons {
+    position: relative;
+
+    a,
+    .buttonName {
+      cursor: pointer;
+      padding: 8px 6px;
+      margin-left: 5px;
+      text-decoration: none;
+      border: 1px solid var(--ps-ui-border);
+      color: var(--ps-neutral-2);
+      background-color: var(--ps-ui-element-bg-primary);
+      border-radius: 4px;
+
+      &:hover {
+        background-color: var(--ps-ui-element-bg-highlight);
+      }
+    }
+
+    .buttonName {
+      position: relative;
+      line-height: initial;
+      padding: 8px 20px 8px 6px;
+
+      &:after {
+        content: '▾';
+        position: absolute;
+        right: 5px;
+      }
+    }
+  }
+
   .query {
     display: flex;
     align-items: center;
@@ -58,6 +92,7 @@
         align-items: center;
 
         .tagColor {
+          flex-shrink: 0;
           display: inline-block;
           height: 10px;
           width: 10px;