Merge pull request #1 from pyroscope-io/shared-flamegraph-component

adds integration with main pyroscope repo

Author: petethepig

.gitignore

@@ -30,3 +30,4 @@ e2e-results/
 # Editors
 .idea
 
+src/flamegraphComponent.js

docker-compose.yml

@@ -0,0 +1,21 @@
+---
+version: "3.9"
+services:
+  grafana:
+    image: grafana/grafana:8.1.1
+    volumes:
+      - ./dist:/var/lib/grafana/plugins/pyroscope-panel
+    environment:
+      - GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=pyroscope-panel
+      - GF_INSTALL_PLUGINS=pyroscope-datasource
+    ports:
+      - 3000:3000
+
+  pyroscope:
+    image: "pyroscope/pyroscope:latest"
+    ports:
+      - 4040:4040
+    command:
+      - server
+    environment:
+      - PYROSCOPE_LOG_LEVEL=info

package.json

@@ -3,11 +3,12 @@
   "version": "1.0.1",
   "description": "Pyroscope plugin for grafana",
   "scripts": {
-    "build": "grafana-toolkit plugin:build",
-    "test": "grafana-toolkit plugin:test",
-    "dev": "grafana-toolkit plugin:dev",
-    "watch": "grafana-toolkit plugin:dev --watch",
-    "sign": "grafana-toolkit plugin:sign",
+    "build-flamegraph": "rm ../../src/flamegraphComponent.js ; cd node_modules/pyroscope && pwd && yarn && make build-panel && cp webapp/public/assets/flamegraphComponent.js ../../src/flamegraphComponent.js",
+    "build": "yarn build-flamegraph && grafana-toolkit plugin:build",
+    "test": "yarn build-flamegraph && grafana-toolkit plugin:test",
+    "dev": "yarn build-flamegraph && grafana-toolkit plugin:dev",
+    "watch": "yarn build-flamegraph && grafana-toolkit plugin:dev --watch",
+    "sign": "yarn build-flamegraph && grafana-toolkit plugin:sign",
     "start": "yarn watch"
   },
   "author": "Mike Egorov",
@@ -22,6 +23,6 @@
     "node": ">=14"
   },
   "dependencies": {
-    "pyroscope": "git+https://github.com/pyroscope-io/pyroscope.git#plugin-webpack"
+    "pyroscope": "git+https://github.com/pyroscope-io/pyroscope.git#133b35b"
   }
 }

src/SimplePanel.tsx

@@ -4,7 +4,7 @@ import { PanelProps } from '@grafana/data';
 import { SimpleOptions } from 'types';
 import { css } from 'emotion';
 import { stylesFactory, useTheme } from '@grafana/ui';
-import FlameGraph, { parseFlamebearerFormat } from 'pyroscope';
+import FlameGraph, { parseFlamebearerFormat } from 'flamegraphComponent.js';
 
 interface Props extends PanelProps<SimpleOptions> {}
 

tsconfig.json

@@ -6,7 +6,6 @@
     "baseUrl": "./src",
     "noImplicitAny": false,
     "noUnusedLocals": false,
-    "allowJs": true,
     "typeRoots": ["./node_modules/@types"]
   }
 }

yarn.lock

@@ -11303,9 +11303,9 @@ [email protected]:
     rimraf "^2.6.1"
     ws "^6.1.0"
 
-"pyroscope@git+https://github.com/pyroscope-io/pyroscope.git#plugin-webpack":
+"pyroscope@git+https://github.com/pyroscope-io/pyroscope.git#133b35b":
   version "0.0.39"
-  resolved "git+https://github.com/pyroscope-io/pyroscope.git#3a526d0242934b1c303918a7988bf0eb9b2e5768"
+  resolved "git+https://github.com/pyroscope-io/pyroscope.git#133b35bd4256b9708e40b41e49965492f42e0e79"
   dependencies:
     "@babel/preset-env" "^7.10.4"
     "@fortawesome/fontawesome-free" "^5.14.0"