Icu 11804 filter targets by type (#2063)

* feat: 🎸 filter targets by type

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11804

* refactor: 💡 remove console.log

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11804

* docs: ✏️ fix comment typo

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11804

ui/desktop/app/controllers/scopes/scope/projects/sessions/index.js

@@ -56,7 +56,7 @@ export default class ScopesScopeProjectsSessionsIndexController extends Controll
 
   /**
    * Returns all status types for sessions
-   * @returns {[string]}
+   * @returns {[object]}
    */
   get sessionStatusOptions() {
     return statusTypes.map((status) => ({
@@ -78,10 +78,23 @@ export default class ScopesScopeProjectsSessionsIndexController extends Controll
     );
   }
 
+  /**
+   * Returns object of filters to be used for displaying selected filters
+   * @returns {object}
+   */
+  get filters() {
+    return {
+      targets: this.availableTargets,
+      status: this.sessionStatusOptions,
+      scopes: this.availableScopes,
+    };
+  }
+
   /**
    * Sets the query params to value of selectedItems
    * to trigger a query and closes the dropdown
-   * @param {object} selectedTargets
+   * @param {string} filter
+   * @param {object} selectedItems
    */
   @action
   applyFilter(filter, selectedItems) {

ui/desktop/app/controllers/scopes/scope/projects/targets/index.js

@@ -11,6 +11,7 @@ import { tracked } from '@glimmer/tracking';
 import { debounce } from 'core/decorators/debounce';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
 import orderBy from 'lodash/orderBy';
+import { TYPES_TARGET } from 'api/models/target';
 import {
   STATUS_SESSION_ACTIVE,
   STATUS_SESSION_PENDING,
@@ -33,6 +34,7 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
     'search',
     { scopes: { type: 'array' } },
     { availableSessions: { type: 'array' } },
+    { types: { type: 'array' } },
     'page',
     'pageSize',
   ];
@@ -40,6 +42,7 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
   @tracked search;
   @tracked scopes = [];
   @tracked availableSessions = [];
+  @tracked types = [];
   @tracked page = 1;
   @tracked pageSize = 10;
   @tracked selectedTarget;
@@ -48,7 +51,9 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
 
   get showFilters() {
     return (
-      this.model.targets.length || this.search || this.availableSessions.length
+      this.model.allTargets.length ||
+      this.search ||
+      this.availableSessions.length
     );
   }
 
@@ -135,12 +140,23 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
    */
   get filters() {
     return {
-      scopes: this.model.projects,
+      scopes: this.availableScopes,
       availableSessions: this.availableSessionOptions,
-      type: [],
+      types: this.targetTypeOptions,
     };
   }
 
+  /**
+   * Returns all target types
+   * @returns {[object]}
+   */
+  get targetTypeOptions() {
+    return TYPES_TARGET.map((type) => ({
+      id: type,
+      name: this.intl.t(`resources.target.types.${type}`),
+    }));
+  }
+
   // =methods
 
   /**

ui/desktop/app/routes/scopes/scope/projects/targets/index.js

@@ -35,6 +35,10 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
       refreshModel: true,
       replace: true,
     },
+    types: {
+      refreshModel: true,
+      replace: true,
+    },
     page: {
       refreshModel: true,
     },
@@ -61,15 +65,18 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
    * @returns {Promise<{totalItems: number, targets: [TargetModel], projects: [ScopeModel], allTargets: [TargetModel] }> }
    */
   async model(
-    { search, scopes, availableSessions, page, pageSize },
+    { search, scopes, availableSessions, types, page, pageSize },
     transition,
   ) {
     await this.getAllTargets(transition);
 
-    const filters = { scope_id: [], id: { values: [] } };
+    const filters = { scope_id: [], id: { values: [] }, type: [] };
     scopes.forEach((scope) => {
       filters.scope_id.push({ equals: scope });
     });
+    types.forEach((type) => {
+      filters.type.push({ equals: type });
+    });
 
     // Retrieve all sessions so that the session and activeSessions getters
     // in the target model always retrieve the most up-to-date sessions.

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

@@ -63,6 +63,7 @@
           </Dropdown>
         </S.Generic>
       </Hds::SegmentedGroup>
+      <FilterTags @filters={{this.filters}} />
       {{#if @model.sessions}}
         <Hds::Table
           @model={{this.sortedSessions}}

ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs

@@ -23,6 +23,22 @@
           aria-label={{t 'actions.search'}}
           {{on 'input' this.handleSearchInput}}
         />
+        <S.Generic>
+          <Dropdown
+            @name={{t 'resources.target.titles.active-sessions'}}
+            @itemOptions={{this.availableSessionOptions}}
+            @checkedItems={{this.availableSessions}}
+            @applyFilter={{fn this.applyFilter 'availableSessions'}}
+          />
+        </S.Generic>
+        <S.Generic>
+          <Dropdown
+            @name={{t 'form.type.label'}}
+            @itemOptions={{this.targetTypeOptions}}
+            @checkedItems={{this.types}}
+            @applyFilter={{fn this.applyFilter 'types'}}
+          />
+        </S.Generic>
         <S.Generic>
           <Dropdown
             @name={{t 'resources.scope.title'}}
@@ -52,15 +68,6 @@
             {{/let}}
           </Dropdown>
         </S.Generic>
-        <S.Generic>
-          <Dropdown
-            @name={{t 'resources.target.titles.active-sessions'}}
-            @itemOptions={{this.availableSessionOptions}}
-            @checkedItems={{this.availableSessions}}
-            @applyFilter={{fn this.applyFilter 'availableSessions'}}
-          />
-        </S.Generic>
-        {{! TODO: Target type filter}}
       </Hds::SegmentedGroup>
       <FilterTags @filters={{this.filters}} />
       {{#if @model.targets}}