Skip to content

Commit e1cadda

Browse files
YehonatanVonageYehonatanVonage
committed
* support auto scroll in case the panel text overflows the panel view
1 parent b5acb51 commit e1cadda

14 files changed

+151
-78
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,9 @@ When upgrading there might be some changes in the data the plugin uses and saves
7171
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.
7272

7373
### Version 1.0.8 - What's new?
74-
* Adding support for Grafana 5.0.x
74+
* Adding support for Grafana 5.0.x:
75+
- Added option to auto scroll the alerts in case the text overflows the panel view
76+
- Fix header padding when title is absent
7577

7678
# Screenshots
7779
### Panel States

‎dist/README.md

+4-8
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,10 @@ Currently the plugin was tested with **influxDB** and **Graphite**. Support for
7070
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.
7171
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.
7272

73-
### Version 1.0.7 - What's new?
74-
* Threshold settings - removed `Show Always` option, and replaced it with 2 options:
75-
* `Display Alias` - Select when to show the metric alias.
76-
* `Display Value` - Select when to show the metric value.
77-
* Text format configuration (`bold` / `italic`) for `warning` / `critical` / `disabled` states.
78-
* Option to change the corner radius of the panel. Now you can change the panel's shape to have rounded corners.
79-
* Fixed decimal precision in case we get number with format like '1e-10'.
80-
* Bugfix - When creating new metric, The `Handler Type` didn't get default value.
73+
### Version 1.0.8 - What's new?
74+
* Adding support for Grafana 5.0.x:
75+
- Added option to auto scroll the alerts in case the text overflows the panel view
76+
- Fix header padding when title is absent
8177

8278
# Screenshots
8379
### Panel States

‎dist/css/status_panel.css

+17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/status_panel.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/editor.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,14 @@ <h5 class="section-heading">Threshold Preferences</h5>
110110
</span>
111111
</div>
112112
</div>
113-
<!--Color Option-->
113+
114+
<!--Other Option-->
114115
<div class="section gf-form-group">
115116
<h5 class="section-heading">Other Options</h5>
117+
<gf-form-switch class="gf-form"
118+
label-class="width-15"
119+
label="Auto scroll alerts on overflow" checked="ctrl.panel.isAutoScrollOnOverflow"
120+
on-change="ctrl.onRender()"></gf-form-switch>
116121
<gf-form-switch class="gf-form"
117122
label-class="width-15"
118123
label="Use 'Disable' color if no data" checked="ctrl.panel.isGrayOnNoData"
@@ -194,7 +199,7 @@ <h5 class="section-heading">Display Settings</h5>
194199
<input type="text" name="url" ng-model="measurement.url" class="gf-form-input" style="width: 300px" ng-change="ctrl.onRender()" />
195200
</div>
196201
</div>
197-
202+
198203
<div class="section gf-form-group">
199204
<h5 class="section-heading">Metric display type</h5>
200205

‎dist/module.html

+29-28
Original file line numberDiff line numberDiff line change
@@ -36,41 +36,42 @@ <h1>
3636
</h1>
3737
</div>
3838

39-
<div class="status_alerts_row">
40-
<div ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}" ng-repeat="display in ctrl.display">
41-
<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ display.alias }}</a>
42-
<span ng-hide="display.url">{{ display.alias }}</span>
43-
<span ng-show="display.isDisplayValue"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
44-
</div>
39+
<div ng-class="{'marquee_container': ctrl.isAutoScrollAlerts()}">
40+
<div class="status_alerts_row" ng-class="{'marquee_element': ctrl.isAutoScrollAlerts()}">
41+
<div ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}" ng-repeat="display in ctrl.display">
42+
<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ display.alias }}</a>
43+
<span ng-hide="display.url">{{ display.alias }}</span>
44+
<span ng-show="display.isDisplayValue"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
45+
</div>
4546

