open-nomad/ui/app/templates/policies/policy.hbs
Phil Renaud dce8717866
[ui] Token management interface on policy pages (#15435)
* basic-functionality demo for token CRUD

* Styling for tokens crud

* Tokens crud styles

* Expires, not expiry

* Mobile styles etc

* Refresh and redirect rules for policy save and token creation

* Delete method and associated serializer change

* Ability-checking for tokens

* Update policies acceptance tests to reflect new redirect rules

* Token ability unit tests

* Mirage config methods for token crud

* Token CRUD acceptance tests

* A couple visual diff snapshots

* Add and Delete abilities referenced for token operations

* Changing timeouts and adding a copy to clipboard action

* replaced accessor with secret when copying to clipboard

* PR comments addressed

* Simplified error passing for policy editor
2022-12-15 13:11:28 -05:00

140 lines
4.5 KiB
Handlebars

<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}}