Skip to content

Commit

Permalink
Update cluster status partial to component (#11680)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
arnav28 authored May 27, 2021
1 parent d0d7a13 commit 55ad812
Show file tree
Hide file tree
Showing 8 changed files with 128 additions and 92 deletions.
3 changes: 3 additions & 0 deletions changelog/11680.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:improvement
ui: Update partials to components
```
90 changes: 51 additions & 39 deletions ui/app/components/auth-info.js
Original file line number Diff line number Diff line change
@@ -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';

export default Component.extend({
auth: service(),
wizard: service(),
router: service(),
version: service(),

transitionToRoute: function() {
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

/**
* @module AuthInfo
*
* @example
* ```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;

@tracked
fakeRenew = false;

get isRenewing() {
return this.fakeRenew || this.auth.isRenewing;
}

transitionToRoute() {
this.router.transitionTo(...arguments);
},

classNames: 'user-menu auth-info',

isRenewing: or('fakeRenew', 'auth.isRenewing'),

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
restartGuide() {
this.wizard.restartGuide();
}

@action
renewToken() {
this.fakeRenew = true;
run.later(() => {
this.fakeRenew = false;
this.auth.renew();
}, 200);
}

@action
revokeToken() {
this.auth.revokeCurrentToken().then(() => {
this.transitionToRoute('vault.cluster.logout');
});
}
}
27 changes: 27 additions & 0 deletions ui/app/components/cluster-info.js
Original file line number Diff line number Diff line change
@@ -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);
}
}
11 changes: 1 addition & 10 deletions ui/app/components/status-menu.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,20 @@
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';

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',
user: 'user-square-outline',
};
return glyphs[this.type];
}),
activeCluster: computed('auth.activeCluster', function() {
return this.store.peekRecord('cluster', this.auth.activeCluster);
}),
currentToken: reads('auth.currentToken'),
});
28 changes: 14 additions & 14 deletions ui/app/templates/components/auth-info.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,38 @@
<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}}.
On {{date-format auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
</li>
It will expire in {{date-from-now this.auth.tokenExpirationDate interval=1000 hideSuffix=true}}.
On {{date-format this.auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
</li>
{{/if}}
<li class="action">
<button type="button" class="link" onclick={{action "restartGuide"}}>
Restart guide
</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 auth.authData.renewable}}
{{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
{{#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'}}
@title={{concat "Revoke " (get auth 'authData.displayName') "?"}}
@id={{get this.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"
Expand All @@ -43,8 +43,8 @@
{{else}}
<li class="action text-right">
<c.Message
@id={{get auth 'authData.displayName'}}
@title={{concat "Revoke " (get auth 'authData.displayName') "?"}}
@id={{get this.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"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
<div class="popup-menu-content">
<div class="box">
{{#unless version.isOSS}}
{{#if (and activeCluster.unsealed auth.currentToken)}}
{{#unless cluster.dr.isSecondary}}
{{#unless this.version.isOSS}}
{{#if (and this.activeCluster.unsealed this.auth.currentToken)}}
{{#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}}>
<ReplicationModeSummary @mode="dr" @display="menu" @cluster={{cluster}} />
<LinkTo @route="vault.cluster.replication.mode.index" @model="dr" @disabled={{not this.auth.currentToken}} @invokeAction={{@onLinkClick}}>
<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}}>
<ReplicationModeSummary @mode="performance" @display="menu" @cluster={{cluster}} @tagName="span" />
<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" />
</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" />
Expand All @@ -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}}>
<ReplicationModeSummary @mode="dr" @display="menu" @cluster={{cluster}} />
<LinkTo @route="vault.cluster.replication-dr-promote.details" @disabled={{not this.auth.currentToken}} @invokeAction={{@onLinkClick}}>
<ReplicationModeSummary @mode="dr" @display="menu" @cluster={{@cluster}} />
</LinkTo>
</li>
{{/if}}
Expand All @@ -61,9 +61,9 @@
</div>
<ul class="menu-list">
<li class="action">
{{#if activeCluster.unsealed}}
{{#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))}}>
{{#if this.activeCluster.unsealed}}
{{#if (and (has-permission 'status' routeParams='seal') (not @cluster.dr.isSecondary))}}
<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" />
Expand All @@ -88,25 +88,25 @@
</li>
</ul>
{{#if (and (or
(and version.features (has-permission 'status' routeParams='license'))
(and cluster.usingRaft (has-permission 'status' routeParams='raft'))
(and this.version.features (has-permission 'status' routeParams='license'))
(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" />
</div>
</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" />
Expand All @@ -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" />
Expand Down
8 changes: 7 additions & 1 deletion ui/app/templates/components/status-menu.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
3 changes: 0 additions & 3 deletions ui/app/templates/partials/status/user.hbs

This file was deleted.

0 comments on commit 55ad812

Please sign in to comment.