46-
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}"
47-
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
48-
ng-repeat="crit in ctrl.crit">
49-
<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ crit.alias }}</a>
50-
<span ng-hide="crit.url">{{ crit.alias }}</span>
51-
<span ng-show="crit.isDisplayValue"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
52-
</div>
47+
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}"
48+
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
49+
ng-repeat="crit in ctrl.crit">
50+
<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ crit.alias }}</a>
51+
<span ng-hide="crit.url">{{ crit.alias }}</span>
52+
<span ng-show="crit.isDisplayValue"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
53+
</div>
5354

54-
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}"
55-
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
56-
ng-repeat="warn in ctrl.warn">
57-
<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ warn.alias }}</a>
58-
<span ng-hide="warn.url">{{ warn.alias }}</span>
59-
<span ng-show="warn.isDisplayValue"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
60-
</div>
55+
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}"
56+
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
57+
ng-repeat="warn in ctrl.warn">
58+
<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ warn.alias }}</a>
59+
<span ng-hide="warn.url">{{ warn.alias }}</span>
60+
<span ng-show="warn.isDisplayValue"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
61+
</div>
6162

62-
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}"
63-
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
64-
ng-repeat="disabled in ctrl.disabled">
65-
<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ disabled.alias }}</a>
66-
<span ng-hide="disabled.url">{{ disabled.alias }}</span>
67-
</div>
63+
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}"
64+
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
65+
ng-repeat="disabled in ctrl.disabled">
66+
<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ disabled.alias }}</a>
67+
<span ng-hide="disabled.url">{{ disabled.alias }}</span>
68+
</div>
6869

69-
<div class="status_extra_alerts" ng-show="ctrl.extraMoreAlerts">{{ ctrl.extraMoreAlerts }}</div>
70+
<div class="status_extra_alerts" ng-show="ctrl.extraMoreAlerts">{{ ctrl.extraMoreAlerts }}</div>
71+
</div>
7072
</div>
7173
</div>
7274

7375
<div class="center_content_hidden_section" ng-if="ctrl.annotation.length !== 0"/>
74-
7576
</div>
7677
</div>

‎dist/plugin.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
{"name": "Critical State", "path": "img/error.png"}
2525
],
2626
"version": "1.0.8",
27-
"updated": "2018-3-27"
27+
"updated": "2018-3-28"
2828
},
2929

3030
"dependencies": {

‎dist/status_ctrl.js

+13-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/status_ctrl.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/status_panel.scss

+25-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.status-panel {
2+
overflow: hidden;
23
position: relative;
34
width: 100%;
45
height: 100%;
@@ -64,11 +65,33 @@
6465

6566
.st-card-front,
6667
.st-card-back {
67-
backface-visibility: hidden;
68-
transition: transform 0.5s;
68+
backface-visibility: hidden;
69+
transition: transform 0.5s;
6970
}
7071
}
7172

73+
.marquee_container {
74+
overflow: hidden;
75+
76+
.marquee_element {
77+
backface-visibility: hidden;
78+
transition: transform 0.5s;
79+
80+
display: inline-block;
81+
animation: marquee_container 15s linear infinite;
82+
}
83+
84+
.marquee_element:hover {
85+
animation-play-state: paused;
86+
}
87+
}
88+
89+
/* Make it move */
90+
@keyframes marquee_container {
91+
0% { transform: translate(0, 100%); }
92+
100% { transform: translate(0, -100%); }
93+
}
94+
7295
.st-card-front {
7396
.ok-text, .warning-text, .fail-text, .no-data-text, .disabled-text {
7497
display: none;

‎src/editor.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,14 @@ <h5 class="section-heading">Threshold Preferences</h5>
110110
</span>
111111
</div>
112112
</div>
113-
<!--Color Option-->
113+
114+
<!--Other Option-->
114115
<div class="section gf-form-group">
115116
<h5 class="section-heading">Other Options</h5>
117+
<gf-form-switch class="gf-form"
118+
label-class="width-15"
119+
label="Auto scroll alerts on overflow" checked="ctrl.panel.isAutoScrollOnOverflow"
120+
on-change="ctrl.onRender()"></gf-form-switch>
116121
<gf-form-switch class="gf-form"
117122
label-class="width-15"
118123
label="Use 'Disable' color if no data" checked="ctrl.panel.isGrayOnNoData"

‎src/module.html

+29-28
Original file line numberDiff line numberDiff line change
@@ -36,41 +36,42 @@ <h1>
3636
</h1>
3737
</div>
3838

39-
<div class="status_alerts_row">
40-
<div ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}" ng-repeat="display in ctrl.display">
41-
<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ display.alias }}</a>
42-
<span ng-hide="display.url">{{ display.alias }}</span>
43-
<span ng-show="display.isDisplayValue"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
44-
</div>
39+
<div ng-class="{'marquee_container': ctrl.isAutoScrollAlerts()}">
40+
<div class="status_alerts_row" ng-class="{'marquee_element': ctrl.isAutoScrollAlerts()}">
41+
<div ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}" ng-repeat="display in ctrl.display">
42+
<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ display.alias }}</a>
43+
<span ng-hide="display.url">{{ display.alias }}</span>
44+
<span ng-show="display.isDisplayValue"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
45+
</div>
4546

