Browse Source

Releases & installation from releases #26 (#38)

* remove dist from repo

* add steps to installation from source

* add installation guide using wget+tar
PLACEHOLDER LINKS FOR NOW

* add -zxvf

* specify directory for installation
master
sanke1 6 years ago committed by Alexey Velikiy
parent
commit
7740ffae75
  1. 2
      .gitignore
  2. 33
      README.md
  3. 80
      dist/img/icn-graph-panel.svg
  4. 15264
      dist/module.js
  5. 72
      dist/partials/axes_editor.html
  6. 148
      dist/partials/tab_analytics.html
  7. 135
      dist/partials/tab_display.html
  8. 73
      dist/partials/tab_legend.html
  9. 21
      dist/plugin.json

2
.gitignore vendored

@ -35,4 +35,4 @@ profile.cov
.DS_Store .DS_Store
.tscache .tscache
.vscode/ .vscode/

33
README.md

@ -13,10 +13,26 @@ A better version of Grafana's default Graph Panel. Able to render Anomalies & mo
# Installation # Installation
- Navigate to /plugins directory in <GRAFANA_PATH>/data/plugins
- Download hastic graph panel
```
wget [PLACEHOLDER]
```
- Unpack downloaded files
```
tar -zxvf [PLACEHOLDER]
```
# Installation from source
**Note, that <GRAFANA_PATH>/data/plugins directory will NOT be present until grafana-server was started at least once!** **Note, that <GRAFANA_PATH>/data/plugins directory will NOT be present until grafana-server was started at least once!**
**Also possible to create directory manually by typing:** **Also possible to create directory manually by typing:**
```mkdir -p data/plugins``` ```
mkdir -p data/plugins
```
- Navigate to /plugins directory in <GRAFANA_PATH>/data/plugins - Navigate to /plugins directory in <GRAFANA_PATH>/data/plugins
``` ```
@ -28,6 +44,21 @@ cd $GRAFANA_PATH/data/plugins
git clone https://github.com/hastic/hastic-grafana-graph-panel.git 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 - Restart grafana-server
- For grafana installed via Standalone Linux Binaries: - For grafana installed via Standalone Linux Binaries:
- Stop any running instances of grafana-server - Stop any running instances of grafana-server

80
dist/img/icn-graph-panel.svg vendored

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 21 KiB

15264
dist/module.js vendored

File diff suppressed because it is too large Load Diff

72
dist/partials/axes_editor.html vendored

@ -1,72 +0,0 @@
<div class="editor-row">
<div class="section gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes">
<h5 class="section-heading" ng-show="$index === 0">Left Y</h5>
<h5 class="section-heading" ng-show="$index === 1">Right Y</h5>
<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="yaxis.show" on-change="ctrl.render()"></gf-form-switch>
<div ng-if="yaxis.show">
<div class="gf-form">
<label class="gf-form-label width-6">Unit</label>
<div
class="gf-form-dropdown-typeahead max-width-20" ng-model="yaxis.format"
dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(yaxis, $subItem)"
/>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Scale</label>
<div class="gf-form-select-wrapper max-width-20">
<select class="gf-form-input" ng-model="yaxis.logBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-6">Y-Min</label>
<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.min" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Y-Max</label>
<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.max" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Decimals</label>
<input type="number" class="gf-form-input max-width-20" placeholder="auto" empty-to-null bs-tooltip="'Override automatic decimal precision for y-axis'" data-placement="right" ng-model="yaxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Label</label>
<input type="text" class="gf-form-input max-width-20" ng-model="yaxis.label" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">X-Axis</h5>
<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="ctrl.panel.xaxis.show" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-6">Mode</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.xaxis.mode" ng-options="v as k for (k, v) in ctrl.xAxisModes" ng-change="ctrl.xAxisModeChanged()"> </select>
</div>
</div>
<!-- Series mode -->
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
<label class="gf-form-label width-6">Value</label>
<metric-segment-model property="ctrl.panel.xaxis.values[0]" options="ctrl.xAxisStatOptions" on-change="ctrl.xAxisValueChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
</div>
<!-- Histogram mode -->
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
<label class="gf-form-label width-6">Buckets</label>
<input type="number" class="gf-form-input max-width-8" ng-model="ctrl.panel.xaxis.buckets" placeholder="auto" ng-change="ctrl.render()" ng-model-onblur bs-tooltip="'Number of buckets'" data-placement="right">
</div>
</div>
</div>

148
dist/partials/tab_analytics.html vendored

