consul/ui/packages/consul-ui/app/templates/dc/services/index.hbs

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<Route
  @name={{routeName}}
as |route|>

  <DataLoader @src={{
    uri '/${partition}/${nspace}/${dc}/services'
      (hash
        partition=route.params.partition
        nspace=route.params.nspace
        dc=route.params.dc
      )
  }} as |api|>

    <BlockSlot @name="error">
      <AppError
        @error={{api.error}}
        @login={{route.model.app.login.open}}
      />
    </BlockSlot>

    <BlockSlot @name="loaded">

{{#let

  (hash
    value=(or sortBy "Status:asc")
    change=(action (mut sortBy) value="target.selected")
  )

  (hash
    status=(hash
      value=(if status (split status ',') undefined)
      change=(action (mut status) value="target.selectedItems")
    )
    kind=(hash
      value=(if kind (split kind ',') undefined)
      change=(action (mut kind) value="target.selectedItems")
    )
    source=(hash
      value=(if source (split source ',') undefined)
      change=(action (mut source) value="target.selectedItems")
    )
    searchproperty=(hash
      value=(if (not-eq searchproperty undefined)
        (split searchproperty ',')
        this._searchProperties
      )
      change=(action (mut searchproperty) value="target.selectedItems")
      default=this._searchProperties
    )

  )

  (reject-by 'Kind' 'connect-proxy' api.data)

  (or route.params.partition route.model.user.token.Partition 'default')
  (or route.params.nspace route.model.user.token.Namespace 'default')

as |sort filters items partition nspace|}}

  <AppView>
    <BlockSlot @name="header">
        <h1>
          <route.Title @title="Services" /> <em>{{format-number items.length}} total</em>
        </h1>
        <label for="toolbar-toggle"></label>
    </BlockSlot>
    <BlockSlot @name="toolbar">
{{#if (gt items.length 0) }}
  {{#let (collection items) as |items|}}
        <Consul::Service::SearchBar
          @sources={{get items 'ExternalSources'}}
          @partitions={{get items 'Partitions'}}
          @partition={{partition}}

          @search={{search}}
          @onsearch={{action (mut search) value="target.value"}}

          @sort={{sort}}

          @filter={{filters}}

        />
  {{/let}}
{{/if}}
    </BlockSlot>
    <BlockSlot @name="content">
      <DataCollection
        @type="service"
        @sort={{sort.value}}
        @filters={{filters}}
        @search={{search}}
        @items={{items}}
      as |collection|>
        <collection.Collection>
          <Consul::Service::List
            @items={{collection.items}}
            @partition={{partition}}
          >
          </Consul::Service::List>
        </collection.Collection>
        <collection.Empty>
            <EmptyState
              @login={{route.model.app.login.open}}
            >
              <BlockSlot @name="header">
                <h2>
                  {{t 'routes.dc.services.index.empty.header'
                    items=items.length
                  }}
                </h2>
              </BlockSlot>
              <BlockSlot @name="body">
                {{t 'routes.dc.services.index.empty.body'
                  items=items.length
                  canUseACLs=(can "use acls")
                  htmlSafe=true
                }}
              </BlockSlot>
              <BlockSlot @name="actions">
                <li>
                  <Hds::Link::Standalone
                    @text='Documentation on Services'
                    @href="{{env 'CONSUL_DOCS_URL'}}/commands/services"
                    @icon='docs-link'
                    @iconPosition='trailing'
                    @size='small'
                  />
                </li>
                <li>
                  <Hds::Link::Standalone
                    @text='Take the tutorial'
                    @href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/services"
                    @icon='learn-link'
                    @iconPosition='trailing'
                    @size='small'
                  />
                </li>
              </BlockSlot>
            </EmptyState>
          </collection.Empty>
        </DataCollection>
    </BlockSlot>

  </AppView>

{{/let}}

    </BlockSlot>
  </DataLoader>
</Route>