connect to data source and readme

Author: Loggy

README.md

@@ -1,26 +1,43 @@
 # Pyroscope Grafana Panel Plugin
-## Getting started
 
-1. Install dependencies
+## Getting started
 
-   ```bash
-   yarn install
+1. Create `grafana-plugins` folder
+2. Open grafana config:
+   * MacOS: `vim /usr/local/etc/grafana/grafana.ini`
+   * Linux: `vim /etc/grafana/grafana.ini`
+3. Specify path to your `grafana-plugins` folder:
    ```
-
-2. Build plugin in development mode or run in watch mode
-
-   ```bash
-   yarn dev
+   # Directory where grafana will automatically scan and look for plugins
+   plugins = /<path_to>/grafana-plugins
    ```
+   *Don't forget to remove semicolon at the beginning*
 
-   or
+4. Clone [pyroscope-panel-plugin]() and [pyroscope-datasource-plugin]() into `grafana-plugins` folder
 
-   ```bash
-   yarn watch
+5. Visit each plugin folder and build them:
    ```
-
-3. Build plugin in production mode
-
-   ```bash
-   yarn build
+   yarn install
+   yarn dev
    ```
+6. Restart Grafana:
+   * MacOS Homebrew: `brew services restart grafana`
+   * Linux: `systemctl restart grafana-server`
+7. Open Grafana ang go to **Configuratin -> Plugins**
+8. Check that plugins are available:
+   ![plugins-list]()
+9. Set up data source plugin:
+   * **Configuration -> Data Sources -> Add data source**
+   * click on `pyroscope-datasource`
+   * Specify Pyroscope host in `Endpoint` field:
+      ![endpoint]()
+10. Set up panel plugin:
+    * Add an empty panel on your dashboard
+    * Select `pyroscop-panel` from Visualization list
+    * Under panel view in Query tab select `pyroscope-datasource`
+    * In `Application name` input specify app name
+    * Click `Apply`
+   ![settings]()
+
+Congratulations! Now you can monitor application flamegraph on your Grafana dashboard!
+![]()

docs/assets/dashboard.jpg

@@ -15,12 +15,7 @@ export const SimplePanel: React.FC<Props> = ({ options, data }) => {
     <>
     <div className={styles.app}>
       <div className={`${styles.appContainer} flamegraph-wrapper`}>
-        <FlameGraphRenderer
-          viewType="single"
-          renderURL="/render?name=pyroscope.server.alloc_objects%7B%7D"
-          options={options}
-          data={data}
-        />
+        <FlameGraphRenderer options={options} data={data} />
       </div>
     </div>
     </>

docs/assets/endpoint.jpg

@@ -77,20 +77,16 @@ class FlameGraphRenderer extends React.Component {
         "Reset Flamegraph View"
       );
     }
