search.html

<div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2">
        <label for="resource_type">Terraform Version</label>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
        <label for="resource_type">Resource Type</label>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
        <label for="resource_id">Resource ID</label>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
        <label for="attribute_key">Attribute Key</label>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
        <label for="attribute_value">Attribute Value</label>
    </div>
</div>
<div class="row">
    <form class="form-inline" role="form">
        <div class="form-group col-xs-2 col-sm-2 col-md-2">
            <ui-select id="tf_version"
                       ng-model="$parent.tfVersion"
                       theme="bootstrap"
                       ng-disabled="disabled"
                       ng-change="doSearch()"
                       style="min-width: 200px;"
                       reset-search-input="false"
                       title="Terraform Version">
                <ui-select-match placeholder="Terraform Version" allow-clear="true">{{$parent.tfVersion}}</ui-select-match>
                <ui-select-choices repeat="k in tf_versions | filter: $select.search | orderBy">
                    {{k}}
                </ui-select-choices>
            </ui-select>
        </div>
        <div class="form-group col-xs-2 col-sm-2 col-md-2">
            <ui-select id="resource_type"
                       ng-model="$parent.resType"
                       theme="bootstrap"
                       ng-disabled="disabled"
                       ng-change="doSearch()"
                       style="min-width: 200px;"
                       reset-search-input="false"
                       title="Resource Type">
                <ui-select-match placeholder="Resource Type" allow-clear="true">{{$parent.resType}}</ui-select-match>
                <ui-select-choices repeat="k in resource_keys | filter: $select.search | orderBy">
                    {{k}}
                </ui-select-choices>
            </ui-select>
        </div>
        <div class="form-group col-xs-2 col-sm-2 col-md-2">
            <ui-select id="resource_id"
                       ng-model="$parent.resID"
                       theme="bootstrap"
                       ng-disabled="disabled"
                       ng-change="doSearch()"
                       style="min-width: 200px;"
                       reset-search-input="false"
                       title="Resource ID">
                <ui-select-match placeholder="Resource ID" allow-clear="true">{{$parent.resID}}</ui-select-match>
                <ui-select-choices repeat="k in resource_names | filter: $parent.resType | filter: $select.search | orderBy">
                    {{k}}
                </ui-select-choices>
            </ui-select>
        </div>
        <div class="form-group col-xs-2 col-sm-2 col-md-2">
            <ui-select id="attribute_key"
                       ng-model="$parent.attrKey"
                       theme="bootstrap"
                       ng-disabled="disabled"
                       ng-change="doSearch()"
                       style="min-width: 200px;"
                       reset-search-input="false"
                       title="Attribute Key">
                <ui-select-match placeholder="Attribute Key" allow-clear="true">{{$parent.attrKey}}</ui-select-match>
                <ui-select-choices
                    repeat="k in attribute_keys | filter: $select.search | orderBy"
                    refresh="refreshAttrKeys()"
                    refresh-delay="0">
                    {{k}}
                </ui-select-choices>
            </ui-select>
        </div>
        <div class="form-group col-xs-2 col-sm-2 col-md-2">
            <input id="attribute_value" type="text" class="form-control" placeholder="Attribute Value" ng-model="attrVal" ng-change="doSearch()" />
        </div>
        <button class="clear btn btn-warning" ng-click="clearForm()">Reset</button>
    </form>
</div>
<hr />

<label id="navigate" ng-show="results">
    <span class="glyphicon glyphicon-triangle-left" ng-click="doSearch(prevPage)" ng-show="prevPage"></span> {{startItems}}-{{itemsInPage}}/{{results.total}} <span class="glyphicon glyphicon-triangle-right" ng-click="doSearch(nextPage)" ng-show="nextPage"></span>
</label>

<div id="results">
    <table class="table table-border table-striped">
        <thead>
            <th></th>
            <th>
                Path
            </th>
            <th>
                TF Version
            </th>
            <th>
                Serial
            </th>
            <th>
                Module Path
            </th>
            <th>
                Resource ID
            </th>
            <th>
                Key
            </th>
            <th>
                Value
            </th>
        </thead>
        <tbody>
            <tr ng-repeat="r in results.results">
                <td><a href="state/{{r.path}}?versionid={{r.version_id}}#{{r.module_path}}.{{r.resource_name}}"><span class="glyphicon glyphicon-link" aria-hidden="true"></span></a></td>
                <td>{{r.path}}</td>
                <td>{{r.tf_version}}</td>
                <td>{{r.serial}}</td>
                <td>{{r.module_path}}</td>
                <td>{{r.resource_name}}</td>
                <td>{{r.attribute_key}}</td>
                <td class="attr-val">{{r.attribute_value}}</td>
            </tr>
        </tbody>
    </table>
</div>