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

{{#if (and (eq @tab "dashboard") (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">
    {{#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
        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 comes from your license, and defines 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 startTimeFromLicense or startTimeFromResponse otherwise emptyState}}
      {{#if (or @model.startTimeFromLicense this.startTimeFromResponse)}}
        <div class="calendar-title">Filters</div>
        <Toolbar>
          <ToolbarFilters>
            <CalendarWidget
              @arrayOfMonths={{this.arrayOfMonths}}
              @endTimeDisplay={{this.endTimeDisplay}}
              @endTimeFromResponse={{this.endTimeFromResponse}}
              @handleClientActivityQuery={{this.handleClientActivityQuery}}
              @handleCurrentBillingPeriod={{this.handleCurrentBillingPeriod}}
              @startTimeDisplay={{this.startTimeDisplay}}
            />
            {{! ARG TODO more filters for namespace here }}
          </ToolbarFilters>
        </Toolbar>
        {{#if this.responseRangeDiffMessage}}
          <AlertBanner @type="warning" @class="has-top-margin-s" @message={{this.responseRangeDiffMessage}} />
        {{/if}}
        {{#if @isLoading}}
          <LayoutLoading />
        {{else if this.topTenNamespaces}}
          {{! TODO make conditional above more apt }}
          <Clients::Attribution
            @chartLegend={{this.chartLegend}}
            @topTenNamespaces={{this.topTenNamespaces}}
            @runningTotals={{this.runningTotals}}
            @selectedNamespace={{this.selectedNamespace}}
            @startTimeDisplay={{this.startTimeDisplay}}
            @endTimeDisplay={{this.endTimeDisplay}}
            @isDateRange={{this.isDateRange}}
            @timestamp={{this.responseTimestamp}}
          />
          {{! If no endTime that means the counters/activity request did not return a payload. }}
        {{else if this.endTime}}
          <EmptyState
            @title="No counter activity data"
            @message="There is no data in the activity data 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="Coming soon" @message="Under construction for the 1.10 binary." />
        {{/if}}
      {{/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 comes from your license, and defines when client counting starts. 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}}