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

@@ -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;
     }
   }
 

ui/app/controllers/vault/cluster/clients.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ClientsController extends Controller {}

ui/app/controllers/vault/cluster/clients/current.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class CurrentController extends Controller {}

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');

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');
+    let controller = this.controllerFor(this.routeName);
-    if (controller) {
+    controller.set('currentlyLoading', true);
-      controller.currentlyLoading = true;
+    transition.promise.finally(function () {
-      transition.promise.finally(function () {
+      controller.set('currentlyLoading', false);
-        controller.currentlyLoading = false;
+    });
-      });
-    }
   }
 }

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;
-      });
-    }
-  }
 }

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,
+    });
+  }
+}

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) => {
+    let parentModel = this.modelFor('vault.cluster.clients');
-      // swallowing error so activity can show if no config permissions
-      console.debug(e);
-      return {};
-    });
     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;
-      });
-    }
-  }
 }

ui/app/templates/components/clients/history.hbs

@@ -105,7 +105,7 @@
           </ul>
         </AlertBanner>
       {{/if}}
-      {{#if @isLoading}}
+      {{#if this.isLoadingQuery}}
         <LayoutLoading />
       {{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

ui/app/templates/components/cluster-info.hbs

@@ -152,7 +152,7 @@
         <ul class="menu-list">
           <li class="action">
             {{! template-lint-disable no-unknown-arguments-for-builtin-components }}
-            <LinkTo @route="vault.cluster.clients.index" @invokeAction={{@onLinkClick}}>
+            <LinkTo @route="vault.cluster.clients.current" @invokeAction={{@onLinkClick}}>
               <div class="level is-mobile">
                 <span class="level-left">Client count</span>
                 <Chevron class="has-text-grey-light level-right" />

ui/app/templates/vault/cluster/clients.hbs

@@ -1,4 +1,3 @@
-{{! this dashboard template displays in three routes so @model varies slightly: index, history and config }}
 <PageHeader as |p|>
   <p.levelLeft>
     <h1 class="title is-3">
@@ -10,7 +9,7 @@
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics>
   <nav class="tabs">
     <ul>
-      <LinkTo @route="vault.cluster.clients.index" class="nav-tab-link">
+      <LinkTo @route="vault.cluster.clients.current" class="nav-tab-link">
         Current month
       </LinkTo>
       <LinkTo @route="vault.cluster.clients.history" class="nav-tab-link">
@@ -23,4 +22,9 @@
       {{/if}}
     </ul>
   </nav>
-</div>
+</div>
+{{#if this.currentlyLoading}}
+  <LayoutLoading />
+{{else}}
+  {{outlet}}
+{{/if}}

ui/app/templates/vault/cluster/clients/config.hbs

@@ -1,6 +1,3 @@
-{{! TODO CMB CHECK THIS ENTIRE VIEW WITH DESIGN }}
-<Clients::Dashboard @model={{@model}} />
-
 <Toolbar>
   <ToolbarActions>
     {{#if @model.configPath.canUpdate}}
@@ -11,4 +8,4 @@
   </ToolbarActions>
 </Toolbar>
 
-<Clients::Config @model={{@model}} @isLoading={{this.currentlyLoading}} />
+<Clients::Config @model={{@model}} />

ui/app/templates/vault/cluster/clients/current.hbs

@@ -0,0 +1 @@
+<Clients::Current @model={{@model}} />

ui/app/templates/vault/cluster/clients/history.hbs

@@ -1,2 +1 @@
-<Clients::Dashboard @model={{@model}} />
+<Clients::History @model={{@model}} />
-<Clients::History @model={{@model}} @isLoading={{this.currentlyLoading}} />

ui/app/templates/vault/cluster/clients/index.hbs

@@ -1,2 +0,0 @@
-<Clients::Dashboard @model={{@model}} />
-<Clients::Current @model={{@model}} @isLoading={{this.currentlyLoading}} />

ui/tests/integration/components/clients-current-test.js

@@ -19,7 +19,6 @@ module('Integration | Component | client count current', function (hooks) {
     Object.assign(this.model.config, { enabled: 'Off', queriesAvailable: false });
     await render(hbs`
     <div id="modal-wormhole"></div>
-    <Clients::Dashboard @model={{this.model}} />
     <Clients::Current @model={{this.model}} />
     `);
     assert.dom('[data-test-component="empty-state"]').exists('Empty state exists');