[Uptime] Settings threshold validation

x-pack/plugins/uptime/public/components/settings/certificate_form.tsx

@@ -58,7 +58,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
     >
       <EuiFormRow
         describedByIds={['errorState']}
-        error={fieldErrors?.certificatesThresholds?.expirationThresholdError}
+        error={fieldErrors?.expirationThresholdError}
         fullWidth
         helpText={
           <FormattedMessage
@@ -69,7 +69,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
             }}
           />
         }
-        isInvalid={!!fieldErrors?.certificatesThresholds?.expirationThresholdError}
+        isInvalid={!!fieldErrors?.expirationThresholdError}
         label={
           <FormattedMessage
             id="xpack.uptime.sourceConfiguration.errorStateLabel"
@@ -80,6 +80,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
         <EuiFlexGroup>
           <EuiFlexItem grow={2}>
             <EuiFieldNumber
+              min={1}
               data-test-subj={`expiration-threshold-input-${loading ? 'loading' : 'loaded'}`}
               fullWidth
               disabled={isDisabled}
@@ -104,7 +105,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
       </EuiFormRow>
       <EuiFormRow
         describedByIds={['warningState']}
-        error={fieldErrors?.certificatesThresholds?.ageThresholdError}
+        error={fieldErrors?.ageThresholdError}
         fullWidth
         helpText={
           <FormattedMessage
@@ -115,7 +116,7 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
             }}
           />
         }
-        isInvalid={!!fieldErrors?.certificatesThresholds?.ageThresholdError}
+        isInvalid={!!fieldErrors?.ageThresholdError}
         label={
           <FormattedMessage
             id="xpack.uptime.sourceConfiguration.warningStateLabel"
@@ -126,14 +127,15 @@ export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
         <EuiFlexGroup>
           <EuiFlexItem grow={2}>
             <EuiFieldNumber
+              min={1}
               data-test-subj={`age-threshold-input-${loading ? 'loading' : 'loaded'}`}
               fullWidth
               disabled={isDisabled}
               isLoading={loading}
               value={formFields?.certAgeThreshold ?? ''}
-              onChange={e =>
+              onChange={({ currentTarget: { value } }) =>
                 onChange({
-                  certAgeThreshold: Number(e.currentTarget.value),
+                  certAgeThreshold: Number(value),
                 })
               }
             />

x-pack/plugins/uptime/public/pages/settings.tsx

@@ -34,11 +34,9 @@ import {
 import * as Translations from './translations';
 
 interface SettingsPageFieldErrors {
-  heartbeatIndices: 'May not be blank' | '';
-  certificatesThresholds: {
-    expirationThresholdError: string | null;
-    ageThresholdError: string | null;
-  } | null;
+  heartbeatIndices: string | '';
+  expirationThresholdError?: string;
+  ageThresholdError?: string;
 }
 
 export interface SettingsFormProps {
@@ -49,22 +47,28 @@ export interface SettingsFormProps {
   isDisabled: boolean;
 }
 
+const isValidCertVal = (val: string | number) => {
+  if (val === '') {
+    return Translations.BLANK_STR;
+  }
+  if (val === 0) {
+    return Translations.VALID_STR;
+  }
+};
+
 const getFieldErrors = (formFields: DynamicSettings | null): SettingsPageFieldErrors | null => {
   if (formFields) {
-    const blankStr = 'May not be blank';
     const { certAgeThreshold, certExpirationThreshold, heartbeatIndices } = formFields;
-    const heartbeatIndErr = heartbeatIndices.match(/^\S+$/) ? '' : blankStr;
-    const expirationThresholdError = certExpirationThreshold ? null : blankStr;
-    const ageThresholdError = certAgeThreshold ? null : blankStr;
+
+    const indError = heartbeatIndices.match(/^\S+$/) ? '' : Translations.BLANK_STR;
+
+    const expError = isValidCertVal(certExpirationThreshold);
+    const ageError = isValidCertVal(certAgeThreshold);
+
     return {
-      heartbeatIndices: heartbeatIndErr,
-      certificatesThresholds:
-        expirationThresholdError || ageThresholdError
-          ? {
-              expirationThresholdError,
-              ageThresholdError,
-            }
-          : null,
+      heartbeatIndices: indError,
+      expirationThresholdError: expError,
+      ageThresholdError: ageError,
     };
   }
   return null;

x-pack/plugins/uptime/public/pages/translations.ts

@@ -36,3 +36,11 @@ export const settings = {
     defaultMessage: 'Return to overview',
   }),
 };
+
+export const BLANK_STR = i18n.translate('xpack.uptime.settings.blank.error', {
+  defaultMessage: 'May not be blank.',
+});
+
+export const VALID_STR = i18n.translate('xpack.uptime.settings.invalid.error', {
+  defaultMessage: 'Not a valid value.',
+});