|
|
|
<div class="gf-form-button-row" ng-if="ctrl.analyticsController.serverStatus === false">
|
|
|
|
<h5>Hastic server at "{{ctrl.backendURL}}" is not available</h5>
|
|
|
|
<button class="btn btn-inverse" ng-click="ctrl.runBackendConnectivityCheck()">
|
|
|
|
<i class="fa fa-plug"></i>
|
|
|
|
Reconnect to Hastic server
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div ng-if="ctrl.analyticsController.serverStatus === true">
|
|
|
|
<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-5">
|
|
|
|
<i class="fa fa-info" bs-tooltip="'Analytic unit id: ' + analyticUnit.id"></i>
|
|
|
|
Name
|
|
|
|
</label>
|
|
|
|
<input
|
|
|
|
type="text" class="gf-form-input max-width-15"
|
|
|
|
ng-model="analyticUnit.name"
|
|
|
|
ng-change="ctrl.onAnalyticUnitNameChange(analyticUnit)"
|
|
|
|
>
|
|
|
|
|
|
|
|
<label class="gf-form-label width-4"> 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.analyticUnitTypes[analyticUnit.detectorType]"
|
|
|
|
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-8"> Labeled Color </label>
|
|
|
|
<span class="gf-form-label">
|
|
|
|
<color-picker
|
|
|
|
color="analyticUnit.labeledColor"
|
|
|
|
onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, false)"
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<!-- Hack to avoid Grafana's .gf-form-label + .gf-form-label css. Fix for https://github.com/hastic/hastic-grafana-app/issues/192 -->
|
|
|
|
<div></div>
|
|
|
|
|
|
|
|
<label class="gf-form-label width-8"> Deleted Color </label>
|
|
|
|
<span class="gf-form-label">
|
|
|
|
<color-picker
|
|
|
|
color="analyticUnit.deletedColor"
|
|
|
|
onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, true)"
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<label
|
|
|
|
class="gf-form-label"
|
|
|
|
ng-if="analyticUnit.detectorType === 'pattern'"
|
|
|
|
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.labelingMode === 'LABELING' && !analyticUnit.saving"> labeling </b>
|
|
|
|
<b ng-if="analyticUnit.selected && analyticUnit.labelingMode === 'DELETING' && !analyticUnit.saving"> deleting </b>
|
|
|
|
<b ng-if="analyticUnit.selected && analyticUnit.labelingMode === 'UNLABELING' && !analyticUnit.saving"> unlabeling </b>
|
|
|
|
<b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
|
|
|
|
</a>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<select class="gf-form-input width-7"
|
|
|
|
ng-model="ctrl.analyticsController.getThreshold(analyticUnit.id).condition"
|
|
|
|
ng-options="type for type in ctrl.analyticsController.conditions"
|
|
|
|
ng-if="analyticUnit.detectorType === 'threshold'"
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
class="gf-form-input width-5"
|
|
|
|
type="number"
|
|
|
|
ng-model="ctrl.analyticsController.getThreshold(analyticUnit.id).value"
|
|
|
|
ng-if="
|
|
|
|
analyticUnit.detectorType === 'threshold' &&
|
|
|
|
ctrl.analyticsController.getThreshold(analyticUnit.id).condition != 'NO_DATA'
|
|
|
|
"
|
|
|
|
/>
|
|
|
|
<!-- TODO set .saving flag to thresholds, when learning is in progress -->
|
|
|
|
<button
|
|
|
|
class="btn btn-inverse"
|
|
|
|
ng-if="analyticUnit.detectorType === 'threshold'"
|
|
|
|
ng-click="ctrl.analyticsController.sendThresholdParamsToServer(analyticUnit.id)"
|
|
|
|
ng-disabled="analyticUnit.status === 'PENDING' || analyticUnit.status === 'LEARNING'"
|
|
|
|
>
|
|
|
|
Apply
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<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"> Detector Type </label>
|
|
|
|
<div class="gf-form-select-wrapper">
|
|
|
|
<select class="gf-form-input width-12"
|
|
|
|
ng-model="ctrl.analyticsController.newAnalyticUnit.detectorType"
|
|
|
|
ng-options="analyticUnitDetectorType for analyticUnitDetectorType in ctrl.analyticUnitDetectorTypes"
|
|
|
|
ng-change="ctrl.analyticsController.onAnalyticUnitDetectorChange(ctrl.analyticUnitTypes);"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<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.analyticUnitTypes[ctrl.analyticsController.newAnalyticUnit.detectorType]
|
|
|
|
"
|
|
|
|
/>
|
|
|
|
</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>
|
|
|
|
<div class="gf-form-button-row">
|
|
|
|
<button class="gf-form-label width-10 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" >
|
|
|
|
<pre class="gf-form-pre alert alert-info">
|
|
|
|
<b>For usage instructions:</b>
|
|
|
|
Visit our <a href="https://github.com/hastic/hastic-grafana-app/wiki/Analytic-units"><b>Wiki</b></a> page.
|
|
|
|
|
|
|
|
<b>If you encounter any problems:</b>
|
|
|
|
Look for solution or create a new Issue <a href="https://github.com/hastic/hastic-grafana-app/issues"><b>here</b></a>.
|
|
|
|
|
|
|
|
<b>Available labeling patterns examples:</b>
|
|
|
|
1) General: patterns in your data that don't fall under any of provided built-in patterns.
|
|
|
|
|
|
|
|
2) Peaks: a sharp increase to a certain single value, followed by a return to the original value.
|
|
|
|
<img ng-src="{{ctrl.pluginPath}}/img/peaks.jpg">
|
|
|
|
|
|
|
|
3) Troughs: a sharp decrease to a certain single value, followed by a return to the original value.
|
|
|
|
<img ng-src="{{ctrl.pluginPath}}/img/troughs.jpg">
|
|
|
|
|
|
|
|
4) Jumps: increase to a certain value without returning to the original state.
|
|
|
|
<img ng-src="{{ctrl.pluginPath}}/img/jumps.jpg">
|
|
|
|
|
|
|
|
5) Drops: decrease to a certain value without returning to the original state.
|
|
|
|
<img ng-src="{{ctrl.pluginPath}}/img/drops.jpg">
|
|
|
|
|
|
|
|
6) Custom: any custom model created and imported by you.
|
|
|
|
</pre>
|
|
|
|
</div>
|
|
|
|
|