threshold-ui/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs

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

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

  <page.header>
    <h2>
      {{t 'resources.session.title_plural'}}
      <DocLink @doc='sessions' @iconSize='large' />
    </h2>
    <p>{{t 'resources.session.description'}}</p>
  </page.header>

  <page.body>
    <Rose::Toolbar as |toolbar|>
      <toolbar.primary>
        <Rose::Form as |form|>
          {{#let
            (resource-filter 'scopes.scope.projects.sessions' 'status')
            as |filter|
          }}
            <Rose::Dropdown
              @text={{t (concat 'form.' filter.name '.label')}}
              @count={{filter.selectedValue.length}}
              @ignoreClickInside={{true}}
              as |dropdown|
            >
              <form.checkboxGroup
                @name={{filter.name}}
                @items={{filter.allowedValues}}
                @selectedItems={{filter.selectedValue}}
                @onChange={{route-action 'filterBy' filter.name}}
                as |group|
              >
                <dropdown.item>
                  <group.checkbox
                    @label={{t (concat 'resources.session.status.' group.item)}}
                    value={{group.item}}
                  />
                </dropdown.item>
              </form.checkboxGroup>
            </Rose::Dropdown>
          {{/let}}

          {{#let
            (resource-filter 'scopes.scope.projects.sessions' 'project')
            as |filter|
          }}
            <Rose::Dropdown
              @text={{t (concat 'resources.' filter.name '.title')}}
              @count={{filter.selectedValue.length}}
              @ignoreClickInside={{true}}
              as |dropdown|
            >
              <ul>
                {{#let
                  (group-by filter.allowedValues 'scopeModel')
                  as |groups|
                }}
                  {{#each groups as |groupedItems|}}
                    <li>
                      <dropdown.item>
                        <Rose::Icon
                          @name='flight-icons/svg/org-16'
                          @size='medium'
                        />
                        {{groupedItems.key.displayName}}
                      </dropdown.item>
                      <ul class='indent-label-2'>
                        <form.checkboxGroup
                          @name={{filter.name}}
                          @items={{groupedItems.items}}
                          @selectedItems={{filter.selectedValue}}
                          @onChange={{route-action 'filterBy' filter.name}}
                          as |group|
                        >
                          <li>
                            <dropdown.item>
                              <group.checkbox
                                @label={{group.item.displayName}}
                                value={{group.item}}
                              />
                            </dropdown.item>
                          </li>
                        </form.checkboxGroup>
                      </ul>
                    </li>
                  {{/each}}
                {{/let}}
              </ul>
            </Rose::Dropdown>
          {{/let}}

          {{#if
            (has-resource-filter-selections
              'scopes.scope.projects.sessions' 'status' 'project'
            )
          }}
            <Rose::Button
              @style='inline-link-action'
              @iconLeft='flight-icons/svg/x-16'
              {{on 'click' (route-action 'clearAllFilters')}}
            >{{t 'actions.clear-all-filters'}}
            </Rose::Button>
          {{/if}}
        </Rose::Form>
      </toolbar.primary>

      <toolbar.secondary>
        <ToolbarRefresher @onClick={{route-action 'refreshSessions'}} />
      </toolbar.secondary>

    </Rose::Toolbar>

    {{#if this.sorted}}
      <Rose::Table as |table|>
        <table.header as |header|>
          <header.row as |row|>
            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
            <row.headerCell>{{t 'resources.target.title'}}</row.headerCell>
            <row.headerCell>{{t 'form.proxy.label'}}</row.headerCell>
            <row.headerCell>{{t 'form.started.label'}}</row.headerCell>
            <row.headerCell>{{t 'form.status.label'}}</row.headerCell>
            <row.headerCell />
          </header.row>
        </table.header>
        <table.body as |body|>
          {{#each this.sorted as |model|}}
            <body.row as |row|>
              <row.headerCell class='nowrap'>
                <Rose::Icon
                  class={{concat 'session-status-' model.status}}
                  @name='flight-icons/svg/entry-point-16'
                  @size='medium'
                />
                <Copyable
                  @text={{model.id}}
                  @buttonText={{t 'actions.copy-to-clipboard'}}
                  @acknowledgeText={{t 'states.copied'}}
                >
                  <code>{{model.id}}</code>
                </Copyable>
              </row.headerCell>
              <row.cell>{{model.target.displayName}}</row.cell>
              <row.cell>
                {{!
                  Two if's here because:
                  1) Local proxy info is only relevant if the session is
                     active or pending (aka isCancelable).  Once the session
                     is canceled or in the process thereof, the local proxy
                     may no longer be used.
                  2) The session actually has proxy information associated
                     with it.  It's possible for the user to start sessions
                     from other devices (or even another tab), in which case we
                     won't have the local proxy info available here.
                }}
                {{#if model.isCancelable}}
                  {{#if model.proxy}}
                    <Copyable
                      @text={{model.proxy}}
                      @buttonText={{t 'actions.copy-to-clipboard'}}
                      @acknowledgeText={{t 'states.copied'}}
                    >
                      <code>{{model.proxy}}</code>
                    </Copyable>
                  {{/if}}
                {{/if}}
              </row.cell>
              <row.cell>
                <time datetime={{format-date-iso model.created_time}}>
                  {{format-date-iso-human model.created_time}}
                </time>
              </row.cell>
              <row.cell>
                <SessionStatus @model={{model}} />
              </row.cell>
              <row.cell>
                {{#if model.isCancelable}}
                  <Rose::Button
                    @style='secondary'
                    {{on 'click' (route-action 'cancelSession' model)}}
                  >
                    {{t 'actions.cancel'}}
                  </Rose::Button>
                {{/if}}
              </row.cell>
            </body.row>
          {{/each}}
        </table.body>
      </Rose::Table>
    {{else if (has-resource-filter-selections
      'scopes.scope.projects.sessions' 'status' 'project'
    )}}
      <Rose::Layout::Centered>
        <Rose::Message @title={{t 'titles.no-results'}} as |message|>
          <message.description>
            {{t 'descriptions.no-results'}}
          </message.description>
        </Rose::Message>
      </Rose::Layout::Centered>
    {{else}}
      <Rose::Layout::Centered>
        <Rose::Message
          @title={{t 'resources.session.messages.none-friendly.title'}}
          as |message|
        >
          <message.description>
            {{t 'resources.session.messages.none-friendly.description'}}
          </message.description>
        </Rose::Message>
      </Rose::Layout::Centered>
    {{/if}}
  </page.body>

</Rose::Layout::Page>