You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
369 lines
14 KiB
369 lines
14 KiB
<div class="gf-form-group"> |
|
<div class="gf-form"> |
|
<label class="gf-form-label">Select Hastic datasource</label> |
|
<select class="gf-form-input width-15" |
|
ng-model="ctrl.panel.hasticDatasource" |
|
ng-options="ds.id as ds.name for ds in ctrl.hasticDatasources" |
|
ng-change="ctrl.onHasticDatasourceChange()" |
|
/> |
|
</div> |
|
</div> |
|
|
|
<div class="gf-form"> |
|
<div class="gf-form-button-row" ng-if="ctrl.analyticsController.serverStatus === false"> |
|
<h5>Hastic server at "{{ctrl.hasticDatasource.url}}" is not available</h5> |
|
<button class="btn btn-inverse" ng-click="ctrl.onHasticDatasourceChange()"> |
|
<i class="fa fa-plug"></i> |
|
Reconnect to Hastic server |
|
</button> |
|
</div> |
|
|
|
<div ng-if="ctrl.analyticsController.serverStatus === true && !ctrl.analyticsController.loading"> |
|
<h5> Analytic Units </h5> |
|
<div ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits"> |
|
<div class="gf-form-inline"> |
|
<div class="gf-form"> |
|
<label class="gf-form-label width-5"> |
|
<i class="fa fa-info" bs-tooltip="'Analytic unit id: ' + analyticUnit.id"></i> |
|
Name |
|
</label> |
|
<input |
|
type="text" class="gf-form-input width-15" |
|
ng-model="analyticUnit.name" |
|
ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)" |
|
> |
|
</div> |
|
|
|
<div class="gf-form"> |
|
<label class="gf-form-label width-5"> Type </label> |
|
<div class="gf-form-select-wrapper"> |
|
<select class="gf-form-input width-9" |
|
ng-model="analyticUnit.type" |
|
ng-options="type.value as type.name for type in ctrl.analyticUnitTypes[analyticUnit.detectorType]" |
|
ng-disabled="true" |
|
/> |
|
</div> |
|
</div> |
|
|
|
<div class="gf-form"> |
|
<label class="gf-form-label width-8"> Positive Color </label> |
|
<span class="gf-form-label"> |
|
<color-picker |
|
color="analyticUnit.labeledColor" |
|
onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, false)" |
|
/> |
|
</span> |
|
</div> |
|
|
|
<div class="gf-form" |
|
ng-if="analyticUnit.detectorType === 'pattern' || analyticUnit.detectorType === 'anomaly'" |
|
> |
|
<label class="gf-form-label width-8"> Negative Color </label> |
|
<span class="gf-form-label"> |
|
<color-picker |
|
color="analyticUnit.deletedColor" |
|
onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, true)" |
|
/> |
|
</span> |
|
</div> |
|
|
|
<div class="gf-form" ng-if="analyticUnit.visible"> |
|
<!-- TODO: Remove hack with "margin-bottom: 0" --> |
|
<gf-form-switch |
|
class="gf-form" |
|
style="margin-bottom: 0" |
|
label="Inspect" |
|
label-class="width-5" |
|
on-change="ctrl.onToggleInspect(analyticUnit.id)" |
|
checked="analyticUnit.inspect" |
|
/> |
|
</div> |
|
|
|
<div |
|
class="gf-form" |
|
ng-if=" |
|
analyticUnit.detectorType === 'pattern' || |
|
(analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality) |
|
" |
|
> |
|
<label |
|
class="gf-form-label pointer" |
|
ng-if="!analyticUnit.selected" |
|
ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }" |
|
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> |
|
Label |
|
</label> |
|
<select class="gf-form-input width-12" |
|
ng-if="analyticUnit.selected && !analyticUnit.saving" |
|
ng-model="ctrl.analyticsController.labelingMode" |
|
ng-options="type.value as type.name for type in analyticUnit.labelingModes" |
|
ng-disabled="analyticUnit.status === 'LEARNING'" |
|
/> |
|
</div> |
|
|
|
<div class="gf-form" ng-if="!analyticUnit.selected"> |
|
<label class="gf-form-label"> |
|
<a |
|
ng-if="analyticUnit.visible" |
|
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" |
|
bs-tooltip="'Show. It`s hidden now.'" |
|
ng-click="ctrl.onToggleVisibility(analyticUnit.id)" |
|
class="pointer" |
|
> |
|
<i class="fa fa-eye-slash"></i> |
|
</a> |
|
</label> |
|
</div> |
|
|
|
<div class="gf-form" ng-if="!analyticUnit.selected"> |
|
<a |
|
class="btn btn-danger" |
|
ng-click="ctrl.onRemove(analyticUnit.id)" |
|
> |
|
<i class="fa fa-trash"></i> |
|
</a> |
|
</div> |
|
|
|
<div class="gf-form" ng-if="analyticUnit.selected"> |
|
<div class="gf-form-label"> |
|
<a |
|
class="pointer" |
|
ng-click="ctrl.onCancelLabeling(analyticUnit.id)" |
|
> |
|
Cancel |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="gf-form"> |
|
<label> |
|
<i ng-if="analyticUnit.status === 'READY'" class="grafana-tip fa fa-check-circle ng-scope" bs-tooltip="'Ready'"></i> |
|
<i ng-if="analyticUnit.status === 'SUCCESS'" class="grafana-tip fa fa-check ng-scope" bs-tooltip="'Learning succeeded'"></i> |
|
<i ng-if="analyticUnit.status === 'LEARNING'" class="grafana-tip fa fa-leanpub ng-scope" bs-tooltip="'Learning'"></i> |
|
<i ng-if="analyticUnit.status === 'DETECTION'" class="grafana-tip fa fa-search ng-scope" bs-tooltip="'Detection'"></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="gf-form-inline"> |
|
<div class="gf-form width-20"/> |
|
<!-- TODO: move analytic-unit-specific fields rendering to class --> |
|
<div class="gf-form" ng-if="analyticUnit.detectorType === 'threshold'"> |
|
<label class="gf-form-label width-5"> Condition </label> |
|
<select class="gf-form-input" |
|
ng-class="{ |
|
'width-5': analyticUnit.condition !== 'NO_DATA', |
|
'width-9': analyticUnit.condition === 'NO_DATA' |
|
}" |
|
ng-model="analyticUnit.condition" |
|
ng-options="type for type in ctrl.analyticsController.conditions" |
|
ng-change="ctrl.onAnalyticUnitChange(analyticUnit)" |
|
/> |
|
<input class="gf-form-input width-4" |
|
ng-if="analyticUnit.condition !== 'NO_DATA'" |
|
type="number" |
|
ng-model="analyticUnit.value" |
|
ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)" |
|
/> |
|
</div> |
|
|
|
<div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly'"> |
|
<label class="gf-form-label width-5"> Alpha </label> |
|
<input class="gf-form-input width-9" |
|
min="0" |
|
max="1" |
|
type="number" |
|
ng-model="analyticUnit.alpha" |
|
ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)" |
|
/> |
|
</div> |
|
|
|
<div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly'"> |
|
<label class="gf-form-label width-6"> Confidence </label> |
|
<input class="gf-form-input width-5" |
|
min="0" |
|
type="number" |
|
ng-model="analyticUnit.confidence" |
|
ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)" |
|
/> |
|
</div> |
|
|
|
<div class="gf-form" ng-if="analyticUnit.detectorType === 'anomaly'"> |
|
<!-- TODO: Remove hack with "margin-bottom: 0" --> |
|
<gf-form-switch |
|
class="gf-form" |
|
style="margin-bottom: 0" |
|
label="Seasonality" |
|
label-class="width-7" |
|
on-change="ctrl.onAnalyticUnitChange(analyticUnit)" |
|
checked="analyticUnit.hasSeasonality" |
|
/> |
|
</div> |
|
|
|
<div |
|
class="gf-form" |
|
ng-if="analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality" |
|
> |
|
<label class="gf-form-label width-9"> Seasonality Period </label> |
|
<input |
|
type="number" class="gf-form-input width-5" |
|
ng-init="seasonalityValue = analyticUnit.seasonalityPeriod.value" |
|
ng-model="seasonalityValue" |
|
ng-blur="ctrl.onSeasonalityChange(analyticUnit.id, seasonalityValue)" |
|
min="0" |
|
> |
|
</div> |
|
|
|
<div class="gf-form" |
|
ng-if=" |
|
analyticUnit.detectorType === 'anomaly' && |
|
analyticUnit.hasSeasonality |
|
" |
|
> |
|
<div class="gf-form-select-wrapper"> |
|
<!-- TODO: move periods from ng-options --> |
|
<select class="gf-form-input width-8" |
|
ng-model="analyticUnit.seasonalityPeriod.unit" |
|
ng-change="ctrl.onSeasonalityChange(analyticUnit.id)" |
|
ng-options="type for type in ['seconds', 'minutes', 'hours', 'days', 'years']" |
|
/> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="gf-form-inline"> |
|
<div class="gf-form width-20"/> |
|
<div class="gf-form"> |
|
<button class="btn btn-secondary" |
|
ng-click="ctrl.onAnalyticUnitSave(analyticUnit)" |
|
ng-disabled="!analyticUnit.changed" |
|
> |
|
<i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i> |
|
<b ng-if="!analyticUnit.saving"> Save </b> |
|
<b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b> |
|
</button> |
|
</div> |
|
|
|
<!-- TODO: Leave one Detect button instead of 2 --> |
|
<div class="gf-form" |
|
ng-if=" |
|
analyticUnit.detectorType === 'pattern' || |
|
(analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality) |
|
" |
|
> |
|
<button class="btn btn-secondary" |
|
ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)" |
|
ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed || !analyticUnit.selected" |
|
> |
|
<b> Detect </b> |
|
</button> |
|
</div> |
|
|
|
<div class="gf-form" |
|
ng-if=" |
|
analyticUnit.detectorType === 'threshold' || |
|
(analyticUnit.detectorType === 'anomaly' && !analyticUnit.hasSeasonality) |
|
" |
|
> |
|
<button class="btn btn-secondary" |
|
ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)" |
|
ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed" |
|
> |
|
<b> Detect </b> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="gf-form-inline" ng-if="ctrl.analyticsController.creatingNew"> |
|
<div class="gf-form"> |
|
<label class="gf-form-label width-5"> Name </label> |
|
<input |
|
type="text" class="gf-form-input width-15" |
|
ng-model="ctrl.analyticsController.newAnalyticUnit.name" |
|
> |
|
</div> |
|
|
|
<div class="gf-form"> |
|
<label class="gf-form-label width-8"> Detector Type </label> |
|
<div class="gf-form-select-wrapper"> |
|
<select class="gf-form-input width-8" |
|
ng-model="ctrl.analyticsController.newAnalyticUnit.detectorType" |
|
ng-options="analyticUnitDetectorType for analyticUnitDetectorType in ctrl.analyticUnitDetectorTypes" |
|
ng-change="ctrl.analyticsController.onAnalyticUnitDetectorChange(ctrl.analyticUnitTypes);" |
|
/> |
|
</div> |
|
</div> |
|
|
|
<div class="gf-form"> |
|
<label class="gf-form-label width-5"> Type </label> |
|
<div class="gf-form-select-wrapper"> |
|
<select class="gf-form-input width-9" |
|
ng-model="ctrl.analyticsController.newAnalyticUnit.type" |
|
ng-options=" |
|
type.value as type.name |
|
for type in ctrl.analyticUnitTypes[ctrl.analyticsController.newAnalyticUnit.detectorType] |
|
" |
|
/> |
|
</div> |
|
</div> |
|
|
|
<div class="gf-form"> |
|
<a class="btn btn-danger" ng-click="ctrl.cancelCreation()"> |
|
<b> Cancel </b> |
|
</a> |
|
</div> |
|
|
|
<div class="gf-form"> |
|
<a class="btn btn-secondary" ng-click="ctrl.saveNew()"> |
|
<b ng-if="!ctrl.analyticsController.saving"> Create </b> |
|
<b ng-if="ctrl.analyticsController.saving" ng-disabled="true"> Saving... </b> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="gf-form-button-row"> |
|
<button |
|
class="btn btn-secondary width-12" |
|
ng-click="ctrl.createNew()" |
|
ng-disabled="ctrl.analyticsController.creatingNew" |
|
> |
|
<i class="fa fa-plus"></i> |
|
Add Analytic Unit |
|
</button> |
|
</div> |
|
<div class="gf-form-button-row" ng-if="ctrl.analyticsController.analyticUnits.length > 0"> |
|
<button class="gf-form-label width-12 pointer" ng-click="ctrl.redetectAll()"> |
|
Re-detect all analytic units |
|
</button> |
|
</div> |
|
<div class="gf-form-button-row"> |
|
<button class="gf-form-label width-12 pointer" ng-click="ctrl.showHelp = !ctrl.showHelp"> |
|
Show Help |
|
<i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i> |
|
<i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="gf-form" ng-show="ctrl.showHelp" ng-bind-html="ctrl.analyticsController.helpSectionText"></div> |
|
</div> |
|
|
|
<div ng-if="ctrl.analyticsController.serverStatus === true && ctrl.analyticsController.loading"> |
|
<i class="fa fa-spinner fa-spin" /> Fetching analytic units... |
|
</div> |
|
</div> |
|
|
|
|