app/views/data_interactive/_filter.html.erb
<div data-bind='foreach: filter'>
<div class="row bordered top-buffer padding-around">
<form class="form-horizontal">
<!-- ko if: filter_type == 'string' -->
<div class="form-group">
<label class="col-md-2 control-label" for="key">Key</label>
<div class="col-sm-4">
<input class="form-control" data-bind='value: key'></input>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="values">Values</label>
<div class="col-sm-4">
<div data-bind="foreach: list">
<input class="form-control input-short" data-bind="value: $parent.list()[$index()]"></input>
<button type="button" class="btn btn-link remove-item" data-bind='click: $root.deleteListItemFromFilter.bind($data, $parent, $index())'>-</button>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-2">
<button type="button" class="btn btn-link" data-bind='click: $root.addListItemToFilter'><span class="add-item">+</span>Add Value</button>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2">
<input type='checkbox' data-bind='checked: remove'></input>
<label class="control-label" for="remove">Remove events that match this</label>
</div>
</div>
<!-- /ko -->
<!-- ko if: filter_type == 'time' -->
<div class="form-group">
<label class="col-md-2 control-label" for="key">Key</label>
<div class="col-sm-4">
<input class="form-control" data-bind='value: key'></input>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="start_time">Start Time</label>
<div class="col-sm-4">
<input type="datetime-local" class="form-control" data-bind='value: start_time'></input>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="end_time">End Time</label>
<div class="col-sm-4">
<input type="datetime-local" class="form-control" data-bind='value: end_time'></input>
</div>
</div>
<!-- /ko -->
<div class="form-group">
<div class="col-md-4 col-md-offset-2">
<button class="btn btn-danger" data-bind='click: $root.removeFilterInstance'>Delete Filter</button>
</div>
</div>
</form>
</div>
</div>
<br>
<button class="btn btn-primary" data-bind='click: $root.addStringFilterInstanceToFilter'>Add String Filter</button>
<button class="btn btn-primary" data-bind='click: $root.addTimeFilterInstanceToFilter'>Add Time Filter</button>
<div class="row padding-around">
<h4>For the following keys, filter out events that don't have values:</h4>
<form class="form">
<div class="form-group">
<div data-bind="foreach: filter_having_keys().keys_list">
<input class="form-control input-short" data-bind="value: $parent.filter_having_keys().keys_list()[$index()]"></input><button type="button" class="btn btn-link remove-item" data-bind='click: $root.deleteKeyFromFilterHavingKeys.bind($data, $index())'>-</button>
</div>
</div>
<button class="btn btn-primary" data-bind='click: $root.addKeyToFilterHavingKeys'>Add Key</button>
</form>
</div>