fix paramsToObject function and tooltip position

grafana · Aug 30, 2021 · 3339e75 · 3339e75
1 parent ed2ffd7
commit 3339e75
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 70 deletions.
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -19,4 +19,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -23,4 +23,4 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-import '@testing-library/cypress/add-commands';
+import "@testing-library/cypress/add-commands";
diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/scripts/webpack/webpack.dev.js b/scripts/webpack/webpack.dev.js
@@ -1,11 +1,9 @@
 const { merge } = require("webpack-merge");
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
 const common = require("./webpack.common.js");
 
 module.exports = merge(common, {
   mode: "development",
-  plugins: [
-    new BundleAnalyzerPlugin()
-  ]
+  plugins: [new BundleAnalyzerPlugin()],
 });
diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx b/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx
@@ -243,7 +243,11 @@ class FlameGraph extends React.Component {
     getFormatter(this.state.numTicks, this.state.sampleRate, this.state.units);
 
   renderCanvas = () => {
-    if (!this.props.flamebearer || !this.props.flamebearer.names) {
+    if (
+      !this.props.flamebearer ||
+      !this.props.flamebearer.names ||
+      this.props.flamebearer.names.length <= 1
+    ) {
       return;
     }
 
@@ -488,52 +492,63 @@ class FlameGraph extends React.Component {
   render = () => {
     const { ExportData } = this.props;
     return (
-      <div key="flamegraph-pane" className="flamegraph-pane">
-        <div className="flamegraph-header">
-          {!this.state.viewDiff ? (
-            <div>
-              <div className="row flamegraph-title">
-                Frame width represents{" "}
-                {unitsToFlamegraphTitle[this.state.units]}
-              </div>
-            </div>
-          ) : (
-            <div>
-              <div className="row">
-                Base graph: left - Comparison graph: right
+      <>
+        <div key="flamegraph-pane" className="flamegraph-pane">
+          <div className="flamegraph-header">
+            {!this.state.viewDiff ? (
+              <div>
+                <div className="row flamegraph-title">
+                  Frame width represents{" "}
+                  {unitsToFlamegraphTitle[this.state.units]}
+                </div>
               </div>
-              <div className="row flamegraph-legend">
-                <div className="flamegraph-legend-list">
-                  {diffLegend.map((v) => (
-                    <div
-                      key={v}
-                      className="flamegraph-legend-item"
-                      style={{ backgroundColor: colorBasedOnDiff(v, 100, 0.8) }}
-                    >
-                      {v > 0 ? "+" : ""}
-                      {v}%
-                    </div>
-                  ))}
+            ) : (
+              <div>
+                <div className="row">
+                  Base graph: left - Comparison graph: right
+                </div>
+                <div className="row flamegraph-legend">
+                  <div className="flamegraph-legend-list">
+                    {diffLegend.map((v) => (
+                      <div
+                        key={v}
+                        className="flamegraph-legend-item"
+                        style={{
+                          backgroundColor: colorBasedOnDiff(v, 100, 0.8),
+                        }}
+                      >
+                        {v > 0 ? "+" : ""}
+                        {v}%
+                      </div>
+                    ))}
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
-          {ExportData && (
-            <ExportData
-              flameCanvas={this.canvasRef}
-              label={this.props.label || ""}
-            />
-          )}
-        </div>
-
-        {!this.props.flamebearer || this.props.flamebearer.names.length <= 1 ? (
-          <div className="error-message">
-            <span>
-              No profiling data available for this application / time range.
-            </span>
+            )}
+            {ExportData && (
+              <ExportData
+                flameCanvas={this.canvasRef}
+                label={this.props.label || ""}
+              />
+            )}
           </div>
-        ) : (
-          <>
+          {!this.props.flamebearer ||
+          this.props.flamebearer.names.length <= 1 ? (
+            <div className="error-message">
+              <span>
+                No profiling data available for this application / time range.
+              </span>
+            </div>
+          ) : null}
+          <div
+            style={{
+              opacity:
+                !this.props.flamebearer ||
+                this.props.flamebearer.names.length <= 1
+                  ? 0
+                  : 1,
+            }}
+          >
             <canvas
               className="flamegraph-canvas"
               height="0"
@@ -544,16 +559,16 @@ class FlameGraph extends React.Component {
               onBlur={() => {}}
             />
             <div className="flamegraph-highlight" ref={this.highlightRef} />
-            <div className="flamegraph-tooltip" ref={this.tooltipRef}>
-              <div className="flamegraph-tooltip-name" />
-              <div>
-                <span />
-                <span />
-              </div>
-            </div>
-          </>
-        )}
-      </div>
+          </div>
+        </div>
+        <div className="flamegraph-tooltip" ref={this.tooltipRef}>
+          <div className="flamegraph-tooltip-name" />
+          <div>
+            <span />
+            <span />
+          </div>
+        </div>
+      </>
     );
   };
 }

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/styles.css b/webapp/javascript/components/FlameGraph/FlameGraphComponent/styles.css
@@ -1,6 +1,7 @@
 .flamegraph-pane {
   flex: 1;
   width: 100%;
+  position: relative;
 }
 
 .flamegraph-header {
@@ -54,8 +55,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
-  top: 0;
+  position: relative;
+  padding-bottom: 60px;
 }
 
 .flamegraph-tooltip {

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx b/webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx
@@ -32,8 +32,7 @@ const getParamsFromRenderURL = (inputURL) => {
   const paramsString = inputURL.match(urlParamsRegexp);
 
   const params = new URLSearchParams(paramsString.groups.urlParams);
-  const paramsObj = paramsToObject(params);
-
+  const paramsObj = paramsToObject([...params.entries()]);
   return paramsObj;
 };
 
@@ -189,7 +188,10 @@ class FlameGraphRenderer extends React.Component {
       <div
         key="table-pane"
         className={clsx("pane", {
-          hidden: this.state.view === "icicle",
+          hidden:
+            this.state.view === "icicle" ||
+            !this.state.flamebearer ||
+            this.state.flamebearer.names.length <= 1,
           "vertical-orientation": this.props.viewType === "double",
         })}
       >
@@ -203,9 +205,10 @@ class FlameGraphRenderer extends React.Component {
         />
       </div>
     );
-
+    const dataExists =
+      this.state.view !== "table" || this.state.flamebearer.names.length <= 1;
     const flameGraphPane =
-      this.state.flamebearer && this.state.view !== "table" ? (
+      this.state.flamebearer && dataExists ? (
         <Graph
           flamebearer={this.state.flamebearer}
           format={this.parseFormat(this.state.flamebearer.format)}

diff --git a/webapp/javascript/components/ProfilerHeader.jsx b/webapp/javascript/components/ProfilerHeader.jsx
@@ -9,7 +9,7 @@ import {
   faListUl,
   faTable,
 } from "@fortawesome/free-solid-svg-icons";
-import { FitModes } from "../util/fitMode"
+import { FitModes } from "../util/fitMode";
 
 export default function ProfilerHeader({
   view,
@@ -49,8 +49,6 @@ export default function ProfilerHeader({
       >
         Reset View
       </button>
-
-
       <div className="navbar-space-filler" />
       {!viewDiff ? null : (
         <div className="btn-group viz-switch">