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
This commit is contained in:
Arnav Palnitkar
GitHub
parent
96278a33d8
commit
f2552b708b
|
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: Update partials to components
|
||||
```
|
||||
|
|
@ -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
|
||||
* <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',
|
||||
|
||||
isRenewing: or('fakeRenew', 'auth.isRenewing'),
|
||||
|
||||
canExpire: alias('auth.allowExpiration'),
|
||||
|
||||
isOSS: alias('version.isOSS'),
|
||||
|
||||
actions: {
|
||||
@action
|
||||
restartGuide() {
|
||||
this.wizard.restartGuide();
|
||||
},
|
||||
}
|
||||
|
||||
@action
|
||||
renewToken() {
|
||||
this.set('fakeRenew', true);
|
||||
this.fakeRenew = true;
|
||||
run.later(() => {
|
||||
this.set('fakeRenew', false);
|
||||
this.fakeRenew = false;
|
||||
this.auth.renew();
|
||||
}, 200);
|
||||
},
|
||||
}
|
||||
|
||||
@action
|
||||
revokeToken() {
|
||||
this.auth.revokeCurrentToken().then(() => {
|
||||
this.transitionToRoute('vault.cluster.logout');
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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'),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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}}.
|
||||
On {{date-format auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
|
||||
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">
|
||||
|
|
@ -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 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"
|
||||
|
|
@ -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"
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
@ -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}}
|
||||
|
|
@ -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" />
|
||||
|
|
@ -88,15 +88,15 @@
|
|||
</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" />
|
||||
|
|
@ -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" />
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
{{#if (and cluster.name auth.currentToken)}}
|
||||
<AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action onLinkClick}} />
|
||||
{{/if}}
|
||||
Loading…
Reference in New Issue