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

<div class="gf-form-inline">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-8">
      Name
    </label>
    <input
      type="text" class="gf-form-input width-16"
      ng-model="analyticUnit.name"
      ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
    >
  </div>
  <div class="gf-form gf-form--grow">
    <div class="gf-form-label gf-form-label--grow"></div>
  </div>
</div>

<div class="gf-form-inline">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-8"> Type </label>
    <div class="gf-form-select-wrapper">
      <select class="gf-form-input width-9"
        ng-model="analyticUnit.type"
        ng-options="type.value as type.name for type in ctrl.analyticUnitTypes[analyticUnit.detectorType]"
        ng-disabled="true"
      />
    </div>
  </div>
  <div class="gf-form gf-form--grow">
    <div class="gf-form-label gf-form-label--grow"></div>
  </div>
</div>

<div class="gf-form-inline">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-8"> Positive Color </label>
    <label class="gf-form-label">
      <color-picker
        color="analyticUnit.labeledColor"
        onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, false)"
      />
    </label>
  </div>

  <div class="gf-form"
    ng-if="analyticUnit.detectorType === 'pattern' || analyticUnit.detectorType === 'anomaly'"
  >
    <label class="gf-form-label query-keyword"> Negative Color </label>
    <label class="gf-form-label">
      <color-picker
        color="analyticUnit.deletedColor"
        onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, true)"
      />
    </label>
  </div>
  <div class="gf-form gf-form--grow">
    <div class="gf-form-label gf-form-label--grow"></div>
  </div>
</div>

<div class="gf-form-inline" ng-if="analyticUnit.detectorType === 'threshold'">
  <!-- TODO: move analytic-unit-specific fields rendering to class -->
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-8"> Condition </label>
    <select class="gf-form-input"
      ng-class="{
        'width-5': analyticUnit.condition !== 'NO_DATA',
        'width-9': analyticUnit.condition === 'NO_DATA'
      }"
      ng-model="analyticUnit.condition"
      ng-options="type for type in ctrl.analyticsController.conditions"
      ng-change="ctrl.onAnalyticUnitChange(analyticUnit)"
    />
    <input class="gf-form-input width-4"
      ng-if="analyticUnit.condition !== 'NO_DATA'"
      type="number"
      ng-model="analyticUnit.value"
      ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
    />
  </div>
  <div class="gf-form gf-form--grow">
    <div class="gf-form-label gf-form-label--grow"></div>
  </div>
</div>

<div class="gf-form-inline" ng-if="analyticUnit.detectorType === 'anomaly'">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-8"> Alpha </label>
    <input class="gf-form-input width-9"
      min="0"
      max="1"
      type="number"
      ng-model="analyticUnit.alpha"
      ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
    />
  </div>

  <div class="gf-form">
    <label class="gf-form-label query-keyword width-6"> Confidence </label>
    <input class="gf-form-input width-5"
      min="0"
      type="number"
      ng-model="analyticUnit.confidence"
      ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
    />
  </div>

  <div class="gf-form gf-form--grow">
    <div class="gf-form-label gf-form-label--grow"></div>
  </div>
</div>

<div class="gf-form-inline" ng-if="analyticUnit.detectorType === 'anomaly'">
  <div class="gf-form">
    <gf-form-switch
      class="gf-form"
      label="Seasonality"
      label-class="query-keyword width-8"
      on-change="ctrl.onAnalyticUnitChange(analyticUnit)"
      checked="analyticUnit.hasSeasonality"
    />
  </div>

  <div class="gf-form" ng-if="analyticUnit.hasSeasonality">
    <label class="gf-form-label query-keyword width-9"> Seasonality Period </label>
    <input
      type="number" class="gf-form-input width-5"
      ng-init="seasonalityValue = analyticUnit.seasonalityPeriod.value"
      ng-model="seasonalityValue"
      ng-blur="ctrl.onSeasonalityChange(analyticUnit.id, seasonalityValue)"
      min="0"
    >
  </div>

  <div class="gf-form" ng-if="analyticUnit.hasSeasonality">
    <div class="gf-form-select-wrapper">
      <!-- TODO: move periods from ng-options -->
      <select class="gf-form-input width-8"
        ng-model="analyticUnit.seasonalityPeriod.unit"
        ng-change="ctrl.onSeasonalityChange(analyticUnit.id)"
        ng-options="type for type in ['seconds', 'minutes', 'hours', 'days', 'years']"
      />
    </div>
  </div>

  <div class="gf-form gf-form--grow">
    <div class="gf-form-label gf-form-label--grow"></div>
  </div>
</div>