From eba46e0d4d80f38d18ca3284b4fad1dcc659d53f Mon Sep 17 00:00:00 2001 From: Angel Garbarino Date: Fri, 11 Feb 2022 15:15:12 -0700 Subject: [PATCH] Some folder restructuring to help with route loading states (#14022) * initial reshuffle to use outlet and remove dashboard and index replace with higher level parent clients * loading * clean up * test clean up * clean up --- ui/app/components/clients/history.js | 6 +- ui/app/controllers/vault/cluster/clients.js | 3 + .../vault/cluster/clients/current.js | 3 + ui/app/router.js | 1 + .../cluster/{clients/index.js => clients.js} | 13 +- ui/app/routes/vault/cluster/clients/config.js | 13 - .../routes/vault/cluster/clients/current.js | 14 + .../routes/vault/cluster/clients/history.js | 41 +- .../templates/components/clients/history.hbs | 6 +- ui/app/templates/components/cluster-info.hbs | 2 +- .../cluster/clients.hbs} | 10 +- .../vault/cluster/clients/config.hbs | 5 +- .../vault/cluster/clients/current.hbs | 1 + .../vault/cluster/clients/history.hbs | 3 +- .../templates/vault/cluster/clients/index.hbs | 2 - ui/mirage/handlers/activity.js | 9750 +++++++++-------- .../components/clients-current-test.js | 1 - 17 files changed, 4925 insertions(+), 4949 deletions(-) create mode 100644 ui/app/controllers/vault/cluster/clients.js create mode 100644 ui/app/controllers/vault/cluster/clients/current.js rename ui/app/routes/vault/cluster/{clients/index.js => clients.js} (77%) create mode 100644 ui/app/routes/vault/cluster/clients/current.js rename ui/app/templates/{components/clients/dashboard.hbs => vault/cluster/clients.hbs} (77%) create mode 100644 ui/app/templates/vault/cluster/clients/current.hbs delete mode 100644 ui/app/templates/vault/cluster/clients/index.hbs diff --git a/ui/app/components/clients/history.js b/ui/app/components/clients/history.js index f3ebb38e5..dd1770545 100644 --- a/ui/app/components/clients/history.js +++ b/ui/app/components/clients/history.js @@ -60,6 +60,7 @@ export default class History extends Component { // TEMPLATE MESSAGING @tracked noActivityDate = ''; @tracked responseRangeDiffMessage = null; + @tracked isLoadingQuery = false; // on init API response uses license start_date, getter updates when user queries dates get getActivityResponse() { @@ -140,7 +141,7 @@ export default class History extends Component { this.startTimeRequested = this.args.model.startTimeFromLicense; this.endTimeRequested = null; } - // clicked "Edit" Billing start month in Dashboard which opens a modal. + // clicked "Edit" Billing start month in History which opens a modal. if (dateType === 'startTime') { let monthIndex = this.arrayOfMonths.indexOf(month); this.startTimeRequested = [year.toString(), monthIndex]; // ['2021', 0] (e.g. January 2021) @@ -154,6 +155,7 @@ export default class History extends Component { } try { + this.isLoadingQuery = true; let response = await this.store.queryRecord('clients/activity', { start_time: this.startTimeRequested, end_time: this.endTimeRequested, @@ -183,6 +185,8 @@ export default class History extends Component { this.queriedActivityResponse = response; } catch (e) { return e; + } finally { + this.isLoadingQuery = false; } } diff --git a/ui/app/controllers/vault/cluster/clients.js b/ui/app/controllers/vault/cluster/clients.js new file mode 100644 index 000000000..7892c9356 --- /dev/null +++ b/ui/app/controllers/vault/cluster/clients.js @@ -0,0 +1,3 @@ +import Controller from '@ember/controller'; + +export default class ClientsController extends Controller {} diff --git a/ui/app/controllers/vault/cluster/clients/current.js b/ui/app/controllers/vault/cluster/clients/current.js new file mode 100644 index 000000000..5d260801b --- /dev/null +++ b/ui/app/controllers/vault/cluster/clients/current.js @@ -0,0 +1,3 @@ +import Controller from '@ember/controller'; + +export default class CurrentController extends Controller {} diff --git a/ui/app/router.js b/ui/app/router.js index d12885014..641d5d29a 100644 --- a/ui/app/router.js +++ b/ui/app/router.js @@ -18,6 +18,7 @@ Router.map(function () { this.mount('open-api-explorer', { path: '/api-explorer' }); this.route('license'); this.route('clients', function () { + this.route('current'); this.route('history'); this.route('config'); this.route('edit'); diff --git a/ui/app/routes/vault/cluster/clients/index.js b/ui/app/routes/vault/cluster/clients.js similarity index 77% rename from ui/app/routes/vault/cluster/clients/index.js rename to ui/app/routes/vault/cluster/clients.js index 38fa31d94..607a53787 100644 --- a/ui/app/routes/vault/cluster/clients/index.js +++ b/ui/app/routes/vault/cluster/clients.js @@ -30,7 +30,6 @@ export default class ClientsRoute extends Route { return RSVP.hash({ config, - monthly: await this.store.queryRecord('clients/monthly', {}), versionHistory: this.getVersionHistory(), }); } @@ -38,12 +37,10 @@ export default class ClientsRoute extends Route { @action async loading(transition) { // eslint-disable-next-line ember/no-controller-access-in-routes - let controller = this.controllerFor('vault.cluster.clients.index'); - if (controller) { - controller.currentlyLoading = true; - transition.promise.finally(function () { - controller.currentlyLoading = false; - }); - } + let controller = this.controllerFor(this.routeName); + controller.set('currentlyLoading', true); + transition.promise.finally(function () { + controller.set('currentlyLoading', false); + }); } } diff --git a/ui/app/routes/vault/cluster/clients/config.js b/ui/app/routes/vault/cluster/clients/config.js index 352789b80..a44ea7fed 100644 --- a/ui/app/routes/vault/cluster/clients/config.js +++ b/ui/app/routes/vault/cluster/clients/config.js @@ -1,19 +1,6 @@ import Route from '@ember/routing/route'; -import { action } from '@ember/object'; - export default class ConfigRoute extends Route { model() { return this.store.queryRecord('clients/config', {}); } - @action - async loading(transition) { - // eslint-disable-next-line ember/no-controller-access-in-routes - let controller = this.controllerFor('vault.cluster.clients.config'); - if (controller) { - controller.currentlyLoading = true; - transition.promise.finally(function () { - controller.currentlyLoading = false; - }); - } - } } diff --git a/ui/app/routes/vault/cluster/clients/current.js b/ui/app/routes/vault/cluster/clients/current.js new file mode 100644 index 000000000..7cf8acf51 --- /dev/null +++ b/ui/app/routes/vault/cluster/clients/current.js @@ -0,0 +1,14 @@ +import Route from '@ember/routing/route'; +import RSVP from 'rsvp'; + +export default class CurrentRoute extends Route { + async model() { + let parentModel = this.modelFor('vault.cluster.clients'); + + return RSVP.hash({ + config: parentModel.config, + monthly: await this.store.queryRecord('clients/monthly', {}), + versionHistory: parentModel.versionHistory, + }); + } +} diff --git a/ui/app/routes/vault/cluster/clients/history.js b/ui/app/routes/vault/cluster/clients/history.js index f7e5c3dc2..866b43846 100644 --- a/ui/app/routes/vault/cluster/clients/history.js +++ b/ui/app/routes/vault/cluster/clients/history.js @@ -1,6 +1,5 @@ import Route from '@ember/routing/route'; import RSVP from 'rsvp'; -import { action } from '@ember/object'; export default class HistoryRoute extends Route { async getActivity(start_time) { @@ -26,24 +25,6 @@ export default class HistoryRoute extends Route { } } - async getVersionHistory() { - try { - let arrayOfModels = []; - let response = await this.store.findAll('clients/version-history'); // returns a class with nested models - response.forEach((model) => { - arrayOfModels.push({ - id: model.id, - perviousVersion: model.previousVersion, - timestampInstalled: model.timestampInstalled, - }); - }); - return arrayOfModels; - } catch (e) { - console.debug(e); - return []; - } - } - parseRFC3339(timestamp) { // convert '2021-03-21T00:00:00Z' --> ['2021', 2] (e.g. 2021 March, month is zero indexed) return timestamp @@ -52,32 +33,16 @@ export default class HistoryRoute extends Route { } async model() { - let config = await this.store.queryRecord('clients/config', {}).catch((e) => { - // swallowing error so activity can show if no config permissions - console.debug(e); - return {}; - }); + let parentModel = this.modelFor('vault.cluster.clients'); let licenseStart = await this.getLicenseStartTime(); let activity = await this.getActivity(licenseStart); return RSVP.hash({ - config, + config: parentModel.config, activity, startTimeFromLicense: this.parseRFC3339(licenseStart), endTimeFromResponse: this.parseRFC3339(activity?.endTime), - versionHistory: this.getVersionHistory(), + versionHistory: parentModel.versionHistory, }); } - - @action - async loading(transition) { - // eslint-disable-next-line ember/no-controller-access-in-routes - let controller = this.controllerFor('vault.cluster.clients.history'); - if (controller) { - controller.currentlyLoading = true; - transition.promise.finally(function () { - controller.currentlyLoading = false; - }); - } - } } diff --git a/ui/app/templates/components/clients/history.hbs b/ui/app/templates/components/clients/history.hbs index fdb3a0e2b..651d4dff2 100644 --- a/ui/app/templates/components/clients/history.hbs +++ b/ui/app/templates/components/clients/history.hbs @@ -105,7 +105,7 @@ {{/if}} - {{#if @isLoading}} + {{#if this.isLoadingQuery}} {{else}} {{#if this.totalUsageCounts}} @@ -212,8 +212,8 @@ type="button" class="button is-primary" onclick={{queue - (action "handleClientActivityQuery" this.startMonth this.startYear "startTime") (action (mut this.isEditStartMonthOpen) false) + (action "handleClientActivityQuery" this.startMonth this.startYear "startTime") }} disabled={{if (and this.startMonth this.startYear) false true}} > @@ -224,7 +224,7 @@ class="button is-secondary" {{on "click" - (queue (fn this.handleClientActivityQuery 0 0 "cancel") (action (mut this.isEditStartMonthOpen) false)) + (queue (action (mut this.isEditStartMonthOpen) false) (fn this.handleClientActivityQuery 0 0 "cancel")) }} > Cancel diff --git a/ui/app/templates/components/cluster-info.hbs b/ui/app/templates/components/cluster-info.hbs index 61f3ffb3d..28fa21b2d 100644 --- a/ui/app/templates/components/cluster-info.hbs +++ b/ui/app/templates/components/cluster-info.hbs @@ -152,7 +152,7 @@