hastic-grafana-app/src/panel/graph_panel/partials/analytic_units_6.x.html

<div class="query-editor-row" ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits">
  <div class="query-editor-row__header">
    <div class="query-editor-row__ref-id width-25" ng-click="ctrl.onToggleCollapsed(analyticUnit.id)">
      <i class="fa fa-fw fa-caret-down" ng-hide="analyticUnit.collapsed"></i>
      <i class="fa fa-fw fa-caret-right" ng-show="analyticUnit.collapsed"></i>
      <span>{{analyticUnit.name}}</span>
      <em class="query-editor-row__context-info">({{analyticUnit.id}})</em>
    </div>
    &nbsp;
    <i ng-if="analyticUnit.status === 'READY'"
      class="fa fa-fw fa-check-circle"
      bs-tooltip="'Ready'"
    ></i>
    <i ng-if="analyticUnit.status === 'SUCCESS'"
      class="fa fa-fw fa-check"
      bs-tooltip="'Learning succeeded'"
    ></i>
    <i ng-if="analyticUnit.status === 'LEARNING'"
      class="fa fa-fw fa-leanpub"
      bs-tooltip="'Learning'"
    ></i>
    <i ng-if="analyticUnit.status === 'DETECTION'"
      class="fa fa-fw fa-search"
      bs-tooltip="'Detection'"
    ></i>
    <i ng-if="analyticUnit.status === 'PENDING'"
      class="fa fa-fw fa-list-ul"
      bs-tooltip="'Pending'"
    ></i>
    <i ng-if="analyticUnit.status === 'FAILED'"
      class="fa fa-fw fa-exclamation-circle"
      bs-tooltip="'Error: ' + analyticUnit.error"
    ></i>

    <div class="query-editor-row__collapsed-text">
    </div>

    <div class="query-editor-row__actions">
      <button
        class="query-editor-row__action"
        ng-click=ctrl.onToggleVisibility(analyticUnit.id)
      >
        <a
          ng-if="analyticUnit.visible"
          bs-tooltip="'Hide. It`s visible now.'"
          class="pointer"
        >
          <i class="fa fa-fw fa-eye"></i>
        </a>
        <a
          ng-if="!analyticUnit.visible"
          bs-tooltip="'Show. It`s hidden now.'"
          class="pointer"
        >
          <i class="fa fa-fw fa-eye-slash"></i>
        </a>
      </button>

      <button class="query-editor-row__action"
        ng-click="ctrl.onToggleInspect(analyticUnit.id)"
        bs-tooltip="'Inspect Mode'"
      >
        <a class="pointer">
          <i class="fa fa-fw fa-crosshairs" ng-if="analyticUnit.inspect"></i>
          <i class="fa fa-fw fa-circle-thin" ng-if="!analyticUnit.inspect"></i>
        </a>
      </button>

      <button class="query-editor-row__action" ng-click="ctrl.onRemove(analyticUnit.id)">
        <a class="pointer">
          <i class="fa fa-fw fa-trash"></i>
        </a>
      </button>

      <button class="query-editor-row__action"
        ng-click="ctrl.onAnalyticUnitSave(analyticUnit)"
        ng-disabled="!analyticUnit.changed"
      >
        <a class="pointer"
          ng-style="!analyticUnit.changed && {
            'color': 'lightgray',
            'cursor': 'not-allowed'
          }"
        >
          <i class="fa fa-fw fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
          <i class="fa fa-fw fa-save" ng-if="!analyticUnit.saving"></i>
        </a>
      </button>

      <button class="query-editor-row__action" ng-if="
        (analyticUnit.detectorType === 'pattern' ||
        (analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality)) &&
        !analyticUnit.selected
      ">
        <a
          class="pointer"
          ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
          ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
          ng-disabled="analyticUnit.status === 'LEARNING'"
        >
          <i class="fa fa-fw fa-bar-chart" ng-if="!analyticUnit.saving"></i>
          <i class="fa fa-fw fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
          Label
        </a>
      </button>

      <select class="gf-form-input width-11"
        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'"
      />

      <button class="query-editor-row__action" ng-if="analyticUnit.selected && !analyticUnit.saving">
        <a class="pointer" ng-click="ctrl.onCancelLabeling(analyticUnit.id)">
          <i class="fa fa-fw fa-ban"></i>
        </a>
      </button>

      <!-- TODO: Leave one Detect button instead of 2 -->
      <button class="query-editor-row__action"
        ng-if="
          analyticUnit.detectorType === 'pattern' ||
          (analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality)
        "
        ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
        ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed || !analyticUnit.selected"
      >
        <a class="pointer">
          Detect
        </a>
      </button>

      <button class="query-editor-row__action"
        ng-if="
          analyticUnit.detectorType === 'threshold' ||
          (analyticUnit.detectorType === 'anomaly' && !analyticUnit.hasSeasonality)
        "
        ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)"
        ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed"
      >
        <a class="pointer">
          Detect
        </a>
      </button>
    </div>
  </div>

  <div
    class="query-editor-row__body gf-form-query"
    ng-class="analyticUnit.collapsed && 'query-editor-row__body--collapsed'"
  >
    <ng-include src="ctrl.partialsPath + '/analytic_unit.html'"></ng-include>
  </div>
</div>