Merge pull request #857 from hashicorp/feature-sessions-admin-filters

Feature sessions admin filters

addons/core/translations/resources/en-us.yaml

@@ -135,6 +135,11 @@ session:
   title_plural: Sessions
   active_plural: Active Sessions
   description: A session is a connection to a target initiated through Boundary.
+  status:
+    active: Active
+    pending: Pending
+    canceling: Canceling
+    terminated: Terminated
   messages:
     none:
       title: No Sessions

ui/admin/app/routes/scopes/scope/sessions.js

@@ -6,6 +6,7 @@ import { task, timeout } from 'ember-concurrency';
 import { A } from '@ember/array';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
 import config from '../../../config/environment';
+import { resourceFilterParam } from 'core/decorators/resource-filter-param';
 
 const POLL_TIMEOUT_SECONDS = config.sessionPollingTimeoutSeconds;
 
@@ -16,9 +17,12 @@ export default class ScopesScopeSessionsRoute extends Route {
   @service intl;
   @service notify;
   @service session;
+  @service resourceFilterStore;
 
   // =attributes
 
+  @resourceFilterParam(['active', 'pending', 'canceling', 'terminated']) status;
+
   /**
    * A simple Ember Concurrency-based polling task that refreshes the route
    * every POLL_TIMEOUT_SECONDS seconds.  This is necessary to display changes
@@ -53,7 +57,13 @@ export default class ScopesScopeSessionsRoute extends Route {
    */
   async model() {
     const { id: scope_id } = this.modelFor('scopes.scope');
-    const sessions = await this.store.query('session', { scope_id });
+    const { status } = this;
+    const sessions = await this.resourceFilterStore.queryBy(
+      'session',
+      { status },
+      { scope_id }
+    );
+
     const sessionAggregates = await all(
       sessions.map(session => hash({
         session,
@@ -109,4 +119,21 @@ export default class ScopesScopeSessionsRoute extends Route {
     await session.cancelSession();
   }
 
+   /**
+   * Sets the specified resource filter field to the specified value.
+   * @param {string} field
+   * @param value
+   */
+    @action
+    filterBy(field, value) {
+      this[field] = value;
+    }
+  
+    /**
+     * Clears and filter selections.
+     */
+    @action
+    clearAllFilters() {
+      this.status = [];
+    }
 }

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -13,21 +13,58 @@
   </page.header>
 
   <page.body>
-
-    {{#if @model}}
-      {{#if (feature-flag 'filter')}}
+    {{#if (feature-flag 'filter')}}
+      {{#if
+        (or
+          @model (has-resource-filter-param-selections 'scopes.scope.sessions')
+        )
+      }}
         <Rose::Toolbar>
-          <Rose::Form>
-            <section>
+          <Rose::Form as |form|>
+            {{#with
+              (resource-filter-param 'scopes.scope.sessions' 'status')
+              as |filter|
+            }}
               <Rose::Dropdown
-                @text={{t 'form.status.label'}}
+                @text={{t (concat 'form.' filter.name '.label')}}
+                @count={{filter.selectedValue.length}}
                 @ignoreClickInside={{true}}
-              />
-            </section>
+                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>
+            {{/with}}
+
+            {{#if
+              (has-resource-filter-param-selections 'scopes.scope.sessions')
+            }}
+              <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>
         </Rose::Toolbar>
       {{/if}}
-
+    {{/if}}
+    {{#if @model}}
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
@@ -99,8 +136,15 @@
         </table.body>
       </Rose::Table>
 
+    {{else if (has-resource-filter-param-selections 'scopes.scope.sessions')}}
+      <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.title'}}
@@ -111,9 +155,6 @@
           </message.description>
         </Rose::Message>
       </Rose::Layout::Centered>
-
     {{/if}}
-
   </page.body>
-
 </Rose::Layout::Page>