open-vault/ui/app/templates/vault/cluster/secrets/backends.hbs

<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Secrets Engines
    </h1>
  </p.levelLeft>
</PageHeader>

<Toolbar>
  <ToolbarActions>
    <ToolbarAddButton @params={{array 'vault.cluster.settings.mount-secret-backend'}}>
      Enable new engine
    </ToolbarAddButton>
  </ToolbarActions>
</Toolbar>

{{#each supportedBackends as |backend|}}
  {{#linked-block
    "vault.cluster.secrets.backend.list-root"
    backend.id
    class="list-item-row"
    data-test-secret-backend-row=backend.id
  }}
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <ToolTip @horizontalPosition="left" as |T|>
            <T.trigger>
              <ICon @glyph={{concat "enable/" (or backend.engineType "secrets")}} @size="24" @class="has-text-grey-light" />
            </T.trigger>
            <T.content @class="tool-tip">
              <div class="box">
                {{backend.engineType}}
              </div>
            </T.content>
          </ToolTip>
          {{#link-to "vault.cluster.secrets.backend.list-root" backend.id
             class="has-text-black has-text-weight-semibold"
             data-test-secret-path=true
           }}
            {{backend.path}}
          {{/link-to}}
          <br />
          <code class="has-text-grey is-size-8">
          {{#if (eq backend.options.version 2)}}
            v2
          {{/if}}
          </code>
          <code class="has-text-grey is-size-8">
            {{backend.accessor}}
          </code>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          {{#popup-menu name="engine-menu"}}
             <nav class="menu">
               <ul class="menu-list">
                 <li class="action">
                   {{#link-to "vault.cluster.secrets.backend.configuration" backend.id}}
                     View configuration
                   {{/link-to}}
                  </li>
                  {{#unless (eq backend.type "cubbyhole")}}
                  <li class="action">
                    <ConfirmAction
                      @confirmButtonClasses="button is-primary"
                      @buttonClasses="link is-destroy"
                      @onConfirmAction={{perform disableEngine backend}}
                      @confirmMessage={{concat "Are you sure you want to disable the " backend.engineType " Secrets Engine at " backend.path "?"}}
                      @showConfirm={{get this (concat "shouldDelete-" (dot-to-dash backend.id))}}
                      @class={{if (get this (concat "shouldDelete-" (dot-to-dash backend.id))) "message is-block is-warning is-outline"}}
                      @containerClasses="message-body is-block"
                      @messageClasses="is-block"
                      @confirmButtonText="Disable"
                      data-test-engine-disable>
                      Disable
                    </ConfirmAction>
                   </li>
                   {{/unless}}
                 {{#if item.updatePath.isPending}}
                   <li class="action">
                     <button disabled type="button" class="link button is-loading is-transparent"></button>
                    </li>
                 {{/if}}
              </ul>
            </nav>
          {{/popup-menu}}
        </div>
      </div>
    </div>
  {{/linked-block}}
{{/each}}
{{#each unsupportedBackends as |backend|}}
  <div class="list-item-row" data-test-secret-backend-row={{backend.id}}>
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <div data-test-secret-path class="has-text-weight-semibold has-text-grey">
            <ToolTip @horizontalPosition="left" as |T|>
              <T.trigger>
                <ICon @glyph={{concat "enable/" (or backend.engineType "secrets")}} @size=24 @class="has-text-grey-light"/>
              </T.trigger>
              <T.content @class="tool-tip">
                <div class="box">
                  {{backend.engineType}}
                </div>
              </T.content>
            </ToolTip>
            {{backend.path}}
          </div>
          <code class="has-text-grey is-size-8">
            {{backend.accessor}}
          </code>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          {{#popup-menu name="engine-menu"}}
             <nav class="menu">
               <ul class="menu-list">
                 <li class="action">
                   {{#link-to "vault.cluster.secrets.backend.configuration" backend.id data-test-engine-config}}
                     View configuration
                   {{/link-to}}
                 </li>
                 <li>
                   <ConfirmAction
                     @confirmButtonClasses="button is-primary"
                     @buttonClasses="link is-destroy"
                     @onConfirmAction={{perform disableEngine backend}}
                     @confirmMessage={{concat "Are you sure you want to disable the " backend.engineType " Secrets Engine at " backend.path "?"}}
                     @showConfirm={{get this (concat "shouldDelete-" (dot-to-dash backend.id))}}
                     @class={{if (get this (concat "shouldDelete-" (dot-to-dash backend.id))) "message is-block is-warning is-outline"}}
                     @containerClasses="message-body is-block"
                     @messageClasses="is-block"
                     @confirmButtonText="Disable"
                     data-test-engine-disable
                     >
                     Disable
                   </ConfirmAction>
                 </li>
               </ul>
            </nav>
          {{/popup-menu}}
        </div>
      </div>
    </div>
  </div>
{{/each}}