Validate batch size to be a number on Kafka form submit

ui/src/kapacitor/components/config/KafkaConfig.tsx

@@ -5,6 +5,8 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 import {Notification, NotificationFunc} from 'src/types'
 
+import {notifyInvalidBatchSizeValue} from 'src/shared/copy/notifications'
+
 interface Properties {
   brokers: string[]
   timeout: string
@@ -216,10 +218,16 @@ class KafkaConfig extends PureComponent<Props, State> {
   private handleSubmit = async e => {
     e.preventDefault()
 
+    const batchSize = parseInt(this.batchSize.value, 10)
+    if (isNaN(batchSize)) {
+      this.props.notify(notifyInvalidBatchSizeValue())
+      return
+    }
+
     const properties = {
       brokers: this.state.currentBrokers,
       timeout: this.timeout.value,
-      'batch-size': parseInt(this.batchSize.value, 10),
+      'batch-size': batchSize,
       'batch-timeout': this.batchTimeout.value,
       'use-ssl': this.useSSL.checked,
       'ssl-ca': this.sslCA.value,

ui/src/shared/copy/notifications.js

@@ -536,6 +536,11 @@ export const notifyTestAlertFailed = (endpoint, errorMessage) => ({
   }`,
 })
 
+export const notifyInvalidBatchSizeValue = () => ({
+  ...defaultErrorNotification,
+  message: 'Batch Size cannot be empty.',
+})
+
 export const notifyKapacitorConnectionFailed = () => ({
   ...defaultErrorNotification,
   message:

ui/src/types/notifications.ts

@@ -0,0 +1,9 @@
+export interface Notification {
+  id?: string
+  type: string
+  icon: string
+  duration: number
+  message: string
+}
+
+export type NotificationFunc = () => Notification