From 274de3b2faaaedc0098eb6fd782c5dce5bc6cc12 Mon Sep 17 00:00:00 2001
From: Mike Egorov <oskolog@gmail.com>
Date: Fri, 25 Jun 2021 19:56:04 +0300
Subject: [PATCH] support Grafana 8

---
 package.json                          |  2 +-
 src/components/FlameGraphRenderer.tsx | 20 ++++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 0c4783e..3ba0ecd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pyroscope-pyroscope-grafana",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Pyroscope plugin for grafana",
   "scripts": {
     "build": "grafana-toolkit plugin:build",
diff --git a/src/components/FlameGraphRenderer.tsx b/src/components/FlameGraphRenderer.tsx
index 6810b71..478e17e 100644
--- a/src/components/FlameGraphRenderer.tsx
+++ b/src/components/FlameGraphRenderer.tsx
@@ -70,7 +70,9 @@ class FlameGraphRenderer extends React.Component {
     this.rangeMin = 0;
     this.rangeMax = 1;
     this.query = '';
-    this.panelContainer = document.querySelector('.flamegraph-wrapper')?.closest('.panel-wrapper');
+    this.panelContainer =
+      document.querySelector('.flamegraph-wrapper')?.closest('.panel-container') ||
+      document.querySelector('.flamegraph-wrapper')?.closest('.panel-wrapper');
     window.addEventListener('focus', this.focusHandler);
 
     if (this.props.shortcut) {
@@ -81,13 +83,15 @@ class FlameGraphRenderer extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.data.series && this.props.data.series.length) {
-      const name = this.props.data.series[this.props.data.series.length - 1].name;
-      const from = this.props.data?.timeRange?.raw.from.valueOf();
-      const until = this.props.data?.timeRange?.raw.to.valueOf();
-      const prevName = prevProps.data.series[prevProps.data.series.length - 1].name;
-      const prevFrom = prevProps.data?.timeRange?.raw.from.valueOf();
-      const prevUntil = prevProps.data?.timeRange?.raw.to.valueOf();
+    const prevData = prevProps.data ? prevProps.data : prevProps;
+    const currentData = this.props.data ? this.props.data : this.props;
+    if (currentData.series && currentData.series.length) {
+      const name = currentData.series[currentData.series.length - 1].name;
+      const from = currentData?.timeRange?.raw.from.valueOf();
+      const until = currentData?.timeRange?.raw.to.valueOf();
+      const prevName = prevData.series[prevData.series.length - 1].name;
+      const prevFrom = prevData?.timeRange?.raw.from.valueOf();
+      const prevUntil = prevData?.timeRange?.raw.to.valueOf();
       if (from !== prevFrom || until !== prevUntil || name !== prevName) {
         this.updateFlameBearerData();
       }