Skip to content

Commit

Permalink
Merge pull request #41 from Vonage/feature/add_annotation_regex
Browse files Browse the repository at this point in the history 
* support showing part of the value in the panel using regex
  • Loading branch information
@YehonatanVonage
YehonatanVonage authored Apr 9, 2017
2 parents f394df9 + 210ad63 commit d069f0a
Show file tree
Hide file tree
Showing 11 changed files with 150 additions and 17 deletions.
8 changes: 6 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ This plugin will make it easier to do. You just add all the metrics you want to
2. Component disable marker - Set the exact value that represent if the component is disabled, the panel will be grey.
3. Display as text - show extra information about the component in the panel

Severity and text values can be shown in 2 options:
Severity and text values can be shown in 2 modes:
1. Regular - under the panel title
2. Annotation - In the top left side of the panel

Expand All @@ -35,7 +35,8 @@ You can also repeat the panel on a template if you have multiple instances that
3. Go the the Options tab, and choose the how to treat each metric.
1. For severity display, select the `Threshold` option type under `Handler Type`. Enter the `Warning` and `Critical` thresholds for each of your queries.
* If you want the result to always be displayed with it's value (regardless to the thresholds), check the box titled `Show Always`
* The plugin automatically detects if higher values are good, or lower values are good by checking which threshold is higher/lower. i.e. if in your metric higher values are better, put a lower value in the "critical" threshold than the "warning" threshold.
* In case one of the fields (`Warning`/`Critical`) is a text, there will be equality check with the values.
* In case both fields are numbers there will be range check with the values. The plugin automatically detects if higher values are good, or lower values are good by checking which threshold is higher/lower. i.e. if in your metric higher values are better, put a lower value in the `critical` threshold than the `warning` threshold.
2. For disable display, select the `Disable Criteria` option type under `Handler Type`. Enter the `Disable Value` for each of your queries.
3. For display the text without any condition, select the `Text Only` option type under `Handler Type`. The alias + the value of the metric will be shown on the panel by the `Display Type` value.
4. If the query returns multiple values, choose the type of aggregation you want to be used (`None` will just use the most first result)
Expand All @@ -47,6 +48,9 @@ The plugins has a 'Remove Prefix' field in the configuration. This field is is m

i.e. you recognize your servers by domain, and they are all name in the following way `www.general-prefix.server.com`, and you would like to remove the prefix from the display, then you enter `www.general-prefix.` and all the panels will only display the `server.com` part.

### Display Value by Regex
When you want to display just part of the value for a specific metric in the screen, you can pass a regex in the `Value Regex` field, and if there is match, Only the first match will be displayed. Otherwise, the original value will be displayed.

### Measurement URL
Lets say that you want your user to be able to get instructions on what to do when a certain metric is at Warning or Critical levels. Just put a link in this field and the name will become clickable, and send your user to any URL you desire (like an internal wiki).

Expand Down
8 changes: 6 additions & 2 deletions dist/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ This plugin will make it easier to do. You just add all the metrics you want to
2. Component disable marker - Set the exact value that represent if the component is disabled, the panel will be grey.
3. Display as text - show extra information about the component in the panel

Severity and text values can be shown in 2 options:
Severity and text values can be shown in 2 modes:
1. Regular - under the panel title
2. Annotation - In the top left side of the panel

Expand All @@ -35,7 +35,8 @@ You can also repeat the panel on a template if you have multiple instances that
3. Go the the Options tab, and choose the how to treat each metric.
1. For severity display, select the `Threshold` option type under `Handler Type`. Enter the `Warning` and `Critical` thresholds for each of your queries.
* If you want the result to always be displayed with it's value (regardless to the thresholds), check the box titled `Show Always`
* The plugin automatically detects if higher values are good, or lower values are good by checking which threshold is higher/lower. i.e. if in your metric higher values are better, put a lower value in the "critical" threshold than the "warning" threshold.
* In case one of the fields (`Warning`/`Critical`) is a text, there will be equality check with the values.
* In case both fields are numbers there will be range check with the values. The plugin automatically detects if higher values are good, or lower values are good by checking which threshold is higher/lower. i.e. if in your metric higher values are better, put a lower value in the `critical` threshold than the `warning` threshold.
2. For disable display, select the `Disable Criteria` option type under `Handler Type`. Enter the `Disable Value` for each of your queries.
3. For display the text without any condition, select the `Text Only` option type under `Handler Type`. The alias + the value of the metric will be shown on the panel by the `Display Type` value.
4. If the query returns multiple values, choose the type of aggregation you want to be used (`None` will just use the most first result)
Expand All @@ -47,6 +48,9 @@ The plugins has a 'Remove Prefix' field in the configuration. This field is is m

