feat(flamegraph): Redesign flamegraph toolbar to allow for more inter…

…actions (#1674) * feat: toolbar redesign
grafana · Nov 10, 2022 · 646501a · 646501a
1 parent 4c0b711
commit 646501a
Show file tree

Hide file tree

Showing 16 changed files with 721 additions and 556 deletions.
diff --git a/cypress/integration/webapp/basic.ts b/cypress/integration/webapp/basic.ts
@@ -41,15 +41,18 @@ describe('basic test', () => {
 
     cy.visit('/');
 
-    cy.findByRole('combobox', { name: 'view' }).select('Table');
+    cy.findByRole('button', { name: /View Mode/ }).click();
+    cy.findByRole('menuitem', { name: 'Table' }).click();
     cy.findByTestId('table-ui').should('be.visible');
     cy.findByTestId('flamegraph-view').should('not.exist');
 
-    cy.findByRole('combobox', { name: 'view' }).select('Both');
+    cy.findByRole('button', { name: /View Mode/ }).click();
+    cy.findByRole('menuitem', { name: 'Table and Flamegraph' }).click();
     cy.findByTestId('table-ui').should('be.visible');
     cy.findByTestId('flamegraph-view').should('be.visible');
 
-    cy.findByRole('combobox', { name: 'view' }).select('Flame');
+    cy.findByRole('button', { name: /View Mode/ }).click();
+    cy.findByRole('menuitem', { name: 'Flamegraph' }).click();
     cy.findByTestId('table-ui').should('not.exist');
     cy.findByTestId('flamegraph-view').should('be.visible');
   });
@@ -143,11 +146,11 @@ describe('basic test', () => {
 
     cy.visit('/');
 
-    cy.findByTestId('reset-view').should('be.disabled');
+    cy.findByRole('button', { name: /Reset/ }).should('be.disabled');
     cy.waitForFlamegraphToRender().click(0, BAR_HEIGHT * 2);
-    cy.findByTestId('reset-view').should('not.be.disabled');
-    cy.findByTestId('reset-view').click();
-    cy.findByTestId('reset-view').should('be.disabled');
+    cy.findByRole('button', { name: /Reset/ }).should('not.be.disabled');
+    cy.findByRole('button', { name: /Reset/ }).click();
+    cy.findByRole('button', { name: /Reset/ }).should('be.disabled');
   });
 
   describe('tooltip', () => {

diff --git a/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.tsx b/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.tsx
@@ -18,7 +18,7 @@ import ContextMenuHighlight from './ContextMenuHighlight';
 import FlamegraphTooltip from '../../Tooltip/FlamegraphTooltip';
 import ContextMenu from './ContextMenu';
 import LogoLink from './LogoLink';
-import SandwichIcon from '../../SandwichIcon';
+import { SandwichIcon } from '../../Icons';
 import { PX_PER_LEVEL } from './constants';
 import Header from './Header';
 import { FlamegraphPalette } from './colorPalette';
@@ -232,7 +232,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
             className={indexStyles.sandwichItem}
             onClick={handleClick}
           >
-            <SandwichIcon />
+            <SandwichIcon fill="black" />
             Open in sandwich view
           </MenuItem>
         );

diff --git a/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx b/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx
@@ -443,7 +443,6 @@ class FlameGraphRenderer extends Component<
     );
 
     const sandwichPane = (() => {
-      console.log(this.state.panesOrientation);
       if (this.state.selectedItem.isNothing) {
         return (
           <div className={styles.sandwichPane} key="sandwich-pane">

diff --git a/packages/pyroscope-flamegraph/src/Icons.tsx b/packages/pyroscope-flamegraph/src/Icons.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+
+export const TableIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+      <g id="z9nPJj.tif">
+        <path d="M62,13.33V49.68c-.02,.05-.04,.11-.05,.16-.3,2.66-2.66,5.16-6.08,5.15-15.92,0-31.83,0-47.75-.01-.54,0-1.1-.06-1.62-.19-2.73-.69-4.52-3.09-4.52-5.88,0-12,.01-23.56,.01-34.9,0-.29,.01-.57,.05-.86,.35-2.3,1.62-3.91,3.84-4.75,.6-.23,1.27-.28,1.9-.41,16.13,0,32.27,0,48.4,0,.09,.01,.17,.04,.26,.04,2.66,.21,4.8,2.01,5.4,4.57,.06,.24,.1,.48,.14,.72ZM28.99,31.81c0-3.92-.01-7.91-.01-11.81H8c0,3.91,.01,7.9,.01,11.81H28.99Zm27,0c0-3.92-.01-7.92-.01-11.81h-20.97c0,3.92,.01,7.91,.01,11.81h20.97Zm-47.98,5.19c0,3.7,0,8,0,11.69v.31H29v-12m6.01,.04c0,3.93-.01,8.05-.01,11.96h20.99c0-.12,0-.22,0-.31,0-3.7,0-7.99,0-11.69" />
+      </g>
+    </svg>
+  );
+};
+
+export const TablePlusFlamegraphIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+      <path d="M31,8.04H7.62c-.61,.13-1.26,.18-1.84,.41-2.14,.84-3.37,2.45-3.71,4.75-.04,.28-.05,.57-.05,.86,0,11.32-.02,22.88-.01,34.87,0,2.79,1.73,5.18,4.37,5.88,.51,.13,1.04,.19,1.57,.19,7.69,0,15.38,0,23.07,0V8.04Zm-2.92,11.99c0,3.9,.01,7.89,.01,11.8H7.82c0-3.9-.01-7.89-.01-11.8H28.08ZM7.82,49.01v-.31c0-3.69,0-7.99,0-11.68H28.1v11.99H7.82Z" />
+      <path d="M58.67,7.9h-25.67V55h2.9c1.84,0,2.9-1.55,2.9-3.45V27.14h11.6v6.37c0,1.91,1.49,3.45,3.33,3.45h4.94c1.84,0,3.33-1.55,3.33-3.45V11.35c0-1.91-1.49-3.45-3.33-3.45Z" />
+    </svg>
+  );
+};
+
+export const FlamegraphIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+      <path d="M5.44,8H58.56c1.9,0,3.44,1.54,3.44,3.44v6.16s0,9.6,0,9.6v6.36c0,1.9-1.54,3.44-3.44,3.44h-5.11c-1.9,0-3.44-1.54-3.44-3.44v-6.36h-12s0,9.8,0,9.8v9s0,5.56,0,5.56c0,1.9-1.1,3.44-3,3.44h-6c-1.9,0-3-1.54-3-3.44v-5.56h-9c-1.99,0-3-1.52-3-3.4v-5.6H5.44c-1.9,0-3.44-1.74-3.44-3.64v-6.16s0-9.6,0-9.6v-6.16c0-1.9,1.54-3.44,3.44-3.44Z" />
+    </svg>
+  );
+};
+
+export const SandwichIcon = ({ fill }: { fill?: string }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill={fill}>
+      <g id="shape_squiggle">
+        <path d="M60,38.42c-4.62,0-6.97-2.64-8.86-4.75-1.81-2.03-2.86-3.08-5.13-3.08s-3.32,1.06-5.13,3.08c-1.89,2.12-4.24,4.75-8.86,4.75s-6.97-2.64-8.87-4.75c-1.81-2.03-2.86-3.08-5.14-3.08s-3.33,1.06-5.14,3.08c-1.89,2.12-4.25,4.75-8.87,4.75-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5c2.28,0,3.33-1.06,5.14-3.09,1.89-2.12,4.25-4.75,8.87-4.75s6.97,2.64,8.87,4.75c1.81,2.03,2.86,3.09,5.14,3.09s3.32-1.06,5.13-3.08c1.89-2.12,4.24-4.75,8.86-4.75s6.97,2.64,8.86,4.75c1.81,2.03,2.86,3.08,5.13,3.08,1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5Z" />
+      </g>
+      <g id="Layer_4">
+        <rect x="2" y="8" width="60" height="14" rx="3.94" ry="3.94" />
+        <path d="M58.06,41h-18.64c-1.58,0-3.14,.42-4.5,1.22l-6.88,4.02c-1.87,1.09-4.19,1.09-6.06,0l-6.88-4.02c-1.37-.8-2.92-1.22-4.5-1.22H5.94c-2.18,0-3.94,1.76-3.94,3.94v7.12c0,2.18,1.76,3.94,3.94,3.94H58.06c2.18,0,3.94-1.76,3.94-3.94v-7.12c0-2.18-1.76-3.94-3.94-3.94Z" />
+      </g>
+    </svg>
+  );
+};
+
+export const HeadFirstIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+      <g id="ab_shape">
+        <g>
+          <path d="M16.71,41l-.42-2.45h-.16c-1.63,1.95-4.06,2.95-6.91,2.95-4.8,0-7.86-3.45-7.86-7.45,0-6.4,6.01-9.3,14.13-9.3v-.4c0-1.5-.84-3.2-4.38-3.2-2.48,0-4.9,.75-6.54,1.7l-1.42-4.75c1.69-.9,5.01-2.1,9.44-2.1,8.33,0,10.65,4.95,10.65,10.45v8.7c0,2.25,.11,4.4,.37,5.85h-6.91Zm-.95-11.7c-3.64,0-6.91,.9-6.91,4,0,2.1,1.37,3,3,3s3.22-1.05,3.74-2.6c.11-.35,.16-.8,.16-1.2v-3.2Z" />
+          <path d="M29.36,41c.11-1.79,.21-4.62,.21-7.25V6h7.7v13.46h.11c1.42-1.99,3.8-3.28,7.06-3.28,5.85,0,9.7,5.01,9.65,12.16,0,8.69-5.22,13.16-10.81,13.16-2.74,0-5.22-.99-6.91-3.72h-.11l-.37,3.23h-6.54Zm7.91-9.83c0,.55,.05,.99,.16,1.39,.58,1.94,2.16,3.18,4.01,3.18,3.11,0,4.9-2.53,4.9-7,0-3.92-1.58-6.8-4.9-6.8-1.85,0-3.53,1.39-3.95,3.28-.16,.4-.21,.94-.21,1.44v4.52Z" />
+        </g>
+      </g>
+      <g id="arrows">
+        <polygon points="62 54 52 45 52 51 35 51 35 57 52 57 52 63 62 54" />
+      </g>
+    </svg>
+  );
+};
+
+export const TailFirstIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+      <g id="yz_shape">
+        <g>
+          <path d="M22.75,13l3.43,12.39c.42,1.47,.84,3.2,1.16,4.52h.11c.32-1.32,.69-3.05,1-4.47l2.9-12.44h8.01l-5.8,17.16c-2.95,8.33-5.17,12.54-8.07,15.23-2.58,2.39-5.43,3.3-7.17,3.55l-1.85-6.3c1.11-.25,2.32-.76,3.48-1.52,1.16-.71,2.32-1.88,2.95-3.05,.26-.41,.42-.76,.42-1.12,0-.31-.05-.66-.26-1.17L14.32,13h8.43Z" />
+          <path d="M41.62,33.46l7.59-10.16c1.27-1.57,2.37-2.95,3.58-4.27v-.15h-10.33v-5.89h19.45l-.05,4.57-7.28,9.8c-1.21,1.57-2.48,3.15-3.69,4.42v.1h11.33v5.94h-20.61v-4.37Z" />
+        </g>
+      </g>
+      <g id="arrows">
+        <polygon points="12 51 12 45 2 54 12 63 12 57 29 57 29 51 12 51" />
+      </g>
+    </svg>
+  );
+};
diff --git a/packages/pyroscope-flamegraph/src/SandwichIcon.tsx b/packages/pyroscope-flamegraph/src/SandwichIcon.tsx
diff --git a/packages/pyroscope-flamegraph/src/SharedQueryInput.module.scss b/packages/pyroscope-flamegraph/src/SharedQueryInput.module.scss
@@ -2,15 +2,20 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  flex-grow: 1;
+  max-width: 300px;
 }
 
 .search {
   background: var(--ps-immutable-off-white);
   transition: background-color ease-out 0.1s;
   font: inherit;
-  margin-right: 8px;
+  margin-right: 1.5px;
   border: 1px solid var(--ps-ui-border);
-  width: 300px;
+  display: flex;
+  flex-grow: 1;
+  height: 37px;
+  width: 100%;
 
   &,
   &::placeholder {
@@ -38,7 +43,7 @@
 }
 
 .search-small {
-  width: 150px;
+  width: 100%;
 }
 
 .icon {

diff --git a/packages/pyroscope-flamegraph/src/Toolbar.module.css b/packages/pyroscope-flamegraph/src/Toolbar.module.css
diff --git a/packages/pyroscope-flamegraph/src/Toolbar.module.scss b/packages/pyroscope-flamegraph/src/Toolbar.module.scss
@@ -0,0 +1,120 @@
+$buttonHeight: 37px;
+
+.navbar {
+  display: flex;
+  flex-direction: row;
+  margin: 10px 0;
+  justify-content: space-between;
+  height: 47px;
+  background-color: var(--ps-fl-toolbar-bg);
+  border: 1px solid var(--ps-ui-border);
+  padding: 4px;
+  align-items: center;
+}
+
+.space-filler {
+  flex-grow: 1;
+}
+
+.viewType {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.navbar button {
+  color: var(--ps-neutral-2);
+}
+
+.toggleViewButton {
+  height: $buttonHeight;
+  min-width: auto;
+  width: 40px;
+  margin: 0 2px;
+  padding: 0;
+  border-color: transparent;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  &.selected {
+    background-color: var(--ps-fl-toolbar-btn-bg);
+
+    &:hover {
+      background-color: var(--ps-fl-toolbar-btn-bg);
+    }
+
+    svg {
+      color: white;
+    }
+  }
+}
+
+.viewModeDropdownButton {
+  min-width: 114px;
+  margin: 0 2px;
+  white-space: nowrap;
+}
+
+.diffTypesButton {
+  svg {
+    height: 20px;
+    width: 20px !important;
+  }
+}
+
+.diffDropdownButton {
+  text-transform: capitalize;
+  margin-left: 1.5px;
+}
+
+.fitModeButton {
+  @extend .toggleViewButton;
+}
+
+.collapseNodeButton {
+  height: $buttonHeight;
+  margin: 0 2px;
+  padding: 0 5px;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.resetViewButton {
+  @extend .collapseNodeButton;
+}
+
+.dropdownMenuItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  svg {
+    margin-left: 20px;
+  }
+}
+
+.fitModeDropdownSmall {
+  min-width: 70px;
+  margin: 0 2px;
+  height: $buttonHeight;
+}
+
+.fitModeDropdownLarge {
+  min-width: 100px;
+  margin: 0;
+}
+
+.divider {
+  width: 1px;
+  height: 35px;
+  background-color: #646466;
+  margin: 0 2px;
+}