UI: VAULT-12949 use overview card component for kubernetes overview (#18845)

* VAULT-12949 use overview card component for kubernetes overview

* Add a little more spacing

* Add margin to pki overview form

* Remove form element
This commit is contained in:
Kianna
2023-01-25 16:09:04 -08:00
committed by GitHub
parent 990d3bacc2
commit dbefdc38fa
7 changed files with 111 additions and 118 deletions

View File

@@ -3,51 +3,40 @@
</TabPageHeader>
{{#if @config}}
<div class="has-top-margin-m">
<div class="is-flex">
<div class="box has-padding-m has-right-margin-m is-rounded column is-flex-half" data-test-roles-card>
<div class="is-flex-between">
<h2 class="title is-3">
Roles
</h2>
{{#if @roles.length}}
<LinkTo class="is-no-underline" @route="roles">View Roles</LinkTo>
{{else}}
<LinkTo class="is-no-underline" @route="roles.create">Create Role</LinkTo>
{{/if}}
</div>
<p>The number of Vault roles being used to generate Kubernetes credentials.</p>
<h2 class="title has-font-weight-normal is-3 has-top-margin-l">
{{or @roles.length "None"}}
</h2>
<div class="selectable-card-container has-grid has-top-margin-l has-two-col-grid">
<OverviewCard
@cardTitle="Roles"
@subText="The number of Vault roles being used to generate Kubernetes credentials."
@actionText={{if @roles.length "View Roles" "Create Role"}}
@actionTo={{if @roles.length "roles" "roles.create"}}
>
<h2 class="title is-2 has-font-weight-normal has-top-margin-m" data-test-roles-card-overview-num>{{or
@roles.length
"None"
}}</h2>
</OverviewCard>
<OverviewCard @cardTitle="Generate credentials" @subText="Quickly generate credentials by typing the role name.">
<div class="has-top-margin-m is-flex">
<SearchSelect
class="is-flex-1"
@placeholder="Type to find a role..."
@disallowNewItems={{true}}
@options={{this.roleOptions}}
@selectLimit="1"
@fallbackComponent="input-search"
@onChange={{this.selectRole}}
/>
<button
class="button has-left-margin-s"
type="button"
disabled={{not this.selectedRole}}
{{on "click" this.generateCredential}}
data-test-generate-credential-button
>
Generate
</button>
</div>
<div class="box has-padding-m is-rounded column is-flex-half" data-test-generate-credential-card>
<h2 class="title is-3">
Generate credentials
</h2>
<p>Quickly generate credentials by typing the role name.</p>
<div class="is-flex-center has-top-margin-s">
<SearchSelect
class="is-marginless is-flex-1"
@placeholder="Type to find a role..."
@disallowNewItems={{true}}
@options={{this.roleOptions}}
@selectLimit="1"
@fallbackComponent="input-search"
@onChange={{this.selectRole}}
/>
<button
class="button has-left-margin-m"
type="button"
disabled={{not this.selectedRole}}
{{on "click" this.generateCredential}}
data-test-generate-credential-button
>
Generate
</button>
</div>
</div>
</div>
</OverviewCard>
</div>
{{else}}
<ConfigCta />