add dist

dist/partials/axes_editor.html

@@ -0,0 +1,72 @@
+<div class="editor-row">
+	<div class="section gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes">
+
+		<h5 class="section-heading" ng-show="$index === 0">Left Y</h5>
+		<h5 class="section-heading" ng-show="$index === 1">Right Y</h5>
+
+		<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="yaxis.show" on-change="ctrl.render()"></gf-form-switch>
+
+		<div ng-if="yaxis.show">
+			<div class="gf-form">
+				<label class="gf-form-label width-6">Unit</label>
+				<div 
+					class="gf-form-dropdown-typeahead max-width-20" ng-model="yaxis.format" 
+					dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(yaxis, $subItem)"
+				/>
+			</div>
+
+			<div class="gf-form">
+				<label class="gf-form-label width-6">Scale</label>
+				<div class="gf-form-select-wrapper max-width-20">
+					<select class="gf-form-input" ng-model="yaxis.logBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
+				</div>
+			</div>
+
+			<div class="gf-form-inline">
+				<div class="gf-form">
+					<label class="gf-form-label width-6">Y-Min</label>
+					<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.min" ng-change="ctrl.render()" ng-model-onblur>
+				</div>
+				<div class="gf-form">
+					<label class="gf-form-label width-6">Y-Max</label>
+					<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.max" ng-change="ctrl.render()" ng-model-onblur>
+				</div>
+      </div>
+      <div class="gf-form">
+				<label class="gf-form-label width-6">Decimals</label>
+				<input type="number" class="gf-form-input max-width-20" placeholder="auto" empty-to-null bs-tooltip="'Override automatic decimal precision for y-axis'" data-placement="right" ng-model="yaxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
+
+			<div class="gf-form">
+				<label class="gf-form-label width-6">Label</label>
+				<input type="text" class="gf-form-input max-width-20" ng-model="yaxis.label" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
+		</div>
+	</div>
+
+	<div class="section gf-form-group">
+		<h5 class="section-heading">X-Axis</h5>
+		<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="ctrl.panel.xaxis.show" on-change="ctrl.render()"></gf-form-switch>
+
+		<div class="gf-form">
+			<label class="gf-form-label width-6">Mode</label>
+			<div class="gf-form-select-wrapper max-width-15">
+				<select class="gf-form-input" ng-model="ctrl.panel.xaxis.mode" ng-options="v as k for (k, v) in ctrl.xAxisModes" ng-change="ctrl.xAxisModeChanged()"> </select>
+			</div>
+		</div>
+
+		<!-- Series mode -->
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
+			<label class="gf-form-label width-6">Value</label>
+      <metric-segment-model property="ctrl.panel.xaxis.values[0]" options="ctrl.xAxisStatOptions" on-change="ctrl.xAxisValueChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
+		</div>
+
+		<!-- Histogram mode -->
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
+			<label class="gf-form-label width-6">Buckets</label>
+			<input type="number" class="gf-form-input max-width-8" ng-model="ctrl.panel.xaxis.buckets" placeholder="auto" ng-change="ctrl.render()" ng-model-onblur bs-tooltip="'Number of buckets'" data-placement="right">
+		</div>
+
+	</div>
+
+</div>

dist/partials/tab_analytics.html

