UI: Pki key read view

ui/app/adapters/pki/key.js

@@ -4,24 +4,21 @@ import { encodePath } from 'vault/utils/path-encoding-helpers';
 export default class PkiKeyAdapter extends ApplicationAdapter {
   namespace = 'v1';
 
-  optionsForQuery(id) {
-    const data = {};
-    if (!id) {
-      data['list'] = true;
-    }
-    return { data };
-  }
-
-  urlForQuery(backend, id) {
-    let url = `${this.buildURL()}/${encodePath(backend)}/keys`;
+  _urlForQuery(backend, id) {
+    const url = `${this.buildURL()}/${encodePath(backend)}`;
     if (id) {
-      url = url + '/' + encodePath(id);
+      return url + '/key/' + encodePath(id);
     }
-    return url;
+    return url + '/keys';
   }
 
   query(store, type, query) {
+    const { backend } = query;
+    return this.ajax(this._urlForQuery(backend), 'GET', { data: { list: true } });
+  }
+
+  queryRecord(store, type, query) {
     const { backend, id } = query;
-    return this.ajax(this.urlForQuery(backend, id), 'GET', this.optionsForQuery(id));
+    return this.ajax(this._urlForQuery(backend, id), 'GET');
   }
 }

ui/app/models/pki/key.js

@@ -1,10 +1,21 @@
 import Model, { attr } from '@ember-data/model';
+import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
 
 export default class PkiKeyModel extends Model {
   @attr('string', { readOnly: true }) backend;
   @attr('boolean') isDefault;
-  @attr('string') keyRef; // reference to an existing key: either, vault generate identifier, literal string 'default', or the name assigned to the key. Part of the request URL.
-  @attr('string') keyId;
+  @attr('string', { possibleValues: ['internal', 'external'] }) type;
+  @attr('string', { detailsLabel: 'Key ID' }) keyId;
   @attr('string') keyName;
   @attr('string') keyType;
+  @attr('string', { detailsLabel: 'Key bit length' }) keyBits;
+
+  // TODO refactor when field-to-attrs util is refactored as decorator
+  _attributeMeta = null; // cache initial result of expandAttributeMeta in getter and return
+  get formFields() {
+    if (!this._attributeMeta) {
+      this._attributeMeta = expandAttributeMeta(this, ['keyId', 'keyName', 'keyType', 'keyBits']);
+    }
+    return this._attributeMeta;
+  }
 }

ui/app/serializers/pki/key.js

@@ -1,11 +1,12 @@
 import ApplicationSerializer from '../application';
 
 export default class PkiKeySerializer extends ApplicationSerializer {
+  primaryKey = 'key_id';
   // rehydrate each keys model so all model attributes are accessible from the LIST response
   normalizeItems(payload) {
     if (payload.data) {
       if (payload.data?.keys && Array.isArray(payload.data.keys)) {
-        return payload.data.keys.map((key) => ({ id: key, ...payload.data.key_info[key] }));
+        return payload.data.keys.map((key) => ({ key_id: key, ...payload.data.key_info[key] }));
       }
       Object.assign(payload, payload.data);
       delete payload.data;

ui/lib/pki/addon/components/pki-key-details.hbs

@@ -0,0 +1,59 @@
+<PageHeader as |p|>
+  <p.top>
+    {{! TODO: This should be replaced with HDS::Breadcrumbs }}
+    <nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs="key-details">
+      <ul>
+        <li>
+          <span class="sep">/</span>
+          <LinkToExternal @route="secrets">secrets</LinkToExternal>
+        </li>
+        {{#each this.breadcrumbs as |breadcrumb|}}
+          <li>
+            <span class="sep">/</span>
+            {{#if breadcrumb.path}}
+              <LinkTo @route={{breadcrumb.path}}>
+                {{breadcrumb.label}}
+              </LinkTo>
+            {{else}}
+              {{breadcrumb.label}}
+            {{/if}}
+          </li>
+        {{/each}}
+      </ul>
+    </nav>
+  </p.top>
+  <p.levelLeft>
+    <h1 class="title is-3" data-test-key-details-title>
+      <Icon @name="certificate" @size="24" class="has-text-grey-light" />
+      View key
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+<Toolbar>
+  <ToolbarActions>
+    <ConfirmAction
+      @buttonClasses="toolbar-link"
+      @onConfirmAction={{this.deleteKey}}
+      @confirmTitle="Delete key?"
+      @confirmButtonText="Delete"
+      data-test-pki-key-delete
+    >
+      Delete
+    </ConfirmAction>
+    <ToolbarLink @route="keys.key.edit" @model={{@key.model.name}}>
+      Edit key
+    </ToolbarLink>
+  </ToolbarActions>
+</Toolbar>
+
+<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
+  {{#each @key.formFields as |attr|}}
+    {{#let (get @key attr.name) as |value|}}
+      <InfoTableRow
+        @label={{capitalize (or attr.options.detailsLabel attr.options.label (humanize (dasherize attr.name)))}}
+        @value={{value}}
+        @alwaysRender={{true}}
+      />
+    {{/let}}
+  {{/each}}
+</div>

ui/lib/pki/addon/components/pki-key-details.ts

@@ -0,0 +1,24 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+interface Args {
+  key: {
+    backend: string;
+    keyName: string;
+    keyId: string;
+  };
+}
+
+export default class PkiKeyDetails extends Component<Args> {
+  get breadcrumbs() {
+    return [
+      { label: this.args.key.backend || 'pki', path: 'overview' },
+      { label: 'keys', path: 'keys.index' },
+      { label: this.args.key.keyId },
+    ];
+  }
+
+  @action deleteKey() {
+    // TODO handle delete
+  }
+}

ui/lib/pki/addon/controllers/issuers/index.js

@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 import { next } from '@ember/runloop';
 import { getOwner } from '@ember/application';
 
-export default class PkiRolesIssuerController extends Controller {
+export default class PkiIssuerIndexController extends Controller {
   get mountPoint() {
     return getOwner(this).mountPoint;
   }

ui/lib/pki/addon/controllers/keys/index.js

@@ -1,7 +1,7 @@
 import Controller from '@ember/controller';
 import { getOwner } from '@ember/application';
 
-export default class PkiRolesIssuerController extends Controller {
+export default class PkiKeysIndexController extends Controller {
   get mountPoint() {
     return getOwner(this).mountPoint;
   }

ui/lib/pki/addon/routes.js

@@ -40,7 +40,7 @@ export default buildRoutes(function () {
     this.route('index', { path: '/' });
     this.route('create');
     this.route('import');
-    this.route('key', { path: '/:key_ref' }, function () {
+    this.route('key', { path: '/:key_id' }, function () {
       this.route('details');
       this.route('edit');
     });

ui/lib/pki/addon/routes/keys/key.js

@@ -0,0 +1,11 @@
+import PkiKeysIndexRoute from './index';
+
+export default class PkiKeyRoute extends PkiKeysIndexRoute {
+  model() {
+    const { key_id } = this.paramsFor('keys/key');
+    return this.store.queryRecord('pki/key', {
+      backend: this.secretMountPath.currentPath,
+      id: key_id,
+    });
+  }
+}

ui/lib/pki/addon/templates/keys/index.hbs

@@ -23,7 +23,7 @@
   secret used to prove who they are and who they trust.</p>
 {{#if this.model.keyModel.length}}
   {{#each this.model.keyModel as |pkiKey|}}
-    <LinkedBlock class="list-item-row" @params={{array "roles.role.details" pkiKey.id}} @linkPrefix={{this.mountPoint}}>
+    <LinkedBlock class="list-item-row" @params={{array "keys.key.details" pkiKey.keyId}} @linkPrefix={{this.mountPoint}}>
       <div class="level is-mobile">
         <div class="level-left">
           <div>
@@ -44,12 +44,12 @@
               <nav class="menu">
                 <ul class="menu-list">
                   <li>
-                    <LinkTo @route="keys.key.details" @model={{pkiKey.id}}>
+                    <LinkTo @route="keys.key.details" @model={{pkiKey.keyId}}>
                       Details
                     </LinkTo>
                   </li>
                   <li>
-                    <LinkTo @route="keys.key.edit" @model={{pkiKey.id}}>
+                    <LinkTo @route="keys.key.edit" @model={{pkiKey.keyId}}>
                       Edit
                     </LinkTo>
                   </li>
@@ -64,7 +64,7 @@
 {{else}}
   <EmptyState @title="PKI not configured" @message="This PKI mount hasn’t yet been configured with a certificate issuer.">
     <LinkTo @route="configuration.create">
-      ARG TODO waiting for language from design
+      Configure PKI
     </LinkTo>
   </EmptyState>
 {{/if}}

ui/lib/pki/addon/templates/keys/key/details.hbs

@@ -1 +1 @@
-keys.key.:id.details
+<PkiKeyDetails @key={{this.model}} />