added Configuration Tags field in Collector Configuration page

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({
               <HelpBlock>Choose a color to use for this configuration.</HelpBlock>
             </FormGroup>
 
+            <FormGroup controlId="tags">
+              <ControlLabel>Configuration Tags</ControlLabel>
+              <div>
+                <ConfigurationTagsSelect id="tags"
+                                         ref="tags"
+                                         availableTags={formData.tags.map((tag) => ({ name: tag }))}
+                                         tags={formData.tags}
+                                         onChange={this._onTagsChange}
+                                         className="form-control" />
+              </div>
+              <HelpBlock>Choose tags to use for this configuration.</HelpBlock>
+            </FormGroup>
+
             <FormGroup controlId="collector_id">
               <ControlLabel>Collector</ControlLabel>
               {this._renderCollectorTypeField(formData.collector_id, collectors, configurationSidecars)}

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
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+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 (
+      <MultiSelect ref="select"
+                   options={tagsOptions}
+                   value={tagsValue}
+                   onChange={this.props.onChange}
+                   placeholder="Choose tags..."
+                   allowCreate />
+    );
+  }
+}
+
+export default ConfigurationTagsSelect;