@@ -0,0 +1,144 @@
+<h5> Analytics </h5>
+<div class="editor-row">
+  <div class="section gf-form-group">
+    <div class="gf-form">
+      <label class="gf-form-label width-8"> Analytics type </label>
+      <div class="gf-form-select-wrapper">
+        <select class="gf-form-input width-12"
+          ng-model="ctrl.panel.analyticsType"
+          ng-options="source as source for source in ctrl.analyticsTypes"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
+<h5> Anomaly Types </h5>
+<div class="editor-row">
+  <div class="gf-form" ng-repeat="anomalyType in ctrl.anomalyController.anomalyTypes">
+
+    <label class="gf-form-label width-4"> Name </label>
+    <input
+      type="text" class="gf-form-input max-width-15"
+      ng-model="anomalyType.name"
+      ng-disabled="true"
+    >
+
+    <!--
+    <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-6"> Color </label>
+    <span class="gf-form-label">
+      <color-picker
+        color="anomalyType.color"
+        onChange="ctrl.onAnomalyColorChange.bind(ctrl, anomalyType.key)"
+      />
+    </span>
+
+    <label class="gf-form-label">
+      <a class="pointer" tabindex="1" ng-click="ctrl.onToggleAnomalyTypeLabelingMode(anomalyType.key)">
+        <i class="fa fa-bar-chart" ng-if="!anomalyType.saving"></i>
+        <i class="fa fa-spinner fa-spin" ng-if="anomalyType.saving"></i>
+        <b ng-if="anomalyType.selected && !anomalyType.deleteMode && !anomalyType.saving"> labeling </b>
+        <b ng-if="anomalyType.selected && anomalyType.deleteMode && !anomalyType.saving"> deleting </b>
+        <b ng-if="anomalyType.saving" ng-disabled="true"> saving... </b>
+      </a>
+    </label>
+
+
+    <label class="gf-form-label"> Alerts: </label>
+    <label
+      class="gf-form-label text-center"
+      style="width: 4rem"
+      ng-if="anomalyType.alertEnabled === undefined" 
+      bs-tooltip="'Alarting status isn`t available. Wait please.'"
+    >
+      <i class="fa fa-spinner fa-spin"></i>
+    </label>
+
+    <gf-form-switch
+      ng-if="anomalyType.alertEnabled !== undefined"
+      on-change="ctrl.onAnomalyAlertChange(anomalyType)"
+      checked="anomalyType.alertEnabled"
+      style="height: 36px;"
+    />
+
+    <label class="gf-form-label">
+      <a
+        ng-if="anomalyType.visible"
+        ng-disabled="anomalyType.selected"
+        bs-tooltip="'Hide. It`s visible now.'"
+        ng-click="ctrl.onAnomalyToggleVisibility(anomalyType.key)"
+        class="pointer"
+      >
+        <i class="fa fa-eye"></i>
+      </a>
+
+      <a
+        ng-if="!anomalyType.visible"
+        ng-disabled="anomalyType.selected"
+        bs-tooltip="'Show. It`s hidden now.'"
+        ng-click="ctrl.onAnomalyToggleVisibility(anomalyType.key)"
+        class="pointer"
+      >
+        <i class="fa fa-eye-slash"></i>
+      </a>
+    </label>
+
+    <label class="gf-form-label">
+      <a
+        ng-if="!anomalyType.selected"
+        ng-click="ctrl.onAnomalyRemove(anomalyType.key)"
+        class="pointer"
+      >
+        <i class="fa fa-trash"></i>
+      </a>
+
+      <a
+        ng-if="anomalyType.selected"
+        ng-click="ctrl.onAnomalyCancelLabeling(anomalyType.key)"
+        class="pointer"
+      >
+        <i class="fa fa-ban"></i>
+      </a>
+    </label>
+
+    <label>
+      <i ng-if="anomalyType.status === 'learning'" class="grafana-tip fa fa-leanpub ng-scope" bs-tooltip="'Learning'"></i>
+      <i ng-if="anomalyType.status === 'pending'" class="grafana-tip fa fa-list-ul ng-scope" bs-tooltip="'Pending'"></i>
+      <i ng-if="anomalyType.status === 'failed'" class="grafana-tip fa fa-exclamation-circle ng-scope" bs-tooltip="'Failed'"></i>
+    </label>
+
+  </div>
+</div>
+
+<div class="editor-row" ng-if="ctrl.anomalyController.creatingAnomalyType">
+  <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.anomalyController.newAnomalyType.name"
+      ng-change="ctrl.onAnomalyNameChange()"
+    >
+
+    <label class="gf-form-label">
+      <a class="pointer" tabindex="1" ng-click="ctrl.saveAnomalyType()">
+        <b ng-if="!ctrl.anomalyController.savingAnomalyType"> create </b>
+        <b ng-if="ctrl.anomalyController.savingAnomalyType" ng-disabled="true"> saving... </b>
+      </a>
+    </label>
+  </div>
+</div>
+
+<div class="gf-form-button-row" ng-if="!ctrl.anomalyController.creatingAnomalyType">
+  <button class="btn btn-inverse" ng-click="ctrl.createNewAnomalyType()">
+    <i class="fa fa-plus"></i>
+    Add an Anomaly Type
+  </button>
+</div>

