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 }
)}