UI: Cleanup dashboard (#22574)

hashicorp · Aug 30, 2023 · fc9e308 · fc9e308
1 parent efca08d
commit fc9e308
Show file tree

Hide file tree

Showing 20 changed files with 496 additions and 209 deletions.
diff --git a/ui/app/components/dashboard/quick-actions-card.js b/ui/app/components/dashboard/quick-actions-card.js
@@ -7,7 +7,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-
+import { pathIsDirectory } from 'kv/utils/kv-breadcrumbs';
 /**
  * @module DashboardQuickActionsCard
  * DashboardQuickActionsCard component allows users to see a list of secrets engines filtered by
@@ -19,7 +19,7 @@ import { inject as service } from '@ember/service';
  * ```
  */
 
-const QUICK_ACTION_ENGINES = ['pki', 'kv', 'database'];
+const QUICK_ACTION_ENGINES = ['pki', 'database'];
 
 export default class DashboardQuickActionsCard extends Component {
   @service router;
@@ -30,7 +30,7 @@ export default class DashboardQuickActionsCard extends Component {
 
   get actionOptions() {
     switch (this.selectedEngine.type) {
-      case `kv version ${this.selectedEngine?.version}`:
+      case 'kv':
         return ['Find KV secrets'];
       case 'database':
         return ['Generate credentials for database'];
@@ -46,18 +46,21 @@ export default class DashboardQuickActionsCard extends Component {
       case 'Find KV secrets':
         return {
           title: 'Secret path',
-          subText: 'Path of the secret you want to read, including the mount. E.g., secret/data/foo.',
+          subText: 'Path of the secret you want to read.',
           buttonText: 'Read secrets',
-          // check kv version to figure out which model to use
-          model: this.selectedEngine.version === 2 ? 'secret-v2' : 'secret',
-          route: 'vault.cluster.secrets.backend.show',
+          model: 'kv/metadata',
+          route: 'vault.cluster.secrets.backend.kv.secret.details',
+          nameKey: 'path',
+          queryObject: { pathToSecret: '', backend: this.selectedEngine.id },
+          objectKeys: ['path', 'id'],
         };
       case 'Generate credentials for database':
         return {
           title: 'Role to use',
           buttonText: 'Generate credentials',
           model: 'database/role',
           route: 'vault.cluster.secrets.backend.credentials',
+          queryObject: { backend: this.selectedEngine.id },
         };
       case 'Issue certificate':
         return {
@@ -66,6 +69,7 @@ export default class DashboardQuickActionsCard extends Component {
           buttonText: 'Issue leaf certificate',
           model: 'pki/role',
           route: 'vault.cluster.secrets.backend.pki.roles.role.generate',
+          queryObject: { backend: this.selectedEngine.id },
         };
       case 'View certificate':
         return {
@@ -74,15 +78,18 @@ export default class DashboardQuickActionsCard extends Component {
           buttonText: 'View certificate',
           model: 'pki/certificate/base',
           route: 'vault.cluster.secrets.backend.pki.certificates.certificate.details',
+          queryObject: { backend: this.selectedEngine.id },
         };
       case 'View issuer':
         return {
           title: 'Issuer',
           placeholder: 'Type issuer name or ID',
           buttonText: 'View issuer',
           model: 'pki/issuer',
-          nameKey: 'issuerName',
           route: 'vault.cluster.secrets.backend.pki.issuers.issuer.details',
+          nameKey: 'issuerName',
+          queryObject: { backend: this.selectedEngine.id },
+          objectKeys: ['id', 'issuerName'],
         };
       default:
         return {
@@ -94,15 +101,16 @@ export default class DashboardQuickActionsCard extends Component {
   }
 
   get filteredSecretEngines() {
-    return this.args.secretsEngines.filter((engine) => QUICK_ACTION_ENGINES.includes(engine.type));
+    return this.args.secretsEngines.filter(
+      (engine) => (engine.type === 'kv' && engine.version == 2) || QUICK_ACTION_ENGINES.includes(engine.type)
+    );
   }
 
   get mountOptions() {
     return this.filteredSecretEngines.map((engine) => {
-      let { id, type, version } = engine;
-      if (type === 'kv') type = `kv version ${version}`;
+      const { id, type } = engine;
 
-      return { name: id, type, id, version };
+      return { name: id, type, id };
     });
   }
 
@@ -131,17 +139,18 @@ export default class DashboardQuickActionsCard extends Component {
 
   @action
   navigateToPage() {
-    let searchSelectParamRoute = this.searchSelectParams.route;
+    let route = this.searchSelectParams.route;
+    let param = this.paramValue.id;
 
     // kv has a special use case where if the paramValue ends in a '/' you should
     // link to different route
     if (this.selectedEngine.type === 'kv') {
-      searchSelectParamRoute =
-        this.paramValue && this.paramValue?.endsWith('/')
-          ? 'vault.cluster.secrets.backend.list'
-          : 'vault.cluster.secrets.backend.show';
+      route = pathIsDirectory(this.paramValue?.path)
+        ? 'vault.cluster.secrets.backend.kv.list-directory'
+        : 'vault.cluster.secrets.backend.kv.secret.details';
+      param = this.paramValue?.path;
     }
 
-    this.router.transitionTo(searchSelectParamRoute, this.selectedEngine.id, this.paramValue);
+    this.router.transitionTo(route, this.selectedEngine.id, param);
   }
 }
diff --git a/ui/app/components/dashboard/secrets-engines-card.js b/ui/app/components/dashboard/secrets-engines-card.js
@@ -22,6 +22,10 @@ export default class DashboardSecretsEnginesCard extends Component {
       (secretEngine) => secretEngine.shouldIncludeInList
     );
 
-    return filteredEngines.slice(0, 5);
+    return filteredEngines;
+  }
+
+  get firstFiveSecretsEngines() {
+    return this.filteredSecretsEngines.slice(0, 5);
   }
 }
diff --git a/ui/app/templates/components/dashboard/client-count-card.hbs b/ui/app/templates/components/dashboard/client-count-card.hbs
@@ -1,4 +1,4 @@
-<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m" data-test-client-count-card>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m" data-test-card="client-count">
   <div class="is-flex-between">
     <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
       Client count

diff --git a/ui/app/templates/components/dashboard/learn-more-card.hbs b/ui/app/templates/components/dashboard/learn-more-card.hbs
@@ -1,4 +1,4 @@
-<Hds::Card::Container @hasBorder={{true}} class="has-padding-l">
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l" data-test-card="learn-more">
   <h3 class="title is-4 has-bottom-margin-xxs" data-test-learn-more-title>Learn more</h3>
   <div class="sub-text" data-test-learn-more-subtext>
     Explore the features of Vault and learn advance practices with the following tutorials and documentation.

diff --git a/ui/app/templates/components/dashboard/overview.hbs b/ui/app/templates/components/dashboard/overview.hbs
@@ -0,0 +1,48 @@
+<Dashboard::VaultVersionTitle @version={{@version}} />
+
+<div class="has-bottom-margin-xl">
+  <div class="is-flex-row has-gap-l">
+    {{#if (and @version.isEnterprise (or @license @isRootNamespace))}}
+      <div class="is-flex-column is-flex-1 has-gap-l">
+        {{#if @license}}
+          <Dashboard::ClientCountCard @license={{@license}} />
+        {{/if}}
+        {{#if @isRootNamespace}}
+          <Dashboard::ReplicationCard
+            @replication={{@replication}}
+            @version={{@version}}
+            @refresh={{@refreshModel}}
+            @updatedAt={{@replicationUpdatedAt}}
+          />
+        {{/if}}
+        <Dashboard::SecretsEnginesCard @secretsEngines={{@secretsEngines}} />
+      </div>
+
+      <div class="is-flex-column is-flex-1 has-gap-l">
+        <Dashboard::QuickActionsCard @secretsEngines={{@secretsEngines}} />
+        {{#if @vaultConfiguration}}
+          <Dashboard::VaultConfigurationDetailsCard @vaultConfiguration={{@vaultConfiguration}} />
+        {{/if}}
+        <div>
+          <Dashboard::LearnMoreCard @isEnterprise={{@version.isEnterprise}} />
+          <Dashboard::SurveyLinkText />
+        </div>
+      </div>
+
+    {{else}}
+      <div class="is-flex-column is-flex-1 has-gap-l">
+        <Dashboard::SecretsEnginesCard @secretsEngines={{@secretsEngines}} />
+        <div>
+          <Dashboard::LearnMoreCard @isEnterprise={{@version.isEnterprise}} />
+          <Dashboard::SurveyLinkText />
+        </div>
+      </div>
+      <div class="is-flex-column is-flex-1 has-gap-l">
+        <Dashboard::QuickActionsCard @secretsEngines={{@secretsEngines}} />
+        {{#if @vaultConfiguration}}
+          <Dashboard::VaultConfigurationDetailsCard @vaultConfiguration={{@vaultConfiguration}} />
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+</div>
diff --git a/ui/app/templates/components/dashboard/quick-actions-card.hbs b/ui/app/templates/components/dashboard/quick-actions-card.hbs
@@ -1,8 +1,9 @@
-<Hds::Card::Container @hasBorder={{true}} class="has-padding-l">
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l" data-test-card="quick-actions">
   <h3 class="title is-4">Quick actions</h3>
-
-  <div class="has-bottom-margin-m">
-    <h4 class="title is-6">Secrets engines</h4>
+  <div class="has-top-margin-m has-bottom-margin-m">
+    <h4 class="title is-marginless is-6">Secrets engines</h4>
+    <p class="is-size-8 has-top-margin-xxs has-bottom-margin-s has-text-grey">Supported engines include databases, KV version
+      2, and PKI.</p>
     <SearchSelect
       @id="secrets-engines-select"
       @options={{this.mountOptions}}
@@ -38,13 +39,16 @@
         class="is-flex-grow-1"
         @selectLimit="1"
         @models={{array this.searchSelectParams.model}}
-        @backend={{this.selectedEngine.id}}
         @placeholder={{this.searchSelectParams.placeholder}}
         @disallowNewItems={{true}}
         @onChange={{this.handleActionSelect}}
         @fallbackComponent="input-search"
-        @nameKey={{this.searchSelectParams.nameKey}}
         @disabled={{not this.searchSelectParams.model}}
+        @nameKey={{this.searchSelectParams.nameKey}}
+        @queryObject={{this.searchSelectParams.queryObject}}
+        @objectKeys={{this.searchSelectParams.objectKeys}}
+        @passObject={{true}}
+        @shouldRenderName={{this.searchSelectParams.nameKey}}
         data-test-param-select
       />
 

diff --git a/ui/app/templates/components/dashboard/replication-card.hbs b/ui/app/templates/components/dashboard/replication-card.hbs
@@ -2,16 +2,18 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
-<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m" data-test-replication-card>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m" data-test-card="replication">
 
   <div class="is-flex-between">
     <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
       Replication
     </h3>
 
-    <LinkTo class="is-no-underline" @route="vault.cluster.replication.index">
-      Details
-    </LinkTo>
+    {{#if (or @replication.dr.clusterId @replication.performance.clusterId)}}
+      <LinkTo class="is-no-underline" @route="vault.cluster.replication.index">
+        Details
+      </LinkTo>
+    {{/if}}
   </div>
 
   {{! check if dr replication and performance replication exists }}
@@ -30,7 +32,7 @@
           @clusterStates={{cluster-states @replication.dr.state}}
         />
         <Dashboard::ReplicationStateText
-          @title="Perf primary"
+          @title="Performance {{if @replication.performance.isPrimary 'primary' 'secondary'}}"
           @name="performance"
           @state={{if @replication.performance.clusterId @replication.performance.state "not set up"}}
           @clusterStates={{if @replication.performance.clusterId (cluster-states @replication.performance.state)}}

diff --git a/ui/app/templates/components/dashboard/replication-state-text.hbs b/ui/app/templates/components/dashboard/replication-state-text.hbs
@@ -4,20 +4,9 @@
 ~}}
 
 <div>
-  {{#if @name}}
-    <LinkTo
-      class="title is-5 has-text-weight-semibold has-bottom-margin-xs"
-      @route="vault.cluster.replication.mode.index"
-      @model={{@name}}
-      data-test-title={{@title}}
-    >
-      {{@title}}
-    </LinkTo>
-  {{else}}
-    <h2 class="title is-5 has-text-weight-semibold has-bottom-margin-xs" data-test-title={{@title}}>
-      {{@title}}
-    </h2>
-  {{/if}}
+  <h2 class="is-size-5 has-text-weight-semibold has-bottom-margin-xs" data-test-title={{@title}}>
+    {{@title}}
+  </h2>
 
   {{#if @subText}}
     <div class="title is-8 has-font-weight-normal has-text-grey-dark" data-test-subtext={{@title}}>
@@ -29,7 +18,7 @@
     <T.Trigger
       data-test-tooltip-trigger
       tabindex="-1"
-      class="title is-3 has-font-weight-normal has-top-margin-xxs has-bottom-margin-xxs"
+      class="title is-4 has-text-weight-semibold has-top-margin-xxs has-bottom-margin-xxs"
       data-test-tooltip-title={{@title}}
     >
       {{or @state "not set up"}}

diff --git a/ui/app/templates/components/dashboard/secrets-engines-card.hbs b/ui/app/templates/components/dashboard/secrets-engines-card.hbs
@@ -1,8 +1,15 @@
-<Hds::Card::Container @hasBorder={{true}} class="has-padding-l secrets-engines-card">
-  <h3 class="title is-4 has-left-margin-xxs" data-test-dashboard-secrets-engines-header>Secrets engines</h3>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l secrets-engines-card" data-test-card="secrets-engines">
+  <div class="is-flex-between">
+    <h3 class="title is-4 has-left-margin-xxs" data-test-dashboard-secrets-engines-header>Secrets engines</h3>
+
+    <LinkTo class="is-no-underline has-right-margin-xxs" @route="vault.cluster.secrets.backends">
+      Details
+    </LinkTo>
+  </div>
+
   <Hds::Table @caption="Five secrets engines" class="is-border-spacing-revert" data-test-dashboard-secrets-engines-table>
     <:body as |B|>
-      {{#each this.filteredSecretsEngines as |backend|}}
+      {{#each this.firstFiveSecretsEngines as |backend|}}
         <B.Tr data-test-secrets-engines-row={{backend.id}}>
           <B.Td class="is-flex-between is-flex-center has-gap-m">
             <div>
@@ -60,12 +67,14 @@
       {{/each}}
     </:body>
   </Hds::Table>
-  {{#if (gt this.filteredSecretsEngines.length 4)}}
-    <div class="is-flex-end has-top-margin-s" data-test-secrets-engines-card-show-all>
-      <LinkTo @route="vault.cluster.secrets.backends" class="has-text-weight-semibold is-size-7 is-no-underline">
-        Show all
-        <Icon @name="arrow-right" />
-      </LinkTo>
-    </div>
+
+  {{#if (gt this.filteredSecretsEngines.length 5)}}
+    <p class="is-size-9 has-top-margin-xs has-text-grey" data-test-secrets-engine-total-help-text>
+      Showing 5 out of
+      {{this.filteredSecretsEngines.length}}
+      secret engines. Navigate to
+      <Hds::Link::Inline @route="vault.cluster.secrets.backends">details</Hds::Link::Inline>
+      to view more.
+    </p>
   {{/if}}
 </Hds::Card::Container>
diff --git a/ui/app/templates/components/dashboard/survey-link-text.hbs b/ui/app/templates/components/dashboard/survey-link-text.hbs
@@ -1,4 +1,4 @@
-<div class="has-padding-s has-top-margin-m" data-test-feedback-form>
+<div class="has-top-padding-xs has-bottom-padding-xs has-top-margin-m" data-test-feedback-form>
   <small>
     Don't see what you're looking for on this page? Let us know via our
     <Hds::Link::Inline @icon="external-link" @href="https://hashicorp.sjc1.qualtrics.com/jfe/form/SV_1SNUsZLdWHpfw0e">

diff --git a/ui/app/templates/components/dashboard/vault-configuration-details-card.hbs b/ui/app/templates/components/dashboard/vault-configuration-details-card.hbs
@@ -1,4 +1,4 @@
-<Hds::Card::Container @hasBorder={{true}} class="has-padding-l">
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l" data-test-card="configuration-details">
   <h3 class="title is-4" data-test-configuration-details-title>Configuration details</h3>
 
   <Hds::Table @caption="Vault configuration details" class="is-border-spacing-revert">