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"> <div className="alert-message--formatting">
<p>Templates:</p> <p>Templates:</p>
<code data-tip="The ID of the alert">&#123;&#123; .ID &#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="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="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="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="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="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="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 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" /> <ReactTooltip effect="solid" html={true} offset={{top: -4}} class="influx-tooltip kapacitor-tooltip" />
</div> </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> <p>Send this Alert to:</p>
<Dropdown className="size-256" selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} /> <Dropdown className="size-256" selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
</div> </div>

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

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

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

@ -27,6 +27,8 @@
width: 100%; width: 100%;
height: calc(100% - #{$enterprise-page-header-height}); height: calc(100% - #{$enterprise-page-header-height});
overflow: auto; overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
@include custom-scrollbar($g2-kevlar,$c-pool); @include custom-scrollbar($g2-kevlar,$c-pool);
.container-fluid { .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 { .alert-message--formatting {
padding: $kap-padding-sm $kap-padding-lg; padding: ($kap-padding-sm - 2px) $kap-padding-lg;
background-color: $kapacitor-graphic-color; background-color: $kapacitor-graphic-color;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
border-top: 2px solid $kapacitor-divider-color; border-top: 2px solid $kapacitor-divider-color;
> p { > p {
@ -442,7 +443,7 @@ div.query-editor.kapacitor-metric-selector {
border: 0; border: 0;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
margin-left: 2px; margin: 2px;
color: $c-pool; color: $c-pool;
font-size: ($kapacitor-font-sm - 2px); font-size: ($kapacitor-font-sm - 2px);
font-weight: 600; font-weight: 600;
@ -480,14 +481,15 @@ div.query-editor.kapacitor-metric-selector {
.kapacitor-values-tabs, .kapacitor-values-tabs,
.value-selector { .value-selector {
background-color: $kapacitor-graphic-color; background-color: $kapacitor-graphic-color;
padding: ($kap-padding-sm / 2) $kap-padding-lg; padding: ($kap-padding-sm - 2px) $kap-padding-lg;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex-wrap: wrap;
> * { > * {
display: inline-block; display: inline-block;
margin: ($kap-padding-sm / 2); margin: 2px;
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
@ -498,6 +500,8 @@ div.query-editor.kapacitor-metric-selector {
white-space: nowrap; white-space: nowrap;
font-weight: 600; font-weight: 600;
color: $g15-platinum; color: $g15-platinum;
margin-left: ($kap-padding-sm / 2);
margin-right: ($kap-padding-sm / 2);
} }
> span { > span {
color: $kapacitor-accent; color: $kapacitor-accent;
@ -507,7 +511,7 @@ div.query-editor.kapacitor-metric-selector {
vertical-align: middle; vertical-align: middle;
border-radius: 4px; border-radius: 4px;
background-color: $g5-pepper; background-color: $g5-pepper;
margin: ($kap-padding-sm / 2); margin: 2px;
padding: 0 $kap-padding-sm; padding: 0 $kap-padding-sm;
font-weight: 700; font-weight: 700;
font-size: $kapacitor-font-sm; 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%); background: linear-gradient(to right, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
} }
$scrollbar-width: 16px;
@mixin custom-scrollbar($trackColor, $handleColor) { @mixin custom-scrollbar($trackColor, $handleColor) {
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 14px; width: $scrollbar-width;
border-bottom-right-radius: $radius; border-bottom-right-radius: $radius;
&-button { &-button {
@ -42,13 +43,13 @@ $explorer-page-padding: 18px;
} }
&-track-piece { &-track-piece {
background-color: $trackColor; background-color: $trackColor;
border: 4px solid $trackColor; border: ($scrollbar-width / 4) solid $trackColor;
border-radius: 8px; border-radius: ($scrollbar-width / 2);
} }
&-thumb { &-thumb {
background-color: $handleColor; background-color: $handleColor;
border: 4px solid $trackColor; border: ($scrollbar-width / 4) solid $trackColor;
border-radius: 8px; border-radius: ($scrollbar-width / 2);
} }
&-corner { &-corner {
background-color: $trackColor; background-color: $trackColor;