Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #550 from influxdata/alert-message-template-fix 

Alert Message Template Fix
pull/10616/head
Will Piers 2016-11-14 17:19:11 -08:00 committed by GitHub
parent 15b0258917 3dcbb3db15
commit 7b68128bf4
5 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/kapacitor/components/RuleMessage.js
View File

@ -40,17 +40,17 @@ export const RuleMessage = React.createClass({
/>
<div className="alert-message--formatting">
<p>Templates:</p>
<code data-tip="The ID of the alert">&#123;&#123; .ID &#125;&#125;</code>
<code data-tip="Measurement name">&#123;&#123; .Name &#125;&#125;</code>
<code data-tip="The name of the task">&#123;&#123; .TaskName &#125;&#125;</code>
<code data-tip="Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;">&#123;&#123; .Group &#125;&#125;</code>
<code data-tip="Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value">&#123;&#123; .Tags &#125;&#125;</code>
<code data-tip="Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>">&#123;&#123; .Level &#125;&#125;</code>
<code data-tip="Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value">&#123;&#123; .Fields &#125;&#125;</code>
<code data-tip="The time of the point that triggered the event">&#123;&#123; .Time &#125;&#125;</code>
<code data-tip="The ID of the alert">&#123;&#123;.ID&#125;&#125;</code>
<code data-tip="Measurement name">&#123;&#123;.Name&#125;&#125;</code>
<code data-tip="The name of the task">&#123;&#123;.TaskName&#125;&#125;</code>
<code data-tip="Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;">&#123;&#123;.Group&#125;&#125;</code>
<code data-tip="Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value">&#123;&#123;.Tags&#125;&#125;</code>
<code data-tip="Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>">&#123;&#123;.Level&#125;&#125;</code>
<code data-tip="Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value">&#123;&#123;.Fields&#125;&#125;</code>
<code data-tip="The time of the point that triggered the event">&#123;&#123;.Time&#125;&#125;</code>
<ReactTooltip effect="solid" html={true} offset={{top: -4}} class="influx-tooltip kapacitor-tooltip" />
</div>
<div className="rule-section--item bottom alert-message-endpoint">
<div className="rule-section--item bottom alert-message--endpoint">
<p>Send this Alert to:</p>
<Dropdown className="size-256" selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
</div>

12
ui/src/style/enterprise_style/_enterprise-custom.scss
View File

@ -66,11 +66,7 @@ body > #react-root {
position: relative;
flex-grow: 1;
overflow: hidden;
background: $g18-cloud;
background: -moz-linear-gradient(top, $g18-cloud 0%, $g19-ghost 100%);
background: -webkit-linear-gradient(top, $g18-cloud 0%,$g19-ghost 100%);
background: linear-gradient(to bottom, $g18-cloud 0%,$g19-ghost 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g18-cloud', endColorstr='$g19-ghost',GradientType=0 );
@include gradient-v($g18-cloud, $g19-ghost);
}
.signup-flow-bg {
background-image: url(/assets/images/signup-bg.png);
@ -85,7 +81,9 @@ body > #react-root {
left: 0;
width: 100%;
height: 100%;
overflow: scroll;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
}
/*
@ -96,7 +94,7 @@ body > #react-root {
background-color: $g20-white;
height: $enterprise-page-header-height;
margin-bottom: 15px;
padding: 0 $page-wrapper-padding;
padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding;
display: flex;
justify-content: center;
align-items: center;

2
ui/src/style/enterprise_style/hosts.scss
View File

@ -27,6 +27,8 @@
width: 100%;
height: calc(100% - #{$enterprise-page-header-height});
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
@include custom-scrollbar($g2-kevlar,$c-pool);
.container-fluid {

14
ui/src/style/enterprise_style/kapacitor.scss
View File

@ -422,10 +422,11 @@ div.query-editor.kapacitor-metric-selector {
}
}
.alert-message--formatting {
padding: $kap-padding-sm $kap-padding-lg;
padding: ($kap-padding-sm - 2px) $kap-padding-lg;
background-color: $kapacitor-graphic-color;
display: flex;
align-items: center;
flex-wrap: wrap;
border-top: 2px solid $kapacitor-divider-color;
> p {
@ -442,7 +443,7 @@ div.query-editor.kapacitor-metric-selector {
border: 0;
border-radius: 3px;
display: inline-block;
margin-left: 2px;
margin: 2px;
color: $c-pool;
font-size: ($kapacitor-font-sm - 2px);
font-weight: 600;
@ -480,14 +481,15 @@ div.query-editor.kapacitor-metric-selector {
.kapacitor-values-tabs,
.value-selector {
background-color: $kapacitor-graphic-color;
padding: ($kap-padding-sm / 2) $kap-padding-lg;
padding: ($kap-padding-sm - 2px) $kap-padding-lg;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
> * {
display: inline-block;
margin: ($kap-padding-sm / 2);
margin: 2px;
&:first-child {
margin-left: 0;
@ -498,6 +500,8 @@ div.query-editor.kapacitor-metric-selector {
white-space: nowrap;
font-weight: 600;
color: $g15-platinum;
margin-left: ($kap-padding-sm / 2);
margin-right: ($kap-padding-sm / 2);
}
> span {
color: $kapacitor-accent;
@ -507,7 +511,7 @@ div.query-editor.kapacitor-metric-selector {
vertical-align: middle;
border-radius: 4px;
background-color: $g5-pepper;
margin: ($kap-padding-sm / 2);
margin: 2px;
padding: 0 $kap-padding-sm;
font-weight: 700;
font-size: $kapacitor-font-sm;

11
ui/src/style/modules/_sizes.scss
View File

@ -28,9 +28,10 @@ $explorer-page-padding: 18px;
background: linear-gradient(to right, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
}
$scrollbar-width: 16px;
@mixin custom-scrollbar($trackColor, $handleColor) {
&::-webkit-scrollbar {
width: 14px;
width: $scrollbar-width;
border-bottom-right-radius: $radius;
&-button {
@ -42,13 +43,13 @@ $explorer-page-padding: 18px;
}
&-track-piece {
background-color: $trackColor;
border: 4px solid $trackColor;
border-radius: 8px;
border: ($scrollbar-width / 4) solid $trackColor;
border-radius: ($scrollbar-width / 2);
}
&-thumb {
background-color: $handleColor;
border: 4px solid $trackColor;
border-radius: 8px;
border: ($scrollbar-width / 4) solid $trackColor;
border-radius: ($scrollbar-width / 2);
}
&-corner {
background-color: $trackColor;