Host expiry setting to validate on change (#4604)

* cleaned up old conflicting tooltip styles

* fixed hsot expiry validation; validate on change
This commit is contained in:
Martavis Parker 2022-03-15 23:38:19 -07:00 committed by GitHub
parent d0ab0bca9e
commit 0fef79926f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 98 additions and 232 deletions

View file

@ -219,7 +219,7 @@ const AppConfigFormFunctional = ({
}
if (enableHostExpiry) {
if (!hostExpiryWindow) {
if (!hostExpiryWindow || hostExpiryWindow <= 0) {
errors.host_expiry_window =
"Host expiry window must be a positive number";
}
@ -235,7 +235,7 @@ const AppConfigFormFunctional = ({
setFormErrors(errors);
};
// Validates forms when certain checkboxes and dropdowns are selected
// Validates forms when certain information is changed
useEffect(() => {
validateForm();
}, [
@ -245,6 +245,7 @@ const AppConfigFormFunctional = ({
enableHostStatusWebhook,
enableHostExpiry,
agentOptions,
hostExpiryWindow,
]);
// TOGGLE MODALS
@ -832,86 +833,73 @@ const AppConfigFormFunctional = ({
</p>
<div className={`${baseClass}__inputs`}>
<div className={`${baseClass}__form-fields`}>
<div className="tooltip-wrap tooltip-wrap--input">
<InputField
label="Domain"
onChange={handleInputChange}
name="domain"
value={domain}
parseTarget
tooltip={
'<p>If you need to specify a HELO domain, <br />you can do it here <em className="hint hint--brand">(Default: <strong>Blank</strong>)</em></p>'
}
/>
</div>
<div className="tooltip-wrap">
<Checkbox
onChange={handleInputChange}
name="verifySSLCerts"
value={verifySSLCerts}
parseTarget
tooltip={
'<p>Turn this off (not recommended) <br />if you use a self-signed certificate <em className="hint hint--brand"><br />(Default: <strong>On</strong>)</em></p>'
}
>
Verify SSL certs
</Checkbox>
</div>
<div className="tooltip-wrap">
<Checkbox
onChange={handleInputChange}
name="enableStartTLS"
value={enableStartTLS}
parseTarget
tooltip={
'<p>Detects if STARTTLS is enabled <br />in your SMTP server and starts <br />to use it. <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>'
}
>
Enable STARTTLS
</Checkbox>
</div>
<div className="tooltip-wrap">
<Checkbox
onChange={handleInputChange}
name="enableHostExpiry"
value={enableHostExpiry}
parseTarget
tooltip={
'<p>When enabled, allows automatic cleanup <br />of hosts that have not communicated with Fleet <br />in some number of days. <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
}
>
Host expiry
</Checkbox>
</div>
<div className="tooltip-wrap tooltip-wrap--input">
<InputField
label="Host expiry window"
type="number"
disabled={!enableHostExpiry}
onChange={handleInputChange}
name="hostExpiryWindow"
value={hostExpiryWindow}
parseTarget
onBlur={validateForm}
error={formErrors.host_expiry_window}
tooltip={
"<p>If a host has not communicated with Fleet in the specified number of days, it will be removed.</p>"
}
/>
</div>
<div className="tooltip-wrap">
<Checkbox
onChange={handleInputChange}
name="disableLiveQuery"
value={disableLiveQuery}
parseTarget
tooltip={
'<p>When enabled, disables the ability to run live queries <br />(ad hoc queries executed via the UI or fleetctl). <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
}
>
Disable live queries
</Checkbox>
</div>
<InputField
label="Domain"
onChange={handleInputChange}
name="domain"
value={domain}
parseTarget
tooltip={
'<p>If you need to specify a HELO domain, <br />you can do it here <em className="hint hint--brand">(Default: <strong>Blank</strong>)</em></p>'
}
/>
<Checkbox
onChange={handleInputChange}
name="verifySSLCerts"
value={verifySSLCerts}
parseTarget
tooltip={
'<p>Turn this off (not recommended) <br />if you use a self-signed certificate <em className="hint hint--brand"><br />(Default: <strong>On</strong>)</em></p>'
}
>
Verify SSL certs
</Checkbox>
<Checkbox
onChange={handleInputChange}
name="enableStartTLS"
value={enableStartTLS}
parseTarget
tooltip={
'<p>Detects if STARTTLS is enabled <br />in your SMTP server and starts <br />to use it. <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>'
}
>
Enable STARTTLS
</Checkbox>
<Checkbox
onChange={handleInputChange}
name="enableHostExpiry"
value={enableHostExpiry}
parseTarget
tooltip={
'<p>When enabled, allows automatic cleanup <br />of hosts that have not communicated with Fleet <br />in some number of days. <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
}
>
Host expiry
</Checkbox>
<InputField
label="Host expiry window"
type="number"
disabled={!enableHostExpiry}
onChange={handleInputChange}
name="hostExpiryWindow"
value={hostExpiryWindow}
parseTarget
error={formErrors.host_expiry_window}
tooltip={
"<p>If a host has not communicated with Fleet in the specified number of days, it will be removed.</p>"
}
/>
<Checkbox
onChange={handleInputChange}
name="disableLiveQuery"
value={disableLiveQuery}
parseTarget
tooltip={
'<p>When enabled, disables the ability to run live queries <br />(ad hoc queries executed via the UI or fleetctl). <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
}
>
Disable live queries
</Checkbox>
</div>
</div>
</div>

View file

@ -224,51 +224,5 @@
&__advanced-options {
margin-bottom: $pad-large;
.tooltip-wrap {
display: flex;
align-items: center;
width: 100%;
margin-bottom: $pad-large;
.icon-tooltip {
span {
display: flex;
align-items: center;
}
p {
text-align: center;
}
}
.form-field--input {
display: flex;
flex-direction: column;
width: 100%;
margin-right: $pad-small;
margin-bottom: 0;
}
.form-field--checkbox {
display: flex;
flex-direction: column;
align-items: center;
margin-right: $pad-small;
margin-bottom: 0;
.fleet-checkbox {
display: flex;
align-items: center;
}
}
}
.tooltip-wrap--input {
.icon-tooltip {
span {
margin-top: 22px;
}
}
}
}
}

View file

@ -199,22 +199,20 @@ const ManageAutomationsModal = ({
<p>Add a policy to turn on automations.</p>
</div>
)}
<div className="tooltip-wrap tooltip-wrap--input">
<InputField
inputWrapperClass={`${baseClass}__url-input`}
name="webhook-url"
label={"Destination URL"}
type={"text"}
value={destination_url}
onChange={onURLChange}
error={errors.url}
hint={
'For each policy, Fleet will send a JSON payload to this URL with a list of the hosts that updated their answer to "No."'
}
placeholder={"https://server.com/example"}
tooltip="Provide a URL to deliver a webhook request to."
/>
</div>
<InputField
inputWrapperClass={`${baseClass}__url-input`}
name="webhook-url"
label={"Destination URL"}
type={"text"}
value={destination_url}
onChange={onURLChange}
error={errors.url}
hint={
'For each policy, Fleet will send a JSON payload to this URL with a list of the hosts that updated their answer to "No."'
}
placeholder={"https://server.com/example"}
tooltip="Provide a URL to deliver a webhook request to."
/>
<Button
type="button"
variant="text-link"

View file

@ -41,42 +41,6 @@
opacity: 75%;
}
.tooltip-wrap {
display: flex;
align-items: center;
width: 100%;
margin-bottom: $pad-large;
.icon-tooltip {
span {
display: flex;
align-items: center;
}
p {
text-align: center;
}
}
.form-field--input {
display: block;
width: 100%;
margin-right: $pad-small;
margin-bottom: 0;
}
.form-field__hint {
font-style: normal;
}
}
.tooltip-wrap--input {
.icon-tooltip {
span {
margin-top: -5px;
}
}
}
// so tooltips won't be triggered with whitespace
.form-field__label {
display: inline-block;

View file

@ -112,22 +112,20 @@ const ManageAutomationsModal = ({
days.
</p>
</div>
<div className="tooltip-wrap tooltip-wrap--input">
<InputField
inputWrapperClass={`${baseClass}__url-input`}
name="webhook-url"
label={"Destination URL"}
type={"text"}
value={destination_url}
onChange={onURLChange}
error={errors.url}
hint={
"For each new vulnerability detected, Fleet will send a JSON payload to this URL with a list of the affected hosts."
}
placeholder={"https://server.com/example"}
tooltip="Provide a URL to deliver a webhook request to."
/>
</div>
<InputField
inputWrapperClass={`${baseClass}__url-input`}
name="webhook-url"
label={"Destination URL"}
type={"text"}
value={destination_url}
onChange={onURLChange}
error={errors.url}
hint={
"For each new vulnerability detected, Fleet will send a JSON payload to this URL with a list of the affected hosts."
}
placeholder={"https://server.com/example"}
tooltip="Provide a URL to deliver a webhook request to."
/>
<Button
type="button"
variant="text-link"

View file

@ -47,42 +47,6 @@
}
}
.tooltip-wrap {
display: flex;
align-items: center;
width: 100%;
margin-bottom: $pad-large;
.icon-tooltip {
span {
display: flex;
align-items: center;
}
p {
text-align: center;
}
}
.form-field--input {
display: block;
width: 100%;
margin-right: $pad-small;
margin-bottom: 0;
}
.form-field__hint {
font-style: normal;
}
}
.tooltip-wrap--input {
.icon-tooltip {
span {
margin-top: -5px;
}
}
}
// so tooltips won't be triggered with whitespace
.form-field__label {
display: inline-block;