* support auto scroll in case the panel text overflows the panel view

Vonage · Mar 28, 2018 · e1cadda · e1cadda
1 parent b5acb51
commit e1cadda
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -71,7 +71,9 @@ When upgrading there might be some changes in the data the plugin uses and saves
 To prevent this loss of configuration you should save the panel JSON of all panels you have (by exporting the panel or dashboards) and keep them somewhere safe until you made sure everything is working after the upgrade.
 
 ### Version 1.0.8 - What's new?
-* Adding support for Grafana 5.0.x 
+* Adding support for Grafana 5.0.x:
+	- Added option to auto scroll the alerts in case the text overflows the panel view
+	- Fix header padding when title is absent
 
 # Screenshots
 ### Panel States

diff --git a/dist/README.md b/dist/README.md
@@ -70,14 +70,10 @@ Currently the plugin was tested with **influxDB** and **Graphite**. Support for
 When upgrading there might be some changes in the data the plugin uses and saves, so some of the configurations you made might be removed by accident.
 To prevent this loss of configuration you should save the panel JSON of all panels you have (by exporting the panel or dashboards) and keep them somewhere safe until you made sure everything is working after the upgrade.
 
-### Version 1.0.7 - What's new?
-* Threshold settings - removed `Show Always` option, and replaced it with 2 options:
-	* `Display Alias` - Select when to show the metric alias.
-	* `Display Value` - Select when to show the metric value.
-* Text format configuration (`bold` / `italic`) for `warning` / `critical` / `disabled` states.
-* Option to change the corner radius of the panel. Now you can change the panel's shape to have rounded corners.
-* Fixed decimal precision in case we get number with format like '1e-10'.
-* Bugfix - When creating new metric, The `Handler Type` didn't get default value. 
+### Version 1.0.8 - What's new?
+* Adding support for Grafana 5.0.x:
+	- Added option to auto scroll the alerts in case the text overflows the panel view
+	- Fix header padding when title is absent
 
 # Screenshots
 ### Panel States

diff --git a/dist/css/status_panel.css b/dist/css/status_panel.css
diff --git a/dist/css/status_panel.css.map b/dist/css/status_panel.css.map
diff --git a/dist/editor.html b/dist/editor.html
@@ -110,9 +110,14 @@ <h5 class="section-heading">Threshold Preferences</h5>
 			</span>
 		</div>
 	</div>
-	<!--Color Option-->
+
+	<!--Other Option-->
 	<div class="section gf-form-group">
 		<h5 class="section-heading">Other Options</h5>
+		<gf-form-switch class="gf-form"
+						label-class="width-15"
+						label="Auto scroll alerts on overflow" checked="ctrl.panel.isAutoScrollOnOverflow"
+						on-change="ctrl.onRender()"></gf-form-switch>
 		<gf-form-switch class="gf-form"
 						label-class="width-15"
 						label="Use 'Disable' color if no data" checked="ctrl.panel.isGrayOnNoData"
@@ -194,7 +199,7 @@ <h5 class="section-heading">Display Settings</h5>
 				<input type="text" name="url" ng-model="measurement.url" class="gf-form-input" style="width: 300px" ng-change="ctrl.onRender()" />
 			</div>
 		</div>
-
+ 
 		<div class="section gf-form-group">
 			<h5 class="section-heading">Metric display type</h5>
 

diff --git a/dist/module.html b/dist/module.html
@@ -36,41 +36,42 @@ <h1>
 				</h1>
 			</div>
 
-			<div class="status_alerts_row">
-				<div ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}" ng-repeat="display in ctrl.display">
-					<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ display.alias }}</a>
-					<span ng-hide="display.url">{{ display.alias }}</span>
-					<span ng-show="display.isDisplayValue"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
-				</div>
+			<div ng-class="{'marquee_container': ctrl.isAutoScrollAlerts()}">
+				<div class="status_alerts_row" ng-class="{'marquee_element': ctrl.isAutoScrollAlerts()}">
+					<div ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}" ng-repeat="display in ctrl.display">
+						<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ display.alias }}</a>
+						<span ng-hide="display.url">{{ display.alias }}</span>
+						<span ng-show="display.isDisplayValue"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
+					</div>
 
