open-consul/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs

<SearchBar class='consul-service-instance-search-bar' ...attributes @filter={{@filter}}>
  <:status as |search|>

    {{#let
      (t
        (concat 'components.consul.service-instance.search-bar.' search.status.key '.name')
        default=(array
          (concat 'common.search.' search.status.key) (concat 'common.consul.' search.status.key)
        )
      )
      (t
        (concat
          'components.consul.service-instance.search-bar.'
          search.status.key
          '.options.'
          search.status.value
        )
        default=(array
          (concat 'common.search.' search.status.value)
          (concat 'common.consul.' search.status.value)
          (concat 'common.brand.' search.status.value)
        )
      )
      as |key value|
    }}
      <search.RemoveFilter aria-label={{t 'common.ui.remove' item=(concat key ' ' value)}}>
        <dl>
          <dt>{{key}}</dt>
          <dd>{{value}}</dd>
        </dl>
      </search.RemoveFilter>
    {{/let}}

  </:status>
  <:search as |search|>
    <search.Search
      @onsearch={{action @onsearch}}
      @value={{@search}}
      @placeholder={{t 'common.search.search'}}
    >
      {{#if @filter.searchproperty}}
        <search.Select
          class='type-search-properties'
          @position='right'
          @onchange={{action @filter.searchproperty.change}}
          @multiple={{true}}
          @required={{true}}
          as |components|
        >
          <BlockSlot @name='selected'>
            <span>
              {{t 'common.search.searchproperty'}}
            </span>
          </BlockSlot>
          <BlockSlot @name='options'>
            {{#let components.Option as |Option|}}
              {{#each @filter.searchproperty.default as |prop|}}
                <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                  {{t (concat 'common.consul.' (lowercase prop))}}
                </Option>
              {{/each}}
            {{/let}}
          </BlockSlot>
        </search.Select>
      {{/if}}
    </search.Search>
  </:search>
  <:filter as |search|>
    <search.Select
      class='type-status'
      @position='left'
      @onchange={{action @filter.status.change}}
      @multiple={{true}}
      as |components|
    >
      <BlockSlot @name='selected'>
        <span>
          {{t 'common.consul.status'}}
        </span>
      </BlockSlot>
      <BlockSlot @name='options'>
        {{#let components.Optgroup components.Option as |Optgroup Option|}}
          {{#each (array 'passing' 'warning' 'critical' 'empty') as |state|}}
            <Option
              class='value-{{state}}'
              @value={{state}}
              @selected={{includes state @filter.status.value}}
            >
              {{t (concat 'common.consul.' state) default=(array (concat 'common.search.' state))}}
            </Option>
          {{/each}}
        {{/let}}
      </BlockSlot>
    </search.Select>
    {{#if (gt @sources.length 0)}}
      <search.Select
        class='type-source'
        @position='left'
        @onchange={{action @filter.source.change}}
        @multiple={{true}}
        as |components|
      >
        <Consul::SourcesSelect
          @components={{components}}
          @filter={{@filter}}
          @sources={{@sources}}
        />
      </search.Select>
    {{/if}}
  </:filter>
  <:sort as |search|>
    <search.Select
      class='type-sort'
      data-test-sort-control
      @position='right'
      @onchange={{action @sort.change}}
      @multiple={{false}}
      @required={{true}}
      as |components|
    >
      <BlockSlot @name='selected'>
        <span>
          {{#let
            (from-entries
              (array
                (array 'Name:asc' (t 'common.sort.alpha.asc'))
                (array 'Name:desc' (t 'common.sort.alpha.desc'))
                (array 'Status:asc' (t 'common.sort.status.asc'))
                (array 'Status:desc' (t 'common.sort.status.desc'))
              )
            )
            as |selectable|
          }}
            {{get selectable @sort.value}}
          {{/let}}
        </span>
      </BlockSlot>
      <BlockSlot @name='options'>
        {{#let components.Optgroup components.Option as |Optgroup Option|}}
          <Optgroup @label={{t 'common.consul.status'}}>
            <Option @value='Status:asc' @selected={{eq 'Status:asc' @sort.value}}>{{t
                'common.sort.status.asc'
              }}</Option>
            <Option @value='Status:desc' @selected={{eq 'Status:desc' @sort.value}}>{{t
                'common.sort.status.desc'
              }}</Option>
          </Optgroup>
          <Optgroup @label={{t 'components.consul.service-instance.search-bar.sort.name.name'}}>
            <Option @value='Name:asc' @selected={{eq 'Name:asc' @sort.value}}>{{t
                'common.sort.alpha.asc'
              }}</Option>
            <Option @value='Name:desc' @selected={{eq 'Name:desc' @sort.value}}>{{t
                'common.sort.alpha.desc'
              }}</Option>
          </Optgroup>
        {{/let}}
      </BlockSlot>
    </search.Select>
  </:sort>
</SearchBar>