-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* UI: add pagination to new PKI (#23193) * fixes store type import * fixes tests --------- Co-authored-by: Jordan Reimer <[email protected]>
- Loading branch information
Showing
28 changed files
with
657 additions
and
265 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| ```release-note:improvement | ||
| ui: Add pagination to PKI roles, keys, issuers, and certificates list pages | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,111 @@ | ||
| {{#each @issuers as |pkiIssuer idx|}} | ||
| <LinkedBlock class="list-item-row" @params={{array "issuers.issuer.details" pkiIssuer.id}} @linkPrefix={{@mountPoint}}> | ||
| <div class="level is-mobile"> | ||
| <div class="level-left"> | ||
| <div data-test-issuer-list={{pkiIssuer.id}}> | ||
| <Icon @name="certificate" class="has-text-grey-light" /> | ||
| <span class="has-text-weight-semibold is-underline"> | ||
| {{pkiIssuer.issuerRef}} | ||
| {{#if pkiIssuer.issuerName}} | ||
| <span class="tag has-text-grey-dark">{{pkiIssuer.id}}</span> | ||
| {{/if}} | ||
| </span> | ||
| <div class="is-flex-row has-left-margin-l has-top-margin-xs"> | ||
| {{#if pkiIssuer.isDefault}} | ||
| <span class="tag has-text-grey-dark" data-test-is-default={{idx}}>default issuer</span> | ||
| {{/if}} | ||
| {{#if (not (eq pkiIssuer.isRoot undefined))}} | ||
| <span class="tag has-text-grey-dark" data-test-is-root-tag={{idx}}>{{if | ||
| pkiIssuer.isRoot | ||
| "root" | ||
| "intermediate" | ||
| }}</span> | ||
| {{/if}} | ||
| {{#if pkiIssuer.serialNumber}} | ||
| <span class="tag is-transparent has-right-margin-none" data-test-serial-number={{idx}}> | ||
| <InfoTooltip> | ||
| Serial number | ||
| </InfoTooltip> | ||
| {{pkiIssuer.serialNumber}} | ||
| <PkiPaginatedList @listRoute="issuers.index" @list={{@issuers}}> | ||
| <:actions> | ||
| <ToolbarLink @route="issuers.import" data-test-generate-issuer="import"> | ||
| Import | ||
| </ToolbarLink> | ||
| <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|> | ||
| <D.Trigger | ||
| class={{concat "toolbar-link" (if D.isOpen " is-active")}} | ||
| @htmlTag="button" | ||
| data-test-issuer-generate-dropdown | ||
| > | ||
| Generate | ||
| <Chevron @direction="down" @isButton={{true}} /> | ||
| </D.Trigger> | ||
| <D.Content @defaultClass="popup-menu-content"> | ||
| <nav class="box menu" aria-label="generate options"> | ||
| <ul class="menu-list"> | ||
| <li class="action"> | ||
| <LinkTo @route="issuers.generate-root" {{on "click" (fn this.onLinkClick D)}} data-test-generate-issuer="root"> | ||
| Root | ||
| </LinkTo> | ||
| </li> | ||
| <li class="action"> | ||
| <LinkTo | ||
| @route="issuers.generate-intermediate" | ||
| {{on "click" (fn this.onLinkClick D)}} | ||
| data-test-generate-issuer="intermediate" | ||
| > | ||
| Intermediate CSR | ||
| </LinkTo> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </D.Content> | ||
| </BasicDropdown> | ||
| </:actions> | ||
| <:list as |issuers|> | ||
| {{#each issuers as |pkiIssuer idx|}} | ||
| <LinkedBlock class="list-item-row" @params={{array "issuers.issuer.details" pkiIssuer.id}} @linkPrefix={{@mountPoint}}> | ||
| <div class="level is-mobile"> | ||
| <div class="level-left"> | ||
| <div data-test-issuer-list={{pkiIssuer.id}}> | ||
| <Icon @name="certificate" class="has-text-grey-light" /> | ||
| <span class="has-text-weight-semibold is-underline"> | ||
| {{pkiIssuer.issuerRef}} | ||
| {{#if pkiIssuer.issuerName}} | ||
| <span class="tag has-text-grey-dark">{{pkiIssuer.id}}</span> | ||
| {{/if}} | ||
| </span> | ||
| {{/if}} | ||
| {{#if pkiIssuer.parsedCertificate.common_name}} | ||
| <span class="tag is-transparent has-left-margin-none" data-test-common-name={{idx}}> | ||
| <InfoTooltip> | ||
| Common name | ||
| </InfoTooltip> | ||
| {{pkiIssuer.parsedCertificate.common_name}} | ||
| </span> | ||
| {{/if}} | ||
| <div class="is-flex-row has-left-margin-l has-top-margin-xs"> | ||
| {{#if pkiIssuer.isDefault}} | ||
| <span class="tag has-text-grey-dark" data-test-is-default={{idx}}>default issuer</span> | ||
| {{/if}} | ||
| {{#if (not-eq pkiIssuer.isRoot undefined)}} | ||
| <span class="tag has-text-grey-dark" data-test-is-root-tag={{idx}}>{{if | ||
| pkiIssuer.isRoot | ||
| "root" | ||
| "intermediate" | ||
| }}</span> | ||
| {{/if}} | ||
| {{#if pkiIssuer.serialNumber}} | ||
| <span class="tag is-transparent has-right-margin-none" data-test-serial-number={{idx}}> | ||
| <InfoTooltip> | ||
| Serial number | ||
| </InfoTooltip> | ||
| {{pkiIssuer.serialNumber}} | ||
| </span> | ||
| {{/if}} | ||
| {{#if pkiIssuer.parsedCertificate.common_name}} | ||
| <span class="tag is-transparent has-left-margin-none" data-test-common-name={{idx}}> | ||
| <InfoTooltip> | ||
| Common name | ||
| </InfoTooltip> | ||
| {{pkiIssuer.parsedCertificate.common_name}} | ||
| </span> | ||
| {{/if}} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="level-right is-flex is-paddingless is-marginless"> | ||
| <div class="level-item"> | ||
| <PopupMenu> | ||
| <nav class="menu" aria-label="issuer config options"> | ||
| <ul class="menu-list"> | ||
| <li data-test-popup-menu-details> | ||
| <LinkTo @route="issuers.issuer.details" @model={{pkiIssuer.id}}> | ||
| Details | ||
| </LinkTo> | ||
| </li> | ||
| <li> | ||
| <LinkTo @route="issuers.issuer.edit" @model={{pkiIssuer.id}}> | ||
| Edit | ||
| </LinkTo> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </PopupMenu> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="level-right is-flex is-paddingless is-marginless"> | ||
| <div class="level-item"> | ||
| <PopupMenu> | ||
| <nav class="menu" aria-label="issuer config options"> | ||
| <ul class="menu-list"> | ||
| <li data-test-popup-menu-details> | ||
| <LinkTo @route="issuers.issuer.details" @model={{pkiIssuer.id}}> | ||
| Details | ||
| </LinkTo> | ||
| </li> | ||
| <li> | ||
| <LinkTo @route="issuers.issuer.edit" @model={{pkiIssuer.id}}> | ||
| Edit | ||
| </LinkTo> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </PopupMenu> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </LinkedBlock> | ||
| {{/each}} | ||
| </LinkedBlock> | ||
| {{/each}} | ||
| </:list> | ||
| <:empty> | ||
| <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}> | ||
| <LinkTo @route="configuration.create"> | ||
| Configure PKI | ||
| </LinkTo> | ||
| </EmptyState> | ||
| </:empty> | ||
| </PkiPaginatedList> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: BUSL-1.1 | ||
| */ | ||
|
|
||
| import { action } from '@ember/object'; | ||
| import { next } from '@ember/runloop'; | ||
| import Component from '@glimmer/component'; | ||
| import { PKI_DEFAULT_EMPTY_STATE_MSG } from 'pki/routes/overview'; | ||
| import type PkiIssuerModel from 'vault/models/pki/issuer'; | ||
|
|
||
| interface BasicDropdown { | ||
| actions: { | ||
| close: CallableFunction; | ||
| }; | ||
| } | ||
| interface Args { | ||
| issuers: PkiIssuerModel[]; | ||
| mountPoint: string; | ||
| } | ||
|
|
||
| export default class PkiIssuerList extends Component<Args> { | ||
| notConfiguredMessage = PKI_DEFAULT_EMPTY_STATE_MSG; | ||
|
|
||
| // To prevent production build bug of passing D.actions to on "click": https://github.com/hashicorp/vault/pull/16983 | ||
| @action onLinkClick(D: BasicDropdown) { | ||
| next(() => D.actions.close()); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: BUSL-1.1 | ||
| */ | ||
|
|
||
| import Component from '@glimmer/component'; | ||
| import { PKI_DEFAULT_EMPTY_STATE_MSG } from 'pki/routes/overview'; | ||
| import type PkiKeyModel from 'vault/models/pki/key'; | ||
|
|
||
| interface Args { | ||
| keyModels: PkiKeyModel[]; | ||
| mountPoint: string; | ||
| canImportKey: boolean; | ||
| canGenerateKey: boolean; | ||
| canRead: boolean; | ||
| canEdit: boolean; | ||
| hasConfig: boolean; | ||
| } | ||
|
|
||
| export default class PkiKeyList extends Component<Args> { | ||
| notConfiguredMessage = PKI_DEFAULT_EMPTY_STATE_MSG; | ||
| } |
Oops, something went wrong.