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

HandlerOptions styling

pull/10616/head
deniz kusefoglu 2017-12-05 11:25:14 -08:00
parent 0c935d9887
commit e42a87746f
17 changed files with 483 additions and 374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/kapacitor/components/handlers/AlertaHandler.js
View File

@ -7,6 +7,7 @@ const AlertaHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -23,6 +24,7 @@ const AlertaHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
fieldDisplay="Environment"
placeholder="ex: environment"
/>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -31,8 +33,10 @@ const AlertaHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
placeholder="ex: origin"
/>
</div>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -71,6 +75,7 @@ const AlertaHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

4
ui/src/kapacitor/components/handlers/EmailHandler.js
View File

@ -14,6 +14,7 @@ const EmailHandler = ({
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -42,8 +43,10 @@ const EmailHandler = ({
fieldColumns="col-md-4"
/>
</div>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -56,6 +59,7 @@ const EmailHandler = ({
<RuleDetailsText rule={rule} updateDetails={updateDetails} />
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

2
ui/src/kapacitor/components/handlers/ExecHandler.js
View File

@ -6,6 +6,7 @@ const ExecHandler = ({selectedHandler, handleModifyHandler}) => {
<div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -17,6 +18,7 @@ const ExecHandler = ({selectedHandler, handleModifyHandler}) => {
/>
</div>
</div>
</div>
)
}

2
ui/src/kapacitor/components/handlers/HipchatHandler.js
View File

@ -7,6 +7,7 @@ const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -33,6 +34,7 @@ const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

2
ui/src/kapacitor/components/handlers/LogHandler.js
View File

@ -6,6 +6,7 @@ const LogHandler = ({selectedHandler, handleModifyHandler}) => {
<div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -16,6 +17,7 @@ const LogHandler = ({selectedHandler, handleModifyHandler}) => {
/>
</div>
</div>
</div>
)
}

4
ui/src/kapacitor/components/handlers/OpsgenieHandler.js
View File

@ -11,6 +11,7 @@ const OpsgenieHandler = ({
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -22,8 +23,10 @@ const OpsgenieHandler = ({
fieldColumns="col-md-12"
/>
</div>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler:</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -42,6 +45,7 @@ const OpsgenieHandler = ({
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

2
ui/src/kapacitor/components/handlers/PagerDutyHandler.js
View File

@ -11,6 +11,7 @@ const PagerdutyHandler = ({
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -22,6 +23,7 @@ const PagerdutyHandler = ({
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

2
ui/src/kapacitor/components/handlers/PostHandler.js
View File

@ -6,6 +6,7 @@ const HttpHandler = ({selectedHandler, handleModifyHandler}) => {
<div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -16,6 +17,7 @@ const HttpHandler = ({selectedHandler, handleModifyHandler}) => {
/>
</div>
</div>
</div>
)
}

4
ui/src/kapacitor/components/handlers/PushoverHandler.js
View File

@ -11,6 +11,7 @@ const PushoverHandler = ({
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -29,8 +30,10 @@ const PushoverHandler = ({
redacted={true}
/>
</div>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -69,6 +72,7 @@ const PushoverHandler = ({
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

4
ui/src/kapacitor/components/handlers/SensuHandler.js
View File

@ -7,6 +7,7 @@ const SensuHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -23,8 +24,10 @@ const SensuHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
placeholder="ex: my_source"
/>
</div>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -36,6 +39,7 @@ const SensuHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

4
ui/src/kapacitor/components/handlers/SlackHandler.js
View File

@ -7,6 +7,7 @@ const SlackHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -18,8 +19,10 @@ const SlackHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
fieldColumns="col-md-12"
/>
</div>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -46,6 +49,7 @@ const SlackHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

2
ui/src/kapacitor/components/handlers/TalkHandler.js
View File

@ -7,6 +7,7 @@ const TalkHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -26,6 +27,7 @@ const TalkHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

2
ui/src/kapacitor/components/handlers/TcpHandler.js
View File

@ -6,6 +6,7 @@ const TcpHandler = ({selectedHandler, handleModifyHandler}) => {
<div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -16,6 +17,7 @@ const TcpHandler = ({selectedHandler, handleModifyHandler}) => {
/>
</div>
</div>
</div>
)
}

4
ui/src/kapacitor/components/handlers/TelegramHandler.js
View File

@ -12,6 +12,7 @@ const TelegramHandler = ({
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -23,8 +24,10 @@ const TelegramHandler = ({
fieldColumns="col-md-12"
/>
</div>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -53,6 +56,7 @@ const TelegramHandler = ({
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

4
ui/src/kapacitor/components/handlers/VictoropsHandler.js
View File

@ -11,6 +11,7 @@ const VictoropsHandler = ({
? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -22,8 +23,10 @@ const VictoropsHandler = ({
fieldColumns="col-md-12"
/>
</div>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<div className="faux-form">
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
@ -34,6 +37,7 @@ const VictoropsHandler = ({
/>
</div>
</div>
</div>
: <HandlerEmpty configLink={configLink} />
}

11
ui/src/style/pages/kapacitor.scss
View File

@ -542,9 +542,11 @@ $rule-builder--radius-lg: 5px;
padding-bottom: $rule-builder--padding-lg;
}
}
.endpoint-tab--parameters .form-group {
margin-left: -18px;
margin-right: 18px;
.endpoint-tab--parameters .faux-form {
margin-left: -6px;
margin-right: -6px;
width: calc(100% + 12px);
display: inline-block;
}
.endpoint-tab--parameters--empty {
align-items: center;
@ -579,7 +581,7 @@ $rule-builder--radius-lg: 5px;
}
/*
Section 3 - Rule Details
Rule Details
-----------------------------------------------------------------------------
*/
.rule-builder--details {
@ -595,6 +597,7 @@ $rule-builder--radius-lg: 5px;
height: 100px;
min-width: 100%;
max-width: 100%;
width: 100% !important;
@include custom-scrollbar($rule-builder--section-bg,$rule-builder--accent-color);
}
.rule-builder--details-template {

59
ui/src/style/unsorted.scss
View File

@ -468,3 +468,62 @@ $dash-editable-header-padding: 7px;
}
}
}
/*
Fake form padding without <form>
*/
div.faux-form {
.form-group.col-xs-1,
.form-group.col-xs-2,
.form-group.col-xs-3,
.form-group.col-xs-4,
.form-group.col-xs-5,
.form-group.col-xs-6,
.form-group.col-xs-7,
.form-group.col-xs-8,
.form-group.col-xs-9,
.form-group.col-xs-10,
.form-group.col-xs-11,
.form-group.col-xs-12,
.form-group.col-sm-1,
.form-group.col-sm-2,
.form-group.col-sm-3,
.form-group.col-sm-4,
.form-group.col-sm-5,
.form-group.col-sm-6,
.form-group.col-sm-7,
.form-group.col-sm-8,
.form-group.col-sm-9,
.form-group.col-sm-10,
.form-group.col-sm-11,
.form-group.col-sm-12,
.form-group.col-md-1,
.form-group.col-md-2,
.form-group.col-md-3,
.form-group.col-md-4,
.form-group.col-md-5,
.form-group.col-md-6,
.form-group.col-md-7,
.form-group.col-md-8,
.form-group.col-md-9,
.form-group.col-md-10,
.form-group.col-md-11,
.form-group.col-md-12,
.form-group.col-lg-1,
.form-group.col-lg-2,
.form-group.col-lg-3,
.form-group.col-lg-4,
.form-group.col-lg-5,
.form-group.col-lg-6,
.form-group.col-lg-7,
.form-group.col-lg-8,
.form-group.col-lg-9,
.form-group.col-lg-10,
.form-group.col-lg-11,
.form-group.col-lg-12 {
padding-left: 6px;
padding-right: 6px;
}
}