Add targets to packs (#831)

* Allow form field values to be an array

* Send the server host and label ids on create

* Get and display the targets in a pack

* Adds target_type to labels and hosts

* Allow updating a pack’s targets as well as name and description

* Adds select targets dropdown to edit pack page

* Adds targets to dropdown when pack is edited

frontend/components/forms/packs/EditPackForm/EditPackForm.jsx

@@ -4,8 +4,9 @@ import Button from 'components/buttons/Button';
 import Form from 'components/forms/Form';
 import formFieldInterface from 'interfaces/form_field';
 import InputField from 'components/forms/fields/InputField';
+import SelectTargetsDropdown from 'components/forms/fields/SelectTargetsDropdown';
 
-const fieldNames = ['description', 'name'];
+const fieldNames = ['description', 'name', 'targets'];
 
 class EditPackForm extends Component {
   static propTypes = {
@@ -13,13 +14,23 @@ class EditPackForm extends Component {
     fields: PropTypes.shape({
       description: formFieldInterface.isRequired,
       name: formFieldInterface.isRequired,
+      targets: formFieldInterface.isRequired,
     }).isRequired,
     handleSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
+    onFetchTargets: PropTypes.func,
+    targetsCount: PropTypes.number,
   };
 
   render () {
-    const { className, fields, handleSubmit, onCancel } = this.props;
+    const {
+      className,
+      fields,
+      handleSubmit,
+      onCancel,
+      onFetchTargets,
+      targetsCount,
+    } = this.props;
 
     return (
       <form className={className} onSubmit={handleSubmit}>
@@ -29,6 +40,15 @@ class EditPackForm extends Component {
         <InputField
           {...fields.description}
         />
+        <SelectTargetsDropdown
+          {...fields.targets}
+          label="select pack targets"
+          name="selected-pack-targets"
+          onFetchTargets={onFetchTargets}
+          onSelect={fields.targets.onChange}
+          selectedTargets={fields.targets.value}
+          targetsCount={targetsCount}
+        />
         <Button onClick={onCancel} type="button" variant="inverse">CANCEL</Button>
         <Button type="submit" variant="brand">SAVE</Button>
       </form>