UI: [VAULT-12979] Dashboard Landing Page

changelog/21057.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+**Dashboard UI**: Dashboard is now available in the UI as the new landing page.
+```

ui/app/components/dashboard/client-count-card.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import getStorage from 'vault/lib/token-storage';
+import timestamp from 'core/utils/timestamp';
+import { task } from 'ember-concurrency';
+import { waitFor } from '@ember/test-waiters';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+/**
+ * @module DashboardClientCountCard
+ * DashboardClientCountCard component are used to display total and new client count information
+ *
+ * @example
+ * ```js
+ * <Dashboard::ClientCountCard @license={{@model.license}}  />
+ * ```
+ *  @param {object} license - license object passed from the parent
+ */
+
+export default class DashboardClientCountCard extends Component {
+  @service store;
+
+  @tracked activityData = null;
+  @tracked clientConfig = null;
+  @tracked updatedAt = timestamp.now().toISOString();
+
+  constructor() {
+    super(...arguments);
+    this.fetchClientActivity.perform();
+    this.clientConfig = this.store.queryRecord('clients/config', {}).catch(() => {});
+  }
+
+  get currentMonthActivityTotalCount() {
+    return this.activityData?.byMonth?.lastObject?.new_clients.clients;
+  }
+
+  get licenseStartTime() {
+    return this.args.license.startTime || getStorage().getItem('vault:ui-inputted-start-date') || null;
+  }
+
+  @task
+  @waitFor
+  *fetchClientActivity(e) {
+    if (e) e.preventDefault();
+    this.updatedAt = timestamp.now().toISOString();
+    // only make the network request if we have a start_time
+    if (!this.licenseStartTime) return {};
+    try {
+      this.activityData = yield this.store.queryRecord('clients/activity', {
+        start_time: { timestamp: this.licenseStartTime },
+        end_time: { timestamp: this.updatedAt },
+      });
+      this.noActivityData = this.activityData.activity.id === 'no-data' ? true : false;
+    } catch (error) {
+      this.error = error;
+    }
+  }
+}

ui/app/components/dashboard/learn-more-card.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+/**
+ * @module DashboardLearnMoreCard
+ * DashboardLearnMoreCard component are used to display external links
+ *
+ * @example
+ * ```js
+ * <DashboardLearnMoreCard  />
+ * ```
+ */
+
+export default class DashboardLearnMoreCard extends Component {
+  get learnMoreLinks() {
+    return [
+      {
+        link: '/vault/tutorials/secrets-management',
+        icon: 'docs-link',
+        title: 'Secrets Management',
+      },
+      {
+        link: '/vault/tutorials/monitoring',
+        icon: 'docs-link',
+        title: 'Monitor & Troubleshooting',
+      },
+      {
+        link: '/vault/tutorials/adp/transform',
+        icon: 'learn-link',
+        title: 'Advanced Data Protection: Transform engine',
+        requiredFeature: 'Transform Secrets Engine',
+      },
+      {
+        link: '/vault/tutorials/secrets-management/pki-engine',
+        icon: 'learn-link',
+        title: 'Build your own Certificate Authority (CA)',
+      },
+    ];
+  }
+}

ui/app/components/dashboard/quick-actions-card.js

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+/**
+ * @module DashboardQuickActionsCard
+ * DashboardQuickActionsCard component allows users to see a list of secrets engines filtered by
+ * kv, pki and database and perform certain actions based on the type of secret engine selected
+ *
+ * @example
+ * ```js
+ *   <Dashboard::QuickActionsCard @secretsEngines={{@model.secretsEngines}} />
+ * ```
+ */
+
+const QUICK_ACTION_ENGINES = ['pki', 'kv', 'database'];
+
+export default class DashboardQuickActionsCard extends Component {
+  @service router;
+
+  @tracked selectedEngine;
+  @tracked selectedAction;
+  @tracked paramValue;
+
+  get actionOptions() {
+    switch (this.selectedEngine.type) {
+      case `kv version ${this.selectedEngine?.version}`:
+        return ['Find KV secrets'];
+      case 'database':
+        return ['Generate credentials for database'];
+      case 'pki':
+        return ['Issue certificate', 'View certificate', 'View issuer'];
+      default:
+        return [];
+    }
+  }
+
+  get searchSelectParams() {
+    switch (this.selectedAction) {
+      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.',
+          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',
+        };
+      case 'Generate credentials for database':
+        return {
+          title: 'Role to use',
+          buttonText: 'Generate credentials',
+          model: 'database/role',
+          route: 'vault.cluster.secrets.backend.credentials',
+        };
+      case 'Issue certificate':
+        return {
+          title: 'Role to use',
+          placeholder: 'Type to find a role',
+          buttonText: 'Issue leaf certificate',
+          model: 'pki/role',
+          route: 'vault.cluster.secrets.backend.pki.roles.role.generate',
+        };
+      case 'View certificate':
+        return {
+          title: 'Certificate serial number',
+          placeholder: '33:a3:...',
+          buttonText: 'View certificate',
+          model: 'pki/certificate/base',
+          route: 'vault.cluster.secrets.backend.pki.certificates.certificate.details',
+        };
+      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',
+        };
+      default:
+        return {
+          placeholder: 'Please select an action above',
+          buttonText: 'Select an action',
+          model: '',
+        };
+    }
+  }
+
+  get filteredSecretEngines() {
+    return this.args.secretsEngines.filter((engine) => 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}`;
+
+      return { name: id, type, id, version };
+    });
+  }
+
+  @action
+  handleSearchEngineSelect([selection]) {
+    this.selectedEngine = selection;
+    // reset tracked properties
+    this.selectedAction = null;
+    this.paramValue = null;
+  }
+
+  @action
+  setSelectedAction(selectedAction) {
+    this.selectedAction = selectedAction;
+    this.paramValue = null;
+  }
+
+  @action
+  handleActionSelect(val) {
+    if (Array.isArray(val)) {
+      this.paramValue = val[0];
+    } else {
+      this.paramValue = val;
+    }
+  }
+
+  @action
+  navigateToPage() {
+    let searchSelectParamRoute = this.searchSelectParams.route;
+
+    // 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';
+    }
+
+    this.router.transitionTo(searchSelectParamRoute, this.selectedEngine.id, this.paramValue);
+  }
+}

