Closes #1510: Added ability to search by name when adding devices to …

…a cluster
netbox-community · Oct 11, 2017 · f253f16 · f253f16
1 parent abfe71b
commit f253f16
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/netbox/templates/virtualization/cluster_add_devices.html b/netbox/templates/virtualization/cluster_add_devices.html
@@ -20,11 +20,27 @@ <h3>{% block title %}Add Devices to Cluster {{ cluster }}{% endblock %}</h3>
                     </div>
                 {% endif %}
                 <div class="panel panel-default">
-                    <div class="panel-heading"><strong>Devices</strong></div>
+                    <div class="panel-heading"><strong>Device Selection</strong></div>
                     <div class="panel-body">
-                        {% render_field form.region %}
-                        {% render_field form.site %}
-                        {% render_field form.rack %}
+                        <ul class="nav nav-tabs" role="tablist">
+                            <li role="presentation" class="active"><a href="#search" aria-controls="search" role="tab" data-toggle="tab">Search</a></li>
+                            <li role="presentation"><a href="#select" aria-controls="home" role="tab" data-toggle="tab">Select</a></li>
+                        </ul>
+                        <div class="tab-content">
+                            <div class="tab-pane active" id="search">
+                                <div class="form-group">
+                                    <label class="col-md-3 control-label" for="id_search">Search</label>
+                                    <div class="col-md-9">
+                                        <input type="text" class="form-control" name="search" id="id_search" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tab-pane" id="select">
+                                {% render_field form.region %}
+                                {% render_field form.site %}
+                                {% render_field form.rack %}
+                            </div>
+                        </div>
                         {% render_field form.devices %}
                     </div>
                 </div>
@@ -40,5 +56,26 @@ <h3>{% block title %}Add Devices to Cluster {{ cluster }}{% endblock %}</h3>
 {% endblock %}
 
 {% block javascript %}
-    <script src="{% static 'js/livesearch.js' %}?v{{ settings.VERSION }}"></script>
+<script type="text/javascript">
+    $(document).ready(function() {
+        var device_list = $('#id_devices');
+        $('#id_search').autocomplete({
+            source: function(request, response) {
+                $.ajax({
+                    type: 'GET',
+                    url: netbox_api_path + 'dcim/devices/',
+                    data: 'q=' + request.term,
+                    beforeSend: function() {
+                        device_list.empty();
+                    },
+                    success: function(data) {
+                        response($.map(data.results, function(item) {
+                            device_list.append('<option value="' + item['id'] + '">' + item['display_name'] + '</option>');
+                        }));
+                    }
+                });
+            }
+        });
+    });
+</script>
 {% endblock %}
diff --git a/netbox/virtualization/forms.py b/netbox/virtualization/forms.py
@@ -186,7 +186,6 @@ class ClusterAddDevicesForm(BootstrapMixin, ChainedFieldsMixin, forms.Form):
             ('site', 'site'),
             ('rack', 'rack'),
         ),
-        label='Device',
         widget=APISelectMultiple(
             api_url='/api/dcim/devices/?site_id={{site}}&rack_id={{rack}}',
             display_field='display_name',