diff --git a/client/src/components/Form/Form.jsx b/client/src/components/Form/Form.jsx index 71afd3570..24601e557 100644 --- a/client/src/components/Form/Form.jsx +++ b/client/src/components/Form/Form.jsx @@ -112,7 +112,7 @@ class Form extends Root { ); }; - renderJSONInput = (name, label, onChange, textMode, options) => { + renderJSONInput = (name, label, onChange, textMode, options, rest) => { const { formData, errors } = this.state; const inputMode = textMode ? "text" : (formData.schemaType === "PROTOBUF" ? "protobuf" : "json") return ( @@ -137,6 +137,7 @@ class Form extends Root { editorProps={{ $blockScrolling: true }} setOptions={options} style={{ width: '100%', minHeight: '25vh' }} + {...rest} /> {errors[name] &&
{errors[name]}
} @@ -241,7 +242,7 @@ class Form extends Root { ); }; - renderCheckbox = (name, label, isChecked, onChange, isDefaultChecked) => { + renderCheckbox = (name, label, isChecked, onChange, isDefaultChecked, rest) => { return ( ); }; diff --git a/client/src/containers/Topic/TopicProduce/TopicProduce.jsx b/client/src/containers/Topic/TopicProduce/TopicProduce.jsx index 61d863899..1850d5b0c 100644 --- a/client/src/containers/Topic/TopicProduce/TopicProduce.jsx +++ b/client/src/containers/Topic/TopicProduce/TopicProduce.jsx @@ -47,6 +47,7 @@ class TopicProduce extends Form { topics: [], topicsSearchValue: '', multiMessage: false, + tombstone: false, valuePlaceholder: '{"param": "value"}' }; @@ -157,12 +158,19 @@ class TopicProduce extends Form { selectedValueSchema, keySchema, valueSchema, - multiMessage + multiMessage, + tombstone } = this.state; const { clusterId } = this.props.match.params; let schemaKeyToSend = keySchema.find(key => key.subject === selectedKeySchema); let schemaValueToSend = valueSchema.find(value => value.subject === selectedValueSchema); + let value; + if (tombstone) { + value = null; + } else { + value = multiMessage ? formData.value : JSON.parse(JSON.stringify(formData.value)) + } const topic = { clusterId, topicId, @@ -170,7 +178,7 @@ class TopicProduce extends Form { partition: formData.partition, key: formData.key, timestamp: datetime.toISOString(), - value: multiMessage ? formData.value : JSON.parse(JSON.stringify(formData.value)), + value: value, keySchema: schemaKeyToSend ? schemaKeyToSend.id : '', valueSchema: schemaValueToSend ? schemaValueToSend.id : '', multiMessage: multiMessage, @@ -196,7 +204,7 @@ class TopicProduce extends Form { }); } - renderMultiMessage() { + renderMultiMessage(tombstone) { const { formData, multiMessage } = this.state; return ( @@ -211,7 +219,8 @@ class TopicProduce extends Form { this.setState({multiMessage: !multiMessage, valuePlaceholder: this.getPlaceholderValue(!multiMessage, formData.keyValueSeparator)}) }, - false + false, + { disabled: tombstone } )} @@ -236,6 +245,28 @@ class TopicProduce extends Form { ); } + renderTombstone(multiMessage) { + const { tombstone } = this.state; + + return ( +
+ +
+ {this.renderCheckbox( + 'isTombstone', + '', + tombstone, + () => { + this.setState({tombstone: !tombstone} ) + }, + false, + { disabled: multiMessage } + )} +
+
+ ); + } + getPlaceholderValue(isMultiMessage, keyValueSeparator) { if(isMultiMessage) { return 'key1' + keyValueSeparator + '{"param": "value1"}\n' @@ -403,7 +434,8 @@ class TopicProduce extends Form { valueSchema, valueSchemaSearchValue, selectedValueSchema, - multiMessage + multiMessage, + tombstone } = this.state; let date = moment(datetime); return ( @@ -472,7 +504,9 @@ class TopicProduce extends Form { ) )} - {this.renderMultiMessage()} + {this.renderMultiMessage(tombstone)} + + {this.renderTombstone(multiMessage)} {this.renderJSONInput('value', 'Value', value => { this.setState({ @@ -482,7 +516,8 @@ class TopicProduce extends Form { } })}, multiMessage, // true -> 'text' mode; json, protobuff, ... mode otherwise - { placeholder: this.getPlaceholderValue(multiMessage, formData.keyValueSeparator) } + { placeholder: this.getPlaceholderValue(multiMessage, formData.keyValueSeparator) }, + { readOnly: tombstone } )}