ui/app/components/dashboard/secrets-engines-card.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+/**
+ * @module DashboardSecretsEnginesCard
+ * DashboardSecretsEnginesCard component are used to display 5 secrets engines to the user.
+ *
+ * @example
+ * ```js
+ * <DashboardSecretsEnginesCard @secretsEngines={{@model.secretsEngines}} />
+ * ```
+ * @param {array} secretsEngines - list of secrets engines
+ */
+
+export default class DashboardSecretsEnginesCard extends Component {
+  get filteredSecretsEngines() {
+    const filteredEngines = this.args.secretsEngines.filter(
+      (secretEngine) => secretEngine.shouldIncludeInList
+    );
+
+    return filteredEngines.slice(0, 5);
+  }
+}

ui/app/components/dashboard/vault-configuration-details-card.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+/**
+ * @module DashboardVaultConfigurationCard
+ * DashboardVaultConfigurationCard component are used to display vault configuration.
+ *
+ * @example
+ * ```js
+ * <DashboardVaultConfigurationCard @vaultConfiguration={{@model.vaultConfiguration}} />
+ * ```
+ * @param {object} vaultConfiguration - object of vault configuration key/values
+ */
+
+export default class DashboardSecretsEnginesCard extends Component {
+  get tlsDisabled() {
+    const tlsDisableConfig = this.args.vaultConfiguration?.listeners.find((listener) => {
+      if (listener.config && listener.config.tls_disable) return listener.config.tls_disable;
+    });
+
+    return tlsDisableConfig?.config.tls_disable ? 'Enabled' : 'Disabled';
+  }
+}

ui/app/components/dashboard/vault-version-title.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+/**
+ * @module DashboardVaultVersionTitle
+ * DashboardVaultVersionTitle component are use to display the vault version title and the badges
+ *
+ * @example
+ * ```js
+ * <Dashboard::VaultVersionTitle />
+ * ```
+ */
+
+export default class DashboardVaultVersionTitle extends Component {
+  @service version;
+  @service namespace;
+
+  get versionHeader() {
+    return this.version.isEnterprise
+      ? `Vault v${this.version.version.slice(0, this.version.version.indexOf('+'))}`
+      : `Vault v${this.version.version}`;
+  }
+
+  get namespaceDisplay() {
+    if (this.namespace.inRootNamespace) return 'root';
+    const parts = this.namespace.path?.split('/');
+    return parts[parts.length - 1];
+  }
+}

ui/app/components/namespace-link.js

@@ -44,8 +44,8 @@ export default Component.extend({
       window.location.hostname +
       (window.location.port ? ':' + window.location.port : '');
 
-    if (!this.normalizedNamespace) return `${origin}/ui/vault/secrets`;
+    if (!this.normalizedNamespace) return `${origin}/ui/vault/dashboard`;
     // The full URL/origin is required so that the page is reloaded.
-    return `${origin}/ui/vault/secrets?namespace=${encodeURIComponent(this.normalizedNamespace)}`;
+    return `${origin}/ui/vault/dashboard?namespace=${encodeURIComponent(this.normalizedNamespace)}`;
   },
 });

ui/app/components/sidebar/frame.hbs

@@ -11,7 +11,7 @@
           <:logo>
             <Hds::SideNav::Header::HomeLink
               @icon="vault"
-              @route="vault.cluster"
+              @route="vault.cluster.dashboard"
               @model={{this.currentCluster.cluster.name}}
               @ariaLabel="home link"
               data-test-sidebar-logo

ui/app/components/sidebar/nav/cluster.hbs

@@ -6,6 +6,7 @@
 <Hds::SideNav::Portal @ariaLabel="Cluster Navigation Links" data-test-sidebar-nav-panel="Cluster" as |Nav|>
   <Nav.Title data-test-sidebar-nav-heading="Vault">Vault</Nav.Title>
 
+  <Nav.Link @route="vault.cluster.dashboard" @text="Dashboard" data-test-sidebar-nav-link="Dashboard" />
   <Nav.Link
     @route="vault.cluster.secrets"
     @current-when="vault.cluster.secrets vault.cluster.settings.mount-secret-backend vault.cluster.settings.configure-secret-backend"