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

{{title 'Intentions'}}
<DataLoader @src={{concat '/' nspace '/' dc '/intentions'}} as |api|>

  <BlockSlot @name="error">
    <AppError @error={{api.error}} />
  </BlockSlot>

  <BlockSlot @name="loaded">

      {{#let (selectable-key-values
          (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: Asc")
          (array "Precedence:desc" "Precedence: Desc")
            selected=sortBy
        )
        as |sort|
      }}

      <AppView @class="intention list">
        <BlockSlot @name="header">
            <h1>
                Intentions <em>{{format-number api.data.length}} total</em>
            </h1>
            <label for="toolbar-toggle"></label>
        </BlockSlot>
        <BlockSlot @name="actions">
            <a data-test-create href="{{href-to 'dc.intentions.create'}}" class="type-create">Create</a>
        </BlockSlot>
        <BlockSlot @name="toolbar">
    {{#if (gt api.data.length 0) }}
          <SearchBar
            data-test-intention-filter="true"
            @value={{search}}
            @onsearch={{action (mut search) value="target.value"}}
            @secondary="sort"
            @selected={{sort.selected}}
            @options={{sort.items}}
            @onchange={{action (mut sortBy) value='target.selected.key'}}
          />
    {{/if}}
        </BlockSlot>
        <BlockSlot @name="content">
          {{#let (sort-by (comparator 'intention' sort.selected.key) api.data) as |sorted|}}
            <ChangeableSet @dispatcher={{searchable 'intention' sorted}} @terms={{search}}>
              <BlockSlot @name="content" as |filtered|>
                <ConsulIntentionList
                  @items={{filtered}}
                  @ondelete={{refresh-route}}
                  >
                    <EmptyState @allowLogin={{true}}>
                      <BlockSlot @name="header">
                        <h2>
                          {{#if (gt api.data.length 0)}}
                            No intentions found
                          {{else}}
                            Welcome to Intentions
                          {{/if}}
                        </h2>
                      </BlockSlot>
                      <BlockSlot @name="body">
                        <p>
                          {{#if (gt api.data.length 0)}}
                            No intentions where found matching that search, or you may not have access to view the intentions you are searching for.
                          {{else}}
                            There don't seem to be any intentions, or you may not have access to view intentions yet.
                          {{/if}}
                        </p>
                      </BlockSlot>
                      <BlockSlot @name="actions">
                        <li class="docs-link">
                          <a href="{{env 'CONSUL_DOCS_URL'}}/commands/intention" rel="noopener noreferrer" target="_blank">Documentation on intentions</a>
                        </li>
                        <li class="learn-link">
                          <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/connect" rel="noopener noreferrer" target="_blank">Read the guide</a>
                        </li>
                      </BlockSlot>
                    </EmptyState>
                </ConsulIntentionList>
              </BlockSlot>
            </ChangeableSet>
          {{/let}}
          </BlockSlot>
        </AppView>
      {{/let}}
  </BlockSlot>
</DataLoader>