@ -1,148 +0,0 @@
<h5> Analytic Units </h5>
<div class="editor-row">
<div class="gf-form" ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits">
<label class="gf-form-label width-4"> Name </label>
<input
type="text" class="gf-form-input max-width-15"
ng-model="analyticUnit.name"
ng-disabled="true"
>
<label class="gf-form-label width-8"> Type </label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input width-12"
ng-model="analyticUnit.type"
ng-options="type.value as type.name for type in ctrl.ANALYTIC_TYPES"
ng-disabled="true"
/>
</div>
<!--
<label class="gf-form-label width-6"> Confidence </label>
<input
type="number" class="gf-form-input width-5 ng-valid ng-scope ng-empty ng-dirty ng-valid-number ng-touched"
placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'"
data-placement="right" ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur="" data-original-title="" title=""
/>
-->
<label class="gf-form-label width-6"> Color </label>
<span class="gf-form-label">
<color-picker
color="analyticUnit.color"
onChange="ctrl.onAnomalyColorChange.bind(ctrl, analyticUnit.key)"
/>
</span>
<label class="gf-form-label" ng-style="analyticUnit.status === 'learning' && { 'cursor': 'not-allowed' }">
<a class="pointer" tabindex="1"
ng-click="ctrl.onToggleLabelingMode(analyticUnit.key)"
ng-disabled="analyticUnit.status === 'learning'"
>
<i class="fa fa-bar-chart" ng-if="!analyticUnit.saving"></i>
<i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
<b ng-if="analyticUnit.selected && !analyticUnit.deleteMode && !analyticUnit.saving"> labeling </b>
<b ng-if="analyticUnit.selected && analyticUnit.deleteMode && !analyticUnit.saving"> deleting </b>
<b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
</a>
</label>
<label class="gf-form-label"> Alerts: </label>
<label
class="gf-form-label text-center"
style="width: 4rem"
ng-if="analyticUnit.alertEnabled === undefined"
bs-tooltip="'Alarting status isn`t available. Wait please.'"
>
<i class="fa fa-spinner fa-spin"></i>
</label>
<gf-form-switch
ng-if="analyticUnit.alertEnabled !== undefined"
on-change="ctrl.onAnomalyAlertChange(analyticUnit)"
checked="analyticUnit.alertEnabled"
style="height: 36px;"
/>
<label class="gf-form-label">
<a
ng-if="analyticUnit.visible"
ng-disabled="analyticUnit.selected"
bs-tooltip="'Hide. It`s visible now.'"
ng-click="ctrl.onToggleVisibility(analyticUnit.key)"
class="pointer"
>
<i class="fa fa-eye"></i>
</a>
<a
ng-if="!analyticUnit.visible"
ng-disabled="analyticUnit.selected"
bs-tooltip="'Show. It`s hidden now.'"
ng-click="ctrl.onToggleVisibility(analyticUnit.key)"
class="pointer"
>
<i class="fa fa-eye-slash"></i>
</a>
</label>
<label class="gf-form-label">
<a
ng-if="!analyticUnit.selected"
ng-click="ctrl.onRemove(analyticUnit.key)"
class="pointer"
>
<i class="fa fa-trash"></i>
</a>
<a
ng-if="analyticUnit.selected"
ng-click="ctrl.onCancelLabeling(analyticUnit.key)"
class="pointer"
>
<i class="fa fa-ban"></i>
</a>
</label>
<label>
<i ng-if="analyticUnit.status === 'learning'" class="grafana-tip fa fa-leanpub ng-scope" bs-tooltip="'Learning'"></i>
<i ng-if="analyticUnit.status === 'pending'" class="grafana-tip fa fa-list-ul ng-scope" bs-tooltip="'Pending'"></i>
<i ng-if="analyticUnit.status === 'failed'" class="grafana-tip fa fa-exclamation-circle ng-scope" bs-tooltip="'Error: ' + analyticUnit.error"></i>
</label>
</div>
</div>
<div class="editor-row" ng-if="ctrl.analyticsController.creatingNew">
<div class="gf-form">
<label class="gf-form-label width-4"> Name </label>
<input
type="text" class="gf-form-input max-width-15"
ng-model="ctrl.analyticsController.newAnalyticUnit.name"
>
<label class="gf-form-label width-8"> Type </label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input width-12"
ng-model="ctrl.analyticsController.newAnalyticUnit.type"
ng-options="type.value as type.name for type in ctrl.ANALYTIC_TYPES"
/>
</div>
<label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.saveNew()">
<b ng-if="!ctrl.analyticsController.saving"> create </b>
<b ng-if="ctrl.analyticsController.saving" ng-disabled="true"> saving... </b>
</a>
</label>
</div>
</div>
<div class="gf-form-button-row" ng-if="!ctrl.analyticsController.creatingAnalyticUnit">
<button class="btn btn-inverse" ng-click="ctrl.createNew()">
<i class="fa fa-plus"></i>
Add Analytic Unit
</button>
</div>

135
dist/partials/tab_display.html vendored

