Add boiler plate code for flamegraph and readme about dev setup grafa…

…na/phlare#125

.gitignore

@@ -11,3 +11,19 @@ bin
 go.work
 go.work.sum
 .DS_Store
+
+node_modules
+
+# Yarn
+**/.yarn/*
+!**/.yarn/patches
+!**/.yarn/releases
+!**/.yarn/plugins
+!**/.yarn/sdks
+!**/.yarn/versions
+.pnp.*
+
+
+**/dist
+
+.idea

grafana/README.md

@@ -0,0 +1,22 @@
+This directory contains Fire datasource and the FlameGraph panel. 
+
+To be able to test both in Grafana you have to setup your environment in a specific way.
+
+#### Setup Grafana
+- Checkout https://github.com/grafana/grafana/pull/52057 in Grafana repo.
+- In grafana repo packages/grafana-data/package.json, change `"@grafana/schema": "9.1.0-pre",` to `"@grafana/schema": "9.0.4",`. We will link @grafana/data later on and the `9.1.0-pre` version would not be recognized from Fire repo 
+#### Create symbolic links:
+- `cd $GRAFANA_REPO/data/plugins`
+- `ln -s $FIRE_REPO/grafana/flamegraph`
+- `ln -s $FIRE_REPO/grafana/fire-datasource`
+
+#### Setup and build plugins:
+- `cd $FIRE_REPO/grafana/flamegraph`
+- `yarn link grafana/packages/grafana-data` this will change the `resolutions` part in package.json TODO: check if this can be relative path or how to prevent rewriting this all the time.
+- `yarn install`
+- `yarn build`
+- `cd $FIRE_REPO/grafana/fire-datasource`
+- `yarn install`
+- `yarn build`
+- `mage -v`
+- Restart Grafana if it was already running to pick up new plugin state.

grafana/fire-datasource/pkg/plugin/plugin.go

@@ -129,6 +129,7 @@ func (d *FireDatasource) query(_ context.Context, pCtx backend.PluginContext, qu
 
 	// create data frame response.
 	frame := data.NewFrame("response")
+	frame.Meta = &data.FrameMeta{PreferredVisualization: "profile"}
 
 	// add fields.
 	frame.Fields = append(frame.Fields,

grafana/flamegraph/.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    ...require('@grafana/toolkit/src/config/prettier.plugin.config.json'),
+};

grafana/flamegraph/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.2.2.cjs

grafana/flamegraph/README.md

@@ -0,0 +1 @@
+# Flame graph panel

grafana/flamegraph/coverage/junit.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<testsuites name="jest tests" tests="0" failures="0" errors="0" time="0.001">
+</testsuites>

grafana/flamegraph/jest.config.js

@@ -0,0 +1,8 @@
+// This file is needed because it is used by vscode and other tools that
+// call `jest` directly.  However, unless you are doing anything special
+// do not edit this file
+
+const standard = require('@grafana/toolkit/src/config/jest.plugin.config');
+
+// This process will use the same config that `yarn test` is using
+module.exports = standard.jestConfig();

grafana/flamegraph/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "grafana-flamegraph-panel",
+  "version": "1.0.0",
+  "description": "",
+  "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",
+    "start": "yarn watch"
+  },
+  "author": "Andrej Ocenas",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@grafana/data": "latest",
+    "@grafana/runtime": "latest",
+    "@grafana/toolkit": "latest",
+    "@types/lodash": "4.14.181",
+    "prettier": "2.6.0",
+    "ts-node": "9.1.1"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "dependencies": {
+    "react": "17.0.2"
+  },
+  "packageManager": "yarn@3.2.2",
+  "resolutions": {
+    "@grafana/data": "portal:/home/andrej/go/src/github.com/grafana/grafana/packages/grafana-data"
+  }
+}

grafana/flamegraph/src/module.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PanelPlugin, PanelProps } from '@grafana/data';
+
+export const FlameGraphPanel: React.FunctionComponent<PanelProps> = () => {
+  return <div>Flame Graph pip pup pip pip (r2d2 noises)</div>;
+};
+
+export const plugin = new PanelPlugin(FlameGraphPanel).setExplorePanel(FlameGraphPanel, ['profile']);

grafana/flamegraph/src/plugin.json

@@ -0,0 +1,17 @@
+{
+  "type": "panel",
+  "name": "Flame Graph",
+  "id": "flameGraph",
+  "state": "beta",
+
+  "info": {
+    "author": {
+      "name": "Grafana Labs",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+      "small": "img/icn-node-graph.svg",
+      "large": "img/icn-node-graph.svg"
+    }
+  }
+}

grafana/flamegraph/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "./src",
+    "jsx": "react"
+  },
+  "extends": "@grafana/toolkit/src/config/tsconfig.plugin.json",
+  "include": ["src", "types"]
+}