hastic
/
hastic-grafana-app
5
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Improve ui

master
rozetko 6 years ago
parent
58dd7605ce
commit
8ca1b87da2
1 changed files with 204 additions and 199 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 403
      src/panel/graph_panel/partials/tab_analytics.html

403
src/panel/graph_panel/partials/tab_analytics.html
Unescape View File

@ -1,219 +1,224 @@
<div class="gf-form"> <div class="gf-form-group">
<label class="gf-form-label">Select Hastic datasource</label> <div class="gf-form">
<select class="gf-form-input max-width-15" <label class="gf-form-label">Select Hastic datasource</label>
ng-model="ctrl.panel.hasticDatasource" <select class="gf-form-input max-width-15"
ng-options="ds.id as ds.name for ds in ctrl.hasticDatasources" ng-model="ctrl.panel.hasticDatasource"
ng-change="ctrl.onHasticDatasourceChange()" ng-options="ds.id as ds.name for ds in ctrl.hasticDatasources"
/> ng-change="ctrl.onHasticDatasourceChange()"
</div> />
</div>
<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>
<div ng-if="ctrl.analyticsController.serverStatus === true"> <div class="gf-form">
<h5> Analytic Units </h5> <div class="gf-form-button-row" ng-if="ctrl.analyticsController.serverStatus === false">
<div class="editor-row"> <h5>Hastic server at "{{ctrl.backendURL}}" is not available</h5>
<div class="gf-form" ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits"> <button class="btn btn-inverse" ng-click="ctrl.runBackendConnectivityCheck()">
<i class="fa fa-plug"></i>
<label class="gf-form-label width-5"> Reconnect to Hastic server
<i class="fa fa-info" bs-tooltip="'Analytic unit id: ' + analyticUnit.id"></i> </button>
&nbsp; Name </div>
</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-10"
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"> Positive 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 ng-if="analyticUnit.detectorType === 'pattern'"></div>
<label ng-if="analyticUnit.detectorType === 'pattern'" class="gf-form-label width-8"> Negative Color </label>
<span ng-if="analyticUnit.detectorType === 'pattern'" 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.saving" ng-disabled="true"> saving... </b>
</a>
</label>
<select class="gf-form-input width-10"
ng-model="ctrl.analyticsController.labelingMode"
ng-options="type.value as type.name for type in [
{ name:'Label Positive', value: 'LABELING' },
{ name:'Label Negative', value: 'DELETING' },
{ name:'Unlabel', value: 'UNLABELING' }
]"
ng-if="analyticUnit.selected && !analyticUnit.saving"
ng-disabled="analyticUnit.status === 'LEARNING'"
/>
<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" ng-hide="analyticUnit.selected"> <div ng-if="ctrl.analyticsController.serverStatus === true">
<a <h5> Analytic Units </h5>
ng-if="analyticUnit.visible" <div class="editor-row">
bs-tooltip="'Hide. It`s visible now.'" <div class="gf-form" ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits">
ng-click="ctrl.onToggleVisibility(analyticUnit.id)"
class="pointer" <label class="gf-form-label width-5">
> <i class="fa fa-info" bs-tooltip="'Analytic unit id: ' + analyticUnit.id"></i>
<i class="fa fa-eye"></i> &nbsp; Name
</a> </label>
<input
<a type="text" class="gf-form-input max-width-15"
ng-if="!analyticUnit.visible" ng-model="analyticUnit.name"
bs-tooltip="'Show. It`s hidden now.'" ng-change="ctrl.onAnalyticUnitNameChange(analyticUnit)"
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 <label class="gf-form-label width-4"> Type </label>
ng-if="analyticUnit.selected" <div class="gf-form-select-wrapper">
ng-click="ctrl.onCancelLabeling(analyticUnit.id)" <select class="gf-form-input width-10"
class="pointer" 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"> Positive 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 ng-if="analyticUnit.detectorType === 'pattern'"></div>
<label ng-if="analyticUnit.detectorType === 'pattern'" class="gf-form-label width-8"> Negative Color </label>
<span ng-if="analyticUnit.detectorType === 'pattern'" 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' }"
> >
<i class="fa fa-ban"></i> <a class="pointer" tabindex="1"
</a> ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
</label> ng-disabled="analyticUnit.status === 'LEARNING'"
>
<label> <i class="fa fa-bar-chart" ng-if="!analyticUnit.saving"></i>
<i ng-if="analyticUnit.status === 'LEARNING'" class="grafana-tip fa fa-leanpub ng-scope" bs-tooltip="'Learning'"></i> <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
<i ng-if="analyticUnit.status === 'PENDING'" class="grafana-tip fa fa-list-ul ng-scope" bs-tooltip="'Pending'"></i> <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
<i ng-if="analyticUnit.status === 'FAILED'" class="grafana-tip fa fa-exclamation-circle ng-scope" bs-tooltip="'Error: ' + analyticUnit.error"></i> </a>
</label> </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-10" <select class="gf-form-input width-10"
ng-model="ctrl.analyticsController.newAnalyticUnit.detectorType" ng-model="ctrl.analyticsController.labelingMode"
ng-options="analyticUnitDetectorType for analyticUnitDetectorType in ctrl.analyticUnitDetectorTypes" ng-options="type.value as type.name for type in [
ng-change="ctrl.analyticsController.onAnalyticUnitDetectorChange(ctrl.analyticUnitTypes);" { name:'Label Positive', value: 'LABELING' },
{ name:'Label Negative', value: 'DELETING' },
{ name:'Unlabel', value: 'UNLABELING' }
]"
ng-if="analyticUnit.selected && !analyticUnit.saving"
ng-disabled="analyticUnit.status === 'LEARNING'"
/> />
</div>
<label class="gf-form-label width-8"> Type </label> <select class="gf-form-input width-7"
<div class="gf-form-select-wrapper"> ng-model="ctrl.analyticsController.getThreshold(analyticUnit.id).condition"
<select class="gf-form-input width-10" ng-options="type for type in ctrl.analyticsController.conditions"
ng-model="ctrl.analyticsController.newAnalyticUnit.type" ng-if="analyticUnit.detectorType === 'threshold'"
ng-options=" />
type.value as type.name <input
for type in ctrl.analyticUnitTypes[ctrl.analyticsController.newAnalyticUnit.detectorType] 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" ng-hide="analyticUnit.selected">
<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>
<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>
<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"> <label class="gf-form-label width-8"> Detector Type </label>
<a class="pointer" tabindex="1" ng-click="ctrl.saveNew()"> <div class="gf-form-select-wrapper">
<b ng-if="!ctrl.analyticsController.saving"> create </b> <select class="gf-form-input width-10"
<b ng-if="ctrl.analyticsController.saving" ng-disabled="true"> saving... </b> ng-model="ctrl.analyticsController.newAnalyticUnit.detectorType"
</a> ng-options="analyticUnitDetectorType for analyticUnitDetectorType in ctrl.analyticUnitDetectorTypes"
</label> 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-10"
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>
</div>
<div class="gf-form-button-row" ng-if="!ctrl.analyticsController.creatingAnalyticUnit"> <div class="gf-form-button-row" ng-if="!ctrl.analyticsController.creatingAnalyticUnit">
<button class="btn btn-inverse" ng-click="ctrl.createNew()"> <button class="btn btn-inverse" ng-click="ctrl.createNew()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Add Analytic Unit Add Analytic Unit
</button> </button>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="gf-form-label width-10 pointer" ng-click="ctrl.showHelp = !ctrl.showHelp"> <button class="gf-form-label width-10 pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help Show Help
<i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i> <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i> <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
</button> </button>
</div>
</div> </div>
</div>
<div class="gf-form" ng-show="ctrl.showHelp" ng-bind-html="ctrl.analyticsController.helpSectionText"></div> <div class="gf-form" ng-show="ctrl.showHelp" ng-bind-html="ctrl.analyticsController.helpSectionText"></div>

Write Preview
Loading…
Cancel
Save