Update cluster status partial to component (#11680)

* Update cluster status partial to component

* Added changelog

* Close menu when link is clicked

* Upgraded to glimmer components

* Fixed indentations
Added back activeCluster
Updated changelog

changelog/11680.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Update partials to components
+```

ui/app/components/auth-info.js

@@ -1,42 +1,54 @@
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-import { or, alias } from '@ember/object/computed';
-import Component from '@ember/component';
 import { run } from '@ember/runloop';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-export default Component.extend({
+/**
-  auth: service(),
+ * @module AuthInfo
-  wizard: service(),
+ *
-  router: service(),
+ * @example
-  version: service(),
+ * ```js
+ * <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action "onLinkClick"}} />
+ * ```
+ *
+ * @param {string} activeClusterName - name of the current cluster, passed from the parent.
+ * @param {Function} onLinkClick - parent action which determines the behavior on link click
+ */
+export default class AuthInfoComponent extends Component {
+  @service auth;
+  @service wizard;
+  @service router;
 
-  transitionToRoute: function() {
+  @tracked
+  fakeRenew = false;
+
+  get isRenewing() {
+    return this.fakeRenew || this.auth.isRenewing;
+  }
+
+  transitionToRoute() {
     this.router.transitionTo(...arguments);
-  },
+  }
 
-  classNames: 'user-menu auth-info',
+  @action
+  restartGuide() {
+    this.wizard.restartGuide();
+  }
 
-  isRenewing: or('fakeRenew', 'auth.isRenewing'),
+  @action
+  renewToken() {
+    this.fakeRenew = true;
+    run.later(() => {
+      this.fakeRenew = false;
+      this.auth.renew();
+    }, 200);
+  }
 
-  canExpire: alias('auth.allowExpiration'),
+  @action
-
+  revokeToken() {
-  isOSS: alias('version.isOSS'),
+    this.auth.revokeCurrentToken().then(() => {
-
+      this.transitionToRoute('vault.cluster.logout');
-  actions: {
+    });
-    restartGuide() {
+  }
-      this.wizard.restartGuide();
+}
-    },
-    renewToken() {
-      this.set('fakeRenew', true);
-      run.later(() => {
-        this.set('fakeRenew', false);
-        this.auth.renew();
-      }, 200);
-    },
-
-    revokeToken() {
-      this.auth.revokeCurrentToken().then(() => {
-        this.transitionToRoute('vault.cluster.logout');
-      });
-    },
-  },
-});

ui/app/components/cluster-info.js

@@ -0,0 +1,27 @@
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+/**
+ * @module ClusterInfo
+ *
+ * @example
+ * ```js
+ * <ClusterInfo @cluster={{cluster}} @onLinkClick={{action}} />
+ * ```
+ *
+ * @param {object} cluster - details of the current cluster, passed from the parent.
+ * @param {Function} onLinkClick - parent action which determines the behavior on link click
+ */
+export default class ClusterInfoComponent extends Component {
+  @service auth;
+  @service store;
+  @service version;
+
+  get activeCluster() {
+    return this.store.peekRecord('cluster', this.auth.activeCluster);
+  }
+
+  transitionToRoute() {
+    this.router.transitionTo(...arguments);
+  }
+}

ui/app/components/status-menu.js

@@ -1,5 +1,5 @@
 import { inject as service } from '@ember/service';
-import { alias, reads } from '@ember/object/computed';
+import { alias } from '@ember/object/computed';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 
@@ -7,14 +7,9 @@ export default Component.extend({
   currentCluster: service('current-cluster'),
   cluster: alias('currentCluster.cluster'),
   auth: service(),
-  store: service(),
   media: service(),
-  version: service(),
   type: 'cluster',
   itemTag: null,
-  partialName: computed('type', function() {
-    return `partials/status/${this.type}`;
-  }),
   glyphName: computed('type', function() {
     const glyphs = {
       cluster: 'status-indicator',
@@ -22,8 +17,4 @@ export default Component.extend({
     };
     return glyphs[this.type];
   }),
-  activeCluster: computed('auth.activeCluster', function() {
-    return this.store.peekRecord('cluster', this.auth.activeCluster);
-  }),
-  currentToken: reads('auth.currentToken'),
 });

ui/app/templates/components/auth-info.hbs

@@ -2,15 +2,15 @@
 <div class="popup-menu-content">
   <div class="box">
     <div class="menu-label">
-      {{auth.authData.displayName}}
+      {{this.auth.authData.displayName}}
     </div>
     <nav class="menu">
       <ul class="menu-list">
-        {{#if canExpire}}
+        {{#if this.auth.allowExpiration }}
           <li class="action">
             <AlertBanner @type="warning" @message="We've stopped auto-renewing your token due to inactivity.
-                It will expire in {{date-from-now auth.tokenExpirationDate interval=1000 hideSuffix=true}}.
+                It will expire in {{date-from-now this.auth.tokenExpirationDate interval=1000 hideSuffix=true}}.
-                On {{date-format auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
+                On {{date-format this.auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
           </li> 
         {{/if}}
         <li class="action">
@@ -19,21 +19,21 @@
           </button>
         </li>
         <li class="action">
-          <CopyButton @clipboardText={{auth.currentToken}} class="link" @buttonType="button" @success={{action (set-flash-message 'Token copied!')}}>
+          <CopyButton @clipboardText={{this.auth.currentToken}} class="link" @buttonType="button" @success={{action (set-flash-message 'Token copied!')}}>
             Copy token
           </CopyButton>
         </li>
-        {{#if (is-before (now interval=1000) auth.tokenExpirationDate)}}
+        {{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
-          {{#if auth.authData.renewable}}
+          {{#if this.auth.authData.renewable}}
             <li class="action">
-              <button type="button" {{action "renewToken"}} class="link button {{if isRenewing 'is-loading'}}">
+              <button type="button" {{action "renewToken"}} class="link button {{if this.isRenewing 'is-loading'}}">
                 Renew token
               </button>
             </li>
             <li class="action">
               <c.Message
-                @id={{get auth 'authData.displayName'}}
+                @id={{get this.auth 'authData.displayName'}}
-                @title={{concat "Revoke " (get auth 'authData.displayName') "?"}}
+                @title={{concat "Revoke " (get this.auth 'authData.displayName') "?"}}
                 @onConfirm={{action "revokeToken"}}
                 @message="You will not be able to log in again with this token."
                 @triggerText="Revoke token"
@@ -43,8 +43,8 @@
           {{else}}
             <li class="action text-right">
               <c.Message
-                @id={{get auth 'authData.displayName'}}
+                @id={{get this.auth 'authData.displayName'}}
-                @title={{concat "Revoke " (get auth 'authData.displayName') "?"}}
+                @title={{concat "Revoke " (get this.auth 'authData.displayName') "?"}}
                 @onConfirm={{action "revokeToken"}}
                 @message="You will not be able to log in again with this token."
                 @triggerText="Revoke token"
@@ -54,7 +54,7 @@
           {{/if}}
         {{/if}}
         <li class="action">
-          <LinkTo @route="vault.cluster.logout" @model={{activeClusterName}} @id="logout" class="is-destroy" @invokeAction={{onLinkClick}}>
+          <LinkTo @route="vault.cluster.logout" @model={{@activeClusterName}} @id="logout" class="is-destroy" @invokeAction={{@onLinkClick}}>
             Sign out
           </LinkTo>
         </li>

ui/app/templates/components/cluster-info.hbs

@@ -1,30 +1,30 @@
 <div class="popup-menu-content">
   <div class="box">
-    {{#unless version.isOSS}}
+    {{#unless this.version.isOSS}}
-      {{#if (and activeCluster.unsealed auth.currentToken)}}
+      {{#if (and this.activeCluster.unsealed this.auth.currentToken)}}
-        {{#unless cluster.dr.isSecondary}}
+        {{#unless @cluster.dr.isSecondary}}
           {{#if (has-permission 'status' routeParams='replication')}}
             <nav class="menu">
               <p class="menu-label">Replication</p>
               <ul>
-                {{#if cluster.anyReplicationEnabled}}
+                {{#if @cluster.anyReplicationEnabled}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication.mode.index" @model="dr" @disabled={{not currentToken}} @invokeAction={{action onLinkClick}}>
+                    <LinkTo @route="vault.cluster.replication.mode.index" @model="dr" @disabled={{not this.auth.currentToken}} @invokeAction={{@onLinkClick}}>
-                      <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{cluster}} />
+                      <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{@cluster}} />
                     </LinkTo>
                   </li>
                   <li>
                     {{#if (has-feature "Performance Replication")}}
-                      <LinkTo @route="vault.cluster.replication.mode.index" @model="performance" @disabled={{not currentToken}} @invokeAction={{action onLinkClick}}>
+                      <LinkTo @route="vault.cluster.replication.mode.index" @model="performance" @disabled={{not this.auth.currentToken}} @invokeAction={{@onLinkClick}}>
-                        <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{cluster}} @tagName="span" />
+                        <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{@cluster}} @tagName="span" />
                       </LinkTo>
                     {{else}}
-                      <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{cluster}} @class="menu-item" />
+                      <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{@cluster}} @class="menu-item" />
                     {{/if}}
                   </li>
                 {{else}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication" @invokeAction={{action onLinkClick}}>
+                    <LinkTo @route="vault.cluster.replication" @invokeAction={{@onLinkClick}}>
                       <div class="level is-mobile">
                         <span class="level-left">Enable</span>
                         <Icon @glyph="plus-circle-outline" @class="has-text-grey-light level-right" />
@@ -41,10 +41,10 @@
             <nav class="menu">
               <p class="menu-label">Replication</p>
               <ul>
-                {{#if cluster.anyReplicationEnabled}}
+                {{#if @cluster.anyReplicationEnabled}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication-dr-promote.details" @disabled={{not currentToken}} @invokeAction={{action onLinkClick}}>
+                    <LinkTo @route="vault.cluster.replication-dr-promote.details" @disabled={{not this.auth.currentToken}} @invokeAction={{@onLinkClick}}>
-                      <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{cluster}} />
+                      <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{@cluster}} />
                     </LinkTo>
                   </li>
                 {{/if}}
@@ -61,9 +61,9 @@
         </div>
         <ul class="menu-list">
           <li class="action">
-            {{#if activeCluster.unsealed}}
+            {{#if this.activeCluster.unsealed}}
-              {{#if (and (has-permission 'status' routeParams='seal') (not cluster.dr.isSecondary))}}
+              {{#if (and (has-permission 'status' routeParams='seal') (not @cluster.dr.isSecondary))}}
-                <LinkTo @route="vault.cluster.settings.seal" @model={{cluster.name}} @invokeAction={{action (queue (action onLinkClick) (action d.actions.close))}}>
+                <LinkTo @route="vault.cluster.settings.seal" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Unsealed</span>
                     <Icon @glyph="check-circle-outline" class="has-text-success level-right" />
@@ -88,15 +88,15 @@
           </li>
         </ul>
         {{#if (and (or
-        (and version.features (has-permission 'status' routeParams='license'))
+        (and this.version.features (has-permission 'status' routeParams='license'))
-        (and cluster.usingRaft (has-permission 'status' routeParams='raft'))
+        (and @cluster.usingRaft (has-permission 'status' routeParams='raft'))
         )
-        (not cluster.dr.isSecondary))
+        (not @cluster.dr.isSecondary))
         }}
           <ul class="menu-list">
-            {{#if (and version.features (has-permission 'status' routeParams='license') (not cluster.dr.isSecondary))}}
+            {{#if (and this.version.features (has-permission 'status' routeParams='license') (not @cluster.dr.isSecondary))}}
               <li class="action">
-                <LinkTo @route="vault.cluster.license" @model={{activeCluster.name}} @invokeAction={{action (queue (action onLinkClick) (action d.actions.close))}}>
+                <LinkTo @route="vault.cluster.license" @model={{this.activeCluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">License</span>
                     <Chevron class="has-text-grey-light level-right" />
@@ -104,9 +104,9 @@
                 </LinkTo>
               </li>
             {{/if}}
-            {{#if (and cluster.usingRaft (has-permission 'status' routeParams='raft'))}}
+            {{#if (and @cluster.usingRaft (has-permission 'status' routeParams='raft'))}}
               <li class="action">
-                <LinkTo @route="vault.cluster.storage" @model={{activeCluster.name}} @invokeAction={{onLinkClick}}>
+                <LinkTo @route="vault.cluster.storage" @model={{this.activeCluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Raft Storage</span>
                     <Chevron class="has-text-grey-light level-right" />
@@ -116,10 +116,10 @@
             {{/if}}
           </ul>
         {{/if}}
-        {{#if ( and (has-permission 'metrics' routeParams='activity') (not cluster.dr.isSecondary) auth.currentToken)}}
+        {{#if ( and (has-permission 'metrics' routeParams='activity') (not @cluster.dr.isSecondary) this.auth.currentToken)}}
           <ul class="menu-list">
             <li class="action">
-              <LinkTo @route="vault.cluster.metrics" @invokeAction={{action (queue (action onLinkClick) (action d.actions.close))}}>
+              <LinkTo @route="vault.cluster.metrics" @invokeAction={{@onLinkClick}}>
                 <div class="level is-mobile">
                   <span class="level-left">Metrics</span>
                   <Chevron class="has-text-grey-light level-right" />

ui/app/templates/components/status-menu.hbs

@@ -7,6 +7,12 @@
     <Chevron @direction="down" class="has-text-white is-status-chevron"/>
   </d.trigger>
   <d.content @class={{concat "status-menu-content status-menu-content-" type}}>
-    {{partial partialName}}
+    {{#if (eq type "user")}}
+      {{#if (and cluster.name auth.currentToken)}}
+        <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action onLinkClick}} />
+      {{/if}}
+    {{else}}
+        <ClusterInfo @cluster={{cluster}}  @onLinkClick={{action (queue (action onLinkClick) (action d.actions.close))}} />
+    {{/if}}
   </d.content>
 </BasicDropdown>

ui/app/templates/partials/status/user.hbs

@@ -1,3 +0,0 @@
-{{#if (and cluster.name auth.currentToken)}}
-  <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action onLinkClick}} />
-{{/if}}