-				<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}"
-					 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
-					 ng-repeat="crit in ctrl.crit">
-					<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ crit.alias }}</a>
-					<span ng-hide="crit.url">{{ crit.alias }}</span>
-					<span ng-show="crit.isDisplayValue"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
-				</div>
+					<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}"
+						 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
+						 ng-repeat="crit in ctrl.crit">
+						<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ crit.alias }}</a>
+						<span ng-hide="crit.url">{{ crit.alias }}</span>
+						<span ng-show="crit.isDisplayValue"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
+					</div>
 
-				<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}"
-					 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
-					 ng-repeat="warn in ctrl.warn">
-					<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ warn.alias }}</a>
-					<span ng-hide="warn.url">{{ warn.alias }}</span>
-					<span ng-show="warn.isDisplayValue"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
-				</div>
+					<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}"
+						 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
+						 ng-repeat="warn in ctrl.warn">
+						<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ warn.alias }}</a>
+						<span ng-hide="warn.url">{{ warn.alias }}</span>
+						<span ng-show="warn.isDisplayValue"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
+					</div>
 
-				<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}"
-					 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
-					 ng-repeat="disabled in ctrl.disabled">
-					<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ disabled.alias }}</a>
-					<span ng-hide="disabled.url">{{ disabled.alias }}</span>
-				</div>
+					<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}"
+						 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
+						 ng-repeat="disabled in ctrl.disabled">
+						<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ disabled.alias }}</a>
+						<span ng-hide="disabled.url">{{ disabled.alias }}</span>
+					</div>
 
-				<div class="status_extra_alerts" ng-show="ctrl.extraMoreAlerts">{{ ctrl.extraMoreAlerts }}</div>
+					<div class="status_extra_alerts" ng-show="ctrl.extraMoreAlerts">{{ ctrl.extraMoreAlerts }}</div>
+				</div>
 			</div>
 		</div>
 
 		<div class="center_content_hidden_section" ng-if="ctrl.annotation.length !== 0"/>
-
 	</div>
 </div>
diff --git a/dist/plugin.json b/dist/plugin.json
@@ -24,7 +24,7 @@
       {"name": "Critical State", "path": "img/error.png"}
     ],
     "version": "1.0.8",