dist/partials/tab_display.html

@@ -0,0 +1,135 @@
+<div class="edit-tab-with-sidemenu">
+	<aside class="edit-sidemenu-aside">
+		<ul class="edit-sidemenu">
+			<li ng-class="{active: ctrl.subTabIndex === 0}">
+				<a ng-click="ctrl.subTabIndex = 0">Draw options</a>
+			</li>
+			<li ng-class="{active: ctrl.subTabIndex === 1}">
+				<a ng-click="ctrl.subTabIndex = 1">
+					Series overrides <span class="muted">({{ctrl.panel.seriesOverrides.length}})</span>
+				</a>
+			</li>
+			<li ng-class="{active: ctrl.subTabIndex === 2}">
+				<a ng-click="ctrl.subTabIndex = 2">
+					Thresholds <span class="muted">({{ctrl.panel.thresholds.length}})</span>
+				</a>
+			</li>
+		</ul>
+	</aside>
+
+	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 0">
+		<div class="section gf-form-group">
+			<h5 class="section-heading">Draw Modes</h5>
+			<gf-form-switch class="gf-form" label="Bars" label-class="width-5" checked="ctrl.panel.bars" on-change="ctrl.render()"></gf-form-switch>
+			<gf-form-switch class="gf-form" label="Lines" label-class="width-5" checked="ctrl.panel.lines" on-change="ctrl.render()"></gf-form-switch>
+			<gf-form-switch class="gf-form" label="Points" label-class="width-5" checked="ctrl.panel.points" on-change="ctrl.render()"></gf-form-switch>
+		</div>
+		<div class="section gf-form-group">
+			<h5 class="section-heading">Mode Options</h5>
+			<div class="gf-form" ng-show="ctrl.panel.lines">
+				<label class="gf-form-label width-8">Fill</label>
+				<div class="gf-form-select-wrapper max-width-5">
+					<select class="gf-form-input" ng-model="ctrl.panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
+				</div>
+			</div>
+			<div class="gf-form" ng-show="(ctrl.panel.lines)">
+				<label class="gf-form-label width-8">Line Width</label>
+				<div class="gf-form-select-wrapper max-width-5">
+					<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
+				</div>
+			</div>
+			<gf-form-switch ng-show="ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
+			</gf-form-switch>
+			<div class="gf-form" ng-show="ctrl.panel.points">
+				<label class="gf-form-label width-8">Point Radius</label>
+				<div class="gf-form-select-wrapper max-width-5">
+					<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
+				</div>
+			</div>
+		</div>
+		<div class="section gf-form-group">
+			<h5 class="section-heading">Hover tooltip</h5>
+			<div class="gf-form">
+				<label class="gf-form-label width-9">Mode</label>
+				<div class="gf-form-select-wrapper max-width-8">
+					<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
+				</div>
+			</div>
+			<div class="gf-form">
+				<label class="gf-form-label width-9">Sort order</label>
+				<div class="gf-form-select-wrapper max-width-8">
+					<select class="gf-form-input" ng-model="ctrl.panel.tooltip.sort" ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]" ng-change="ctrl.render()"></select>
+				</div>
+			</div>
+			<div class="gf-form" ng-show="ctrl.panel.stack">
+				<label class="gf-form-label width-9">Stacked value</label>
+				<div class="gf-form-select-wrapper max-width-8">
+					<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
+				</div>
+			</div>
+		</div>
+
+		<div class="section gf-form-group">
+			<h5 class="section-heading">Stacking & Null value</h5>
+			<gf-form-switch class="gf-form" label="Stack" label-class="width-7" checked="ctrl.panel.stack" on-change="ctrl.render()">
+			</gf-form-switch>
+			<gf-form-switch class="gf-form" ng-show="ctrl.panel.stack" label="Percent" label-class="width-7" checked="ctrl.panel.percentage" on-change="ctrl.render()">
+			</gf-form-switch>
+			<div class="gf-form">
+				<label class="gf-form-label width-7">Null value</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 ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 1">
+		<div class="gf-form-group">
+			<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
+			<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
+				<div class="gf-form">
+					<label class="gf-form-label">alias or regex</label>
+				</div>
+				<div class="gf-form width-15">
+					<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="ctrl.render()" data-min-length=0 data-items=100 class="gf-form-input width-15">
+				</div>
+				<div class="gf-form" ng-repeat="option in currentOverrides">
+					<label class="gf-form-label">
+						<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
+						<span ng-show="option.propertyName === 'color'">
+							Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
+						</span>
+						<span ng-show="option.propertyName !== 'color'">
+							{{option.name}}: {{option.value}}
+						</span>
+					</label>
+				</div>
+
+				<div class="gf-form">
+					<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
+					</span>
+				</div>
+
+				<div class="gf-form gf-form--grow">
+					<div class="gf-form-label gf-form-label--grow"></div>
+				</div>
+
+				<div class="gf-form">
+					<label class="gf-form-label">
+						<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
+					</label>
+				</div>
+			</div>
+		</div>
+
+		<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
+			<i class="fa fa-plus"></i>&nbsp;Add override
+		</button>
+	</div>
+
+	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 2">
+		<hastic-graph-threshold-form panel-ctrl="ctrl"></hastic-graph-threshold-form>
+	</div>
+
+</div>

