hashicorp · arnav28 · Sep 16, 2021 · Sep 15, 2021 · Sep 15, 2021 · Sep 15, 2021
diff --git a/changelog/12554.txt b/changelog/12554.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: client count monthly view
+```
@@ -5,7 +5,11 @@ export default Application.extend({
     return 'internal/counters/activity';
   },
   queryRecord(store, type, query) {
-    const url = this.urlForQuery(null, type);
+    let url = this.urlForQuery(null, type);
+    if (query.tab === 'current') {
+      url = `${url}/monthly`;
+      query = null;
+    }
     // API accepts start and end as query params
     return this.ajax(url, 'GET', { data: query }).then(resp => {
       let response = resp || {};

@@ -1,12 +1,12 @@
 /**
- * @module PricingMetricsConfig
- * PricingMetricsConfig components are used to show and edit the pricing metrics config information.
+ * @module ClientsConfig
+ * ClientsConfig components are used to show and edit the client count config information.
  *
  * @example
  * ```js
- * <PricingMetricsConfig @model={{model}} @mode="edit" />
+ * <Clients::Config @model={{model}} @mode="edit" />
  * ```
- * @param {object} model - model is the DS metrics/config model which should be passed in
+ * @param {object} model - model is the DS clients/config model which should be passed in
  * @param {string} [mode=show] - mode is either show or edit. Show results in a table with the config, show has a form.
  */
 
@@ -16,7 +16,7 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 
-export default class PricingMetricsConfigComponent extends Component {
+export default class ConfigComponent extends Component {
   @service router;
   @tracked mode = 'show';
   @tracked modalOpen = false;
@@ -57,7 +57,7 @@ export default class PricingMetricsConfigComponent extends Component {
       this.error = err.message;
       return;
     }
-    this.router.transitionTo('vault.cluster.metrics.config');
+    this.router.transitionTo('vault.cluster.clients.index');
   }).drop())
   save;
 

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+
+export default class HistoryComponent extends Component {
+  max_namespaces = 10;
+
+  get hasClientData() {
+    if (this.args.tab === 'current') {
+      return this.args.model.activity && this.args.model.activity.clients;
+    }
+    return this.args.model.activity && this.args.model.activity.total;
+  }
+
+  get barChartDataset() {
+    if (!this.args.model.activity || !this.args.model.activity.byNamespace) {
+      return null;
+    }
+    let dataset = this.args.model.activity.byNamespace;
+    // Filter out root data
+    dataset = dataset.filter(item => {
+      return item.namespace_id != 'root';
+    });
+    // Show only top 10 namespaces
+    dataset = dataset.slice(0, this.max_namespaces);
+    return dataset.map(d => {
+      return {
+        label: d['namespace_path'],
+        non_entity_tokens: d['counts']['non_entity_tokens'],
+        distinct_entities: d['counts']['distinct_entities'],
+        total: d['counts']['clients'],
+      };
+    });
+  }
+
+  get showGraphs() {
+    if (!this.args.model.activity || !this.args.model.activity.byNamespace) {
+      return null;
+    }
+    return this.args.model.activity.byNamespace.length > 1;
+  }
+}
@@ -18,16 +18,7 @@
 import { set, computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import {
-  differenceInSeconds,
-  isValid,
-  subMonths,
-  startOfToday,
-  format,
-  endOfMonth,
-  startOfMonth,
-  isBefore,
-} from 'date-fns';
+import { subMonths, startOfToday, format, endOfMonth, startOfMonth, isBefore } from 'date-fns';
 import layout from '../templates/components/pricing-metrics-dates';
 import { parseDateString } from 'vault/helpers/parse-date-string';
 
@@ -69,35 +60,6 @@ export default Component.extend({
     }
   }),
 
-  // We don't want the warning to show when inputs are being updated before query is made
-  /* eslint-disable-next-line ember/require-computed-property-dependencies */
-  showResultsWarning: computed('resultEnd', 'resultStart', function() {
-    if (!this.queryStart || !this.queryEnd || !this.resultStart || !this.resultEnd) {
-      return false;
-    }
-    const resultStart = new Date(this.resultStart);
-    const resultEnd = new Date(this.resultEnd);
-    let queryStart, queryEnd;
-    try {
-      queryStart = parseDateString(this.queryStart, '-');
-      queryEnd = parseDateString(this.queryEnd, '-');
-    } catch (e) {
-      // Log error for debugging purposes
-      console.debug(e);
-    }
-
-    if (!queryStart || !queryEnd || !isValid(resultStart) || !isValid(resultEnd)) {
-      return false;
-    }
-    if (Math.abs(differenceInSeconds(queryStart, resultStart)) >= 86400) {
-      return true;
-    }
-    if (Math.abs(differenceInSeconds(resultEnd, endOfMonth(queryEnd))) >= 86400) {
-      return true;
-    }
-    return false;
-  }),
-
   error: computed('end', 'endDate', 'retentionMonths', 'start', 'startDate', function() {
     if (!this.startDate) {
       return 'Start date is invalid. Please use format MM/yyyy';
@@ -148,7 +110,7 @@ export default Component.extend({
     handleQuery() {
       const start = format(this.startDate, 'MM-yyyy');
       const end = format(this.endDate, 'MM-yyyy');
-      this.router.transitionTo('vault.cluster.metrics', {
+      this.router.transitionTo('vault.cluster.clients', {
         queryParams: {
           start,
           end,

@@ -0,0 +1,8 @@
+import Controller from '@ember/controller';
+
+export default class ClientsController extends Controller {
+  queryParams = ['tab', 'start', 'end'];
+  tab = null;
+  start = null;
+  end = null;
+}
@@ -2,6 +2,10 @@ import Model, { attr } from '@ember-data/model';
 
 export default Model.extend({
   total: attr('object'),
+  byNamespace: attr('array'),
   endTime: attr('string'),
   startTime: attr('string'),
+  clients: attr('number'),
+  distinct_entities: attr('number'),
+  non_entity_tokens: attr('number'),
 });
@@ -15,9 +15,8 @@ Router.map(function() {
       this.route('logout');
       this.mount('open-api-explorer', { path: '/api-explorer' });
       this.route('license');
-      this.route('metrics', function() {
+      this.route('clients', function() {
         this.route('index', { path: '/' });
-        this.route('config');
         this.route('edit');
       });
       this.route('storage', { path: '/storage/raft' });

@@ -2,6 +2,6 @@ import Route from '@ember/routing/route';
 
 export default Route.extend({
   model() {
-    return this.store.queryRecord('metrics/config', {});
+    return this.store.queryRecord('clients/config', {});
   },
 });
@@ -4,30 +4,37 @@ import { hash } from 'rsvp';
 import { getTime } from 'date-fns';
 import { parseDateString } from 'vault/helpers/parse-date-string';
 
-const getActivityParams = ({ start, end }) => {
+const getActivityParams = ({ tab, start, end }) => {
   // Expects MM-yyyy format
   // TODO: minStart, maxEnd
   let params = {};
-  if (start) {
-    let startDate = parseDateString(start);
-    if (startDate) {
-      // TODO: Replace with formatRFC3339 when date-fns is updated
-      // converts to milliseconds, divide by 1000 to get epoch
-      params.start_time = getTime(startDate) / 1000;
+  if (tab === 'current') {
+    params.tab = tab;
+  } else if (tab === 'history') {
+    if (start) {
+      let startDate = parseDateString(start);
+      if (startDate) {
+        // TODO: Replace with formatRFC3339 when date-fns is updated
+        // converts to milliseconds, divide by 1000 to get epoch
+        params.start_time = getTime(startDate) / 1000;
+      }
     }
-  }
-  if (end) {
-    let endDate = parseDateString(end);
-    if (endDate) {
-      // TODO: Replace with formatRFC3339 when date-fns is updated
-      params.end_time = getTime(endDate) / 1000;
+    if (end) {
+      let endDate = parseDateString(end);
+      if (endDate) {
+        // TODO: Replace with formatRFC3339 when date-fns is updated
+        params.end_time = getTime(endDate) / 1000;
+      }
     }
   }
   return params;
 };
 
 export default Route.extend(ClusterRoute, {
   queryParams: {
+    tab: {
+      refreshModel: true,
+    },
     start: {
       refreshModel: true,
     },
@@ -37,13 +44,13 @@ export default Route.extend(ClusterRoute, {
   },
 
   model(params) {
-    let config = this.store.queryRecord('metrics/config', {}).catch(e => {
+    let config = this.store.queryRecord('clients/config', {}).catch(e => {
       console.debug(e);
       // swallowing error so activity can show if no config permissions
       return {};
     });
     const activityParams = getActivityParams(params);
-    let activity = this.store.queryRecord('metrics/activity', activityParams);
+    let activity = this.store.queryRecord('clients/activity', activityParams);
 
     return hash({
       queryStart: params.start,

@@ -29,7 +29,7 @@ const API_PATHS = {
     seal: 'sys/seal',
     raft: 'sys/storage/raft/configuration',
   },
-  metrics: {
+  clients: {
     activity: 'sys/internal/counters/activity',
     config: 'sys/internal/counters/config',
   },

@@ -7,14 +7,11 @@
 
   > div.is-border {
     border: 0.3px solid $ui-gray-200;
-    width: 94%;
-    margin-left: 3%;
     margin-bottom: $spacing-xxs;
   }
 }
 
 .chart-header {
-  margin-left: $spacing-l;
   display: grid;
   grid-template-columns: 3fr 1fr;
 
@@ -47,7 +44,7 @@
 }
 
 .bar-chart-container {
-  padding: $spacing-m $spacing-l $spacing-m $spacing-l;
+  padding: $spacing-m 0;
 }
 
 .bar-chart {

@@ -1,5 +1,8 @@
 .stat-text-container {
   line-height: normal;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
   &.l,
   &.m {
@@ -13,6 +16,7 @@
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
       line-height: inherit;
+      flex-grow: 1;
     }
     .stat-value {
       font-size: $size-3;

@@ -54,7 +54,8 @@
           Save
         </button>
         <LinkTo
-          @route="vault.cluster.metrics.config"
+          @route="vault.cluster.clients.index"
+          @query={{hash tab="config"}}
           class="button">
           Cancel
         </LinkTo>