diff --git a/changelog/11680.txt b/changelog/11680.txt
new file mode 100644
index 000000000..3e8b919b1
--- /dev/null
+++ b/changelog/11680.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Update partials to components
+```
\ No newline at end of file
diff --git a/ui/app/components/auth-info.js b/ui/app/components/auth-info.js
index 76a2c0e5e..9f77ebc28 100644
--- a/ui/app/components/auth-info.js
+++ b/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(),
- wizard: service(),
- router: service(),
- version: service(),
+/**
+ * @module AuthInfo
+ *
+ * @example
+ * ```js
+ *
+ * ```
+ *
+ * @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'),
-
- isOSS: alias('version.isOSS'),
-
- 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');
- });
- },
- },
-});
+ @action
+ revokeToken() {
+ this.auth.revokeCurrentToken().then(() => {
+ this.transitionToRoute('vault.cluster.logout');
+ });
+ }
+}
diff --git a/ui/app/components/cluster-info.js b/ui/app/components/cluster-info.js
new file mode 100644
index 000000000..e2f45efc2
--- /dev/null
+++ b/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
+ *
+ * ```
+ *
+ * @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);
+ }
+}
diff --git a/ui/app/components/status-menu.js b/ui/app/components/status-menu.js
index 8ec26c7c1..59bfc2bcf 100644
--- a/ui/app/components/status-menu.js
+++ b/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'),
});
diff --git a/ui/app/templates/components/auth-info.hbs b/ui/app/templates/components/auth-info.hbs
index 0c4d0f1fc..5d2b37741 100644
--- a/ui/app/templates/components/auth-info.hbs
+++ b/ui/app/templates/components/auth-info.hbs
@@ -2,16 +2,16 @@