@ -1,135 +0,0 @@
<div class="edit-tab-with-sidemenu">
<aside class="edit-sidemenu-aside">
<ul class="edit-sidemenu">
<li ng-class="{active: ctrl.subTabIndex === 0}">
<a ng-click="ctrl.subTabIndex = 0">Draw options</a>
</li>
<li ng-class="{active: ctrl.subTabIndex === 1}">
<a ng-click="ctrl.subTabIndex = 1">
Series overrides <span class="muted">({{ctrl.panel.seriesOverrides.length}})</span>
</a>
</li>
<li ng-class="{active: ctrl.subTabIndex === 2}">
<a ng-click="ctrl.subTabIndex = 2">
Thresholds <span class="muted">({{ctrl.panel.thresholds.length}})</span>
</a>
</li>
</ul>
</aside>
<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 0">
<div class="section gf-form-group">
<h5 class="section-heading">Draw Modes</h5>
<gf-form-switch class="gf-form" label="Bars" label-class="width-5" checked="ctrl.panel.bars" on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label="Lines" label-class="width-5" checked="ctrl.panel.lines" on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label="Points" label-class="width-5" checked="ctrl.panel.points" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Mode Options</h5>
<div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Fill</label>
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-show="(ctrl.panel.lines)">
<label class="gf-form-label width-8">Line Width</label>
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div>
</div>
<gf-form-switch ng-show="ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form" ng-show="ctrl.panel.points">
<label class="gf-form-label width-8">Point Radius</label>
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Hover tooltip</h5>
<div class="gf-form">
<label class="gf-form-label width-9">Mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Sort order</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.sort" ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-9">Stacked value</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Stacking & Null value</h5>
<gf-form-switch class="gf-form" label="Stack" label-class="width-7" checked="ctrl.panel.stack" on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form" ng-show="ctrl.panel.stack" label="Percent" label-class="width-7" checked="ctrl.panel.percentage" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-7">Null value</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
</div>
<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 1">
<div class="gf-form-group">
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<div class="gf-form">
<label class="gf-form-label">alias or regex</label>
</div>
<div class="gf-form width-15">
<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="ctrl.render()" data-min-length=0 data-items=100 class="gf-form-input width-15">
</div>
<div class="gf-form" ng-repeat="option in currentOverrides">
<label class="gf-form-label">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
<span ng-show="option.propertyName === 'color'">
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
</span>
<span ng-show="option.propertyName !== 'color'">
{{option.name}}: {{option.value}}
</span>
</label>
</div>
<div class="gf-form">
<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
</span>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
<div class="gf-form">
<label class="gf-form-label">
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
</label>
</div>
</div>
</div>
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
<i class="fa fa-plus"></i>&nbsp;Add override
</button>
</div>
<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 2">
<hastic-graph-threshold-form panel-ctrl="ctrl"></hastic-graph-threshold-form>
</div>
</div>

73
dist/partials/tab_legend.html vendored

@ -1,73 +0,0 @@
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Options</h5>
<gf-form-switch class="gf-form"
label="Show" label-class="width-7"
checked="ctrl.panel.legend.show" on-change="ctrl.refresh()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="As Table" label-class="width-7"
checked="ctrl.panel.legend.alignAsTable" on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="To the right" label-class="width-7"
checked="ctrl.panel.legend.rightSide" on-change="ctrl.render()">
</gf-form-switch>
<div ng-if="ctrl.panel.legend.rightSide" class="gf-form">
<label class="gf-form-label width-7">Width</label>
<input type="number" class="gf-form-input max-width-5" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right" ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Values</h5>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label="Min" label-class="width-4"
checked="ctrl.panel.legend.min" on-change="ctrl.legendValuesOptionChanged()">
</gf-form-switch>
<gf-form-switch class="gf-form max-width-12"
label="Max" label-class="width-6" switch-class="max-width-5"
checked="ctrl.panel.legend.max" on-change="ctrl.legendValuesOptionChanged()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label="Avg" label-class="width-4"
checked="ctrl.panel.legend.avg" on-change="ctrl.legendValuesOptionChanged()">
</gf-form-switch>
<gf-form-switch class="gf-form max-width-12"
label="Current" label-class="width-6" switch-class="max-width-5"
checked="ctrl.panel.legend.current" on-change="ctrl.legendValuesOptionChanged()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label="Total" label-class="width-4"
checked="ctrl.panel.legend.total" on-change="ctrl.legendValuesOptionChanged()">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-6">Decimals</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right" ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Hide series</h5>
<gf-form-switch class="gf-form"
label="With only nulls" label-class="width-10"
checked="ctrl.panel.legend.hideEmpty" on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="With only zeros" label-class="width-10"
checked="ctrl.panel.legend.hideZero" on-change="ctrl.render()">
</gf-form-switch>
</div>
</div>

21
dist/plugin.json vendored

@ -1,21 +0,0 @@
{
"type": "panel",
"name": "Hastic Graph",
"id": "hastic-graph-panel",
"info": {
"author": {
"name": "Hastic.Core Team",
"url": "https://github.com/hastic/hastic-grafana-graph-panel"
},
"logos": {
"small": "img/icn-graph-panel.svg",
"large": "img/icn-graph-panel.svg"
}
},
"dependencies": {
"grafanaVersion": "5.1.x"
}
}
Loading…
Cancel
Save