Client count: remove default period and extra controllers (#14050)

* remove controllerS

* remove default report months

* remove default months from the config page

* fix tests

* clean up edit config

ui/app/components/clients/config.js

@@ -34,11 +34,6 @@ export default class ConfigComponent extends Component {
         helperText: 'The number of months of activity logs to maintain for client tracking.',
         valueKey: 'retentionMonths',
       },
-      {
-        label: 'Default display',
-        helperText: 'The number of months we’ll display in the Vault usage dashboard by default.',
-        valueKey: 'defaultReportMonths',
-      },
     ];
   }
 

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

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

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

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

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

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

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

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

ui/app/models/clients/config.js

@@ -6,10 +6,6 @@ import { apiPath } from 'vault/macros/lazy-capabilities';
 
 const M = Model.extend({
   queriesAvailable: attr('boolean'),
-  defaultReportMonths: attr('number', {
-    label: 'Default display',
-    subText: 'The number of months we’ll display in the Vault usage dashboard by default.',
-  }),
   retentionMonths: attr('number', {
     label: 'Retention period',
     subText: 'The number of months of activity logs to maintain for client tracking.',
@@ -24,7 +20,7 @@ const M = Model.extend({
   }),
 
   configAttrs: computed(function () {
-    let keys = ['enabled', 'defaultReportMonths', 'retentionMonths'];
+    let keys = ['enabled', 'retentionMonths'];
     return expandAttributeMeta(this, keys);
   }),
 });

ui/app/serializers/clients/config.js

@@ -22,9 +22,8 @@ export default ApplicationSerializer.extend({
       const oldEnabled = json.enabled;
       json.enabled = oldEnabled === 'On' ? 'enable' : 'disable';
     }
-    json.default_report_months = parseInt(json.default_report_months, 10);
     json.retention_months = parseInt(json.retention_months, 10);
-    if (isNaN(json.default_report_months) || isNaN(json.retention_months)) {
+    if (isNaN(json.retention_months)) {
       throw new Error('Invalid number value');
     }
     delete json.queries_available;

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

@@ -1,16 +1,47 @@
-{{#if @isLoading}}
+{{#if (eq @mode "edit")}}
-  <LayoutLoading />
+  <form onsubmit={{action "onSaveChanges"}} data-test-pricing-metrics-config-form>
-{{else}}
+    <div class="box is-sideless is-fullwidth is-marginless">
-  {{#if (eq @mode "edit")}}
+      <MessageError @model={{@model}} @errorMessage={{this.error}} />
-    <form onsubmit={{action "onSaveChanges"}} data-test-pricing-metrics-config-form>
+      {{#each @model.configAttrs as |attr|}}
-      <div class="box is-sideless is-fullwidth is-marginless">
+        {{#if (and (eq attr.type "string") (eq attr.options.editType "boolean"))}}
-        <MessageError @model={{@model}} @errorMessage={{this.error}} />
+          <label class="is-label">Usage data collection</label>
-        {{#each @model.configAttrs as |attr|}}
+          {{#if attr.options.helpText}}
-          {{#if (and (eq attr.type "string") (eq attr.options.editType "boolean"))}}
+            <p class="sub-text">
-            <label class="is-label">Usage data collection</label>
+              {{attr.options.helpText}}
-            {{#if attr.options.helpText}}
+              {{#if attr.options.docLink}}
+                <a href={{attr.options.docLink}} target="_blank" rel="noopener noreferrer">
+                  See our documentation
+                </a>
+                for help.
+              {{/if}}
+            </p>
+          {{/if}}
+          <div class="control is-flex has-bottom-margin-l">
+            <input
+              data-test-field
+              type="checkbox"
+              id={{attr.name}}
+              name={{attr.name}}
+              class="switch is-rounded is-success is-small"
+              checked={{eq (get @model attr.name) attr.options.trueValue}}
+              onchange={{action (action "updateBooleanValue" attr) value="target.checked"}}
+            />
+            <label for={{attr.name}}>
+              {{#if (eq @model.enabled "Off")}}
+                Data collection is off
+              {{else}}
+                Data collection is on
+              {{/if}}
+            </label>
+          </div>
+        {{else if (eq attr.type "number")}}
+          <div class="has-top-margin-s">
+            <label for={{attr.name}} class="is-label">
+              {{attr.options.label}}
+            </label>
+            {{#if attr.options.subText}}
               <p class="sub-text">
-                {{attr.options.helpText}}
+                {{attr.options.subText}}
                 {{#if attr.options.docLink}}
                   <a href={{attr.options.docLink}} target="_blank" rel="noopener noreferrer">
                     See our documentation
@@ -19,117 +50,82 @@
                 {{/if}}
               </p>
             {{/if}}
-            <div class="control is-flex has-bottom-margin-l">
+            <div class="control">
               <input
                 data-test-field
-                type="checkbox"
                 id={{attr.name}}
-                name={{attr.name}}
+                disabled={{eq @model.enabled "Off"}}
-                class="switch is-rounded is-success is-small"
+                autocomplete="off"
-                checked={{eq (get @model attr.name) attr.options.trueValue}}
+                spellcheck="false"
-                onchange={{action (action "updateBooleanValue" attr) value="target.checked"}}
+                onchange={{action (mut (get @model attr.name)) value="target.value"}}
+                value={{or (get @model attr.name) attr.options.defaultValue}}
+                class="input"
+                maxLength={{attr.options.characterLimit}}
               />
-              <label for={{attr.name}}>
-                {{#if (eq @model.enabled "Off")}}
-                  Data collection is off
-                {{else}}
-                  Data collection is on
-                {{/if}}
-              </label>
             </div>
-          {{else if (eq attr.type "number")}}
+          </div>
-            <div class="has-top-margin-s">
-              <label for={{attr.name}} class="is-label">
-                {{attr.options.label}}
-              </label>
-              {{#if attr.options.subText}}
-                <p class="sub-text">
-                  {{attr.options.subText}}
-                  {{#if attr.options.docLink}}
-                    <a href={{attr.options.docLink}} target="_blank" rel="noopener noreferrer">
-                      See our documentation
-                    </a>
-                    for help.
-                  {{/if}}
-                </p>
-              {{/if}}
-              <div class="control">
-                <input
-                  data-test-field
-                  id={{attr.name}}
-                  disabled={{eq @model.enabled "Off"}}
-                  autocomplete="off"
-                  spellcheck="false"
-                  onchange={{action (mut (get @model attr.name)) value="target.value"}}
-                  value={{or (get @model attr.name) attr.options.defaultValue}}
-                  class="input"
-                  maxLength={{attr.options.characterLimit}}
-                />
-              </div>
-            </div>
-          {{/if}}
-        {{/each}}
-      </div>
-      <div class="field is-grouped-split box is-fullwidth is-bottomless">
-        <div class="control">
-          <button
-            type="submit"
-            disabled={{this.buttonDisabled}}
-            class="button is-primary"
-            data-test-edit-metrics-config-save={{true}}
-          >
-            Save
-          </button>
-          <LinkTo @route="vault.cluster.clients.config" class="button">
-            Cancel
-          </LinkTo>
-        </div>
-      </div>
-    </form>
-    <Modal
-      @title={{this.modalTitle}}
-      @onClose={{action (mut this.modalOpen) false}}
-      @isActive={{this.modalOpen}}
-      @type="warning"
-      @showCloseButton={{true}}
-    >
-      <section class="modal-card-body">
-        {{#if (eq @model.enabled "On")}}
-          <p class="has-bottom-margin-s">
-            Vault will start tracking data starting from today’s date,
-            {{date-format (now) "d MMMM yyyy"}}. You will not be able to see or query usage until the end of the month.
-          </p>
-          <p>If you’ve previously enabled usage tracking, that historical data will still be available to you.</p>
-        {{else}}
-          <p class="has-bottom-margin-s">
-            Turning usage tracking off means that all data for the current month will be deleted. You will still be able to
-            query previous months.
-          </p>
-          <p>Are you sure?</p>
         {{/if}}
-      </section>
-      <footer class="modal-card-foot modal-card-foot-outlined">
-        <button
-          type="button"
-          class="button is-secondary"
-          onclick={{action (mut this.modalOpen) false}}
-          data-test-metrics-config-cancel
-        >
-          Cancel
-        </button>
-        <button type="button" class="button is-primary" onclick={{perform this.save}}>
-          Continue
-        </button>
-      </footer>
-    </Modal>
-  {{else}}
-    <div
-      class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless"
-      data-test-pricing-metrics-config-table
-    >
-      {{#each this.infoRows as |item|}}
-        <InfoTableRow @label={{item.label}} @helperText={{item.helperText}} @value={{get @model item.valueKey}} />
       {{/each}}
     </div>
-  {{/if}}
+    <div class="field is-grouped-split box is-fullwidth is-bottomless">
+      <div class="control">
+        <button
+          type="submit"
+          disabled={{this.buttonDisabled}}
+          class="button is-primary"
+          data-test-edit-metrics-config-save={{true}}
+        >
+          Save
+        </button>
+        <LinkTo @route="vault.cluster.clients.config" class="button">
+          Cancel
+        </LinkTo>
+      </div>
+    </div>
+  </form>
+  <Modal
+    @title={{this.modalTitle}}
+    @onClose={{action (mut this.modalOpen) false}}
+    @isActive={{this.modalOpen}}
+    @type="warning"
+    @showCloseButton={{true}}
+  >
+    <section class="modal-card-body">
+      {{#if (eq @model.enabled "On")}}
+        <p class="has-bottom-margin-s">
+          Vault will start tracking data starting from today’s date,
+          {{date-format (now) "d MMMM yyyy"}}. You will not be able to see or query usage until the end of the month.
+        </p>
+        <p>If you’ve previously enabled usage tracking, that historical data will still be available to you.</p>
+      {{else}}
+        <p class="has-bottom-margin-s">
+          Turning usage tracking off means that all data for the current month will be deleted. You will still be able to
+          query previous months.
+        </p>
+        <p>Are you sure?</p>
+      {{/if}}
+    </section>
+    <footer class="modal-card-foot modal-card-foot-outlined">
+      <button
+        type="button"
+        class="button is-secondary"
+        onclick={{action (mut this.modalOpen) false}}
+        data-test-metrics-config-cancel
+      >
+        Cancel
+      </button>
+      <button type="button" class="button is-primary" onclick={{perform this.save}}>
+        Continue
+      </button>
+    </footer>
+  </Modal>
+{{else}}
+  <div
+    class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless"
+    data-test-pricing-metrics-config-table
+  >
+    {{#each this.infoRows as |item|}}
+      <InfoTableRow @label={{item.label}} @helperText={{item.helperText}} @value={{get @model item.valueKey}} />
+    {{/each}}
+  </div>
 {{/if}}

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

@@ -45,25 +45,21 @@
         </DocLink>
       </AlertBanner>
     {{/if}}
-    {{#if @isLoading}}
+    {{#if this.totalUsageCounts}}
-      <LayoutLoading />
+      <Clients::UsageStats
-    {{else}}
+        @title={{date-format this.responseTimestamp "MMMM"}}
-      {{#if this.totalUsageCounts}}
+        @totalUsageCounts={{this.totalUsageCounts}}
-        <Clients::UsageStats
+      />
-          @title={{date-format this.responseTimestamp "MMMM"}}
+      {{#if this.hasAttributionData}}
+        <Clients::Attribution
+          @chartLegend={{this.chartLegend}}
+          @totalClientsData={{this.totalClientsData}}
           @totalUsageCounts={{this.totalUsageCounts}}
+          @selectedNamespace={{this.selectedNamespace}}
+          @startTimeDisplay={{date-format this.responseTimestamp "MMMM yyyy"}}
+          @isDateRange={{false}}
+          @timestamp={{this.responseTimestamp}}
         />
-        {{#if this.hasAttributionData}}
-          <Clients::Attribution
-            @chartLegend={{this.chartLegend}}
-            @totalClientsData={{this.totalClientsData}}
-            @totalUsageCounts={{this.totalUsageCounts}}
-            @selectedNamespace={{this.selectedNamespace}}
-            @startTimeDisplay={{date-format this.responseTimestamp "MMMM yyyy"}}
-            @isDateRange={{false}}
-            @timestamp={{this.responseTimestamp}}
-          />
-        {{/if}}
       {{/if}}
     {{/if}}
   {{/if}}

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

@@ -1,9 +1 @@
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Configure usage tracking
-    </h1>
-  </p.levelLeft>
-</PageHeader>
-
 <Clients::Config @model={{@model}} @mode="edit" />

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

@@ -34,7 +34,6 @@ module('Integration | Component | client count config', function (hooks) {
       configAttrs: [
         createAttr('enabled', 'string', { editType: 'boolean' }),
         createAttr('retentionMonths', 'number'),
-        createAttr('defaultReportMonths', 'number'),
       ],
       changedAttributes: () => ({}),
       save: () => {},
@@ -54,7 +53,7 @@ module('Integration | Component | client count config', function (hooks) {
 
     assert.dom('[data-test-pricing-metrics-config-table]').exists('Pricing metrics config table exists');
     const rows = document.querySelectorAll('.info-table-row');
-    assert.equal(rows.length, 3, 'renders 3 infotable rows');
+    assert.equal(rows.length, 2, 'renders 2 infotable rows');
     assert.ok(
       find('[data-test-row-value="Usage data collection"]').textContent.includes('On'),
       'Enabled value matches model'
@@ -63,10 +62,6 @@ module('Integration | Component | client count config', function (hooks) {
       find('[data-test-row-value="Retention period"]').textContent.includes('24'),
       'Retention period value matches model'
     );
-    assert.ok(
-      find('[data-test-row-value="Default display"]').textContent.includes('12'),
-      'Default display value matches model'
-    );
   });
 
   test('TODO: it shows the config edit form when mode = edit', async function (assert) {
@@ -77,7 +72,7 @@ module('Integration | Component | client count config', function (hooks) {
 
     assert.dom('[data-test-pricing-metrics-config-form]').exists('Pricing metrics config form exists');
     const fields = document.querySelectorAll('[data-test-field]');
-    assert.equal(fields.length, 3, 'renders 3 fields');
+    assert.equal(fields.length, 2, 'renders 2 fields');
   });
 
   test('it shows a modal with correct messaging when disabling', async function (assert) {
@@ -126,7 +121,7 @@ module('Integration | Component | client count config', function (hooks) {
   test('it does not show a modal on save if enable left unchanged', async function (assert) {
     // Simulates the model when something other than enabled changed
     const simModel = generateModel({
-      changedAttributes: () => ({ defaultReportMonths: [24, '48'] }),
+      changedAttributes: () => ({ retentionMonths: [24, '48'] }),
     });
     this.set('model', simModel);
     await render(hbs`