# Hastic Graph Panel [Website](https://hastic.io) | [Twitter](https://twitter.com/hasticio) | [IRC](https://webchat.freenode.net/?channels=#hastic) A better version of Grafana's default Graph Panel. Able to render Anomalies & more. **Please note that we are still in alpha, so features are subject to change** # Prerequisites * [hastic-server](https://github.com/hastic/hastic-server) * [Grafana >= 5.1.1](https://grafana.com/grafana/download) # Installation - Navigate to /plugins directory in /data/plugins - Download hastic graph panel ``` wget https://github.com/hastic/hastic-grafana-graph-panel/releases/download/0.2.3/hastic-graph-panel-0.2.3.tar.gz ``` - Unpack downloaded files ``` tar -zxvf hastic-graph-panel-0.2.3.tar.gz ``` - Restart grafana-server - For grafana installed via Standalone Linux Binaries: - Stop any running instances of grafana-server - Start grafana-server by: ```$GRAFANA_PATH/bin/grafana-server``` - For grafana installed via Package Manager: - type in ```systemctl restart grafana-server``` # Installation from source **Note, that /data/plugins directory will NOT be present until grafana-server was started at least once!** **Also possible to create directory manually by typing:** ``` mkdir -p data/plugins ``` - Navigate to `/plugins` directory in `/data` ``` cd $GRAFANA_PATH/data/plugins ``` - Clone the repository ``` git clone https://github.com/hastic/hastic-grafana-graph-panel.git ``` - Navigate to /hastic-grafana-graph-panel directory ``` cd $GRAFANA_PATH/data/plugins/hastic-grafana-graph-panel ``` - Install necessary dependencies ``` npm install ``` - Build hastic graph panel ``` npm run build ``` - Restart grafana-server - For grafana installed via Standalone Linux Binaries: - Stop any running instances of grafana-server - Start grafana-server by: ```$GRAFANA_PATH/bin/grafana-server``` - For grafana installed via Package Manager: - type in ```systemctl restart grafana-server``` # Usage [hastic-server](https://github.com/hastic/hastic-server) should be running in order to use anomaly detection. - Open new dasboard where you want to see Hastic panel - Open Dashboard `Settings` (top right corner) and then navigate to `Variables` - Add new [variable](http://docs.grafana.org/reference/templating/#variable-types) - set `type` to `Constant` - set `name` to `HASTIC_SERVER_URL` - set `value` to URL of your hastic-server instance in your dashboard (e.g. `http://localhost:8000`) - Save settings and close Settings window - Open panel edit mode (click `panel title`menu or press "e" hotkey) - Navigate to `Metrics` tab. Set metrics. Only one metric suported - Navigate to `Analytics tab` - Push `Add an Anomaly Type` button - Set name of the anomaly and choose a pattern type - Press `create` - Label your data: - Click button with chart icon - Highlight anomalies on graph holding `Ctrl` button on Windows or `Cmd` on Mac - When you have finished labeling - click the button with the chart icon once more. `saving...` status should appear. - `Learning` status should appear while hastic-server is learning (first learning can take a while). - When `Learning` status dissapears - the anomalies should become labeled in your graph - this icon means that the anomaly was marked by the server - this icon means that the anomaly was marked by the user # Development ## Build ``` npm install npm run build ``` # Credits Based on * [grafana-plugin-template-webpack-typescript](https://github.com/CorpGlory/grafana-plugin-template-webpack-typescript) * [@types/grafana](https://github.com/CorpGlory/types-grafana)