vault/ui/lib/pki/addon/components/page/pki-overview.hbs

<div class="is-grid grid-2-columns grid-gap-2 has-top-margin-l">
  <OverviewCard
    @cardTitle="Issuers"
    @subText="The total number of issuers in this PKI mount. Includes both root and intermediate certificates."
    @actionText="View issuers"
    @actionTo="issuers"
  >
    <h2 class="title-number">{{format-number (if (eq @issuers 404) 0 @issuers.length)}}</h2>
  </OverviewCard>
  {{#if (not (eq @roles 403))}}
    <OverviewCard
      @cardTitle="Roles"
      @subText="The total number of roles in this PKI mount that have been created to generate certificates."
      @actionText="View roles"
      @actionTo="roles"
    >
      <h2 class="title-number">{{format-number (if (eq @roles 404) 0 @roles.length)}}</h2>
    </OverviewCard>
  {{/if}}
  <OverviewCard @cardTitle="Issue certificate" @subText="Begin issuing a certificate by choosing a role.">
    <div class="has-top-margin-m is-flex">
      <SearchSelect
        class="is-flex-1"
        @selectLimit="1"
        @models={{array "pki/role"}}
        @backend={{@engine.id}}
        @placeholder="Type to find a role..."
        @disallowNewItems={{true}}
        @onChange={{this.handleRolesInput}}
        @fallbackComponent="input-search"
        data-test-issue-certificate-input
      />
      <button
        type="submit"
        class="button is-secondary has-left-margin-s"
        disabled={{unless this.rolesValue true}}
        {{on "click" this.transitionToIssueCertificates}}
        data-test-issue-certificate-button
      >
        Issue
      </button>
    </div>
  </OverviewCard>

  <OverviewCard @cardTitle="View certificate" @subText="Quickly view a certificate by typing its serial number.">
    <div class="has-top-margin-m {{unless this.certificateValue 'is-flex'}}">
      <SearchSelect
        class="is-flex-1"
        @selectLimit="1"
        @models={{array "pki/certificate/base"}}
        @backend={{@engine.id}}
        @placeholder="33:a3:..."
        @disallowNewItems={{true}}
        @onChange={{this.handleCertificateInput}}
        @fallbackComponent="input-search"
        data-test-view-certificate-input
      />
      <button
        type="button"
        class="button is-secondary {{unless this.certificateValue 'has-left-margin-s'}}"
        disabled={{unless this.certificateValue true}}
        {{on "click" this.transitionToViewCertificates}}
        data-test-view-certificate-button
      >
        View
      </button>
    </div>
  </OverviewCard>

  <OverviewCard @cardTitle="View issuer" @subText="Choose or type an issuer name or ID to view its details">
    <div class="has-top-margin-m is-flex">
      <SearchSelect
        class="is-flex-1"
        @selectLimit="1"
        @models={{array "pki/issuer"}}
        @backend={{@engine.id}}
        @placeholder="Type to find an issuer..."
        @disallowNewItems={{true}}
        @onChange={{this.handleIssuerSearch}}
        @fallbackComponent="input-search"
        @shouldRenderName={{true}}
        @nameKey={{"issuerName"}}
        data-test-issue-issuer-input
      />
      <button
        type="submit"
        class="button is-secondary has-left-margin-s"
        disabled={{unless this.issuerValue true}}
        {{on "click" this.transitionToIssuerDetails}}
        data-test-view-issuer-button
      >
        View
      </button>
    </div>
  </OverviewCard>
</div>