225 lines
8.1 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
{{#if (and this.version.hasSecretsSync (not @isActivated))}}
{{#unless this.hideOptIn}}
<Hds::Alert
@type="inline"
@color="warning"
@onDismiss={{fn (mut this.hideOptIn) true}}
data-test-secrets-sync-opt-in-banner
as |A|
>
<A.Title>Enable Secrets Sync feature</A.Title>
<A.Description>To use this feature, specific activation is required. Please review the feature documentation and enable
it. If you're upgrading from beta, your previous data will be accessible after activation.</A.Description>
<A.Button
@text="Enable"
@color="secondary"
{{on "click" (fn (mut this.showActivateSecretsSyncModal) true)}}
data-test-secrets-sync-opt-in-banner-enable
/>
</Hds::Alert>
{{/unless}}
{{/if}}
{{! error message if post to activated endpoint fails }}
{{#if this.error}}
{{#unless this.hideError}}
<MessageError @errorMessage={{this.error}} @onDismiss={{fn (mut this.hideError) true}} data-test-opt-in-error />
{{/unless}}
{{/if}}
{{#if @destinations}}
<SyncHeader @title="Secrets Sync" />
<div class="tabs-container box is-bottomless is-marginless is-paddingless">
<nav class="tabs" aria-label="destination tabs">
<ul>
<li>
<LinkTo @route="secrets.overview" data-test-tab="Overview">Overview</LinkTo>
</li>
<li>
<LinkTo @route="secrets.destinations" data-test-tab="Destinations">Destinations</LinkTo>
</li>
</ul>
</nav>
</div>
<Toolbar aria-label="toolbar for sync overview page">
<ToolbarActions aria-label="toolbar action links">
<ToolbarLink
aria-label="toolbar link navigates to create a new destination"
@route="secrets.destinations.create"
@type="add"
data-test-create-destination
>
Create new destination
</ToolbarLink>
</ToolbarActions>
</Toolbar>
<OverviewCard @cardTitle="Secrets by destination" class="has-top-margin-l">
{{#if this.fetchAssociationsForDestinations.isRunning}}
<div data-test-sync-overview-loading>
<Icon @name="loading" @size="24" />
Loading destinations...
</div>
{{else if (not this.destinationMetrics)}}
<EmptyState
@title="Error fetching information"
@message="Ensure that the policy has access to read sync associations."
>
<Hds::Link::Standalone
@icon="docs-link"
@iconPosition="trailing"
@text="Secrets Sync association API docs"
@href={{doc-link "/vault/api-docs/system/secrets-sync#read-associations"}}
/>
</EmptyState>
{{else}}
<Hds::Table>
<:head as |H|>
<H.Tr>
<H.Th>Sync destination</H.Th>
<H.Th @align="right">
# of external secrets
<Hds::TooltipButton
@text="Number of secrets created at the destination"
aria-label="More information"
class="is-v-centered"
>
<FlightIcon @name="info" />
</Hds::TooltipButton>
</H.Th>
<H.Th @align="right">Last updated</H.Th>
<H.Th @align="right">Actions</H.Th>
</H.Tr>
</:head>
<:body as |B|>
{{#each this.destinationMetrics as |data index|}}
<B.Tr data-test-overview-table-row>
<B.Td>
<Icon @name={{data.icon}} data-test-overview-table-icon={{index}} />
<span data-test-overview-table-name={{index}}>{{data.name}}</span>
{{#if data.status}}
<Hds::Badge
@text={{data.status}}
@color={{if (eq data.status "All synced") "success"}}
data-test-overview-table-badge={{index}}
/>
{{/if}}
</B.Td>
<B.Td @align="right" data-test-overview-table-total={{index}}>
{{data.associationCount}}
</B.Td>
<B.Td @align="right" data-test-overview-table-updated={{index}}>
{{#if data.lastUpdated}}
{{date-format data.lastUpdated "MMMM do yyyy, h:mm:ss a"}}
{{else}}
&mdash;
{{/if}}
</B.Td>
<B.Td @align="right">
<Hds::Dropdown @isInline={{true}} @listPosition="bottom-right" as |dd|>
<dd.ToggleIcon
@icon="more-horizontal"
@text="Actions"
@hasChevron={{false}}
@size="small"
data-test-overview-table-action-toggle={{index}}
/>
<dd.Interactive
@route="secrets.destinations.destination.sync"
@models={{array data.type data.name}}
@text="Sync secrets"
data-test-overview-table-action="sync"
/>
<dd.Interactive
@route="secrets.destinations.destination.secrets"
@models={{array data.type data.name}}
@text="View synced secrets"
data-test-overview-table-action="details"
/>
</Hds::Dropdown>
</B.Td>
</B.Tr>
{{/each}}
</:body>
</Hds::Table>
<Hds::Pagination::Numbered
@totalItems={{@destinations.length}}
@currentPage={{this.page}}
@currentPageSize={{this.pageSize}}
@showSizeSelector={{false}}
@onPageChange={{perform this.fetchAssociationsForDestinations}}
/>
{{/if}}
</OverviewCard>
<div class="is-grid grid-2-columns grid-gap-2 has-top-margin-l has-bottom-margin-l">
<OverviewCard
@cardTitle="Total destinations"
@subText="The total number of connected destinations"
@actionText="Create new"
@actionTo="secrets.destinations.create"
class="is-flex-half"
>
<h2 class="title is-2 has-font-weight-normal has-top-margin-m" data-test-overview-card-content="Total destinations">
{{or @destinations.length "None"}}
</h2>
</OverviewCard>
<OverviewCard
@cardTitle="Total secrets"
@subText="The total number of secrets that have been synced from Vault over time. One secret will be counted as one sync client."
@actionText="View billing"
@actionTo="clientCountOverview"
@actionExternal={{true}}
class="is-flex-half"
>
<h2 class="title is-2 has-font-weight-normal has-top-margin-m" data-test-overview-card-content="Total secrets">
{{or @totalVaultSecrets "None"}}
</h2>
</OverviewCard>
</div>
{{else}}
<Secrets::LandingCta @isActivated={{@isActivated}} @hasSecretsSync={{this.version.hasSecretsSync}} />
{{/if}}
{{#if this.showActivateSecretsSyncModal}}
<Hds::Modal @onClose={{fn (mut this.showActivateSecretsSyncModal) false}} data-test-secrets-sync-opt-in-modal as |M|>
<M.Header @icon="alert-triangle">
Enable Secrets Sync feature
</M.Header>
<M.Body>
<p class="has-bottom-margin-m">
By enabling the Secrets Sync feature you may incur additional costs. Please review our
<Hds::Link::Inline
@isHrefExternal={{true}}
@href={{doc-link "/hcp/docs/vault/what-is-hcp-vault/client#secrets-sync"}}
>documentation</Hds::Link::Inline>
to learn more.
</p>
<Hds::Form::Checkbox::Field
{{on "change" (fn (mut this.hasConfirmedDocs) (not this.hasConfirmedDocs))}}
data-test-opt-in-check
as |F|
>
<F.Label>I've read the above linked document</F.Label>
</Hds::Form::Checkbox::Field>
</M.Body>
<M.Footer>
<Hds::ButtonSet>
<Hds::Button
data-test-opt-in-confirm
@text="Confirm"
disabled={{(not this.hasConfirmedDocs)}}
{{on "click" (perform this.onFeatureConfirm)}}
/>
<Hds::Button data-test-opt-in-cancel @text="Cancel" @color="secondary" {{on "click" this.resetOptInModal}} />
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{/if}}