diff --git a/ui/desktop/app/controllers/scopes/scope/projects/sessions/index.js b/ui/desktop/app/controllers/scopes/scope/projects/sessions/index.js index 0ff59a558..2da6ad914 100644 --- a/ui/desktop/app/controllers/scopes/scope/projects/sessions/index.js +++ b/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) { diff --git a/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js b/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js index 68eec0def..43c93d03c 100644 --- a/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js +++ b/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 /** diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js b/ui/desktop/app/routes/scopes/scope/projects/targets/index.js index 120aeb456..a906f422f 100644 --- a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js +++ b/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. diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs index ae6c896a6..488b89c5f 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs @@ -63,6 +63,7 @@ + {{#if @model.sessions}} + + + + + + - - - - {{! TODO: Target type filter}} {{#if @model.targets}}