i.e. you recognize your servers by domain, and they are all name in the following way `www.general-prefix.server.com`, and you would like to remove the prefix from the display, then you enter `www.general-prefix.` and all the panels will only display the `server.com` part.

### Display Value by Regex
When you want to display just part of the value for a specific metric in the screen, you can pass a regex in the `Value Regex` field, and if there is match, Only the first match will be displayed. Otherwise, the original value will be displayed.

### Measurement URL
Lets say that you want your user to be able to get instructions on what to do when a certain metric is at Warning or Critical levels. Just put a link in this field and the name will become clickable, and send your user to any URL you desire (like an internal wiki).

Expand Down
17 changes: 16 additions & 1 deletion dist/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,21 @@ <h5 class="section-heading">Display Settings</h5>
</div>
</div>

<!--Metric Display Regex-->
<div class="gf-form">
<span class="gf-form-label width-12">
Value Regex
<info-popover mode="right-normal">
A regex which will decide the part of the value to be displayed. <br/>
In case the regex is empty or it doesn't match any part of the metrics value, all the metric value will be displayed.
</info-popover>
</span>
<input type="text" name="valueDisplayRegex" ng-model="measurement.valueDisplayRegex" class="gf-form-input max-width-12" ng-change="ctrl.onRender()" />
<div ng-if="!ctrl.validateRegex(measurement.valueDisplayRegex)" style="color: red; padding-left: 5px">
Invalid Regex
</div>
</div>

<!--Metric URL-->
<div class="gf-form">
<span class="gf-form-label width-12">
Expand All @@ -87,7 +102,7 @@ <h5 class="section-heading">Display Settings</h5>
Make the name of the metric clickable, and send the user to a link (with explanations what to do when this error occurs)
</info-popover>
</span>
<input type="text" name="crit" ng-model="measurement.url" class="gf-form-input" style="width: 300px" ng-change="ctrl.onRender()" />
<input type="text" name="url" ng-model="measurement.url" class="gf-form-input" style="width: 300px" ng-change="ctrl.onRender()" />
</div>
</div>

Expand Down
8 changes: 4 additions & 4 deletions dist/module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="row-overflow" ng-style="{ 'max-width': ctrl.maxWidth }">
<a ng-show="annotation.url" ng-href="{{ annotation.url | interpolateTemplateVars:this }}" target="_blank">{{ annoation.alias }}</a>
<span ng-hide="annotation.url">{{ annotation.alias }}</span>
<span bs-tooltip="'{{ annotation.display_value }}'"> - {{ annotation.display_value | numberOrText}} </span>
<span bs-tooltip="'{{ annotation.display_value }}'"> - {{ annotation.display_value | numberOrTextWithRegex : annotation.valueDisplayRegex}} </span>
</div>
</div>
</div>
Expand All @@ -41,19 +41,19 @@ <h1>
<div ng-repeat="display in ctrl.display">
<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank">{{ display.alias }}</a>
<span ng-hide="display.url">{{ display.alias }}</span>
<span ng-show="display.display"> - {{ display.display_value | numberOrText }}</span>
<span ng-show="display.display"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
</div>

<div ng-repeat="crit in ctrl.crit">
<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank">{{ crit.alias }}</a>
<span ng-hide="crit.url">{{ crit.alias }}</span>
<span ng-show="crit.display"> - {{ crit.display_value | numberOrText }}</span>
<span ng-show="crit.display"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
</div>

<div ng-repeat="warn in ctrl.warn">
<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank">{{ warn.alias }}</a>
<span ng-hide="warn.url">{{ warn.alias }}</span>
<span ng-show="warn.display"> - {{ warn.display_value | numberOrText }}</span>
<span ng-show="warn.display"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
</div>

<div ng-repeat="disabled in ctrl.disabled">
Expand Down
2 changes: 1 addition & 1 deletion dist/plugin.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
{"name": "Critical State", "path": "img/error.png"}
],
"version": "1.0.3",
"updated": "2017-3-23"
"updated": "2017-4-9"
},

