mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-31 19:41:12 +02:00
* Create date-range component with tests * update selectors and callback behavior * update cc tests & selectors * cleanup * RIP calendar-widget and date-dropdown -- you were good components * reset on close * Add changelog * use parseApiTimestamp * fix test * cleanup * make date-range typescript, update behavior * add words * minor styling * fix test
102 lines
3.5 KiB
Handlebars
102 lines
3.5 KiB
Handlebars
{{!
|
|
Copyright (c) HashiCorp, Inc.
|
|
SPDX-License-Identifier: BUSL-1.1
|
|
~}}
|
|
|
|
<div ...attributes>
|
|
<Hds::Text::Display @tag="p" class="has-bottom-margin-xs">
|
|
Date range
|
|
</Hds::Text::Display>
|
|
|
|
<div class="is-flex-align-baseline">
|
|
{{#if (and @startTime @endTime)}}
|
|
<p class="is-size-6" data-test-date-range="start">{{this.formattedDate @startTime}}</p>
|
|
<p class="has-left-margin-xs"> — </p>
|
|
<p class="is-size-6 has-left-margin-xs" data-test-date-range="end">{{this.formattedDate @endTime}}</p>
|
|
<Hds::Button
|
|
class="has-left-margin-xs"
|
|
@text="Edit"
|
|
@color="tertiary"
|
|
@icon="edit"
|
|
@iconPosition="trailing"
|
|
data-test-date-range-edit
|
|
{{on "click" (fn (mut this.showEditModal) true)}}
|
|
/>
|
|
{{else}}
|
|
<Hds::Button
|
|
@text="Set date range"
|
|
@icon="edit"
|
|
{{on "click" (fn (mut this.showEditModal) true)}}
|
|
data-test-set-date-range
|
|
/>
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if this.showEditModal}}
|
|
<Hds::Modal data-test-date-range-edit-modal @onClose={{this.onClose}} as |M|>
|
|
<M.Header>
|
|
Edit date range
|
|
</M.Header>
|
|
<M.Body>
|
|
<p class="has-bottom-margin-s">
|
|
The start date will be used as the client counting start time and all clients in that month will be considered new.
|
|
{{#if this.version.isEnterprise}}
|
|
We recommend setting this date as your license or billing start date to get the most accurate new and total
|
|
client count estimations. These dates are only for querying data in storage. Editing the date range does not
|
|
change any license or billing configurations.
|
|
{{/if}}
|
|
</p>
|
|
<div class="clients-date-range-display">
|
|
<div>
|
|
<Hds::Form::Label for="start-month">Start</Hds::Form::Label>
|
|
<input
|
|
class="hds-form-text-input"
|
|
type="month"
|
|
value={{this.startDate}}
|
|
max={{this.currentMonth}}
|
|
id="start-month"
|
|
name="start"
|
|
{{on "change" this.updateDate}}
|
|
data-test-date-edit="start"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Hds::Form::Label for="end-month">End</Hds::Form::Label>
|
|
<input
|
|
class="hds-form-text-input"
|
|
type="month"
|
|
value={{this.endDate}}
|
|
max={{this.currentMonth}}
|
|
id="end-month"
|
|
name="end"
|
|
{{on "change" this.updateDate}}
|
|
data-test-date-edit="end"
|
|
/>
|
|
</div>
|
|
<Hds::Button
|
|
@text="Reset"
|
|
@color="tertiary"
|
|
@icon="reload"
|
|
{{on "click" this.resetDates}}
|
|
data-test-date-edit="reset"
|
|
/>
|
|
</div>
|
|
{{#if this.validationError}}
|
|
<Hds::Form::Error
|
|
class="has-top-margin-xs"
|
|
data-test-date-range-validation
|
|
>{{this.validationError}}</Hds::Form::Error>
|
|
{{/if}}
|
|
{{#if this.useDefaultDates}}
|
|
<Hds::Alert @type="compact" @color="highlight" class="has-top-margin-xs" data-test-range-default-alert as |A|>
|
|
<A.Description>Dashboard will use the default date range from the API.</A.Description>
|
|
</Hds::Alert>
|
|
{{/if}}
|
|
</M.Body>
|
|
<M.Footer as |F|>
|
|
<Hds::Button data-test-save @text="Save" {{on "click" this.handleSave}} />
|
|
<Hds::Button data-test-cancel @text="Cancel" @color="secondary" {{on "click" F.close}} />
|
|
</M.Footer>
|
|
</Hds::Modal>
|
|
{{/if}}
|
|
</div> |