diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml
index 144ced636..49cd11a23 100644
--- a/addons/core/translations/actions/en-us.yaml
+++ b/addons/core/translations/actions/en-us.yaml
@@ -35,3 +35,5 @@ close: Close
toggle-secret: Toggle secret visibility
minimize: Minimize
fullscreen: Fullscreen
+filter:
+ status: status
diff --git a/addons/rose/addon/components/rose/toolbar/index.hbs b/addons/rose/addon/components/rose/toolbar/index.hbs
new file mode 100644
index 000000000..5f9a6388a
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/index.hbs
@@ -0,0 +1,6 @@
+
+ {{yield (hash
+ search=(component "rose/anonymous")
+ filter=(component "rose/anonymous" class="rose-toolbar-search")
+ )}}
+
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/toolbar/index.js b/addons/rose/addon/components/rose/toolbar/index.js
new file mode 100644
index 000000000..1ae2378ca
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/index.js
@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../utilities/component-auto-id';
+
+export default class RoseToolbarComponent extends Component {
+ // =attributes
+
+ id = generateComponentID();
+}
diff --git a/addons/rose/addon/components/rose/toolbar/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
new file mode 100644
index 000000000..042a7a96c
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+
+
+# Toolbar
+
+A toolbar component that allows two distinct sections to be configured: search, filter
+
+```htmlbars
+
+
+
+
+```
+
+
+ {{
+ template: hbs`
+
+ Search
+ Filter
+
+ `,
+ }}
+
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index dd936e77a..f8161a2c6 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -18,3 +18,4 @@
@import 'message';
@import 'link-button';
@import 'badge';
+@import 'toolbar';
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_index.scss b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
new file mode 100644
index 000000000..d75d0bd61
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
@@ -0,0 +1,9 @@
+.rose-toolbar {
+ background-color: #fbfbfc;
+ .rose-form {
+ display: flex;
+ }
+ .rose-dropdown {
+ margin-left: auto;
+ }
+}
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/addons/rose/app/components/rose/toolbar.js b/addons/rose/app/components/rose/toolbar.js
new file mode 100644
index 000000000..bfd066fe9
--- /dev/null
+++ b/addons/rose/app/components/rose/toolbar.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/toolbar';
diff --git a/addons/rose/tests/integration/components/rose/toolbar-test.js b/addons/rose/tests/integration/components/rose/toolbar-test.js
new file mode 100644
index 000000000..dbdd09da2
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/toolbar-test.js
@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/toolbar', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('div'));
+ assert.ok(find('.rose-toolbar'));
+ });
+
+ test('it renders with filter', async function (assert) {
+ await render(hbs`
+
+ `);
+ assert.ok(find('.rose-toolbar-search'));
+ });
+});
diff --git a/ui/admin/app/controllers/scopes/scope/sessions/index.js b/ui/admin/app/controllers/scopes/scope/sessions/index.js
new file mode 100644
index 000000000..15c3461a5
--- /dev/null
+++ b/ui/admin/app/controllers/scopes/scope/sessions/index.js
@@ -0,0 +1,13 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeSessionsController extends Controller {
+ // =services
+ @service store;
+
+ // =attributes
+
+ get availableSessions() {
+ return this.store.peekAll('session');
+ }
+}
diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
index 297c68a70..36f4d45cb 100644
--- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
@@ -15,7 +15,27 @@
{{#if @model}}
+
+
+
+
+ {{#each this.availableSessions as |session|}}
+
+
+
+ {{/each}}
+
+
+
+