diff --git a/graylog2-web-interface/src/components/sidecars/configuration-forms/ConfigurationForm.jsx b/graylog2-web-interface/src/components/sidecars/configuration-forms/ConfigurationForm.jsx index 55fab55a4a4a8..a447ea9030404 100644 --- a/graylog2-web-interface/src/components/sidecars/configuration-forms/ConfigurationForm.jsx +++ b/graylog2-web-interface/src/components/sidecars/configuration-forms/ConfigurationForm.jsx @@ -30,6 +30,7 @@ import { CollectorsActions, CollectorsStore } from 'stores/sidecars/CollectorsSt import SourceViewModal from './SourceViewModal'; import ImportsViewModal from './ImportsViewModal'; +import ConfigurationTagsSelect from './ConfigurationTagsSelect'; const ConfigurationForm = createReactClass({ displayName: 'ConfigurationForm', @@ -65,7 +66,7 @@ const ConfigurationForm = createReactClass({ color: configuration.color, collector_id: configuration.collector_id, template: configuration.template || '', - tags: configuration.tags + tags: configuration.tags || [] }, }; }, @@ -153,6 +154,12 @@ const ConfigurationForm = createReactClass({ this._formDataUpdate('name')(nextName); }, + _onTagsChange(nextTags) { + const nextTagsArray = nextTags.split(','); + + this._formDataUpdate('tags')(nextTagsArray); + }, + _getCollectorDefaultTemplate(collectorId) { const storedTemplate = this.defaultTemplates[collectorId]; @@ -324,6 +331,19 @@ const ConfigurationForm = createReactClass({ Choose a color to use for this configuration. + + Configuration Tags +
+ ({ name: tag }))} + tags={formData.tags} + onChange={this._onTagsChange} + className="form-control" /> +
+ Choose tags to use for this configuration. +
+ Collector {this._renderCollectorTypeField(formData.collector_id, collectors, configurationSidecars)} diff --git a/graylog2-web-interface/src/components/sidecars/configuration-forms/ConfigurationTagsSelect.jsx b/graylog2-web-interface/src/components/sidecars/configuration-forms/ConfigurationTagsSelect.jsx new file mode 100644 index 0000000000000..b0b674ffcf924 --- /dev/null +++ b/graylog2-web-interface/src/components/sidecars/configuration-forms/ConfigurationTagsSelect.jsx @@ -0,0 +1,53 @@ +/* + * Copyright (C) 2020 Graylog, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the Server Side Public License, version 1, + * as published by MongoDB, Inc. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * Server Side Public License for more details. + * + * You should have received a copy of the Server Side Public License + * along with this program. If not, see + * . + */ +import PropTypes from 'prop-types'; +import React from 'react'; + +import MultiSelect from 'components/common/MultiSelect'; + +class ConfigurationTagsSelect extends React.Component { + static propTypes = { + tags: PropTypes.arrayOf(PropTypes.string), + availableTags: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, + }; + + static defaultProps = { + tags: [], + }; + + getValue = () => { + return this.refs.select.getValue().split(','); + }; + + render() { + const tagsValue = this.props.tags.join(','); + const tagsOptions = this.props.availableTags.map((tag) => { + return { value: tag.name, label: tag.name }; + }); + return ( + + ); + } +} + +export default ConfigurationTagsSelect;