Client count 1.10 reshuffle (#13767)

* shuffling shuffling i be shuffling

* clean up

* to pass test?

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

@@ -1,7 +1,7 @@
 import Controller from '@ember/controller';
 
 export default class ClientsController extends Controller {
-  queryParams = ['tab', 'start', 'end'];
+  queryParams = ['tab', 'start', 'end']; // ARG TODO remove
   tab = null;
   start = null;
   end = null;

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

@@ -11,6 +11,7 @@ const getActivityParams = ({ tab, start, end }) => {
   if (tab === 'current') {
     params.tab = tab;
   } else if (tab === 'history') {
+    // ARG TODO remove
     if (start) {
       let startDate = parseDateString(start);
       if (startDate) {
@@ -26,6 +27,8 @@ const getActivityParams = ({ tab, start, end }) => {
         params.end_time = getTime(endDate) / 1000;
       }
     }
+  } else if (tab === 'dashboard') {
+    params.tab = tab;
   }
   return params;
 };

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

@@ -0,0 +1,70 @@
+<div class="box is-sideless is-fullwidth is-marginless is-bottomless">
+  <p class="has-bottom-margin-s">
+    The below data is for the current month starting from the first day. For historical data, see the monthly history tab.
+  </p>
+  {{#if (eq @model.config.enabled "Off")}}
+    <EmptyState
+      @title="Tracking is disabled"
+      @message="Tracking is disabled and data is not being collected. To turn it on edit the configuration."
+    >
+      {{#if @model.config.configPath.canUpdate}}
+        <LinkTo @route="vault.cluster.clients.edit">
+          Go to configuration
+        </LinkTo>
+      {{/if}}
+    </EmptyState>
+  {{/if}}
+
+  {{#if @isLoading}}
+    <LayoutLoading />
+  {{else}}
+    <div class="card has-bottom-margin-m">
+      <div class="card-content">
+        <div class="is-flex is-flex-center">
+          <div class="is-flex-1">
+            <h2 class="title is-5 is-marginless">
+              Total usage
+            </h2>
+            <p class="sub-text">
+              These totals are within this namespace and all its children.
+            </p>
+          </div>
+          <LearnLink @path="/tutorials/vault/usage-metrics">
+            Learn more
+          </LearnLink>
+        </div>
+        <hr />
+        <div class="columns">
+          <div class="column" data-test-client-count-stats>
+            <StatText
+              @label="Total active clients"
+              {{! ARG TODO naming is changing }}
+              @value={{or @model.activity.clients "0"}}
+              @size="l"
+              @subText="The sum of unique entities and non-entity tokens; Vault's primary billing metric."
+            />
+          </div>
+          <div class="column">
+            <StatText
+              class="column"
+              @label="Unique entities"
+              {{! ARG TODO naming is changing }}
+              @value={{or @model.activity.distinct_entities "0"}}
+              @size="l"
+              @subText="Representation of a particular user, client or application that created a token via login."
+            />
+          </div>
+          <div class="column">
+            <StatText
+              class="column"
+              @label="Non-entity tokens"
+              @value={{or @model.activity.non_entity_tokens "0"}}
+              @size="l"
+              @subText="Tokens created via a method that is not associated with an entity."
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  {{/if}}
+</div>

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

@@ -1,4 +1,4 @@
-{{#if (and (eq @tab "history") (eq @model.config.queriesAvailable false))}}
+{{#if (and (eq @tab "dashboard") (eq @model.config.queriesAvailable false))}}
   {{#if (eq @model.config.enabled "On")}}
     <EmptyState
       @title="No monthly history"
@@ -20,8 +20,7 @@
   {{/if}}
 {{else}}
   <div class="box is-sideless is-fullwidth is-marginless is-bottomless">
-    {{! ARG TODO change current to Dashboard }}
-    {{#if (eq @tab "current")}}
+    {{#if (eq @tab "dashboard")}}
       <p class="has-bottom-margin-xl">
         {{! ARG TODO Add link for documentation "here" }}
         This dashboard will surface Vault client usage over time. Clients represent anything that has authenticated to or
@@ -60,42 +59,14 @@
               @handleClientActivityQuery={{this.handleClientActivityQuery}}
               @endTimeDisplay={{this.endTimeDisplay}}
             />
-            {{! ARG TODO more filters for auth and namespace here }}
+            {{! ARG TODO more filters for namespace here }}
           </ToolbarFilters>
         </Toolbar>
         {{#if @isLoading}}
           <LayoutLoading />
-        {{else if this.hasClientData}}
-          <Clients::RunningTotal
-            @title="Vault client counts"
-            @description="An active client is any user or service that interacts with Vault. They are made up of unique entities and non-entity tokens. The total client count number is an important consideration for Vault billing."
-            @chartLegend={{this.chartLegend}}
-            @lineChartData={{this.lineChartData}}
-            @barChartData={{this.newMonthlyClients}}
-          />
-
-          <Clients::Attribution
-            @newClientsData={{this.barChartDataset}}
-            @totalClientsData={{this.barChartDataset}}
-            @chartLegend={{this.chartLegend}}
-            @isDateRange={{this.isDateRange}}
-            @isAllNamespaces={{this.isAllNamespaces}}
-            {{! TODO this should be on the model?}}
-            @activityDateRange="January 2021 - December 2021"
-          />
-
-          <Clients::MonthlyUsage
-            @title="Vault usage"
-            @description="This data can be used to understand how many total clients are using Vault each month for the time period selected above."
-            @chartLegend={{this.chartLegend}}
-            @verticalBarChartData={{this.monthlyUsage}}
-            @subTitle="Total monthly clients"
-            @subText="Each unique client is counted once per month. This can help with capacity planning."
-            @dataOne="Average total clients per month"
-            @dataOneData="100"
-            @dataTwo="Average new clients per month"
-            @dataTwoData="4"
-          />
+        {{else}}
+          {{! ARG TODO remove once we have this dialed }}
+          <EmptyState @title="Coming soon" @message="Under construction for the 1.10 binary." />
         {{/if}}
       {{else}}
         <EmptyState

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

@@ -25,8 +25,8 @@
           Current month
         </LinkTo>
       </LinkTo>
-      <LinkTo @route="vault.cluster.clients.index" @query={{hash tab="history"}} @tagName="li" @activeClass="is-active">
-        <LinkTo @route="vault.cluster.clients.index" @query={{hash tab="history"}} data-test-usage-tab={{true}}>
+      <LinkTo @route="vault.cluster.clients.index" @query={{hash tab="dashboard"}} @tagName="li" @activeClass="is-active">
+        <LinkTo @route="vault.cluster.clients.index" @query={{hash tab="dashboard"}} data-test-usage-tab={{true}}>
           Monthly history
         </LinkTo>
       </LinkTo>
@@ -62,7 +62,8 @@
     </ToolbarActions>
   </Toolbar>
   <Clients::Config @model={{this.model.config}} @isLoading={{this.currentlyLoading}} />
-{{else}}
-  {{!-- <Clients::Dashboard @tab={{this.tab}} @model={{this.model}} @isLoading={{this.currentlyLoading}} /> --}}
-  <Clients::History @tab={{this.tab}} @model={{this.model}} @isLoading={{this.currentlyLoading}} />
+{{else if (eq this.tab "current")}}
+  <Clients::Current @tab={{this.tab}} @model={{this.model}} @isLoading={{this.currentlyLoading}} />
+{{else if (eq this.tab "dashboard")}}
+  <Clients::Dashboard @tab={{this.tab}} @model={{this.model}} @isLoading={{this.currentlyLoading}} />
 {{/if}}

ui/mirage/handlers/activity.js

@@ -1,5 +1,11 @@
 export default function (server) {
   // 1.10 API response
+  server.get('sys/internal/counters/config', function (db) {
+    return {
+      request_id: '00001',
+      data: db['clients/configs'].first(),
+    };
+  });
   server.get('/sys/internal/counters/activity', function () {
     return {
       request_id: '26be5ab9-dcac-9237-ec12-269a8ca647d5',

ui/mirage/handlers/base.js

@@ -30,6 +30,7 @@ export default function (server) {
     };
   });
 
+  // ARG TODO eventually remove from base it should all come from activity after 1.10 release.
   server.get('/sys/internal/counters/activity/monthly', function () {
     return {
       data: {