open-nomad/ui/app/templates/policies/policy.hbs

<Breadcrumb @crumb={{hash label=this.policy.name args=(array "policies.policy" this.policy.name)}} />
{{page-title "Policy"}}
<section class="section">
	<h1 class="title with-flex" data-test-title>
		<div>
			{{this.policy.name}}
		</div>
		{{#if (can "destroy policy")}}
			<div>
				<TwoStepButton
					data-test-delete-button
					@idleText="Delete policy"
					@cancelText="Cancel"
					@confirmText="Yes, delete"
					@confirmationMessage="Are you sure?"
					@awaitingConfirmation={{this.deletePolicy.isRunning}}
					@onConfirm={{perform this.deletePolicy}}
					@onPrompt={{this.onDeletePrompt}}
					@onCancel={{this.onDeleteCancel}}
				/>
			</div>
		{{/if}}
	</h1>
	<PolicyEditor
		@policy={{this.policy}}
	/>

  {{#if (can "list token")}}
    <hr />

    <h2 class="title">
      Tokens
    </h2>

    {{#if (can "write token")}}
      <div class="token-operations">
        <div class="boxed-section">
          <div class="boxed-section-head">
            <h3>Create a Test Token</h3>
          </div>
          <div class="boxed-section-body">
            <p class="is-info">Create a test token that expires in 10 minutes for testing purposes.</p>
            <label>
              <button
                type="button"
                class="button is-info is-outlined create-test-token"
                data-test-create-test-token
                {{on "click" (perform this.createTestToken)}}
                >Create Test Token</button>
            </label>
          </div>
        </div>
        <div class="boxed-section">
          <div class="boxed-section-head">
            <h3>Create Tokens from the Nomad CLI</h3>
          </div>
          <div class="boxed-section-body">
            <p>When you're ready to create more tokens, you can do so via the <a class="external-link" href="https://developer.hashicorp.com/nomad/docs/commands" target="_blank" rel="noopener noreferrer">Nomad CLI <FlightIcon @name="external-link" /></a> with the following:
              <pre>
                <code>{{this.newTokenString}}</code>
                <CopyButton
                  data-test-copy-button
                  @clipboardText={{this.newTokenString}}
                  @compact={{true}}
                >
                </CopyButton>
              </pre>
            </p>
          </div>
        </div>
      </div>
    {{/if}}

    {{#if this.tokens.length}}
      <ListTable
        @source={{this.tokens}}
        @class="tokens no-mobile-condense" as |t|>
        <t.head>
          <th>Name</th>
          <th>Created</th>
          <th>Expires</th>
          {{#if (can "destroy token")}}
            <th>Delete</th>
          {{/if}}
        </t.head>
        <t.body as |row|>
          <tr data-test-policy-token-row>
            <td data-test-token-name>
              <Tooltip @text={{row.model.id}}>
                {{row.model.name}}
              </Tooltip>
            </td>
            <td>
              {{moment-from-now row.model.createTime interval=1000}}
            </td>
            <td>
              {{#if row.model.expirationTime}}
                <Tooltip @text={{row.model.expirationTime}}>
                  <span data-test-token-expiration-time class="{{if row.model.isExpired "has-text-danger"}}">{{moment-from-now row.model.expirationTime interval=1000}}</span>
                </Tooltip>
              {{else}}
                <span class="has-text-grey">Never</span>
              {{/if}}
            </td>
            {{#if (can "destroy token")}}
              <td class="is-200px">
                <TwoStepButton
                  data-test-delete-token-button
                  @idleText="Delete"
                  @cancelText="Cancel"
                  @confirmText="Yes, delete"
                  @confirmationMessage="Are you sure?"
                  @awaitingConfirmation={{row.model.isPendingDeletion}}
                  @onConfirm={{perform this.deleteToken row.model}}
                  @inlineText={{true}}
                  @classes={{hash
                    idleButton="is-danger is-outlined"
                    confirmButton="is-danger"
                  }}
                />
              </td>
            {{/if}}
          </tr>
        </t.body>
      </ListTable>
    {{else}}
      <div class="empty-message">
        <h3 data-test-empty-policies-list-headline class="empty-message-headline">
          No Tokens
        </h3>
        <p class="empty-message-body">
          No tokens are using this policy.
        </p>
      </div>
    {{/if}}
  {{/if}}

</section>

{{outlet}}