Merge pull request Vonage#82 from PeteBa/fix-depreciated-imports

Align with Grafana 4.6.0 plug-in changes
PeteBa · Nov 6, 2017 · 08f4765 · 08f4765
2 parents 4ecb061 + cb4b245
commit 08f4765
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 46 deletions.
diff --git a/dist/editor.html b/dist/editor.html
@@ -1,4 +1,4 @@
-<div>
+<div>
 	<strong>Note:</strong> Every metric has to have a unique <strong>Alias</strong> to be used<br/><br/>
 </div>
 
@@ -70,16 +70,16 @@ <h5 class="section-heading">Threshold Colors</h5>
 		<div class="gf-form">
 			<label class="gf-form-label width-8">Colors</label>
 			<span class="gf-form-label">
-				<spectrum-picker ng-model="ctrl.panel.colors.crit" bs-tooltip="'Critical'" ng-change="ctrl.onRender()"></spectrum-picker>
+				<color-picker color="ctrl.panel.colors.crit" bs-tooltip="'Critical'" onChange="ctrl.onColorChange('crit')"></color-picker>
 			</span>
 			<span class="gf-form-label">
-				<spectrum-picker ng-model="ctrl.panel.colors.warn" bs-tooltip="'Warning'" ng-change="ctrl.onRender()"></spectrum-picker>
+				<color-picker color="ctrl.panel.colors.warn" bs-tooltip="'Warning'" onChange="ctrl.onColorChange('warn')"></color-picker>
 			</span>
 			<span class="gf-form-label">
-				<spectrum-picker ng-model="ctrl.panel.colors.ok" bs-tooltip="'OK'" ng-change="ctrl.onRender()"></spectrum-picker>
+				<color-picker color="ctrl.panel.colors.ok" bs-tooltip="'OK'" onChange="ctrl.onColorChange('ok')"></color-picker>
 			</span>
 			<span class="gf-form-label">
-				<spectrum-picker ng-model="ctrl.panel.colors.disable" bs-tooltip="'Disabled'" ng-change="ctrl.onRender()"></spectrum-picker>
+				<color-picker color="ctrl.panel.colors.disable" bs-tooltip="'Disabled'" onChange="ctrl.onColorChange('disable')"></color-picker>
 			</span>
 		</div>
 	</div>

diff --git a/dist/module.js.map b/dist/module.js.map
diff --git a/dist/status_ctrl.js b/dist/status_ctrl.js
diff --git a/dist/status_ctrl.js.map b/dist/status_ctrl.js.map
diff --git a/src/editor.html b/src/editor.html
@@ -1,4 +1,4 @@
-<div>
+<div>
 	<strong>Note:</strong> Every metric has to have a unique <strong>Alias</strong> to be used<br/><br/>
 </div>
 
@@ -70,16 +70,16 @@ <h5 class="section-heading">Threshold Colors</h5>
 		<div class="gf-form">
 			<label class="gf-form-label width-8">Colors</label>
 			<span class="gf-form-label">
-				<spectrum-picker ng-model="ctrl.panel.colors.crit" bs-tooltip="'Critical'" ng-change="ctrl.onRender()"></spectrum-picker>
+				<color-picker color="ctrl.panel.colors.crit" bs-tooltip="'Critical'" onChange="ctrl.onColorChange('crit')"></color-picker>
 			</span>
 			<span class="gf-form-label">
-				<spectrum-picker ng-model="ctrl.panel.colors.warn" bs-tooltip="'Warning'" ng-change="ctrl.onRender()"></spectrum-picker>
+				<color-picker color="ctrl.panel.colors.warn" bs-tooltip="'Warning'" onChange="ctrl.onColorChange('warn')"></color-picker>
 			</span>
 			<span class="gf-form-label">
-				<spectrum-picker ng-model="ctrl.panel.colors.ok" bs-tooltip="'OK'" ng-change="ctrl.onRender()"></spectrum-picker>
+				<color-picker color="ctrl.panel.colors.ok" bs-tooltip="'OK'" onChange="ctrl.onColorChange('ok')"></color-picker>
 			</span>
 			<span class="gf-form-label">
-				<spectrum-picker ng-model="ctrl.panel.colors.disable" bs-tooltip="'Disabled'" ng-change="ctrl.onRender()"></spectrum-picker>
+				<color-picker color="ctrl.panel.colors.disable" bs-tooltip="'Disabled'" onChange="ctrl.onColorChange('disable')"></color-picker>
 			</span>
 		</div>
 	</div>

diff --git a/src/status_ctrl.js b/src/status_ctrl.js
@@ -1,6 +1,4 @@
-import {MetricsPanelCtrl} from "app/plugins/sdk";
-import "app/plugins/panel/graph/legend";
-import "app/plugins/panel/graph/series_overrides_ctrl";
+import {MetricsPanelCtrl} from "app/plugins/sdk";
 import _ from "lodash";
 import TimeSeries from "app/core/time_series2";
 import coreModule from "app/core/core_module";
@@ -58,6 +56,8 @@ export class StatusPluginCtrl extends MetricsPanelCtrl {
 		this.events.on('data-snapshot-load', this.onDataReceived.bind(this));
 		this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
 
+		this.onColorChange = this.onColorChange.bind(this);
+
 		this.addFilters()
 	}
 
@@ -136,12 +136,12 @@ export class StatusPluginCtrl extends MetricsPanelCtrl {
 	}
 
 	onInitEditMode() {
-        this.addEditorTab('Options', 'public/plugins/vonage-status-panel/editor.html', 2);
+		this.addEditorTab('Options', 'public/plugins/vonage-status-panel/editor.html', 2);
 		// Load in the supported units-of-measure formats so they can be displayed in the editor
 		this.unitFormats = kbn.getUnitFormats();
 	}
 
-    setUnitFormat(measurement, subItem) {
+	setUnitFormat(measurement, subItem) {
 		measurement.units = subItem.value;
 		this.render();
 	}
@@ -176,6 +176,13 @@ export class StatusPluginCtrl extends MetricsPanelCtrl {
 		this.onRender();
 	}
 
+	onColorChange(item) {
+		return (color) => {
+			this.panel.colors[item] = color;
+			this.render();
+		};
+	}
+
 	onRender() {
 		this.setElementHeight();
 		this.setTextMaxWidth();
@@ -402,7 +409,6 @@ export class StatusPluginCtrl extends MetricsPanelCtrl {
 	}
 
 	updatePanelState() {
-
 		if(this.duplicates) {
 			this.panelState = 'error-state';
 		} else if (this.disabled.length > 0) {