threshold-ui/ui/admin/app/templates/scopes/scope/workers/index.hbs

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

<Rose::Layout::Page as |page|>

  <page.header>
    <Hds::PageHeader as |PH|>
      <PH.Breadcrumb>
        <Breadcrumbs::Container />
      </PH.Breadcrumb>
      <PH.Title>
        {{t 'titles.workers'}}
        <DocLink @doc='worker' />
      </PH.Title>
      {{#if (can 'create worker led worker' this.scope collection='workers')}}
        <PH.Actions>
          {{#if @model}}
            <Hds::Button
              @route='scopes.scope.workers.new'
              @text={{t 'titles.new'}}
            />
          {{/if}}
        </PH.Actions>
      {{/if}}
    </Hds::PageHeader>
  </page.header>

  <page.body class='workers'>
    {{#if @model}}

      <div class='tags-list'>
        <Dropdown
          name='tags'
          @listPosition='bottom-left'
          @toggleText={{t 'form.tags.label'}}
          @itemOptions={{this.workerTagOptions}}
          @checkedItems={{this.tags}}
          @applyFilter={{fn this.applyFilter 'tags'}}
          @isGrouped={{true}}
          as |FD selectItem itemOptions|
        >
          {{#each-in (group-by 'key' itemOptions) as |key groupItems|}}
            <FD.Generic class='grouping'>
              <Hds::Icon @name='tag' @isInline={{true}} @color='faint' />
              <Hds::Text::Display
                @size='100'
                @weight='medium'
                @color='faint'
              >{{key}}</Hds::Text::Display>
            </FD.Generic>
            {{#each groupItems as |item|}}
              <FD.Checkbox
                class='indentation'
                @value={{item.id}}
                checked={{includes item.id this.tags}}
                {{on 'change' selectItem}}
              >
                {{item.name}}
              </FD.Checkbox>
            {{/each}}
          {{/each-in}}
        </Dropdown>
        <ToolbarRefresher @onClick={{this.refresh}} />
      </div>
      <FilterTags @filters={{this.filters}} />

      <Hds::Table
        @model={{@model}}
        @columns={{array
          (hash label=(t 'resources.worker.title'))
          (hash label=(t 'form.tags.label'))
          (hash label=(t 'resources.session.title_plural'))
          (hash label=(t 'resources.worker.table.release_version'))
          (hash label=(t 'resources.worker.table.ip_address'))
          (hash label=(t 'form.worker_last_seen.label'))
          (hash label=(t 'form.id.label'))
        }}
        @valign='middle'
      >
        <:body as |B|>
          <B.Tr>
            <B.Td>
              {{#if (and (can 'read worker' B.data) B.data.isPki)}}
                <LinkTo
                  @route='scopes.scope.workers.worker'
                  @model={{B.data.id}}
                >
                  {{B.data.displayName}}
                </LinkTo>
              {{else}}
                {{B.data.displayName}}
              {{/if}}
              {{#if B.data.description}}
                <Hds::Text::Body @tag='p'>
                  {{B.data.description}}
                </Hds::Text::Body>
              {{/if}}
            </B.Td>
            <B.Td>
              {{#if B.data.tagCount}}
                <Hds::Button
                  data-test-worker-tags-flyout-button={{B.data.id}}
                  @icon='tag'
                  @text={{t
                    'resources.worker.table.tag_count'
                    tagCount=B.data.tagCount
                  }}
                  @color='tertiary'
                  @size='small'
                  {{on 'click' (fn this.selectWorker B.data)}}
                />
              {{/if}}
            </B.Td>
            <B.Td>{{B.data.active_connection_count}}</B.Td>
            <B.Td>{{B.data.release_version}}</B.Td>
            <B.Td>{{B.data.address}}</B.Td>
            <B.Td>
              <Hds::Text::Body><Hds::Time
                  @date={{B.data.last_status_time}}
                  @display='relative'
                /></Hds::Text::Body>
            </B.Td>
            <B.Td>
              <Hds::Copy::Snippet
                @textToCopy={{B.data.id}}
                @color='secondary'
              />
            </B.Td>
          </B.Tr>
        </:body>
      </Hds::Table>

      {{#if this.selectedWorker}}
        <Hds::Flyout
          data-test-worker-tags-flyout
          @onClose={{fn this.selectWorker null}}
          as |M|
        >
          <M.Header>
            {{t
              'resources.worker.flyout.title'
              workerName=this.selectedWorker.displayName
            }}
          </M.Header>
          <M.Body>
            <Hds::Table
              @model={{this.selectedWorkerTags}}
              @columns={{array
                (hash label=(t 'resources.worker.table.tag'))
                (hash label=(t 'resources.worker.table.type'))
              }}
              @valign='middle'
            >
              <:body as |B|>
                <B.Tr>
                  <B.Td>
                    <Hds::Text::Code class='tag-shortener'>
                      {{this.tagDisplayName B.data}}
                    </Hds::Text::Code>
                  </B.Td>
                  <B.Td>
                    <Hds::Badge @text={{B.data.type}} />
                  </B.Td>
                </B.Tr>
              </:body>
            </Hds::Table>
            {{#if (gt this.selectedWorker.allTags.length 10)}}
              <div class='view-more-tags'>
                <Hds::Link::Standalone
                  @icon='arrow-right'
                  @iconPosition='trailing'
                  @text={{t 'resources.worker.flyout.action.view_more'}}
                  @route='scopes.scope.workers.worker.tags'
                  @model={{this.selectedWorker}}
                />
              </div>
            {{/if}}
          </M.Body>
        </Hds::Flyout>
      {{/if}}
    {{else}}
      <Rose::Layout::Centered>
        <Hds::ApplicationState as |A|>
          <A.Header @title={{t 'resources.worker.messages.welcome.title'}} />
          <A.Body @text={{this.messageDescription}} />
          {{#if
            (can 'create worker led worker' this.scope collection='workers')
          }}
            <A.Footer as |F|>
              <F.LinkStandalone
                @icon='plus-circle'
                @text={{t 'titles.new'}}
                @route='scopes.scope.workers.new'
              />
            </A.Footer>
          {{/if}}
        </Hds::ApplicationState>
      </Rose::Layout::Centered>
    {{/if}}

  </page.body>
</Rose::Layout::Page>