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
2022-02-11 15:15:12 -07:00 · 2022-02-11 15:15:12 -07:00 · eba46e0d4d
parent b686d727a9
commit eba46e0d4d
17 changed files with 4925 additions and 4949 deletions
--- 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;
    }
  }

--- a/ui/app/controllers/vault/cluster/clients.js
+++ b/ui/app/controllers/vault/cluster/clients.js
@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ClientsController extends Controller {}
--- a/ui/app/controllers/vault/cluster/clients/current.js
+++ b/ui/app/controllers/vault/cluster/clients/current.js
@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class CurrentController extends Controller {}
--- 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');
--- a/ui/app/routes/vault/cluster/clients/index.js
+++ b/ui/app/routes/vault/cluster/clients/index.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;
+    let controller = this.controllerFor(this.routeName);
+    controller.set('currentlyLoading', true);
    transition.promise.finally(function () {
-        controller.currentlyLoading = false;
+      controller.set('currentlyLoading', false);
    });
  }
-  }
 }
--- 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;
-      });
-    }
-  }
 }
--- a/ui/app/routes/vault/cluster/clients/current.js
+++ 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,
+    });
+  }
+}
--- 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;
-      });
-    }
-  }
 }
--- a/ui/app/templates/components/clients/history.hbs
+++ b/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
--- a/ui/app/templates/components/cluster-info.hbs
+++ b/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" />
--- a/ui/app/templates/components/clients/dashboard.hbs
+++ b/ui/app/templates/components/clients/dashboard.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">
@ -24,3 +23,8 @@
    </ul>
  </nav>
 </div>
+{{#if this.currentlyLoading}}
+  <LayoutLoading />
+{{else}}
+  {{outlet}}
+{{/if}}
--- a/ui/app/templates/vault/cluster/clients/config.hbs
+++ b/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}} />
--- a/ui/app/templates/vault/cluster/clients/current.hbs
+++ b/ui/app/templates/vault/cluster/clients/current.hbs
@ -0,0 +1 @@
+<Clients::Current @model={{@model}} />
--- a/ui/app/templates/vault/cluster/clients/history.hbs
+++ b/ui/app/templates/vault/cluster/clients/history.hbs
@ -1,2 +1 @@
-<Clients::Dashboard @model={{@model}} />
-<Clients::History @model={{@model}} @isLoading={{this.currentlyLoading}} />
+<Clients::History @model={{@model}} />
--- a/ui/app/templates/vault/cluster/clients/index.hbs
+++ b/ui/app/templates/vault/cluster/clients/index.hbs
@ -1,2 +0,0 @@
-<Clients::Dashboard @model={{@model}} />
-<Clients::Current @model={{@model}} @isLoading={{this.currentlyLoading}} />
--- a/ui/mirage/handlers/activity.js
+++ b/ui/mirage/handlers/activity.js
@ -27,7 +27,9 @@ export default function (server) {
    };
  });

-  server.get('/sys/internal/counters/activity', function () {
+  server.get(
+    '/sys/internal/counters/activity',
+    function () {
      return {
        request_id: '26be5ab9-dcac-9237-ec12-269a8ca647d5',
        data: {
@ -5551,7 +5553,9 @@ export default function (server) {
          ],
        },
      };
-  });
+    },
+    { timing: 3000 }
+  );

  server.get('/sys/internal/counters/activity/monthly', function () {
    return {
--- a/ui/tests/integration/components/clients-current-test.js
+++ b/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');