+
+
+
+
+ ${valueStr}
-
- ${op} ${value}
`;
- }
- getFullHandleHtml(handleName, op, value) {
- var innerTemplate = this.getHandleInnerHtml(handleName, op, value);
- return `
${innerTemplate}
`;
}
setupDragging(handleElem, threshold, handleIndex) {
@@ -78,15 +77,18 @@ export class ThresholdControls {
});
}
- cleanUp() {
- if (this.placeholder) {
- this.placeholder.find(".alert-handle-wrapper").remove();
- }
+ initDragging(evt) {
+ var handleIndex = $(evt.currentTarget).data("handleIndex");
+ console.log('alert handle index', handleIndex);
}
- renderHandle(handleIndex, model, defaultHandleTopPos) {
- var handleName = 'T' + (handleIndex+1);
- var handleElem = this.placeholder.find(`.alert-handle-wrapper--${handleName}`);
+ cleanUp() {
+ this.placeholder.find(".alert-handle-wrapper").remove();
+ this.needsCleanup = false;
+ }
+
+ renderHandle(handleIndex, defaultHandleTopPos) {
+ var model = this.thresholds[handleIndex];
var value = model.value;
var valueStr = value;
var handleTopPos = 0;
@@ -100,29 +102,48 @@ export class ThresholdControls {
handleTopPos = Math.min(Math.max(valueCanvasPos.top, 0), this.height) - 6;
}
- if (handleElem.length === 0) {
- handleElem = $(this.getFullHandleHtml(handleName, model.op, valueStr));
- this.placeholder.append(handleElem);
- this.setupDragging(handleElem, model, handleIndex);
- } else {
- handleElem.html(this.getHandleInnerHtml(handleName, model.op, valueStr));
- }
+ var handleElem = $(this.getHandleHtml(handleIndex, model, valueStr));
+ this.placeholder.append(handleElem);
handleElem.toggleClass('alert-handle-wrapper--no-value', valueStr === '');
handleElem.css({top: handleTopPos});
}
+ prepare(elem) {
+ if (this.panelCtrl.editingThresholds) {
+ var thresholdMargin = this.panelCtrl.panel.thresholds.length > 1 ? '220px' : '110px';
+ elem.css('margin-right', thresholdMargin);
+ } else if (this.needsCleanup) {
+ elem.css('margin-right', '0');
+ }
+ }
+
draw(plot) {
+ this.thresholds = this.panelCtrl.panel.thresholds;
this.plot = plot;
this.placeholder = plot.getPlaceholder();
+
+ if (this.needsCleanup) {
+ this.cleanUp();
+ }
+
+ // if no thresholds or not editing alerts skip rendering handles
+ if (this.thresholds.length === 0 || !this.panelCtrl.editingThresholds) {
+ return;
+ }
+
this.height = plot.height();
if (this.thresholds.length > 0) {
- this.renderHandle(0, this.thresholds[0], 10);
+ this.renderHandle(0, 10);
}
if (this.thresholds.length > 1) {
- this.renderHandle(1, this.thresholds[1], this.height-30);
+ this.renderHandle(1, this.height-30);
}
+
+ this.placeholder.off('mousedown', '.alert-handle');
+ this.placeholder.on('mousedown', '.alert-handle', this.initDragging.bind(this));
+ this.needsCleanup = true;
}
}
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index c3179bf8085..7365b64cf78 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -90,12 +90,12 @@ $component-active-bg: $brand-primary !default;
// Panel
// -------------------------
$panel-bg: $dark-2;
-$panel-border: solid 1px $dark-3;
+$panel-border: solid 1px $dark-3;
-$divider-border-color: #555;
+$divider-border-color: #555;
// Graphite Target Editor
-$tight-form-border: #050505;
+$tight-form-border: #050505;
$tight-form-bg: $dark-3;
$tight-form-func-bg: #333;
@@ -152,6 +152,9 @@ $btn-link-color: $gray-3;
$iconContainerBackground: $black;
+$btn-divider-left: $dark-5;
+$btn-divider-right: $dark-1;
+
// Forms
// -------------------------
$input-bg: $dark-4;
@@ -185,7 +188,6 @@ $dropdownLinkColorActive: $white;
$dropdownLinkBackgroundActive: $dark-4;
$dropdownLinkBackgroundHover: $dark-4;
-
// COMPONENT VARIABLES
// --------------------------------------------------
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index aa0f8210e3a..e9531a5b4b1 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -99,7 +99,7 @@ $component-active-bg: $brand-primary !default;
$panel-bg: $gray-7;
$panel-border: solid 1px $gray-6;
-$divider-border-color: $gray-2;
+$divider-border-color: $gray-2;
// Graphite Target Editor
$tight-form-border: $gray-4;
@@ -157,6 +157,9 @@ $btn-inverse-text-color: $dark-4;
$btn-link-color: $gray-1;
+$btn-divider-left: $dark-5;
+$btn-divider-right: $dark-1;
+
$iconContainerBackground: $white;
// Forms
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index c29e77f2523..bb7a66e2015 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -323,25 +323,56 @@
z-index: 10;
position: relative;
float: right;
- padding: 0.4rem 0.6rem 0.4rem 0.4rem;
- background-color: $btn-inverse-bg;
- box-shadow: $search-shadow;
- cursor: row-resize;
+ box-shadow: $card-shadow;
+ background: $card-background;
+ cursor: move;
width: 100px;
font-size: $font-size-sm;
- box-shadow: 4px 4px 3px 0px $body-bg;
border-radius: 4px;
- border-width: 0 1px 1px 0;
- border-style: solid;
- border-color: $black;
text-align: left;
color: $text-muted;
+ &:hover {
+ background-color: $btn-inverse-bg-hl;
+ }
+
.icon-gf {
- font-size: 17px;
+ font-size: 14px;
position: relative;
top: 0px;
float: left;
+ border-right: 1px solid $btn-divider-left;
+ padding: 0.5rem 0.3rem 0.4rem 0.4rem;
+ }
+ }
+
+ .alert-handle-value {
+ border-left: 1px solid $btn-divider-right;
+ padding: 0.5rem;
+ line-height: 2rem;
+ }
+
+ &--T1 {
+ right: -222px;
+ width: 245px;
+
+ .alert-handle-line {
+ width: 145px;
+ }
+ }
+
+ &--T0{
+ right: -105px;
+ width: 128px;
+
+ .alert-handle-line {
+ width: 28px;
+ }
+ }
+
+ &--no-value {
+ .alert-handle-line {
+ display: none;
}
}
@@ -351,31 +382,12 @@
margin-top: 13px;
z-index: 0;
position: relative;
- }
- &--T2 {
- right: -222px;
- width: 238px;
-
- .alert-handle-line {
- width: 138px;
- background-color: $warn;
+ &--crit {
+ background-color: rgba(237, 46, 24, 0.60);
}
- }
-
- &--T1{
- right: -105px;
- width: 123px;
-
- .alert-handle-line {
- width: 23px;
- background-color: $critical;
- }
- }
-
- &--no-value {
- .alert-handle-line {
- display: none;
+ &--warn {
+ background-color: rgba(247, 149, 32, 0.60);
}
}
}