Filter Secret Engine List view by engineType and/or name

changelog/20481.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add filtering by engine type and engine name on the Secret Engine list view.
+```

ui/app/controllers/vault/cluster/secrets/backends.js

@@ -2,36 +2,84 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-
-import { filterBy } from '@ember/object/computed';
-import { computed } from '@ember/object';
+/* eslint ember/no-computed-properties-in-native-classes: 'warn' */
 import Controller from '@ember/controller';
-import { task } from 'ember-concurrency';
-import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends';
 import { inject as service } from '@ember/service';
-const LINKED_BACKENDS = supportedSecretBackends();
-
-export default Controller.extend({
-  flashMessages: service(),
-  displayableBackends: filterBy('model', 'shouldIncludeInList'),
-
-  supportedBackends: computed('displayableBackends', 'displayableBackends.[]', function () {
-    return (this.displayableBackends || [])
-      .filter((backend) => LINKED_BACKENDS.includes(backend.get('engineType')))
-      .sortBy('id');
-  }),
-
-  unsupportedBackends: computed(
-    'displayableBackends',
-    'displayableBackends.[]',
-    'supportedBackends',
-    'supportedBackends.[]',
-    function () {
-      return (this.displayableBackends || []).slice().removeObjects(this.supportedBackends).sortBy('id');
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { filterBy } from '@ember/object/computed';
+import { dropTask } from 'ember-concurrency';
+
+export default class VaultClusterSecretsBackendController extends Controller {
+  @service flashMessages;
+  @filterBy('model', 'shouldIncludeInList') displayableBackends;
+
+  @tracked secretEngineOptions = [];
+  @tracked selectedEngineType = null;
+  @tracked selectedEngineName = null;
+
+  get sortedDisplayableBackends() {
+    // show supported secret engines first and then organize those by id.
+    const sortedBackends = this.displayableBackends.sort(
+      (a, b) => b.isSupportedBackend - a.isSupportedBackend || a.id - b.id
+    );
+
+    // filter list by engine type, ex: 'kv'
+    if (this.selectedEngineType) {
+      // check first if the user has also filtered by name.
+      if (this.selectedEngineName) {
+        return this.filterByName(sortedBackends);
+      }
+      // otherwise filter by engine type
+      return this.filterByEngineType(sortedBackends);
+    }
+
+    // filter list by engine name, ex: 'secret'
+    if (this.selectedEngineName) {
+      return this.filterByName(sortedBackends);
     }
-  ),
+    // no filters, return full sorted list.
+    return sortedBackends;
+  }
+
+  filterByName(backendList) {
+    return backendList.filter((backend) => this.selectedEngineName === backend.get('id'));
+  }
+
+  filterByEngineType(backendList) {
+    return backendList.filter((backend) => this.selectedEngineType === backend.get('engineType'));
+  }
+
+  get secretEngineArrayByType() {
+    const arrayOfAllEngineTypes = this.sortedDisplayableBackends.map((modelObject) => modelObject.engineType);
+    // filter out repeated engineTypes (e.g. [secret, secret] => [secret])
+    const arrayOfUniqueEngineTypes = [...new Set(arrayOfAllEngineTypes)];
+
+    return arrayOfUniqueEngineTypes.map((engineType) => ({
+      name: engineType,
+      id: engineType,
+    }));
+  }
+
+  get secretEngineArrayByName() {
+    return this.sortedDisplayableBackends.map((modelObject) => ({
+      name: modelObject.id,
+      id: modelObject.id,
+    }));
+  }
+
+  @action
+  filterEngineType([type]) {
+    this.selectedEngineType = type;
+  }
+
+  @action
+  filterEngineName([name]) {
+    this.selectedEngineName = name;
+  }
 
-  disableEngine: task(function* (engine) {
+  @dropTask
+  *disableEngine(engine) {
     const { engineType, path } = engine;
     try {
       yield engine.destroyRecord();
@@ -41,5 +89,5 @@ export default Controller.extend({
         `There was an error disabling the ${engineType} Secrets Engine at ${path}: ${err.errors.join(' ')}.`
       );
     }
-  }).drop(),
-});
+  }
+}

ui/app/models/secret-engine.js

@@ -8,6 +8,9 @@ import { computed } from '@ember/object'; // eslint-disable-line
 import { equal } from '@ember/object/computed'; // eslint-disable-line
 import { withModelValidations } from 'vault/decorators/model-validations';
 import { withExpandedAttributes } from 'vault/decorators/model-expanded-attributes';
+import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends';
+
+const LINKED_BACKENDS = supportedSecretBackends();
 
 // identity will be managed separately and the inclusion
 // of the system backend is an implementation detail
@@ -143,6 +146,27 @@ export default class SecretEngineModel extends Model {
     return !LIST_EXCLUDED_BACKENDS.includes(this.engineType);
   }
 
+  get isSupportedBackend() {
+    return LINKED_BACKENDS.includes(this.engineType);
+  }
+
+  get backendLink() {
+    if (this.engineType === 'kmip') {
+      return 'vault.cluster.secrets.backend.kmip.scopes';
+    }
+    if (this.engineType === 'database') {
+      return 'vault.cluster.secrets.backend.overview';
+    }
+    return 'vault.cluster.secrets.backend.list-root';
+  }
+
+  get accessor() {
+    if (this.version === 2) {
+      return `v2 ${this.accessor}`;
+    }
+    return this.accessor;
+  }
+
   get localDisplay() {
     return this.local ? 'local' : 'replicated';
   }

ui/app/templates/vault/cluster/secrets/backends.hbs

@@ -7,106 +7,115 @@
 </PageHeader>
 
 <Toolbar>
+  <ToolbarFilters>
+    <SearchSelect
+      @id="filter-by-engine-type"
+      @options={{this.secretEngineArrayByType}}
+      @selectLimit="1"
+      @disallowNewItems={{true}}
+      @fallbackComponent="input-search"
+      @onChange={{this.filterEngineType}}
+      @placeholder={{"Filter by engine type"}}
+      @displayInherit={{true}}
+      @inputValue={{if this.selectedEngineType (array this.selectedEngineType)}}
+      @disabled={{if this.selectedEngineName true false}}
+      class="is-marginless"
+    />
+    <SearchSelect
+      @id="filter-by-engine-name"
+      @options={{this.secretEngineArrayByName}}
+      @selectLimit="1"
+      @disallowNewItems={{true}}
+      @fallbackComponent="input-search"
+      @onChange={{this.filterEngineName}}
+      @placeholder={{"Filter by engine name"}}
+      @displayInherit={{true}}
+      @inputValue={{if this.selectedEngineName (array this.selectedEngineName)}}
+      class="is-marginless has-left-padding-s"
+    />
+  </ToolbarFilters>
   <ToolbarActions>
     <ToolbarLink @route="vault.cluster.settings.mount-secret-backend" @type="add" data-test-enable-engine>
       Enable new engine
     </ToolbarLink>
   </ToolbarActions>
 </Toolbar>
-
-{{#each this.supportedBackends as |backend|}}
-  {{#let
-    (if
-      (eq backend.engineType "kmip")
-      "vault.cluster.secrets.backend.kmip.scopes"
-      (if
-        (eq backend.engineType "database") "vault.cluster.secrets.backend.overview" "vault.cluster.secrets.backend.list-root"
-      )
-    )
-    as |backendLink|
-  }}
-    <LinkableItem data-test-secret-backend-row={{backend.id}} @link={{hash route=backendLink model=backend.id}} as |Li|>
-      <Li.content
-        @accessor={{if (eq backend.version 2) (concat "v2 " backend.accessor) backend.accessor}}
-        @description={{backend.description}}
-        @glyphText={{backend.engineType}}
-        @glyph={{backend.icon}}
-        @link={{hash route=backendLink model=backend.id}}
-        @title={{backend.path}}
-      />
-      <Li.menu>
-        <PopupMenu @name="engine-menu">
-          <Confirm as |c|>
-            <nav class="menu" aria-label="supported secrets engine menu">
-              <ul class="menu-list">
-                <li class="action">
-                  <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}}>
-                    View configuration
-                  </LinkTo>
-                </li>
-                {{#if (not-eq backend.type "cubbyhole")}}
-                  <li class="action">
-                    <c.Message
-                      @id={{backend.id}}
-                      @triggerText="Disable"
-                      @message="Any data in this engine will be permanently deleted."
-                      @title="Disable engine?"
-                      @confirmButtonText="Disable"
-                      @onConfirm={{perform this.disableEngine backend}}
-                      data-test-engine-disable="true"
-                    />
-                  </li>
-                {{/if}}
-                {{#if this.item.updatePath.isPending}}
-                  <li class="action">
-                    <button disabled type="button" class="link button is-loading is-transparent">
-                      loading
-                    </button>
-                  </li>
-                {{/if}}
-              </ul>
-            </nav>
-          </Confirm>
-        </PopupMenu>
-      </Li.menu>
-    </LinkableItem>
-  {{/let}}
-{{/each}}
-
-{{#each this.unsupportedBackends as |backend|}}
-  <LinkableItem data-test-secret-backend-row={{backend.id}} @disabled={{true}} as |Li|>
-    <Li.content
-      @accessor={{if (eq backend.version 2) (concat "v2 " backend.accessor) backend.accessor}}
-      @description={{backend.description}}
-      @glyphText={{backend.engineType}}
-      @glyph={{or (if (eq backend.engineType "kmip") "secrets" backend.engineType) "secrets"}}
-      @title={{backend.path}}
-    />
-    <Li.menu>
-      <PopupMenu name="engine-menu">
+{{#each this.sortedDisplayableBackends as |backend|}}
+  <LinkedBlock
+    @params={{array backend.backendLink backend.id}}
+    class="list-item-row linkable-item is-no-underline"
+    data-test-auth-backend-link={{backend.id}}
+    @disabled={{if backend.isSupportedBackend false true}}
+  >
+    <div class="linkable-item-content" data-test-linkable-item-content>
+      <div class="has-text-grey">
+        {{#if backend.icon}}
+          <ToolTip @horizontalPosition="left" as |T|>
+            <T.Trigger>
+              <Icon @name={{backend.icon}} class="has-text-grey-light" data-test-linkable-item-glyph />
+            </T.Trigger>
+            <T.Content @defaultClass="tool-tip">
+              <div class="box">
+                {{or backend.engineType backend.path}}
+              </div>
+            </T.Content>
+          </ToolTip>
+        {{/if}}
+        {{#if backend.path}}
+          {{#if backend.isSupportedBackend}}
+            <LinkTo
+              @route={{backend.backendLink}}
+              @model={{backend.id}}
+              class="has-text-black has-text-weight-semibold"
+              data-test-secret-path
+            >
+              {{backend.path}}
+            </LinkTo>
+          {{else}}
+            <span data-test-secret-path>{{backend.path}}</span>
+          {{/if}}
+        {{/if}}
+      </div>
+      {{#if backend.accessor}}
+        <code class="has-text-grey is-size-8" data-test-linkable-item-accessor>
+          {{backend.accessor}}
+        </code>
+      {{/if}}
+      {{#if backend.description}}
+        <ReadMore data-test-linkable-item-description>
+          {{backend.description}}
+        </ReadMore>
+      {{/if}}
+      {{yield}}
+    </div>
+    {{! meatball sandwich menu }}
+    <div class="linkable-item-menu" data-test-linkable-item-menu>
+      <PopupMenu @name="engine-menu">
         <Confirm as |c|>
-          <nav class="menu" aria-label="unsupported secrets engine menu">
+          <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
             <ul class="menu-list">
               <li class="action">
-                <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}} data-test-engine-config>
+                <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}}>
                   View configuration
                 </LinkTo>
               </li>
-              <li>
-                <c.Message
-                  @id={{backend.id}}
-                  @triggerText="Disable"
-                  @message="Any data in this engine will be permanently deleted."
-                  @title="Disable engine?"
-                  @confirmButtonText="Disable"
-                  @onConfirm={{perform this.disableEngine backend}}
-                  data-test-engine-disable="true"
-                />
-              </li>
+              {{#if (not-eq backend.type "cubbyhole")}}
+                <li class="action">
+                  <c.Message
+                    @id={{backend.id}}
+                    @triggerText="Disable"
+                    @message="Any data in this engine will be permanently deleted."
+                    @title="Disable engine?"
+                    @confirmButtonText="Disable"
+                    @onConfirm={{perform this.disableEngine backend}}
+                    data-test-engine-disable="true"
+                  />
+                </li>
+              {{/if}}
             </ul>
           </nav>
         </Confirm>
       </PopupMenu>
-    </Li.menu>
-  </LinkableItem>
+    </div>
+  </LinkedBlock>
 {{/each}}