"dependencies": {
Expand Down
48 changes: 48 additions & 0 deletions dist/status_ctrl.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/status_ctrl.js.map
View file

Large diffs are not rendered by default.

17 changes: 16 additions & 1 deletion src/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,21 @@ <h5 class="section-heading">Display Settings</h5>
</div>
</div>

<!--Metric Display Regex-->
<div class="gf-form">
<span class="gf-form-label width-12">
Value Regex
<info-popover mode="right-normal">
A regex which will decide the part of the value to be displayed. <br/>
In case the regex is empty or it doesn't match any part of the metrics value, all the metric value will be displayed.
</info-popover>
</span>
<input type="text" name="valueDisplayRegex" ng-model="measurement.valueDisplayRegex" class="gf-form-input max-width-12" ng-change="ctrl.onRender()" />
<div ng-if="!ctrl.validateRegex(measurement.valueDisplayRegex)" style="color: red; padding-left: 5px">
Invalid Regex
</div>
</div>

<!--Metric URL-->
<div class="gf-form">
<span class="gf-form-label width-12">
Expand All @@ -87,7 +102,7 @@ <h5 class="section-heading">Display Settings</h5>
Make the name of the metric clickable, and send the user to a link (with explanations what to do when this error occurs)
</info-popover>
</span>
<input type="text" name="crit" ng-model="measurement.url" class="gf-form-input" style="width: 300px" ng-change="ctrl.onRender()" />
<input type="text" name="url" ng-model="measurement.url" class="gf-form-input" style="width: 300px" ng-change="ctrl.onRender()" />
</div>
</div>

Expand Down
8 changes: 4 additions & 4 deletions src/module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="row-overflow" ng-style="{ 'max-width': ctrl.maxWidth }">
<a ng-show="annotation.url" ng-href="{{ annotation.url | interpolateTemplateVars:this }}" target="_blank">{{ annoation.alias }}</a>
<span ng-hide="annotation.url">{{ annotation.alias }}</span>
<span bs-tooltip="'{{ annotation.display_value }}'"> - {{ annotation.display_value | numberOrText}} </span>
<span bs-tooltip="'{{ annotation.display_value }}'"> - {{ annotation.display_value | numberOrTextWithRegex : annotation.valueDisplayRegex}} </span>
</div>
</div>
</div>
Expand All @@ -41,19 +41,19 @@ <h1>
<div ng-repeat="display in ctrl.display">
<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank">{{ display.alias }}</a>
<span ng-hide="display.url">{{ display.alias }}</span>
<span ng-show="display.display"> - {{ display.display_value | numberOrText }}</span>
<span ng-show="display.display"> - {{ display.display_value | numberOrTextWithRegex : display.valueDisplayRegex }}</span>
</div>

<div ng-repeat="crit in ctrl.crit">
<a ng-show="crit.url" ng-href="{{ crit.url | interpolateTemplateVars:this }}" target="_blank">{{ crit.alias }}</a>
<span ng-hide="crit.url">{{ crit.alias }}</span>
<span ng-show="crit.display"> - {{ crit.display_value | numberOrText }}</span>
<span ng-show="crit.display"> - {{ crit.display_value | numberOrTextWithRegex : crit.valueDisplayRegex }}</span>
</div>

<div ng-repeat="warn in ctrl.warn">
<a ng-show="warn.url" ng-href="{{ warn.url | interpolateTemplateVars:this }}" target="_blank">{{ warn.alias }}</a>
<span ng-hide="warn.url">{{ warn.alias }}</span>
<span ng-show="warn.display"> - {{ warn.display_value | numberOrText }}</span>
<span ng-show="warn.display"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</span>
</div>

<div ng-repeat="disabled in ctrl.disabled">
Expand Down
2 changes: 1 addition & 1 deletion src/plugin.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
{"name": "Critical State", "path": "img/error.png"}
],
"version": "1.0.3",
"updated": "2017-3-23"
"updated": "2017-4-9"
},

"dependencies": {
Expand Down
47 changes: 47 additions & 0 deletions src/status_ctrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,36 @@ export class StatusPluginCtrl extends MetricsPanelCtrl {
numberOrTextFilter.$stateful = true;
return numberOrTextFilter;
});

coreModule.filter('numberOrTextWithRegex', () => {
let numberOrTextFilter = (input, textRegex) => {
if(angular.isNumber(input)) {
return this.filter('number')(input);
} else {
if(textRegex == null || textRegex.length == 0) {
return input;
} else {
let regex;

try {
regex = new RegExp(textRegex);
} catch (e) {
return input;
}

let matchResults = input.match(regex);
if (matchResults == null) {
return input;
} else {
return matchResults[0];
}
}
}
};

numberOrTextFilter.$stateful = true;
return numberOrTextFilter;
});
}

postRefresh() {
Expand Down Expand Up @@ -130,6 +160,11 @@ export class StatusPluginCtrl extends MetricsPanelCtrl {
s.url = target.url;
s.display = true;
s.displayType = target.displayType;
s.valueDisplayRegex = "";

if(this.validateRegex(target.valueDisplayRegex)) {
s.valueDisplayRegex = target.valueDisplayRegex;
}

let value;
switch (target.aggregation) {
Expand Down Expand Up @@ -283,6 +318,18 @@ export class StatusPluginCtrl extends MetricsPanelCtrl {
}
}

validateRegex(textRegex) {
if(textRegex == null || textRegex.length == 0) {
return true
}
try {
let regex = new RegExp(textRegex);
return true
} catch(e) {
return false
}
}

static parseThresholds(metricOptions) {
let res = {};

Expand Down

0 comments on commit d069f0a

Please sign in to comment.