-
-    this.fetchFlameBearerData(this.props.renderURL)
+    this.updateFlameBearerData()
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (this.getParamsFromRenderURL(this.props.renderURL).name != this.getParamsFromRenderURL(prevProps.renderURL).name ||
-      prevProps.from != this.props.from ||
-      prevProps.until != this.props.until ||
-      prevProps.maxNodes != this.props.maxNodes ||
-      prevProps.refreshToken != this.props.refreshToken ||
-      prevProps[`${this.props.viewSide}From`] != this.props[`${this.props.viewSide}From`] ||
-      prevProps[`${this.props.viewSide}Until`] != this.props[`${this.props.viewSide}Until`]
-    ) {
-      this.fetchFlameBearerData(this.props.renderURL)
+    const from = this.props.data?.timeRange?.raw.from.valueOf();
+    const until = this.props.data?.timeRange?.raw.to.valueOf();
+    const prevFrom = prevProps.data?.timeRange?.raw.from.valueOf();
+    const prevUntil = prevProps.data?.timeRange?.raw.to.valueOf();
+    if (from !== prevFrom || until !== prevUntil) {
+      this.updateFlameBearerData()
     }
 
     if (
@@ -101,7 +97,7 @@ class FlameGraphRenderer extends React.Component {
     }
   }
 
-  fetchFlameBearerData() {
+  updateFlameBearerData() {
     const flamebearer = this.props.data.series[this.props.data.series.length - 1].fields[0].values.buffer[0];
     deltaDiff(flamebearer.levels);
     this.setState({ ...this.state, flamebearer },
@@ -110,15 +106,6 @@ class FlameGraphRenderer extends React.Component {
     })
   }
 
-  getParamsFromRenderURL(inputURL) {
-    let urlParamsRegexp = /(.*render\?)(?<urlParams>(.*))/
-    let paramsString = inputURL.match(urlParamsRegexp);
-    let params = new URLSearchParams(paramsString.groups.urlParams);
-    let paramsObj = this.paramsToObject(params);
-
-    return paramsObj
-  }
-
   paramsToObject(entries) {
     const result = {}
     for(const [key, value] of entries) { // each 'entry' is a [key, value] tupple
@@ -240,7 +227,8 @@ class FlameGraphRenderer extends React.Component {
     // this is here to debounce resize events (see: https://css-tricks.com/debouncing-throttling-explained-examples/)
     //   because rendering is expensive
     clearTimeout(this.resizeFinish);
-    this.pxPerLevel = (el[0].contentRect.height - 60) / this.state.flamebearer.levels.length;
+    const responsiveHeight = (el[0].contentRect.height - 60) / this.state.flamebearer.levels.length;
+    this.pxPerLevel = responsiveHeight > 20 ? 20 : responsiveHeight;
     this.resizeFinish = setTimeout(this.renderCanvas, 50);
   };
 
@@ -464,64 +452,25 @@ class FlameGraphRenderer extends React.Component {
   };
 
   render = () => {
-
-    let flameGraphPane = (
-      <div
-        key={'flamegraph-pane'}
-        className={this.styles.flamegraphPane}
-      >
-        <div className='flamegraph-header'>
-          <span></span>
-          <span>Frame width represents {unitsToFlamegraphTitle[this.state.units]}</span>
-        </div>
-        <canvas
-          height="0"
-          ref={this.canvasRef}
-          onClick={this.clickHandler}
-          onMouseMove={this.mouseMoveHandler}
-          onMouseOut={this.mouseOutHandler}
-        />
-      </div>
-    )
-
-    let panes = [flameGraphPane];
-
-    let instructionsText = this.props.viewType === "double" ? `Select ${this.props.viewSide} time range` : null;
-    let instructionsClassName = this.props.viewType === "double" ? `${this.props.viewSide}-instructions` : null;
-
     return (
       <div>
-
-        <div>
-          {/* <ProfilerHeader
-            view={this.state.view}
-            handleSearchChange={this.handleSearchChange}
-            reset={this.reset}
-            updateView={this.updateView}
-            resetStyle={this.state.resetStyle}
-          /> */}
-          <div className={`${instructionsClassName}-wrapper`}>
-            <span className={`${instructionsClassName}-text`}>{instructionsText}</span>
-          </div>
-          <div className={clsx("flamegraph-container panes-wrapper", { "vertical-orientation": this.props.viewType === "double" })}>
-            {
-              panes.map((pane) => (
-                pane
-              ))
-            }
-            {/* { tablePane }
-            { flameGraphPane } */}
-          </div>
-          {/* <div
-            className={clsx("no-data-message", {
-              visible:
-                this.state.flamebearer && this.state.flamebearer.numTicks === 0,
-            })}
+        <div className={clsx("flamegraph-container panes-wrapper")}>
+          <div
+            key={'flamegraph-pane'}
+            className={this.styles.flamegraphPane}
           >
-            <span>
-              No profiling data available for this application / time range.
-            </span>
-          </div> */}
+            <div className='flamegraph-header'>
+              <span></span>
+              <span>Frame width represents {unitsToFlamegraphTitle[this.state.units]}</span>
+            </div>
+            <canvas
+              height="0"
+              ref={this.canvasRef}
+              onClick={this.clickHandler}
+              onMouseMove={this.mouseMoveHandler}
+              onMouseOut={this.mouseOutHandler}
+            />
+          </div>
         </div>
         <div className="flamegraph-highlight" style={this.state.highlightStyle} />
         <div

docs/assets/pluginslist.jpg

@@ -1,12 +1,12 @@
 {
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
   "type": "panel",
-  "name": "pyroscope-grafana",
-  "id": "pyroscope-pyroscope-grafana",
+  "name": "pyroscope-panel",
+  "id": "pyroscope-panel",
   "info": {
     "description": "Pyroscope plugin for grafana",
     "author": {
-      "name": "Mike Egorov",
+      "name": "Pyroscope",
       "url": "https://pyroscope.io/"
     },
     "keywords": [
@@ -35,4 +35,4 @@
     "grafanaDependency": ">=7.0.0",
     "plugins": []
   }
-}
+}