open-vault/ui/app/templates/components/clients/dashboard.hbs

{{#if (and (eq @tab "history") (eq @model.config.queriesAvailable false))}}
  {{#if (eq @model.config.enabled "On")}}
    <EmptyState
      @title="No monthly history"
      @message="There is no data in the monthly history yet. We collect it at the end of each month, so your data will be available on the first of next month."
    />
  {{else}}
    <EmptyState
      @title="Data tracking is disabled"
      @message="Tracking is disabled, and no data is being collected. To turn it on, edit the configuration."
    >
      {{#if @model.config.configPath.canUpdate}}
        <p>
          <LinkTo @route="vault.cluster.clients.index" @query={{hash tab="config"}}>
            Go to configuration
          </LinkTo>
        </p>
      {{/if}}
    </EmptyState>
  {{/if}}
{{else}}
  <div class="box is-sideless is-fullwidth is-marginless is-bottomless">
    {{! ARG TODO change current to Dashboard }}
    {{#if (eq @tab "current")}}
      <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
        communicated with Vault. Documentation is available here.
      </p>
      {{! Calendar widget and Start Month picker }}
      <h1 data-test-client-count-title class="title is-6 has-bottom-margin-xs">
        Billing start month
      </h1>
      <div class="is-flex-align-baseline">
        <p class="is-size-6">{{this.startTimeDisplay}}</p>
        <button type="button" class="button is-link" {{on "click" (fn (mut this.isEditStartMonthOpen) true)}}>
          Edit
        </button>
      </div>
      <p class="is-8 has-text-grey has-bottom-margin-xl">
        This date is when client counting starts. Without this starting point, the data shown is not reliable.
      </p>
      {{#if (eq @model.config.enabled "Off")}}
        <AlertBanner data-test-tracking-disabled @type="warning" @title="Tracking is disabled">
          Tracking is currently disabled and data is not being collected. Historical data can be searched, but you will need
          to
          <LinkTo @route="vault.cluster.clients.edit">
            edit the configuration
          </LinkTo>
          to enable tracking again.
        </AlertBanner>
      {{/if}}
      {{! check for @startTime otherwise emptyState}}
      {{#if @model.startTime}}
        <div class="calendar-title">Filters</div>
        <Toolbar>
          <ToolbarFilters>
            <CalendarWidget
              @startTimeDisplay={{this.startTimeDisplay}}
              @handleClientActivityQuery={{this.handleClientActivityQuery}}
              @endTimeDisplay={{this.endTimeDisplay}}
            />
            {{! ARG TODO more filters for auth and 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"
          />
        {{/if}}
      {{else}}
        <EmptyState
          @title="No billing start date found"
          @message="In order to get the most from this data, please enter your billing period start month. This will ensure that the resulting data is accurate."
        />
      {{/if}}

      {{! Modal for startTime picker }}
      <Modal
        @title="Edit start month"
        @onClose={{action (mut this.isEditStartMonthOpen) false}}
        @isActive={{this.isEditStartMonthOpen}}
        @showCloseButton={{true}}
      >
        <section class="modal-card-body">
          <p class="has-bottom-margin-s">
            This date is when client counting starts, or the point at which clients become unique. Without this starting
            point, the data shown is not reliable.
          </p>
          <p class="has-bottom-margin-s"><strong>Billing contract start month</strong></p>
          <div class="modal-radio-button">
            <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
              <D.Trigger
                data-test-popup-menu-trigger="true"
                class={{concat "toolbar-link" (if D.isOpen " is-active")}}
                @htmlTag="button"
              >
                {{or this.startMonth "Month"}}
                <Chevron @direction="down" @isButton={{true}} />
              </D.Trigger>
              <D.Content class="popup-menu-content is-wide">
                <nav class="box menu scroll">
                  <ul class="menu-list">
                    {{#each this.months as |month|}}
                      <button
                        type="button"
                        class="link"
                        {{on "click" (queue (fn this.selectStartMonth month) (action D.actions.close))}}
                      >
                        {{month}}
                      </button>
                    {{/each}}
                  </ul>
                </nav>
              </D.Content>
            </BasicDropdown>
            <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
              <D.Trigger
                data-test-popup-menu-trigger="true"
                class={{concat "toolbar-link" (if D.isOpen " is-active")}}
                @htmlTag="button"
              >
                {{or this.startYear "Year"}}
                <Chevron @direction="down" @isButton={{true}} />
              </D.Trigger>
              <D.Content class="popup-menu-content is-wide">
                <nav class="box menu">
                  <ul class="menu-list">
                    {{#each this.years as |year|}}
                      <button
                        type="button"
                        class="link"
                        {{on "click" (queue (fn this.selectStartYear year) (action D.actions.close))}}
                      >
                        {{year}}
                      </button>
                    {{/each}}
                  </ul>
                </nav>
              </D.Content>
            </BasicDropdown>
          </div>
        </section>
        <footer class="modal-card-foot modal-card-foot-outlined">
          <button
            type="button"
            class="button is-primary"
            onclick={{queue
              (action "handleClientActivityQuery" this.startMonth this.startYear "startTime")
              (action (mut this.isEditStartMonthOpen) false)
            }}
            disabled={{if (and this.startMonth this.startYear) false true}}
          >
            Save
          </button>
          <button
            type="button"
            class="button is-secondary"
            {{on
              "click"
              (queue (fn this.handleClientActivityQuery 0 0 "cancel") (action (mut this.isEditStartMonthOpen) false))
            }}
          >
            Cancel
          </button>
        </footer>
      </Modal>
    {{/if}}
  </div>
{{/if}}