Ui/pricing metrics api hookup (#10196)

* Update language to reflect that current namespace includes all children as well

* Update metrics config value to correct ones

* Handle 204 no data from activity endpoint

* Wrap metrics date inputs in form so it handles keyboard events like Enter

* Pass default span and retention months from config

* remove stray space

ui/app/adapters/metrics/activity.js

@@ -8,8 +8,10 @@ export default Application.extend({
     const url = this.urlForQuery(null, type);
     // API accepts start and end as query params
     return this.ajax(url, 'GET', { data: query }).then(resp => {
-      resp.id = resp.request_id;
-      return resp;
+      let response = resp || {};
+      // if the response is a 204 it has no request id
+      response.id = response.request_id || 'no-data';
+      return response;
     });
   },
 });

ui/app/components/pricing-metrics-dates.js

@@ -16,6 +16,7 @@
  * @param {number} [retentionMonths=24] - setting for the retention months, which informs valid dates to query by
  */
 import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import {
   differenceInSeconds,
@@ -32,6 +33,8 @@ import { parseDateString } from 'vault/helpers/parse-date-string';
 
 export default Component.extend({
   layout,
+  router: service(),
+
   queryStart: null,
   queryEnd: null,
   resultStart: null,
@@ -138,4 +141,17 @@ export default Component.extend({
     this.start = format(initialStart, 'MM/YYYY');
     this.end = format(initialEnd, 'MM/YYYY');
   },
+
+  actions: {
+    handleQuery() {
+      const start = format(this.startDate, 'MM-YYYY');
+      const end = format(this.endDate, 'MM-YYYY');
+      this.router.transitionTo('vault.cluster.metrics', {
+        queryParams: {
+          start,
+          end,
+        },
+      });
+    },
+  },
 });

ui/app/serializers/metrics/config.js

@@ -10,7 +10,7 @@ export default ApplicationSerializer.extend({
       id: payload.id,
       data: {
         ...payload.data,
-        enabled: payload.data.enabled.includes('enabled') ? 'On' : 'Off',
+        enabled: payload.data.enabled.includes('enable') ? 'On' : 'Off',
       },
     };
     return this._super(store, primaryModelClass, normalizedPayload, id, requestType);
@@ -20,7 +20,7 @@ export default ApplicationSerializer.extend({
     let json = this._super(...arguments);
     if (json.enabled === 'On' || json.enabled === 'Off') {
       const oldEnabled = json.enabled;
-      json.enabled = oldEnabled === 'On' ? 'enabled' : 'disabled';
+      json.enabled = oldEnabled === 'On' ? 'enable' : 'disable';
     }
     json.default_report_months = parseInt(json.default_report_months, 10);
     json.retention_months = parseInt(json.retention_months, 10);

ui/app/templates/components/pricing-metrics-dates.hbs

@@ -1,40 +1,37 @@
-<div class="field-body pricing-metrics-date-form">
-  <div class="field is-narrow">
-    <label for="start" class="is-label">From</label>
-    <div class="control">
-      {{input
-        type="string"
-        value=start
-        name="start"
-        class=(concat 'input' (unless startDate ' has-error'))
-        autocomplete="off"
-        spellcheck="false"
-        data-test-start-input="true"
-      }}
+<form onsubmit={{action "handleQuery"}}>
+  <div class="field-body pricing-metrics-date-form">
+    <div class="field is-narrow">
+      <label for="start" class="is-label">From</label>
+      <div class="control">
+        {{input
+          type="string"
+          value=start
+          name="start"
+          class=(concat 'input' (unless startDate ' has-error'))
+          autocomplete="off"
+          spellcheck="false"
+          data-test-start-input="true"
+        }}
+      </div>
     </div>
-  </div>
-  <div class="field is-narrow">
-    <label for="end" class="is-label">Through</label>
-    <div class="control">
-      {{input
-        type="string"
-        value=end
-        name="end"
-        class=(concat 'input' (unless endDate ' has-error'))
-        autocomplete="off"
-        spellcheck="false"
-        data-test-end-input="true"
-      }}
+    <div class="field is-narrow">
+      <label for="end" class="is-label">Through</label>
+      <div class="control">
+        {{input
+          type="string"
+          value=end
+          name="end"
+          class=(concat 'input' (unless endDate ' has-error'))
+          autocomplete="off"
+          spellcheck="false"
+          data-test-end-input="true"
+        }}
+      </div>
     </div>
+    <button disabled={{error}} type="submit" class="button">Query</button>
   </div>
-  {{#link-to 'vault.cluster.metrics'
-    (query-params start=(date-format startDate 'MM-YYYY') end=(date-format endDate 'MM-YYYY'))
-    class="button"
-    disabled=error
-  }}
-    Query
-  {{/link-to}}
-</div>
+</form>
+
 {{#if error}}
   <FormError>{{error}}</FormError>
 {{/if}}

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

@@ -57,15 +57,15 @@
         This feature is currently disabled and data is not being collected. {{#link-to 'vault.cluster.metrics.edit'}}Edit the configuration{{/link-to}} to enable tracking again.
       </AlertBanner>
     {{/if}}
-    <p class="has-bottom-margin-s">The active clients metric contributes to billing. It is collected at the end of each month alongside unique entities and direct active tokens.</p>
-
+    <p class="has-bottom-margin-s">The active clients metric contributes to billing. It is collected at the end of each month alongside unique entities and direct active tokens. The data below includes the current namespace and all its children.</p>
     <PricingMetricsDates
       @queryStart={{model.queryStart}}
       @queryEnd={{model.queryEnd}}
       @resultStart={{model.activity.startTime}}
       @resultEnd={{model.activity.endTime}}
+      @defaultSpan={{model.config.defaultReportMonths}}
+      @retentionMonths={{model.config.retentionMonths}}
     />
-
     {{#unless model.activity.total}}
       <EmptyState @title="No data found" @message="No data exists for that query period. Try searching again." />
     {{else}}