Skip to content

Commit

Permalink
Initial implementation of custom-colours
Browse files Browse the repository at this point in the history
  • Loading branch information
@PeteBa
PeteBa committed Sep 3, 2017
1 parent bbf0b52 commit 8633ba2
Show file tree
Hide file tree
Showing 10 changed files with 275 additions and 136 deletions.
27 changes: 8 additions & 19 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.

94 changes: 67 additions & 27 deletions dist/editor.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div>
<strong>Note:</strong> Every metric has to have a unique <strong>Alias</strong> to be used
<strong>Note:</strong> Every metric has to have a unique <strong>Alias</strong> to be used<br/><br/>
</div>

<div ng-show="ctrl.duplicates">
Expand All @@ -9,55 +9,95 @@
<div class="editor-row">
<!--General section-->
<div class="section gf-form-group">
<h5 class="section-heading">Panel Options</h5>
<div class="gf-form">
<span class="gf-form-label width-12">Panel Title</span>
<input type="text" ng-model="ctrl.panel.clusterName" class="gf-form-input max-width-12" ng-change="ctrl.onRender()">
</div>
<div class="gf-form">
<span class="gf-form-label width-12">
Remove Prefix
<info-popover mode="right-normal">
A prefix to remove from the name (helps when repeating panel over a template)
</info-popover>
</span>
<span class="gf-form-label width-12">
Remove Prefix
<info-popover mode="right-normal">
A prefix to remove from the name (helps when repeating panel over a template)
</info-popover>
</span>
<input type="text" ng-model="ctrl.panel.namePrefix" class="gf-form-input max-width-12" ng-change="ctrl.onRender()">
</div>
<div class="gf-form">
<span class="gf-form-label width-12">
Max Alerts
<info-popover mode="right-normal">
Max alerts number to show in the panel. In case value is not configured, show all alerts
</info-popover>
</span>
<span class="gf-form-label width-12">
Max Alerts
<info-popover mode="right-normal">
Max alerts number to show in the panel. In case value is not configured, show all alerts
</info-popover>
</span>
<input type="number" ng-model="ctrl.panel.maxAlertNumber" class="gf-form-input max-width-12" ng-change="ctrl.onRender()">
</div>
</div>

<!--Flip card section-->
<div class="section gf-form-group">
<h5 class="section-heading">Flip Options</h5>
<gf-form-switch class="gf-form"
label-class="width-15"
label="Make panel gray when no data" checked="ctrl.panel.isGrayOnNoData"
label-class="width-12"
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-5" ng-change="ctrl.onRender()">
</div>
</div>

<!--Coloring-->
<div class="section gf-form-group">
<h5 class="section-heading">Threshold Colors</h5>
<div class="gf-form">
<span class="gf-form-label width-8">
Coloring
<info-popover mode="right-normal">
<strong>Panel</strong> - Apply color to the panel background<br/>
<strong>Metric</strong> - Apply color to the metric text<br/>
<strong>Disabled</strong> - Do not apply any coloring<br/>
</info-popover>
</span>
<div class="gf-form-select-wrapper max-width-12">
<select class="gf-form-input"
ng-model="ctrl.panel.colorMode"
ng-options="t for t in ctrl.colorModes"
ng-change="ctrl.onRender()"
required></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Colors</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors.crit" bs-tooltip="'Critical'" ng-change="ctrl.onRender()"></spectrum-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors.warn" bs-tooltip="'Warning'" ng-change="ctrl.onRender()"></spectrum-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors.ok" bs-tooltip="'OK'" ng-change="ctrl.onRender()"></spectrum-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors.disable" bs-tooltip="'Disabled'" ng-change="ctrl.onRender()"></spectrum-picker>
</span>
</div>
</div>
<!--Color 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="Hide alerts on disable mode" checked="ctrl.panel.isHideAlertsOnDisable"
label="Use 'Disable' color if no data" checked="ctrl.panel.isGrayOnNoData"
on-change="ctrl.onRender()"></gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-15"
label="Default background in OK state" checked="ctrl.panel.useDefaultBackground"
label="Ignore color in OK state" checked="ctrl.panel.isIgnoreOKColors"
on-change="ctrl.onRender()"></gf-form-switch>
</div>

<!--Flip card section-->
<div class="section gf-form-group">
<gf-form-switch class="gf-form"
label-class="width-12"
label="Flip card" checked="ctrl.panel.flipCard"
label-class="width-15"
label="Hide alerts in Disabled state" checked="ctrl.panel.isHideAlertsOnDisable"
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-5" ng-change="ctrl.onRender()">
</div>
</div>
</div>

Expand Down
32 changes: 16 additions & 16 deletions dist/module.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<div class="status-panel">
<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" ng-hide="ctrl.duplicates">
<div class="ok-text">OK</div>
<div class="warning-text">Warning</div>
<div class="fail-text">Critical</div>
<div class="no-data-text">No data</div>
<div class="disabled-text">Disabled</div>
<div class="ok-text" ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}">OK</div>
<div class="warning-text" ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}">Warning</div>
<div class="fail-text" ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}">Critical</div>
<div class="no-data-text" ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}">No data</div>
<div class="disabled-text" ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}">Disabled</div>
</div>
<div class="st-card-back" ng-hide="ctrl.duplicates" ng-style="{ 'min-height': ctrl.minHeight }">

<div class="top_section">
<div class="status-panel-annotation_row" ng-if="ctrl.annotation.length > 0">
<div class="status-panel-annotation_row" ng-if="ctrl.annotation.length > 0" ng-style="ctrl.panel.colorMode === 'Metric' && !ctrl.panel.isIgnoreOKColors && {'color':ctrl.panel.colors.ok}">
<div ng-repeat="annotation in ctrl.annotation" >
<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>
<a ng-show="annotation.url" ng-href="{{ annotation.url | interpolateTemplateVars:this }}" target="_blank" style="color:inherit">{{ annotation.alias }}</a>
<span ng-hide="annotation.url">{{ annotation.alias }}</span>
<span bs-tooltip="'{{ annotation.display_value }}'"> - {{ annotation.display_value | numberOrTextWithRegex : annotation.valueDisplayRegex}} </span>
</div>
Expand All @@ -37,26 +37,26 @@ <h1>
</div>

<div class="status_alerts_row">
<div ng-repeat="display in ctrl.display">
<a ng-show="display.url" ng-href="{{ display.url | interpolateTemplateVars:this }}" target="_blank">{{ display.alias }}</a>
<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.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>
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.crit}" 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.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>
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.warn}" 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.display"> - {{ warn.display_value | numberOrTextWithRegex : warn.valueDisplayRegex }}</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>
<div ng-style="ctrl.panel.colorMode === 'Metric' && {'color':ctrl.panel.colors.disable}" 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>

Expand Down
63 changes: 53 additions & 10 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.

9 changes: 0 additions & 9 deletions src/css/status_panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,34 +82,25 @@
}
}

.ok-state:not(.default-background) {
background-color: green;
}

.warn-state {
background-color: orange;
.warning-text {
display: block;
}
}

.error-state {
background-color: red;
.fail-text {
display: block;
}
}

.no-data-state {
background-color: gray;

.no-data-text {
display: block;
}
}

.disabled-state {
background-color: gray;
.disabled-text {
display: block;
}
Expand Down
Loading

0 comments on commit 8633ba2

Please sign in to comment.