grafana-statusmap/src/partials/options_editor.html

<div ng-show="ctrl.multipleValues">
  <strong>Error</strong>: data has multiple values for one target. Please change target or check "use max value".
</div>

<div ng-show="ctrl.noColorDefined">
  <strong>Error</strong>: data value with undefined color. Check metric values, color values or define new color.
</div>

<div class="editor-row">
  <div class="section gf-form-group">
    <h5 class="section-heading">Colors</h5>
    <div class="gf-form">
      <label class="gf-form-label width-9">Mode</label>
      <div class="gf-form-select-wrapper width-8">
        <select class="input-small gf-form-input" ng-model="ctrl.panel.color.mode" ng-options="s for s in ctrl.colorModes" ng-change="ctrl.render()"></select>
      </div>
    </div>

    <div ng-show="ctrl.panel.color.mode === 'opacity'">
      <div class="gf-form" ng-show="ctrl.panel.useMax">
        <strong>Note:</strong> Bucket color determined by maximum value in bucket<br/>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-9">Color</label>
        <span class="gf-form-label">
          <color-picker color="ctrl.panel.color.cardColor" onChange="ctrl.onCardColorChange"></color-picker>
        </span>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-9">Scale</label>
        <div class="gf-form-select-wrapper width-8">
          <select class="input-small gf-form-input" ng-model="ctrl.panel.color.colorScale" ng-options="s for s in ctrl.opacityScales" ng-change="ctrl.render()"></select>
        </div>
      </div>
      <div class="gf-form" ng-if="ctrl.panel.color.colorScale === 'sqrt'">
        <label class="gf-form-label width-9">Exponent</label>
        <input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.color.exponent" ng-change="ctrl.refresh()" ng-model-onblur>
      </div>
    </div>

    <div ng-show="ctrl.panel.color.mode === 'spectrum'">
      <div class="gf-form" ng-show="ctrl.panel.useMax">
        <strong>Note:</strong> Bucket color determined by maximum value in bucket<br/>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-9">Scheme</label>
        <div class="gf-form-select-wrapper width-8">
          <select class="input-small gf-form-input" ng-model="ctrl.panel.color.colorScheme" ng-options="s.value as s.name for s in ctrl.colorSchemes" ng-change="ctrl.render()"></select>
        </div>
      </div>
    </div>

    <div ng-show="ctrl.panel.color.mode === 'discrete'">
        <div class="gf-form" ng-show="ctrl.panel.useMax">
          <strong>Note:</strong> Multiple values displayed using color with least index<br/>
        </div>

        <div class="gf-form" ng-show="ctrl.panel.color.thresholds.length == 0">
          <label class="gf-form-label width-2">0</label>
          <label class="gf-form-input width-30">No statuses defined. Add new status or use presets below.</label>
        </div>

        <div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.color.thresholds">
          <div class="gf-form">
            <label class="gf-form-label width-2">{{ $index }}</label>
          </div>
          <div class="gf-form">
            <label class="gf-form-label width-9 query-keyword" ng-if="ctrl.panel.useMax">If bucket has value</label>
            <label class="gf-form-label width-9 query-keyword" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
            <input type="text" class="input-small gf-form-input width-4" ng-model="threshold.value" ng-change="ctrl.render()"/>
            <label class="gf-form-label query-keyword">
              fill
            </label>
            <label class="gf-form-label">
              <spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
            </label>
          </div>
          <div class="gf-form">
            <label class="gf-form-label query-keyword">set tooltip</label>
            <input type="text" class="input-small gf-form-input width-9" ng-model="threshold.tooltip" ng-change="ctrl.render()"/>
          </div>
          <div class="gf-form">
            <label class="gf-form-label">
              <i class="fa fa-trash pointer" ng-click="editor.onRemoveThreshold($index)"></i>
            </label>
          </div>
        </div>

        <div class="gf-form-inline">
            <div class="gf-form"></div>
          <div class="gf-form">
            <button class="btn btn-inverse" ng-click="editor.onAddThreshold()">
              <i class="fa fa-plus"></i> Add new status
            </button>
          </div>
          <div class="gf-form">
            <button class="btn btn-inverse" ng-click="editor.onRemoveThresholds()">
                <i class="fa fa-minus"></i> Remove all
            </button>
          </div>
        </div>

        <div class="gf-form-inline" ng-show="ctrl.panel.color.thresholds.length == 0">
          <div class="gf-form"></div>
          <div class="gf-form">
              <label class="gf-form-label">Presets</label>
          </div>
          <div class="gf-form">
            <button class="btn" ng-click="editor.onAddThreeLights()">
              Red-Yellow-Green
            </button>
          </div>
          <div class="gf-form">            
            <button class="btn" ng-click="editor.onAddSolarized()">
              Solarized
            </button>
          </div>
        </div>

    </div>

    <div class="gf-form" ng-show="ctrl.panel.color.mode !== 'discrete'">
      <options-color-legend></options-color-legend>
    </div>
  </div>

  <div class="section gf-form-group" ng-show="ctrl.panel.color.mode !== 'discrete'">
    <h5 class="section-heading">Color scale</h5>
    <div class="gf-form">
      <label class="gf-form-label width-8">Min value</label>
      <input type="number" ng-model="ctrl.panel.color.min" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.refresh()" ng-model-onblur>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">Max value</label>
      <input type="number" ng-model="ctrl.panel.color.max" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.refresh()" ng-model-onblur>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Display</h5>
    <gf-form-switch class="gf-form" label-class="width-8"
      label="Show legend"
      checked="ctrl.panel.legend.show" on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form" label-class="width-8"
      label="Show X axis"
      checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form" label-class="width-8"
      label="Show Y axis"
      checked="ctrl.panel.yAxis.show" on-change="ctrl.render()">
    </gf-form-switch>

    <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
      <label class="gf-form-label width-8">Min width</label>
      <input type="number" ng-model="ctrl.panel.yAxis.minWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
    </div>
    <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
      <label class="gf-form-label width-8">Max width</label>
      <input type="number" ng-model="ctrl.panel.yAxis.maxWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
    </div>
    <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
      <label class="gf-form-label width-8">Rows sort</label>
      <div class="gf-form-select-wrapper">
        <select class="gf-form-input max-width-8"
                ng-model="ctrl.panel.yAxisSort"
                ng-options="f for f in ['metrics', 'a → z', 'z → a']"
                ng-change="ctrl.render()"></select>
      </div>
    </div>

  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Buckets</h5>

    <gf-form-switch class="gf-form" label-class="width-8"
                    label="Multiple values"
                    checked="ctrl.panel.useMax" on-change="ctrl.render()">
    </gf-form-switch>
    <div class="gf-form" ng-show="ctrl.panel.useMax">
      Color for bucket with multiple values is determined by color mode<br/>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">Values index</label>
      <input type="number" class="gf-form-input width-5" placeholder="-1" data-placement="right"
        bs-tooltip="'Display only values with this index in a bucket. Use -1 to display all values'"
        ng-model="ctrl.panel.seriesFilterIndex" ng-change="ctrl.refresh()"
        ng-model-onblur>
    </div>

    <div class="gf-form">
      <label class="gf-form-label width-8">Display nulls</label>
      <div class="gf-form-select-wrapper">
        <select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['as empty', 'as zero']" ng-change="ctrl.render()"></select>
      </div>
    </div>

    <div class="gf-form">
      <label class="gf-form-label width-8">Min width</label>
      <input type="number" class="gf-form-input width-5" placeholder="5" data-placement="right" bs-tooltip="'Minimal card width for 1/1 resolution in pixels'" ng-model="ctrl.panel.cards.cardMinWidth" ng-change="ctrl.refresh()" ng-model-onblur>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">V spacing</label>
      <input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right" bs-tooltip="'Cards vertical spacing in pixels'" ng-model="ctrl.panel.cards.cardVSpacing" ng-change="ctrl.refresh()" ng-model-onblur>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">H spacing</label>
      <input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right" bs-tooltip="'Cards horizontal spacing in pixels'" ng-model="ctrl.panel.cards.cardHSpacing" ng-change="ctrl.refresh()" ng-model-onblur>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">Rounding</label>
      <input type="number" class="gf-form-input width-5" placeholder="0" data-placement="right" bs-tooltip="'Cards rounding radius in pixels'" ng-model="ctrl.panel.cards.cardRound" ng-change="ctrl.refresh()" ng-model-onblur>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Y-axis label</h5>
    <div class="gf-form">
      <gf-form-switch class="gf-form" label="Split query alias" label-class="width-12"
      checked="ctrl.panel.yLabel.usingSplitLabel" on-change="ctrl.refresh()"></gf-form-switch>
    </div>
    <div class="gf-form" ng-if="ctrl.panel.yLabel.usingSplitLabel">
      <label class="gf-form-label width-10">Delimiter
        <info-popover mode="left-normal">
          <p>Label splitter</p>
          <span>
            Set the string to split the original alias to generate partials to be used on the link and custom y-label
          <span>
        </info-popover>
      </label>
      <input type="text" class="gf-form-input width-10" placeholder="." data-placement="top"
        ng-model="ctrl.panel.yLabel.delimiter" ng-change="ctrl.refresh()"
        ng-model-onblur>
    </div>
    <div class="gf-form" ng-if="ctrl.panel.yLabel.usingSplitLabel">
        <label class="gf-form-label width-10">Label template
          <info-popover mode="left-normal">
            <p>
              <span>Override the series label</span>
              <br>
              <span> If blank, it will be used ${__y_label}</span>
            </p>
            <span>
              Use special variables:
              <br>
              <em>${__y_label}</em> original name of the time series (alias or legend in the query editor).
              <br>
              <em>${__y_label_trim}</em> trimmed name of the time series (alias or legend in the query editor).
              <br>
              <em>${__y_label_N}</em> partial name of the time series (alias or legend in the query editor), only valid when custom y-label is enabled.
            </span>
            <span>
              <hr>
              <span>Examples</span>
              <br>
              <span>Series original:<em>"linux01.status.ok"</em></span>
              <br>
              <span>Separator: <em>"."</em></span>
              <br>
              <span>Label override:</span><em>${__y_label_1}-${__y_label_3} | ${__y_label_0}</em>
              <br>
              <span>Result: <em>status-ok | linux01</em></span>
            </span>
          </info-popover>
        </label>
        <input type="text" class="gf-form-input width-10" placeholder="${__y_label}" data-placement="top"
          bs-tooltip="'Leave blank to use original ${__y_label}'" ng-model="ctrl.panel.yLabel.labelTemplate" ng-change="ctrl.refresh()"
          ng-model-onblur>
    </div>
    <br>
    <h5 class="section-heading">Pagination</h5>
    <div class="gf-form">
      <gf-form-switch class="gf-form" label="Enable pagination" label-class="width-12"
      checked="ctrl.panel.usingPagination" on-change="ctrl.render()"></gf-form-switch>
    </div>
    <div class="gf-form" ng-if="ctrl.panel.usingPagination">
      <label class="gf-form-label width-10">Rows per page</label>
      <input type="number" class="gf-form-input width-5" placeholder="2" data-placement="top"
        bs-tooltip="'Number of rows to show by default'" ng-model="ctrl.panel.pageSize" ng-change="ctrl.changeDefaultPaginationSize(ctrl.panel.pageSize)"
        ng-model-onblur>
    </div>
  </div>

</div>