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

This commit is contained in:
Jeremy Stretch 2017-10-11 10:14:09 -04:00
parent abfe71bb04
commit f253f164a3
2 changed files with 42 additions and 6 deletions

View File

@ -20,11 +20,27 @@
</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 @@
{% 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 %}

View File

@ -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',