rozetko
6 years ago
8 changed files with 1135 additions and 0 deletions
After Width: | Height: | Size: 21 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,72 @@
|
||||
<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> |
@ -0,0 +1,148 @@
|
||||
<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.onColorChange.bind(ctrl, analyticUnit.id)" |
||||
/> |
||||
</span> |
||||
|
||||
<label class="gf-form-label" ng-style="analyticUnit.status === 'learning' && { 'cursor': 'not-allowed' }"> |
||||
<a class="pointer" tabindex="1" |
||||
ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)" |
||||
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.id)" |
||||
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.id)" |
||||
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.id)" |
||||
class="pointer" |
||||
> |
||||
<i class="fa fa-trash"></i> |
||||
</a> |
||||
|
||||
<a |
||||
ng-if="analyticUnit.selected" |
||||
ng-click="ctrl.onCancelLabeling(analyticUnit.id)" |
||||
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> |
@ -0,0 +1,135 @@
|
||||
<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> 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> |
@ -0,0 +1,73 @@
|
||||
<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> |
@ -0,0 +1,21 @@
|
||||
{ |
||||
"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…
Reference in new issue