-    "updated": "2018-3-27"
+    "updated": "2018-3-28"
   },
 
   "dependencies": {

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/css/status_panel.scss b/src/css/status_panel.scss
@@ -1,4 +1,5 @@
 .status-panel {
+	overflow: hidden;
 	position: relative;
 	width: 100%;
 	height: 100%;
@@ -64,11 +65,33 @@
 
 	.st-card-front,
 	.st-card-back {
-	  backface-visibility: hidden;
-	  transition: transform 0.5s;
+		backface-visibility: hidden;
+		transition: transform 0.5s;
 	}
 }
 
+.marquee_container {
+	overflow: hidden;
+
+	.marquee_element {
+		backface-visibility: hidden;
+		transition: transform 0.5s;
+
+		display: inline-block;
+		animation: marquee_container 15s linear infinite;
+	}
+
+	.marquee_element:hover {
+		animation-play-state: paused;
+	}
+}
+
+/* Make it move */
+@keyframes marquee_container {
+	0%   { transform: translate(0, 100%); }
+	100% { transform: translate(0, -100%); }
+}
+
 .st-card-front {
 	.ok-text, .warning-text, .fail-text, .no-data-text, .disabled-text {
 		display: none;

diff --git a/src/editor.html b/src/editor.html
@@ -110,9 +110,14 @@ <h5 class="section-heading">Threshold Preferences</h5>
 			</span>
 		</div>
 	</div>
-	<!--Color Option-->
+
+	<!--Other Option-->
 	<div class="section gf-form-group">
 		<h5 class="section-heading">Other Options</h5>
+		<gf-form-switch class="gf-form"
+						label-class="width-15"
+						label="Auto scroll alerts on overflow" checked="ctrl.panel.isAutoScrollOnOverflow"
+						on-change="ctrl.onRender()"></gf-form-switch>
 		<gf-form-switch class="gf-form"
 						label-class="width-15"
 						label="Use 'Disable' color if no data" checked="ctrl.panel.isGrayOnNoData"

diff --git a/src/module.html b/src/module.html
@@ -36,41 +36,42 @@ <h1>
 				</h1>
 			</div>
 
-			<div class="status_alerts_row">
-				<div ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}" ng-repeat="display in ctrl.display">
-					<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ display.alias }}</a>
-					<span ng-hide="display.url">{{ display.alias }}</span>
-					<span ng-show="display.isDisplayValue"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
-				</div>
+			<div ng-class="{'marquee_container': ctrl.isAutoScrollAlerts()}">
+				<div class="status_alerts_row" ng-class="{'marquee_element': ctrl.isAutoScrollAlerts()}">
+					<div ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}" ng-repeat="display in ctrl.display">
+						<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ display.alias }}</a>
+						<span ng-hide="display.url">{{ display.alias }}</span>
+						<span ng-show="display.isDisplayValue"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
+					</div>
 
-				<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}"
-					 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
-					 ng-repeat="crit in ctrl.crit">
-					<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ crit.alias }}</a>
-					<span ng-hide="crit.url">{{ crit.alias }}</span>
-					<span ng-show="crit.isDisplayValue"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
-				</div>
+					<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}"
+						 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
+						 ng-repeat="crit in ctrl.crit">
+						<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ crit.alias }}</a>
+						<span ng-hide="crit.url">{{ crit.alias }}</span>
+						<span ng-show="crit.isDisplayValue"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
+					</div>
 
-				<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}"
-					 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
-					 ng-repeat="warn in ctrl.warn">
-					<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ warn.alias }}</a>
-					<span ng-hide="warn.url">{{ warn.alias }}</span>
-					<span ng-show="warn.isDisplayValue"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
-				</div>
+					<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}"
+						 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
+						 ng-repeat="warn in ctrl.warn">
+						<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ warn.alias }}</a>
+						<span ng-hide="warn.url">{{ warn.alias }}</span>
+						<span ng-show="warn.isDisplayValue"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
+					</div>
 
-				<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}"
-					 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
-					 ng-repeat="disabled in ctrl.disabled">
-					<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ disabled.alias }}</a>
-					<span ng-hide="disabled.url">{{ disabled.alias }}</span>
-				</div>
+					<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}"
+						 ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
+						 ng-repeat="disabled in ctrl.disabled">
+						<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ disabled.alias }}</a>
+						<span ng-hide="disabled.url">{{ disabled.alias }}</span>
+					</div>
 
-				<div class="status_extra_alerts" ng-show="ctrl.extraMoreAlerts">{{ ctrl.extraMoreAlerts }}</div>
+					<div class="status_extra_alerts" ng-show="ctrl.extraMoreAlerts">{{ ctrl.extraMoreAlerts }}</div>
+				</div>
 			</div>
 		</div>
 
 		<div class="center_content_hidden_section" ng-if="ctrl.annotation.length !== 0"/>
-
 	</div>
 </div>
diff --git a/src/plugin.json b/src/plugin.json
@@ -24,7 +24,7 @@
       {"name": "Critical State", "path": "img/error.png"}
     ],
     "version": "1.0.8",
-    "updated": "2018-3-27"
+    "updated": "2018-3-28"
   },
 
   "dependencies": {