Syslog host setting as ipv4 or hostname

interface/src/project/EMSESPSettingsForm.tsx

@@ -32,7 +32,7 @@ import {
   BlockFormControlLabel
 } from '../components';
 
-import { isIP, optional } from '../validators';
+import { isIPv4, optional, isHostname, or } from '../validators';
 
 import { EMSESPSettings } from './EMSESPtypes';
 
@@ -55,7 +55,10 @@ class EMSESPSettingsForm extends Component<EMSESPSettingsFormProps> {
   };
 
   componentDidMount() {
-    ValidatorForm.addValidationRule('isOptionalIP', optional(isIP));
+    ValidatorForm.addValidationRule(
+      'isOptionalIPorHost',
+      optional(or(isIPv4, isHostname))
+    );
   }
 
   changeBoardProfile = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -538,10 +541,10 @@ class EMSESPSettingsForm extends Component<EMSESPSettingsFormProps> {
           >
             <Grid item xs={5}>
               <TextValidator
-                validators={['isOptionalIP']}
-                errorMessages={['Not a valid IP address']}
+                validators={['isOptionalIPorHost']}
+                errorMessages={['Not a valid IPv4 address or hostname']}
                 name="syslog_host"
-                label="IP"
+                label="Host"
                 fullWidth
                 variant="outlined"
                 value={data.syslog_host}

interface/src/validators/index.ts

@@ -3,3 +3,4 @@ export { default as isIP } from './isIP';
 export { default as optional } from './optional';
 export { default as or } from './or';
 export { default as isPath } from './isPath';
+export { default as isIPv4 } from './isIPv4';

interface/src/validators/isIPv4.ts

@@ -0,0 +1,5 @@
+const ipv4AddressRegexp = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+
+export default function isIpv4(ipAddress: string) {
+  return ipv4AddressRegexp.test(ipAddress);
+}