consul/ui-v2/app/templates/dc/services/show/intentions/index.hbs

<DataLoader @src={{concat '/' nspace '/' dc '/intentions/for-service/' slug}} as |api|>
  <BlockSlot @name="error">
    <ErrorState @error={{api.error}} />
  </BlockSlot>
  <BlockSlot @name="loaded">
    {{#let (or sortBy "Action:asc") as |sort|}}
        <div id="intentions" class="tab-section">
          <div role="tabpanel">
            <Portal @target="app-view-actions">
              <a data-test-create href={{href-to 'dc.services.show.intentions.create'}} class="type-create">Create</a>
            </Portal>
      {{#if (gt api.data.length 0) }}
          <SearchBar
            @value={{search}}
            @onsearch={{action (mut search) value="target.value"}}
            class="with-sort"
          >
            <BlockSlot @name="secondary">
              <PopoverSelect
                @position="right"
                @onchange={{action (mut sortBy) value='target.selected'}}
                @multiple={{false}}
              as |components|>
                <BlockSlot @name="selected">
                  <span>
                    {{#let (from-entries (array
                        (array "Action:asc" "Allow to Deny")
                        (array "Action:desc" "Deny to Allow")
                        (array "SourceName:asc" "Source: A to Z")
                        (array "SourceName:desc" "Source: Z to A")
                        (array "DestinationName:asc" "Destination: A to Z")
                        (array "DestinationName:desc" "Destination: Z to A")
                        (array "Precedence:asc" "Precedence: Ascending")
                        (array "Precedence:desc" "Precedence: Descending")
                        ))
                      as |selectable|
                    }}
                      {{get selectable sort}}
                    {{/let}}
                  </span>
                </BlockSlot>
                <BlockSlot @name="options">
    {{#let components.Optgroup components.Option as |Optgroup Option|}}
                  <Optgroup @label="Permission">
                    <Option @value="Action:asc" @selected={{eq "Action:asc" sort}}>Allow to Deny</Option>
                    <Option @value="Action:desc" @selected={{eq "Action:desc" sort}}>Deny to Allow</Option>
                  </Optgroup>
                  <Optgroup @label="Source">
                    <Option @value="SourceName:asc" @selected={{eq "SourceName:asc" sort}}>A to Z</Option>
                    <Option @value="SourceName:desc" @selected={{eq "SourceName:desc" sort}}>Z to A</Option>
                  </Optgroup>
                  <Optgroup @label="Destination">
                    <Option @value="DestinationName:asc" @selected={{eq "DestinationName:asc" sort}}>A to Z</Option>
                    <Option @value="DestinationName:desc" @selected={{eq "DestinationName:desc" sort}}>Z to A</Option>
                  </Optgroup>
                  <Optgroup @label="Precedence">
                    <Option @value="Precedence:asc" @selected={{eq "Precedence:asc" sort}}>Ascending</Option>
                    <Option @value="Precedence:desc" @selected={{eq "Precedence:desc" sort}}>Descending</Option>
                  </Optgroup>
    {{/let}}
                </BlockSlot>
              </PopoverSelect>
            </BlockSlot>
          </SearchBar>
      {{/if}}
          {{#let (sort-by (comparator 'intention' sort) api.data) as |sorted|}}
            <ChangeableSet @dispatcher={{searchable 'intention' sorted}} @terms={{search}}>
              <BlockSlot @name="content" as |filtered|>
                <ConsulIntentionList
                  @items={{filtered}}
                  @ondelete={{refresh-route}}
                  @routeName="dc.services.show.intentions.edit"
                  >
                  <EmptyState>
                    <BlockSlot @name="body">
                      <p>
                          There are no intentions {{if (gt intentions.length 0) 'found '}} for this service.
                      </p>
                    </BlockSlot>
                  </EmptyState>
                </ConsulIntentionList>
              </BlockSlot>
            </ChangeableSet>
          {{/let}}
          </div>
        </div>
      {{/let}}
  </BlockSlot>
</DataLoader>