open-vault/ui/app/templates/components/raft-storage-overview.hbs

<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Raft Storage
    </h1>
  </p.levelLeft>
</PageHeader>
<Toolbar>
  <ToolbarActions>
    <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
      <D.Trigger
        data-test-popup-menu-trigger="true"
        class={{concat "toolbar-link" (if D.isOpen " is-active")}}
        @htmlTag="button"
      >
        Snapshots
        <Chevron @direction="down" @isButton={{true}} />
      </D.Trigger>
      <D.Content class="popup-menu-content">
        <nav class="box menu">
          <ul class="menu-list">
            <li class="action">
              {{#if this.useServiceWorker}}
                <a
                  href="/v1/sys/storage/raft/snapshot"
                  onclick={{queue (action "downloadViaServiceWorker") (action D.actions.close)}}
                >
                  Download
                </a>
              {{else}}
                <button
                  type="button"
                  class="link is-ghost"
                  onclick={{queue (action "downloadSnapshot") (action D.actions.close)}}
                >
                  Download
                </button>
              {{/if}}
            </li>
            <li class="action">
              <LinkTo @route="vault.cluster.storage-restore">
                Restore
              </LinkTo>
            </li>
          </ul>
        </nav>
      </D.Content>
    </BasicDropdown>
  </ToolbarActions>
</Toolbar>

<table class="vlt-table is-fullwidth">
  <caption class="is-collapsed">Raft servers</caption>
  <thead class="has-text-weight-semibold">
    <tr>
      <th scope="col">Address</th>
      <th scope="col">Voter</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    {{#each @model as |server|}}
      <tr data-raft-row>
        <td>
          {{server.address}}
          {{#if server.leader}}
            <span class="tag">Leader</span>
          {{/if}}
        </td>
        <td>

          {{#if server.voter}}
            <Icon @name="check-circle" aria-label="Yes" class="icon-true has-text-success" />
          {{else}}
            <Icon @name="x-square" aria-label="No" class="icon-false" />
          {{/if}}
        </td>
        <td class="middle no-padding has-text-right">
          <PopupMenu>
            <Confirm as |c|>
              <nav>
                <ul>
                  <li class="action">
                    <c.Message
                      @id={{server.nodeId}}
                      @onConfirm={{action "removePeer" server}}
                      @triggerText="Remove Peer"
                      @confirmButtonText="Remove"
                      @title={{concat "Remove " server.nodeId "?"}}
                      @message="This will remove the server from the raft cluster."
                    />
                  </li>
                </ul>
              </nav>
            </Confirm>
          </PopupMenu>
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>