Skip to content

Commit

Permalink
Merge branch 'add-text-flipping' of https://github.com/LLIyRiK/Grafan…
Browse files Browse the repository at this point in the history 
…a_Status_panel into add-text-flipping

# Conflicts:
#	dist/css/status_panel.css
#	dist/css/status_panel.css.map
#	dist/editor.html
#	dist/module.html
#	dist/status_ctrl.js
#	dist/status_ctrl.js.map
#	src/css/status_panel.scss
#	src/editor.html
#	src/module.html
#	src/status_ctrl.js
  • Loading branch information
@LLIyRiK
LLIyRiK committed Mar 23, 2017
2 parents eecf781 + 5b6999e commit ce8d47e
Show file tree
Hide file tree
Showing 10 changed files with 581 additions and 509 deletions.
71 changes: 57 additions & 14 deletions dist/css/status_panel.css
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/css/status_panel.css.map
View file

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

126 changes: 38 additions & 88 deletions dist/editor.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div>
<strong>Note:</strong> Every metric has to have a unique <strong>Alias</strong> to be used
<strong>Note:</strong> Every measurement has to have a unique <strong>Alias</strong> to be used
</div>

<div ng-show="ctrl.duplicates">
<strong>Error</strong>: There are multiple metrics with the same alias. Please give each metric a unique name.
<strong>Error</strong>: There are multiple measurements with the same alias. Please give each measurement a unique name.
</div>

<div class="editor-row">
Expand All @@ -24,133 +24,83 @@ <h5 class="section-heading">{{ measurement.alias }}</h5>
</div>
<gf-form-switch class="gf-form"
label-class="width-12"
label="Make panel gray when no data" checked="ctrl.panel.isGrayOnNoData"
label="Flip card" checked="ctrl.panel.flipCard"
on-change="ctrl.onRender()"></gf-form-switch>
<div class="gf-form">
<span class="gf-form-label width-12">Flip interval</span>
<input type="text" ng-model="ctrl.panel.flipTime" class="gf-form-input max-width-12" ng-change="ctrl.onRender()">
</div>
<gf-form-switch class="gf-form"
label-class="width-12"
label="Make panel gray when no data" checked="ctrl.panel.isGrayColor"
on-change="ctrl.onRender()"></gf-form-switch>
</div>
</div>

<div>
<div class="editor-row" ng-repeat="measurement in ctrl.measurements">

<!--Metrics options header-->
<h5 class="section-heading" ng-if="measurement.alias">{{ measurement.alias }}</h5>
<div ng-if="!measurement.alias">
<h5 class="section-heading">Metric: {{ measurement.refId }}</h5>
<div>Please enter an alias for this measurement bellow</div>
</div>

<!--Display Settings-->
<div class="section gf-form-group">
<h5 class="section-heading">Display Settings</h5>
<h5 class="section-heading" ng-if="measurement.alias">{{ measurement.alias }} Thresholds</h5>

<div ng-if="!measurement.alias">
<h5 class="section-heading">Thresholds for measurement: {{ measurement.refId }}</h5>
<div>Please enter an alias for this measurement bellow</div>
</div>

<!--Alias-->
<div class="gf-form">
<span class="gf-form-label width-12">
Alias
</span>
<input type="text" name="alias" ng-model="measurement.alias" class="gf-form-input max-width-12" ng-change="ctrl.onRender()" required />
</div>

<!--Aggregation-->
<div class="gf-form">
<span class="gf-form-label width-12">
Aggregation
<info-popover mode="right-normal">
What to do if the query returns multiple data points.
</info-popover>
Warning
</span>
<div class="gf-form-select-wrapper max-width-12">
<select class="gf-form-input"
ng-init="measurement.aggregation = (measurement.aggregation ? measurement.aggregation : ctrl.aggregations[0])"
ng-model="measurement.aggregation"
ng-options="t for t in ctrl.aggregations"
ng-change="ctrl.onRender()"
required></select>
</div>
<input type="number" name="warn" ng-model="measurement.warn" class="gf-form-input max-width-12" ng-change="ctrl.onRender()" required />
</div>

<!--Metric URL-->
<div class="gf-form">
<span class="gf-form-label width-12">
Metric URL
<info-popover mode="right-normal">
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>
Critical
</span>
<input type="text" name="crit" ng-model="measurement.url" class="gf-form-input" style="width: 300px" ng-change="ctrl.onRender()" />
<input type="number" name="crit" ng-model="measurement.crit" class="gf-form-input max-width-12" ng-change="ctrl.onRender()" required />
</div>
</div>

<div class="section gf-form-group">
<h5 class="section-heading">Metric display type</h5>

<!--Status type-->
<div class="gf-form">
<span class="gf-form-label width-12">
Status Type
Aggregation
<info-popover mode="right-normal">
The type of data to show to the panel<br/>
<strong>Note:</strong> 'Threshold' will select the first value. <br/> <br/>
<strong>Threshold</strong> - Change background color of the panel if got warning / error + show the alias of the problematic metrics. <br/>
<strong>Disable Criteria</strong> - Change background color of the panel if disabled. <br/>
<strong>Annotation</strong> - Show extra info on the panel on top right.
What to do if the query returns multiple data points.
</info-popover>
</span>
<div class="gf-form-select-wrapper max-width-12">
<select class="gf-form-input"
ng-init="measurement.displayType = (measurement.displayType ? measurement.displayType : ctrl.displayTypes[0])"
ng-model="measurement.displayType"
ng-options="t for t in ctrl.displayTypes"
ng-init="measurement.aggregation =
(measurement.aggregation ? measurement.aggregation : ctrl.aggregations[0])"
ng-model="measurement.aggregation"
ng-options="t for t in ctrl.aggregations"
ng-change="ctrl.onRender()"
required></select>
</div>
</div>
</div>

