diff --git a/addons/core/addon/styles/addon.scss b/addons/core/addon/styles/addon.scss
index 445b3444f..1d0a09eb3 100644
--- a/addons/core/addon/styles/addon.scss
+++ b/addons/core/addon/styles/addon.scss
@@ -20,3 +20,30 @@
}
}
}
+
+// Search & Filtering
+.search-filtering {
+ .hds-application-state {
+ margin-top: 3rem;
+ }
+
+ .hds-segmented-group {
+ margin-bottom: 1rem;
+
+ .hds-dropdown-toggle-button__text {
+ white-space: nowrap;
+ }
+ }
+
+ .hds-table {
+ margin-bottom: 1rem;
+ }
+}
+
+// Flyout with table
+.flyout-with-table {
+ .copyable-content a,
+ button {
+ color: var(--token-color-foreground-primary);
+ }
+}
diff --git a/addons/core/translations/states/en-us.yaml b/addons/core/translations/states/en-us.yaml
index 94875ceb9..dad826358 100644
--- a/addons/core/translations/states/en-us.yaml
+++ b/addons/core/translations/states/en-us.yaml
@@ -14,3 +14,6 @@ active-public: Public
recording: Recording
completed: Completed
failed: Failed
+loading:
+ title: Loading all items...
+ description: All of your {resource} are still loading. Please wait while we finish loading everything on screen.
diff --git a/ui/desktop/app/routes/application.js b/ui/desktop/app/routes/application.js
index a59714532..8a17576f8 100644
--- a/ui/desktop/app/routes/application.js
+++ b/ui/desktop/app/routes/application.js
@@ -8,7 +8,6 @@ import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { A } from '@ember/array';
import { getOwner } from '@ember/application';
-import { loading } from 'ember-loading';
export default class ApplicationRoute extends Route {
// =services
@@ -78,17 +77,6 @@ export default class ApplicationRoute extends Route {
this.invalidateSession();
}
- /**
- * Hooks into ember-loading to kick off loading indicator in the
- * application template.
- * @return {boolean} always returns true
- */
- @action
- @loading
- loading() {
- return true;
- }
-
/**
* Invalidates the session if a 401 error occurs and returns false to
* prevent further error handling.
diff --git a/ui/desktop/app/routes/scopes/scope/projects/sessions/index.js b/ui/desktop/app/routes/scopes/scope/projects/sessions/index.js
index 1886f0c3e..8d9ff7283 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/sessions/index.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/sessions/index.js
@@ -5,6 +5,7 @@
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
export default class ScopesScopeProjectsSessionsIndexRoute extends Route {
// =services
@@ -40,6 +41,20 @@ export default class ScopesScopeProjectsSessionsIndexRoute extends Route {
// =methods
+ /**
+ * Event to determine whether the loading template should be shown.
+ * Only show the loading template during initial loads or when transitioning
+ * from different routes. Don't show it when a user is just searching or
+ * filtering on the same page as it can be jarring.
+ * @param transition
+ * @returns {boolean}
+ */
+ @action
+ loading(transition) {
+ const from = transition.from?.name;
+ return from !== 'scopes.scope.projects.sessions.index';
+ }
+
/**
* Loads queried sessions, the total number of sessions, all sessions,
* all targets and all projects for filtering options for the current user.
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 a906f422f..90fb82518 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
@@ -9,6 +9,7 @@ import {
STATUS_SESSION_ACTIVE,
STATUS_SESSION_PENDING,
} from 'api/models/session';
+import { action } from '@ember/object';
export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
// =services
@@ -51,6 +52,20 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
// =methods
+ /**
+ * Event to determine whether the loading template should be shown.
+ * Only show the loading template during initial loads or when transitioning
+ * from different routes. Don't show it when a user is just searching or
+ * filtering on the same page as it can be jarring.
+ * @param transition
+ * @returns {boolean}
+ */
+ @action
+ loading(transition) {
+ const from = transition.from?.name;
+ return from !== 'scopes.scope.projects.targets.index';
+ }
+
/**
* If arriving here unauthenticated, redirect to index for further processing.
*/
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 5bf35697a..ae411bc9e 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -684,30 +684,3 @@ $chevron-down: url("data:image/svg+xml;utf-8,
+
+
{{t 'resources.session.description'}}
+
+
+
+ {{outlet}}
+
+
\ No newline at end of file
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 488b89c5f..ca1ae794a 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
@@ -3,191 +3,175 @@
SPDX-License-Identifier: MPL-2.0
}}
-
-
-
-
- {{t 'resources.session.title_plural'}}
-
-
-
{{t 'resources.session.description'}}
-
-
-
- {{#if (or @model.sessions @model.allSessions)}}
-
-
-
-
-
-
-
-
-
- {{#let (group-by itemOptions 'scopeModel') as |orgs|}}
- {{#each orgs as |org|}}
-
-
- {{org.key.displayName}}
-
- {{#each org.items as |project|}}
-
- {{project.displayName}}
-
- {{/each}}
- {{/each}}
- {{/let}}
-
-
-
-
- {{#if @model.sessions}}
-
- <:body as |B|>
-
-
- {{#if B.data.isAvailable}}
-
-
-
- {{B.data.id}}
-
-
- {{else}}
-
-
- {{B.data.id}}
-
- {{/if}}
-
-
- {{B.data.target.displayName}}
-
- {{!
- Two if's here because:
- 1) Local proxy info is only relevant if the session is
- active or pending (aka isAvailable). 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 B.data.isAvailable}}
- {{#if B.data.proxy}}
-
- {{B.data.proxy}}
-
- {{/if}}
- {{/if}}
-
-
-
-
-
-
-
-
- {{#if (can 'cancel session' B.data)}}
-
- {{/if}}
-
-
-
-
-
- {{else}}
-
-
-
-
- {{/if}}
- {{else}}
-
-
-
-
- {{/if}}
-
-
-
\ No newline at end of file
+{{#if (or @model.sessions @model.allSessions)}}
+
+
+
+
+
+
+
+
+
+ {{#let (group-by itemOptions 'scopeModel') as |orgs|}}
+ {{#each orgs as |org|}}
+
+
+ {{org.key.displayName}}
+
+ {{#each org.items as |project|}}
+
+ {{project.displayName}}
+
+ {{/each}}
+ {{/each}}
+ {{/let}}
+
+
+
+
+ {{#if @model.sessions}}
+
+ <:body as |B|>
+
+
+ {{#if B.data.isAvailable}}
+
+
+
+ {{B.data.id}}
+
+
+ {{else}}
+
+
+ {{B.data.id}}
+
+ {{/if}}
+
+
+ {{B.data.target.displayName}}
+
+ {{!
+ Two if's here because:
+ 1) Local proxy info is only relevant if the session is
+ active or pending (aka isAvailable). 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 B.data.isAvailable}}
+ {{#if B.data.proxy}}
+
+ {{B.data.proxy}}
+
+ {{/if}}
+ {{/if}}
+
+
+
+
+
+
+
+
+ {{#if (can 'cancel session' B.data)}}
+
+ {{/if}}
+
+
+
+
+
+ {{else}}
+
+
+
+
+ {{/if}}
+{{else}}
+
+
+
+
+{{/if}}
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/loading.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/loading.hbs
new file mode 100644
index 000000000..bf2c7203e
--- /dev/null
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/loading.hbs
@@ -0,0 +1,9 @@
+
+
+
+
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
index 35b3fcba4..fc3bee4f4 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
@@ -5,4 +5,16 @@
{{page-title (t 'resources.target.title_plural')}}
-{{outlet}}
\ No newline at end of file
+
+
+