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

<div class="gf-form-query" ng-repeat="analyticUnit in ctrl.analyticsController.analyticUnits">
  <div class="gf-form gf-form-query-letter-cell">
    <label class="gf-form-label width-25">
      <a class="pointer" ng-click="ctrl.onToggleCollapsed(analyticUnit.id)">
        <span class="gf-form-query-letter-cell-carret">
          <i class="fa fa-caret-down" ng-hide="analyticUnit.collapsed"></i>
          <i class="fa fa-caret-right" ng-show="analyticUnit.collapsed"></i>
        </span>
        <span class="gf-form-query-letter-cell-letter">{{analyticUnit.name}}</span>
        <em class="gf-form-query-letter-cell-ds" ng-show="analyticUnit.id">({{analyticUnit.id}})</em>
      </a>

      <span style="cursor: default;">
        &nbsp;
        <i ng-if="analyticUnit.status === 'READY'"
          class="fa fa-check-circle"
          bs-tooltip="'Ready'"
        ></i>
        <i ng-if="analyticUnit.status === 'SUCCESS'"
          class="fa fa-check"
          bs-tooltip="'Learning succeeded'"
        ></i>
        <i ng-if="analyticUnit.status === 'LEARNING'"
          class="fa fa-leanpub"
          bs-tooltip="'Learning'"
        ></i>
        <i ng-if="analyticUnit.status === 'DETECTION'"
          class="fa fa-search"
          bs-tooltip="'Detection'"
        ></i>
        <i ng-if="analyticUnit.status === 'PENDING'"
          class="fa fa-list-ul"
          bs-tooltip="'Pending'"
        ></i>
        <i ng-if="analyticUnit.status === 'FAILED'"
          class="fa fa-exclamation-circle"
          bs-tooltip="'Error: ' + analyticUnit.error"
        ></i>
      </span>
    </label>
  </div>

  <div class="gf-form-query-content gf-form-query-content--collapsed" ng-if="analyticUnit.collapsed">
    <div class="gf-form">
      <label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.onToggleCollapsed(analyticUnit.id)">
      </label>
    </div>
  </div>

  <div class="gf-form-query-content" ng-if="!analyticUnit.collapsed">
    <ng-include src="ctrl.partialsPath + '/analytic_unit.html'"></ng-include>
  </div>

  <div class="gf-form">
    <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"
        role="menuitem"
      >
        <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"
        role="menuitem"
      >
        <i class="fa fa-eye-slash"></i>
      </a>
    </label>

    <label class="gf-form-label" bs-tooltip="'Inspect Mode'">
      <a class="pointer" ng-click="ctrl.onToggleInspect(analyticUnit.id)">
        <!--use ctrl.pluginPath-->
        <img src="public/plugins/corpglory-hastic-app/img/inspect_enabled.svg" class="fa fa-fw" ng-if="analyticUnit.inspect"></img>
        <img src="public/plugins/corpglory-hastic-app/img/inspect_disabled.svg" class="fa fa-fw" ng-if="!analyticUnit.inspect"></img>
      </a>
    </label>

    <label class="gf-form-label" bs-tooltip="'Delete'">
      <a class="pointer" ng-click="ctrl.onRemove(analyticUnit.id)" role="menuitem">
        <i class="fa fa-trash"></i>
      </a>
    </label>

    <div class="gf-form-label"
      ng-if="
        (analyticUnit.detectorType === 'pattern' ||
        (analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality)) &&
        !analyticUnit.selected
      "
      bs-tooltip="'Label'"
    >
      <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-bar-chart" ng-if="!analyticUnit.saving"></i>
        <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
        Label
      </a>
    </div>

    <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'"
    />

    <label class="gf-form-label"
      ng-if="analyticUnit.selected && !analyticUnit.saving"
      bs-tooltip="'Cancel labeling'"
    >
      <a class="pointer" ng-click="ctrl.onCancelLabeling(analyticUnit.id)">
        <i class="fa fa-ban"></i>
      </a>
    </label>

    <label class="gf-form-label"
      ng-click="ctrl.runDetectInCurrentRange(analyticUnit)"
      ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving"
      bs-tooltip="'Learn & Detect'"
    >
      <a class="pointer">
        Apply
      </a>
    </label>
  </div>
</div>