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

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

    {{#let
      (t
        (concat 'components.consul.service.search-bar.' search.status.key)
        default=(array
          (concat 'common.search.' search.status.key) (concat 'common.consul.' search.status.key)
        )
      )
      (t
        (concat 'components.consul.service.search-bar.' 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'}}
    >
      <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.Optgroup components.Option as |Optgroup 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>
    </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 this.healthStates 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>
    <search.Select
      @position='left'
      @onchange={{action @filter.kind.change}}
      @multiple={{true}}
      as |components|
    >
      <BlockSlot @name='selected'>
        <span>
          {{t 'components.consul.service.search-bar.kind'}}
        </span>
      </BlockSlot>
      <BlockSlot @name='options'>
        {{#let components.Optgroup components.Option as |Optgroup Option|}}
          <Option @value='service' @selected={{includes 'service' @filter.kind.value}}>
            {{t 'common.consul.service'}}
          </Option>
          <Optgroup @label={{t 'common.consul.gateway'}}>
            {{#each (array 'ingress-gateway' 'terminating-gateway' 'mesh-gateway') as |kind|}}
              <Option @value={{kind}} @selected={{includes kind @filter.kind.value}}>
                {{t (concat 'common.consul.' kind)}}
              </Option>
            {{/each}}
          </Optgroup>
          <Optgroup @label={{t 'common.consul.mesh'}}>
            {{#each (array 'in-mesh' 'not-in-mesh') as |state|}}
              <Option @value={{state}} @selected={{includes state @filter.kind.value}}>
                {{t (concat 'common.search.' state)}}
              </Option>
            {{/each}}
          </Optgroup>
        {{/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={{this.sortedSources}}
        />
      </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 'common.consul.service-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>