46-
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}"
47-
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
48-
ng-repeat="crit in ctrl.crit">
49-
<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ crit.alias }}</a>
50-
<span ng-hide="crit.url">{{ crit.alias }}</span>
51-
<span ng-show="crit.isDisplayValue"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
52-
</div>
47+
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}"
48+
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
49+
ng-repeat="crit in ctrl.crit">
50+
<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ crit.alias }}</a>
51+
<span ng-hide="crit.url">{{ crit.alias }}</span>
52+
<span ng-show="crit.isDisplayValue"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
53+
</div>
5354

54-
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}"
55-
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
56-
ng-repeat="warn in ctrl.warn">
57-
<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ warn.alias }}</a>
58-
<span ng-hide="warn.url">{{ warn.alias }}</span>
59-
<span ng-show="warn.isDisplayValue"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
60-
</div>
55+
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}"
56+
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
57+
ng-repeat="warn in ctrl.warn">
58+
<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ warn.alias }}</a>
59+
<span ng-hide="warn.url">{{ warn.alias }}</span>
60+
<span ng-show="warn.isDisplayValue"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
61+
</div>
6162

62-
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}"
63-
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
64-
ng-repeat="disabled in ctrl.disabled">
65-
<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ disabled.alias }}</a>
66-
<span ng-hide="disabled.url">{{ disabled.alias }}</span>
67-
</div>
63+
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}"
64+
ng-class="{'boldAlertMetric': ctrl.panel.fontFormat === 'Bold', 'italicAlertMetric': ctrl.panel.fontFormat === 'Italic'}"
65+
ng-repeat="disabled in ctrl.disabled">
66+
<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ disabled.alias }}</a>
67+
<span ng-hide="disabled.url">{{ disabled.alias }}</span>
68+
</div>
6869

69-
<div class="status_extra_alerts" ng-show="ctrl.extraMoreAlerts">{{ ctrl.extraMoreAlerts }}</div>
70+
<div class="status_extra_alerts" ng-show="ctrl.extraMoreAlerts">{{ ctrl.extraMoreAlerts }}</div>
71+
</div>
7072
</div>
7173
</div>
7274

7375
<div class="center_content_hidden_section" ng-if="ctrl.annotation.length !== 0"/>
74-
7576
</div>
7677
</div>

‎src/plugin.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
{"name": "Critical State", "path": "img/error.png"}
2525
],
2626
"version": "1.0.8",
27-
"updated": "2018-3-27"
27+
"updated": "2018-3-28"
2828
},
2929

3030
"dependencies": {

0 commit comments

Comments
 (0)