hastic-grafana-app/src/panel/graph_panel/partials/tab_analytics.html

<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>
        &nbsp; 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>

      <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>Adding Analytic Units:</b>
        1) Click on 'Add Analytic Unit' button to add an analytic unit.
        2) Type in desired analytic unit name into provided 'Name' field.
        3) Choose pattern type from the 'Type' dropdown menu. Pattern types explained below.
        4) Click 'create' button.

    <b>Labeling segments:</b>
        1) Click on the chart symbol <img ng-src="{{ctrl.pluginPath}}/img/chartSymbol.png"> to enter labeling mode.
        2) Hold down 'Ctrl' button on your keyboard and hold down left mouse button while dragging to label segments manually. Release LMB to finish labeling the segment.
        3) After all of the needed segments are labeled click on the chart symbol again to exit labeling mode.

        <b>Hastic will now start learning, and after a short while you will see the results on your graph.</b>

    <b>Deleting segments:</b>
        1) Click on the chart symbol to enter labeling mode. (skip this step if you are already in labeling mode)
        2) Press 'D' key twice to switch from <img ng-src="{{ctrl.pluginPath}}/img/labeling.jpg"> to <img ng-src="{{ctrl.pluginPath}}/img/deleting.jpg">.
        3) Hold down 'Ctrl' button on your keyboard and hold down left mouse button while dragging to mark segments for deletion.
        4) After all of the needed segments are deleted click on the chart symbol again to exit labeling mode.

        <b>Hastic will now start learning again, based on updated segments list.</b>

    <b>Available labeling patterns:</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>