Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update cluster status partial to component #11680

Merged
merged 5 commits into from
May 27, 2021
Merged

Update cluster status partial to component #11680

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1bf7671
Update cluster status partial to component
arnav28 May 20, 2021
b5789be
Added changelog
arnav28 May 20, 2021
acbf966
Close menu when link is clicked
arnav28 May 24, 2021
f42fbfb
Upgraded to glimmer components
arnav28 May 25, 2021
7e08a3a
Fixed indentations
arnav28 May 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelog/11680.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:improvement
ui: Updated cluster status partial to component
```
90 changes: 51 additions & 39 deletions ui/app/components/auth-info.js
View file
Open in desktop
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() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

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');
});
}
}
22 changes: 22 additions & 0 deletions ui/app/components/cluster-info.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
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 version;

transitionToRoute() {
this.router.transitionTo(...arguments);
}
}
11 changes: 1 addition & 10 deletions ui/app/components/status-menu.js
View file
Open in desktop
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'),
});
30 changes: 15 additions & 15 deletions ui/app/templates/components/auth-info.hbs
View file
Open in desktop
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}}
<li class="action">
{{#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
52 changes: 26 additions & 26 deletions ui/app/templates/partials/status/cluster.hbs → ui/app/templates/components/cluster-info.hbs
View file
Open in desktop
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 @cluster.unsealed this.auth.currentToken)}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on looking at the code, I'm not sure activeCluster as defined on (old) status-menu.js is exactly swappable with currentCluster.cluster which is what's being passed into the component here. My guess is that with the full model (activeCluster) we get the replication info and we may not on the cluster service version, but we'll need to investigate

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added back the active cluster for now.
In meantime, I will dig further and if required get in touch with Matthew. We can clean up later if required.

{{#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 @@ -38,13 +38,13 @@
{{/if}}
{{else}}
{{#if (has-permission 'status' routeParams='replication')}}
<nav class="menu">
<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 @cluster.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={{@cluster.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={{@cluster.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
View file
Open in desktop
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
View file
Open in desktop

This file was deleted.