dist/partials/tab_legend.html

@@ -0,0 +1,73 @@
+<div class="editor-row">
+	<div class="section gf-form-group">
+		<h5 class="section-heading">Options</h5>
+		<gf-form-switch class="gf-form"
+			label="Show" label-class="width-7"
+			checked="ctrl.panel.legend.show" on-change="ctrl.refresh()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="As Table" label-class="width-7"
+			checked="ctrl.panel.legend.alignAsTable" on-change="ctrl.render()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="To the right" label-class="width-7"
+			checked="ctrl.panel.legend.rightSide" on-change="ctrl.render()">
+		</gf-form-switch>
+		<div ng-if="ctrl.panel.legend.rightSide" class="gf-form">
+			<label class="gf-form-label width-7">Width</label>
+			<input type="number" class="gf-form-input max-width-5" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right" ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
+		</div>
+	</div>
+
+	<div class="section gf-form-group">
+		<h5 class="section-heading">Values</h5>
+
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form"
+				label="Min" label-class="width-4"
+				checked="ctrl.panel.legend.min" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+
+			<gf-form-switch class="gf-form max-width-12"
+				label="Max" label-class="width-6" switch-class="max-width-5"
+				checked="ctrl.panel.legend.max" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+		</div>
+
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form"
+				label="Avg" label-class="width-4"
+				checked="ctrl.panel.legend.avg" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+
+			<gf-form-switch class="gf-form max-width-12"
+				label="Current" label-class="width-6" switch-class="max-width-5"
+				checked="ctrl.panel.legend.current" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+		</div>
+
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form"
+				label="Total" label-class="width-4"
+				checked="ctrl.panel.legend.total" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+
+			<div class="gf-form">
+				<label class="gf-form-label width-6">Decimals</label>
+				<input type="number" class="gf-form-input width-5" 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>
+			</div>
+		</div>
+	</div>
+
+	<div class="section gf-form-group">
+		<h5 class="section-heading">Hide series</h5>
+		<gf-form-switch class="gf-form"
+			label="With only nulls" label-class="width-10"
+			checked="ctrl.panel.legend.hideEmpty" on-change="ctrl.render()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="With only zeros" label-class="width-10"
+			checked="ctrl.panel.legend.hideZero" on-change="ctrl.render()">
+		</gf-form-switch>
+	</div>
+</div>

dist/plugin.json

@@ -0,0 +1,21 @@
+{
+  "type": "panel",
+  "name": "Hastic Graph",
+  "id": "hastic-graph-panel",
+
+  "info": {
+    "author": {
+      "name": "Hastic.Core Team",
+      "url": "https://github.com/hastic/hastic-grafana-graph-panel"
+    },
+    "logos": {
+      "small": "img/icn-graph-panel.svg",
+      "large": "img/icn-graph-panel.svg"
+    }
+  },
+
+  "dependencies": {
+    "grafanaVersion": "5.1.x"
+  }
+}
+