[ui] Token management interface on policy pages

ui/app/abilities/token.js

@@ -0,0 +1,10 @@
+import AbstractAbility from './abstract';
+import { alias } from '@ember/object/computed';
+
+export default class extends AbstractAbility {
+  @alias('selfTokenIsManagement') canRead;
+  @alias('selfTokenIsManagement') canList;
+  @alias('selfTokenIsManagement') canWrite;
+  @alias('selfTokenIsManagement') canUpdate;
+  @alias('selfTokenIsManagement') canDestroy;
+}

ui/app/adapters/token.js

@@ -2,13 +2,25 @@ import { inject as service } from '@ember/service';
 import { default as ApplicationAdapter, namespace } from './application';
 import OTTExchangeError from '../utils/ott-exchange-error';
 import classic from 'ember-classic-decorator';
+import { singularize } from 'ember-inflector';
 
 @classic
 export default class TokenAdapter extends ApplicationAdapter {
   @service store;
 
   namespace = namespace + '/acl';
 
+  createRecord(_store, type, snapshot) {
+    let data = this.serialize(snapshot);
+    data.Policies = data.PolicyIDs;
+    return this.ajax(`${this.buildURL()}/token`, 'POST', { data });
+  }
+
+  // Delete at /token instead of /tokens
+  urlForDeleteRecord(identifier, modelName) {
+    return `${this.buildURL()}/${singularize(modelName)}/${identifier}`;
+  }
+
   findSelf() {
     return this.ajax(`${this.buildURL()}/token/self`, 'GET').then((token) => {
       const store = this.store;

ui/app/components/policy-editor.js

@@ -22,11 +22,18 @@ export default class PolicyEditorComponent extends Component {
     try {
       const nameRegex = '^[a-zA-Z0-9-]{1,128}$';
       if (!this.policy.name?.match(nameRegex)) {
-        throw new Error(
-          'Policy name must be 1-128 characters long and can only contain letters, numbers, and dashes.'
-        );
+        throw {
+          errors: [
+            {
+              detail:
+                'Policy name must be 1-128 characters long and can only contain letters, numbers, and dashes.',
+            },
+          ],
+        };
       }
 
+      const shouldRedirectAfterSave = this.policy.isNew;
+
       if (
         this.policy.isNew &&
         this.store.peekRecord('policy', this.policy.name)
@@ -47,9 +54,10 @@ export default class PolicyEditorComponent extends Component {
         timeout: 5000,
       });
 
-      this.router.transitionTo('policies');
+      if (shouldRedirectAfterSave) {
+        this.router.transitionTo('policies.policy', this.policy.id);
+      }
     } catch (error) {
-      console.log('error and its', error);
       this.flashMessages.add({
         title: `Error creating Policy ${this.policy.name}`,
         message: messageForError(error),

ui/app/components/tooltip.js

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 
 export default class Tooltip extends Component {
   get text() {
-    const inputText = this.args.text;
+    const inputText = this.args.text?.toString();
     if (!inputText || inputText.length < 30) {
       return inputText;
     }

ui/app/controllers/policies/index.js

@@ -6,7 +6,7 @@ export default class PoliciesIndexController extends Controller {
   @service router;
   get policies() {
     return this.model.policies.map((policy) => {
-      policy.tokens = this.model.tokens.filter((token) => {
+      policy.tokens = (this.model.tokens || []).filter((token) => {
         return token.policies.includes(policy);
       });
       return policy;

ui/app/controllers/policies/policy.js

@@ -3,14 +3,26 @@ import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import { alias } from '@ember/object/computed';
 import { task } from 'ember-concurrency';
 
 export default class PoliciesPolicyController extends Controller {
   @service flashMessages;
   @service router;
+  @service store;
+
+  @alias('model.policy') policy;
+  @alias('model.tokens') tokens;
+
+  @tracked
+  error = null;
 
   @tracked isDeleting = false;
 
+  get newTokenString() {
+    return `nomad acl token create -name="<TOKEN_NAME>" -policy="${this.policy.name}" -type=client -ttl=<8h>`;
+  }
+
   @action
   onDeletePrompt() {
     this.isDeleting = true;
@@ -23,8 +35,8 @@ export default class PoliciesPolicyController extends Controller {
 
   @task(function* () {
     try {
-      yield this.model.deleteRecord();
-      yield this.model.save();
+      yield this.policy.deleteRecord();
+      yield this.policy.save();
       this.flashMessages.add({
         title: 'Policy Deleted',
         type: 'success',
@@ -34,7 +46,7 @@ export default class PoliciesPolicyController extends Controller {
       this.router.transitionTo('policies');
     } catch (err) {
       this.flashMessages.add({
-        title: `Error deleting Policy ${this.model.name}`,
+        title: `Error deleting Policy ${this.policy.name}`,
         message: err,
         type: 'error',
         destroyOnClick: false,
@@ -43,4 +55,69 @@ export default class PoliciesPolicyController extends Controller {
     }
   })
   deletePolicy;
+
+  async refreshTokens() {
+    this.tokens = this.store
+      .peekAll('token')
+      .filter((token) =>
+        token.policyNames?.includes(decodeURIComponent(this.policy.name))
+      );
+  }
+
+  @task(function* () {
+    try {
+      const newToken = this.store.createRecord('token', {
+        name: `Example Token for ${this.policy.name}`,
+        policies: [this.policy],
+        // New date 10 minutes into the future
+        expirationTime: new Date(Date.now() + 10 * 60 * 1000),
+        type: 'client',
+      });
+      yield newToken.save();
+      this.refreshTokens();
+      this.flashMessages.add({
+        title: 'Example Token Created',
+        message: `${newToken.accessor}`,
+        type: 'success',
+        destroyOnClick: false,
+        timeout: 30000,
+        customAction: {
+          label: 'Copy to Clipboard',
+          action: () => {
+            navigator.clipboard.writeText(newToken.accessor);
+          },
+        },
+      });
+    } catch (err) {
+      this.error = {
+        title: 'Error creating new token',
+        description: err,
+      };
+
+      throw err;
+    }
+  })
+  createTestToken;
+
+  @task(function* (token) {
+    try {
+      yield token.deleteRecord();
+      yield token.save();
+      this.refreshTokens();
+      this.flashMessages.add({
+        title: 'Token successfully deleted',
+        type: 'success',
+        destroyOnClick: false,
+        timeout: 5000,
+      });
+    } catch (err) {
+      this.error = {
+        title: 'Error deleting token',
+        description: err,
+      };
+
+      throw err;
+    }
+  })
+  deleteToken;
 }

ui/app/routes/policies.js

@@ -21,7 +21,9 @@ export default class PoliciesRoute extends Route.extend(
   async model() {
     return await hash({
       policies: this.store.query('policy', { reload: true }),
-      tokens: this.store.query('token', { reload: true }),
+      tokens:
+        this.can.can('list tokens') &&
+        this.store.query('token', { reload: true }),
     });
   }
 }

ui/app/routes/policies/policy.js

@@ -2,15 +2,23 @@ import Route from '@ember/routing/route';
 import withForbiddenState from 'nomad-ui/mixins/with-forbidden-state';
 import WithModelErrorHandling from 'nomad-ui/mixins/with-model-error-handling';
 import { inject as service } from '@ember/service';
+import { hash } from 'rsvp';
 
 export default class PoliciesPolicyRoute extends Route.extend(
   withForbiddenState,
   WithModelErrorHandling
 ) {
   @service store;
-  model(params) {
-    return this.store.findRecord('policy', decodeURIComponent(params.name), {
-      reload: true,
+  async model(params) {
+    return await hash({
+      policy: this.store.findRecord('policy', decodeURIComponent(params.name), {
+        reload: true,
+      }),
+      tokens: this.store
+        .peekAll('token')
+        .filter((token) =>
+          token.policyNames?.includes(decodeURIComponent(params.name))
+        ),
     });
   }
 }

ui/app/styles/components/policies.scss

@@ -25,3 +25,48 @@ table.policies {
     margin-bottom: 1rem;
   }
 }
+
+.token-operations {
+  margin-bottom: 3rem;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(auto-fit, 50%);
+  grid-auto-rows: minmax(100px, auto);
+  gap: 1rem;
+
+  .boxed-section {
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    .external-link svg {
+      position: relative;
+      top: 3px;  
+    }
+
+    button.create-test-token, pre {
+      margin-top: 1rem;
+    }
+
+    pre {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-content: flex-start;
+      white-space: normal;
+      overflow: visible;
+    }
+  }
+}
+
+@media #{$mq-hidden-gutter} {
+  .token-operations {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+  }
+}
+
+
+table.tokens {
+  margin-bottom: 3rem;
+}

ui/app/templates/policies/index.hbs

@@ -32,7 +32,9 @@
       @class="policies no-mobile-condense" as |t|>
       <t.head>
         <th>Policy Name</th>
-        <th>Tokens</th>
+        {{#if (can "list token")}}
+          <th>Tokens</th>
+        {{/if}}
       </t.head>
       <t.body as |row|>
         <tr data-test-policy-row {{on "click" (action "openPolicy" row.model)}}
@@ -43,14 +45,16 @@
           <td data-test-policy-name>
 						<LinkTo @route="policies.policy" @model={{row.model.name}}>{{row.model.name}}</LinkTo>
 					</td>
-          <td data-test-policy-token-count>
-						<span>
-              {{row.model.tokens.length}}
-              {{#if (filter-by "isExpired" row.model.tokens)}}
-                <span class="number-expired">({{get (filter-by "isExpired" row.model.tokens) "length"}} expired)</span>
-              {{/if}}
-            </span>
-					</td>
+          {{#if (can "list token")}}
+            <td data-test-policy-token-count>
+              <span>
+                <span data-test-policy-total-tokens>{{row.model.tokens.length}}</span>
+                {{#if (filter-by "isExpired" row.model.tokens)}}
+                  <span data-test-policy-expired-tokens class="number-expired">({{get (filter-by "isExpired" row.model.tokens) "length"}} expired)</span>
+                {{/if}}
+              </span>
+            </td>
+          {{/if}}
         </tr>
       </t.body>
     </ListTable>