<div class="section gf-form-group">
<!--Threshold Section-->
<div ng-if="measurement.displayType == 'Threshold'">
<h5 class="section-heading">Threshold</h5>

<!--Warning threshold-->
<div class="gf-form">
<span class="gf-form-label width-12">
Warning
</span>
<input type="number" name="warn" ng-model="measurement.warn" class="gf-form-input max-width-12" ng-change="ctrl.onRender()" required />
</div>

<!--Critical threshold-->
<div class="gf-form">
<div class="gf-form">
<span class="gf-form-label width-12">
Critical
Measurement URL
<info-popover mode="right-normal">
Make the name of the measurement clickable, and send the user to a link (with explanations what to do when this error occurs)
</info-popover>
</span>
<input type="number" name="crit" ng-model="measurement.crit" class="gf-form-input max-width-12" ng-change="ctrl.onRender()" required />
</div>

<!--Show value for threshold-->
<gf-form-switch class="gf-form"
label-class="width-12"
tooltip="This field will always be displayed with it's value"
label="Show Value" checked="measurement.display"
on-change="ctrl.render()"></gf-form-switch>
<input type="text" name="crit" ng-model="measurement.url" class="gf-form-input" style="width: 300px" ng-change="ctrl.onRender()" />
</div>

<!--Disable Section-->
<div ng-if="measurement.displayType == 'Disable Criteria'">
<h5 class="section-heading">Disable Criteria</h5>

<!--Disable Criteria-->
<div class="gf-form">
<span class="gf-form-label width-12">
Disable Value
<info-popover mode="right-normal">
The exact value which will make this panel to be displayed as disabled <br />
</info-popover>
</span>
<input type="text" name="disabledValue" ng-model="measurement.disabledValue" class="gf-form-input max-width-12" ng-change="ctrl.onRender()" required />
</div>
</div>
<gf-form-switch class="gf-form"
label-class="width-12"
tooltip="This field will always be displayed with it's value"
label="Show Value" checked="measurement.display"
on-change="ctrl.render()"></gf-form-switch>
</div>
</div>
</div>
80 changes: 36 additions & 44 deletions dist/module.html
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,41 @@
<div class="status-panel">
<div ng-show="ctrl.duplicates">
<strong>Error</strong>: There are multiple measurements with the same alias. Please give each measurement a unique name.
</div>
<div class="st-card-front">
<div class="ok-text">ok</div>
<div class="warning-text">warning</div>
<div class="fail-text">critical</div>
<div class="gray-text">No data</div>
</div>
<div class="st-card-back">
<div ng-show="ctrl.duplicates">
<strong>Error</strong>: There are multiple measurements with the same alias. Please give each measurement a unique name.
</div>

<div ng-hide="ctrl.duplicates" class="status-panel-annotation_row">
<div ng-repeat="annoation in ctrl.annotation">
<a ng-show="annoation.url" ng-href="{{ annoation.url | interpolateTemplateVars:this }}" target="_blank">{{ annoation.alias }}</a>
<span ng-hide="annoation.url">{{ annoation.alias }}</span>
<span> - {{ annoation.display_value }} </span>
</div>
</div>
<div ng-hide="ctrl.duplicates">
<h1>
<a ng-href="{{ 'dashboard/' + ctrl.uri | interpolateTemplateVars:this }}" target="_blank" ng-show="ctrl.uri">
{{ ctrl.panel.displayName | interpolateTemplateVars:this }}
</a>
<span ng-hide="ctrl.uri">
{{ ctrl.panel.displayName | interpolateTemplateVars:this }}
</span>
</h1>

<div ng-hide="ctrl.duplicates" class="status_name_row">
<h1>
<a ng-href="{{ 'dashboard/' + ctrl.uri | interpolateTemplateVars:this }}" target="_blank" ng-show="ctrl.uri">
{{ ctrl.panel.displayName | interpolateTemplateVars:this }}
</a>
<span ng-hide="ctrl.uri">
{{ ctrl.panel.displayName | interpolateTemplateVars:this }}
</span>
</h1>
</div>
<div ng-repeat="display in ctrl.display">
<a ng-show="display.url" ng-href="{{ display.url }}" target="_blank">{{ display.alias }}</a>
<span ng-hide="display.url">{{ display.alias }}</span>
<span ng-show="display.display"> - {{ display.display_value | number }}</span>
</div>
<div ng-repeat="crit in ctrl.crit">
<a ng-show="crit.url" ng-href="{{ crit.url }}" target="_blank">{{ crit.alias }}</a>
<span ng-hide="crit.url">{{ crit.alias }}</span>
<span ng-show="crit.display"> - {{ crit.display_value | number }}</span>
</div>
<div ng-repeat="warn in ctrl.warn">
<a ng-show="warn.url" ng-href="{{ warn.url }}" target="_blank">{{ warn.alias }}</a>
<span ng-hide="warn.url">{{ warn.alias }}</span>
<span ng-show="warn.display"> - {{ warn.display_value | number }}</span>
</div>
</div>
</div>

<div class="status_alerts_row" ng-hide="ctrl.duplicates">
<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 | number }}</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 | number }}</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 | number }}</span>
</div>

<div ng-repeat="disabled in ctrl.disabled">
<a ng-show="disabled.url" ng-href="{{ disabled.url | interpolateTemplateVars:this }}" target="_blank">{{ disabled.alias }}</a>
<span ng-hide="disabled.url">{{ disabled.alias }}</span>
</div>
</div>
</div>
Loading

0 comments on commit ce8d47e

Please sign in to comment.