Merge branch 'llb/app-tokens' into ICU-18005-ui-create-component-ttl-tts-inputs

Author: cameronperera

addons/api/addon/models/app-token.js

@@ -41,4 +41,16 @@ export default class AppTokenModel extends GeneratedAppTokenModel {
       ? this.time_to_stale_seconds * 1000
       : null;
   }
+
+  /**
+   * Calculate expires in days from now
+   * @returns {number|null} Days until expiration, or null if no expiration set
+   */
+  get expiresIn() {
+    if (!this.expire_time) return null;
+    const now = new Date();
+    const diffMs = this.expire_time.getTime() - now.getTime();
+    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+    return diffDays > 0 ? diffDays : 0;
+  }
 }

addons/api/mirage/factories/app-token.js

@@ -21,6 +21,35 @@ export default factory.extend({
     ],
   status: faker.helpers.arrayElement(statuses),
   created_by_user_id: () => generateId('u_'),
+
+  // Make expiration times more varied
+  expire_time: () => {
+    const now = new Date();
+    const daysFromNow = faker.number.int({ min: 1, max: 365 });
+    return faker.date.future({ days: daysFromNow, refDate: now });
+  },
+
+  // Vary the last access time
+  approximate_last_access_time: () => {
+    return faker.date.between({
+      from: faker.date.recent({ days: 30 }),
+      to: new Date(),
+    });
+  },
+
+  // Make time to live with more variations
+  time_to_live_seconds: () => {
+    const options = [
+      3600, // 1 hour
+      86400, // 1 day
+      604800, // 1 week
+      2592000, // 30 days
+      7776000, // 90 days
+      31536000, // 1 year
+    ];
+    return faker.helpers.arrayElement(options);
+  },
+
   permissions: () => [
     {
       grant: ['ids=*;actions=*'],

addons/api/mirage/generated/factories/app-token.js

@@ -15,9 +15,6 @@ export default Factory.extend({
   created_time: () => faker.date.recent(),
   updated_time: () => faker.date.recent(),
   token: () => faker.string.alphanumeric(50),
-  approximate_last_access_time: () => faker.date.recent(),
-  expire_time: () => faker.date.soon(),
-  time_to_live_seconds: () => faker.number.int(),
   time_to_stale_seconds: () => faker.number.int(),
   version: () => faker.number.int(),
 });

addons/api/mirage/scenarios/default.js

@@ -4,6 +4,13 @@
  */
 
 import { TYPE_AUTH_METHOD_OIDC } from 'api/models/auth-method';
+import {
+  STATUS_APP_TOKEN_ACTIVE,
+  STATUS_APP_TOKEN_EXPIRED,
+  STATUS_APP_TOKEN_REVOKED,
+  STATUS_APP_TOKEN_STALE,
+} from 'api/models/app-token';
+import { faker } from '@faker-js/faker';
 
 export default function (server) {
   // Scope resources
@@ -171,4 +178,57 @@ export default function (server) {
     'withConnectionAndChannels',
     'withExistingUserAndTarget',
   );
+
+  // App Tokens
+  const statuses = [
+    STATUS_APP_TOKEN_ACTIVE,
+    STATUS_APP_TOKEN_EXPIRED,
+    STATUS_APP_TOKEN_REVOKED,
+    STATUS_APP_TOKEN_STALE,
+  ];
+
+  // Global scope tokens
+  statuses.forEach((status) => {
+    server.createList('app-token', 3, {
+      scope: globalScope,
+      scopeId: globalScope.id,
+      status: status,
+    });
+  });
+
+  // Org scope tokens
+  const allOrgScopes = server.schema.scopes.where({ type: 'org' }).models;
+  allOrgScopes.forEach((orgScope) => {
+    server.create('app-token', {
+      scope: orgScope,
+      scopeId: orgScope.id,
+      status: STATUS_APP_TOKEN_ACTIVE,
+    });
+    server.create('app-token', {
+      scope: orgScope,
+      scopeId: orgScope.id,
+      status: STATUS_APP_TOKEN_EXPIRED,
+    });
+    server.createList('app-token', 5, {
+      scope: orgScope,
+      scopeId: orgScope.id,
+      status: () => faker.helpers.arrayElement(statuses),
+    });
+  });
+
+  // Project scope tokens
+  server.schema.scopes
+    .where({ type: 'project' })
+    .models.forEach((projectScope) => {
+      server.create('app-token', {
+        scope: projectScope,
+        scopeId: projectScope.id,
+        status: STATUS_APP_TOKEN_ACTIVE,
+      });
+      server.createList('app-token', 4, {
+        scope: projectScope,
+        scopeId: projectScope.id,
+        status: () => faker.helpers.arrayElement(statuses),
+      });
+    });
 }

addons/core/translations/resources/en-us.yaml

@@ -1235,3 +1235,23 @@ alias:
       help: You can create aliases for this target that will make it easier to reach. Users must have access to this project to use aliases.
 app-token:
   title_plural: App Tokens
+  description: App tokens are long-lived, fine grained access tokens for authorization/authentication.
+  form:
+    approximate_last_access_time:
+      label: Last used at
+    expires_in:
+      label: Expires in
+    status:
+      label: Status
+  status:
+    unknown: Unknown
+    active: Active
+    revoked: Revoked
+    expired: Expired
+    stale: Stale
+  messages:
+    none:
+      title: No App Tokens Available
+      global-scope: No app tokens have been created at the global scope level.
+      org-scope: No app tokens have been created for {scopeName}.
+      project-scope: No app tokens have been created for {scopeName}.

ui/admin/app/controllers/scopes/scope/app-tokens/index.js

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { STATUSES_APP_TOKEN } from 'api/models/app-token';
+
+export default class ScopesScopeAppTokensIndexController extends Controller {
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  queryParams = [
+    'search',
+    'page',
+    'pageSize',
+    'sortAttribute',
+    'sortDirection',
+    { statuses: { type: 'array' } },
+  ];
+
+  @tracked search;
+  @tracked page = 1;
+  @tracked pageSize = 10;
+  @tracked sortAttribute;
+  @tracked sortDirection;
+  @tracked statuses = [];
+
+  /**
+   * Status options for filtering
+   */
+  get statusOptions() {
+    return STATUSES_APP_TOKEN.map((status) => ({
+      id: status,
+      name: this.intl.t(`resources.app-token.status.${status}`),
+    }));
+  }
+
+  /**
+   * Returns status badge configuration for app tokens
+   * @param {string} status
+   * @returns {object}
+   */
+  @action
+  getStatusBadge(status) {
+    const statusConfig = {
+      active: { color: 'success' },
+      expired: { color: 'critical' },
+      revoked: { color: 'critical' },
+      stale: { color: 'critical' },
+      unknown: { color: 'neutral' },
+    };
+
+    const config = statusConfig[status] || { color: 'neutral' };
+    return {
+      text: this.intl.t(`resources.app-token.status.${status}`),
+      color: config.color,
+    };
+  }
+
+  /**
+   * Formats date for tooltip display
+   * @param {Date} date
+   * @returns {string}
+   */
+  @action
+  formatTooltipDate(date) {
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    });
+  }
+
+  /**
+   * Returns object of filters to be used for displaying selected filters
+   * @returns {object}
+   */
+  get filters() {
+    return {
+      allFilters: {
+        statuses: this.statusOptions,
+      },
+      selectedFilters: {
+        statuses: this.statuses,
+      },
+    };
+  }
+
+  // =actions
+
+  /**
+   * Handles input on each keystroke and the search queryParam
+   * @param {object} event
+   */
+  @action
+  handleSearchInput(event) {
+    const { value } = event.target;
+    this.search = value;
+    this.page = 1;
+  }
+
+  /**
+   * Sets the selected items for the given paramKey and sets the page to 1
+   * @param {string} paramKey
+   * @param {[string]} selectedItems
+   */
+  @action
+  applyFilter(paramKey, selectedItems) {
+    this[paramKey] = [...selectedItems];
+    this.page = 1;
+  }
+
+  /**
+   * Sets sort values and sets page to 1
+   * @param {string} sortBy
+   * @param {string} sortOrder
+   */
+  @action
+  onSort(sortBy, sortOrder) {
+    this.sortAttribute = sortBy;
+    this.sortDirection = sortOrder;
+    this.page = 1;
+  }
+}

ui/admin/app/router.js

@@ -187,7 +187,7 @@ Router.map(function () {
         this.route('new');
         this.route('policy', { path: ':policy_id' }, function () {});
       });
-      this.route('app-tokens');
+      this.route('app-tokens', function () {});
     });
   });