318 lines
10 KiB
JavaScript
318 lines
10 KiB
JavaScript
|
import Ember from 'ember';
|
||
|
|
import { Machine } from 'xstate';
|
||
|
|
|
||
|
|
const { Service, inject } = Ember;
|
||
|
|
|
||
|
|
import getStorage from 'vault/lib/token-storage';
|
||
|
|
|
||
|
|
import TutorialMachineConfig from 'vault/machines/tutorial-machine';
|
||
|
|
import SecretsMachineConfig from 'vault/machines/secrets-machine';
|
||
|
|
import PoliciesMachineConfig from 'vault/machines/policies-machine';
|
||
|
|
import ReplicationMachineConfig from 'vault/machines/replication-machine';
|
||
|
|
import ToolsMachineConfig from 'vault/machines/tools-machine';
|
||
|
|
import AuthMachineConfig from 'vault/machines/auth-machine';
|
||
|
|
|
||
|
|
const TutorialMachine = Machine(TutorialMachineConfig);
|
||
|
|
let FeatureMachine = null;
|
||
|
|
const TUTORIAL_STATE = 'vault:ui-tutorial-state';
|
||
|
|
const FEATURE_LIST = 'vault:ui-feature-list';
|
||
|
|
const FEATURE_STATE = 'vault:ui-feature-state';
|
||
|
|
const COMPLETED_FEATURES = 'vault:ui-completed-list';
|
||
|
|
const COMPONENT_STATE = 'vault:ui-component-state';
|
||
|
|
const RESUME_URL = 'vault:ui-tutorial-resume-url';
|
||
|
|
const RESUME_ROUTE = 'vault:ui-tutorial-resume-route';
|
||
|
|
const MACHINES = {
|
||
|
|
secrets: SecretsMachineConfig,
|
||
|
|
policies: PoliciesMachineConfig,
|
||
|
|
replication: ReplicationMachineConfig,
|
||
|
|
tools: ToolsMachineConfig,
|
||
|
|
authentication: AuthMachineConfig,
|
||
|
|
};
|
||
|
|
|
||
|
|
const DEFAULTS = {
|
||
|
|
currentState: null,
|
||
|
|
featureList: null,
|
||
|
|
featureState: null,
|
||
|
|
currentMachine: null,
|
||
|
|
tutorialComponent: null,
|
||
|
|
featureComponent: null,
|
||
|
|
stepComponent: null,
|
||
|
|
detailsComponent: null,
|
||
|
|
componentState: null,
|
||
|
|
nextFeature: null,
|
||
|
|
nextStep: null,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Service.extend(DEFAULTS, {
|
||
|
|
router: inject.service(),
|
||
|
|
showWhenUnauthenticated: false,
|
||
|
|
|
||
|
|
init() {
|
||
|
|
this._super(...arguments);
|
||
|
|
this.initializeMachines();
|
||
|
|
},
|
||
|
|
|
||
|
|
initializeMachines() {
|
||
|
|
if (!this.storageHasKey(TUTORIAL_STATE)) {
|
||
|
|
let state = TutorialMachine.initialState;
|
||
|
|
this.saveState('currentState', state.value);
|
||
|
|
this.saveExtState(TUTORIAL_STATE, state.value);
|
||
|
|
}
|
||
|
|
this.saveState('currentState', this.getExtState(TUTORIAL_STATE));
|
||
|
|
if (this.storageHasKey(COMPONENT_STATE)) {
|
||
|
|
this.set('componentState', this.getExtState(COMPONENT_STATE));
|
||
|
|
}
|
||
|
|
let stateNodes = TutorialMachine.getStateNodes(this.get('currentState'));
|
||
|
|
this.executeActions(stateNodes.reduce((acc, node) => acc.concat(node.onEntry), []), null, 'tutorial');
|
||
|
|
if (this.storageHasKey(FEATURE_LIST)) {
|
||
|
|
this.set('featureList', this.getExtState(FEATURE_LIST));
|
||
|
|
if (this.storageHasKey(FEATURE_STATE)) {
|
||
|
|
this.saveState('featureState', this.getExtState(FEATURE_STATE));
|
||
|
|
} else {
|
||
|
|
if (FeatureMachine != null) {
|
||
|
|
this.saveState('featureState', FeatureMachine.initialState);
|
||
|
|
this.saveExtState(FEATURE_STATE, this.get('featureState'));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.buildFeatureMachine();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
restartGuide() {
|
||
|
|
let storage = this.storage();
|
||
|
|
// empty storage
|
||
|
|
[
|
||
|
|
TUTORIAL_STATE,
|
||
|
|
FEATURE_LIST,
|
||
|
|
FEATURE_STATE,
|
||
|
|
COMPLETED_FEATURES,
|
||
|
|
COMPONENT_STATE,
|
||
|
|
RESUME_URL,
|
||
|
|
RESUME_ROUTE,
|
||
|
|
].forEach(key => storage.removeItem(key));
|
||
|
|
// reset wizard state
|
||
|
|
this.setProperties(DEFAULTS);
|
||
|
|
// restart machines from blank state
|
||
|
|
this.initializeMachines();
|
||
|
|
// progress machine to 'active.select'
|
||
|
|
this.transitionTutorialMachine('idle', 'AUTH');
|
||
|
|
},
|
||
|
|
|
||
|
|
saveState(stateType, state) {
|
||
|
|
if (state.value) {
|
||
|
|
state = state.value;
|
||
|
|
}
|
||
|
|
let stateKey = '';
|
||
|
|
while (Ember.typeOf(state) === 'object') {
|
||
|
|
let newState = Object.keys(state);
|
||
|
|
stateKey += newState + '.';
|
||
|
|
state = state[newState];
|
||
|
|
}
|
||
|
|
stateKey += state;
|
||
|
|
this.set(stateType, stateKey);
|
||
|
|
},
|
||
|
|
|
||
|
|
transitionTutorialMachine(currentState, event, extendedState) {
|
||
|
|
if (extendedState) {
|
||
|
|
this.set('componentState', extendedState);
|
||
|
|
this.saveExtState(COMPONENT_STATE, extendedState);
|
||
|
|
}
|
||
|
|
let { actions, value } = TutorialMachine.transition(currentState, event);
|
||
|
|
this.saveState('currentState', value);
|
||
|
|
this.saveExtState(TUTORIAL_STATE, this.get('currentState'));
|
||
|
|
this.executeActions(actions, event, 'tutorial');
|
||
|
|
},
|
||
|
|
|
||
|
|
transitionFeatureMachine(currentState, event, extendedState) {
|
||
|
|
if (!FeatureMachine || !this.get('currentState').includes('active')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (extendedState) {
|
||
|
|
this.set('componentState', extendedState);
|
||
|
|
this.saveExtState(COMPONENT_STATE, extendedState);
|
||
|
|
}
|
||
|
|
|
||
|
|
let { actions, value } = FeatureMachine.transition(currentState, event, this.get('componentState'));
|
||
|
|
this.saveState('featureState', value);
|
||
|
|
this.saveExtState(FEATURE_STATE, value);
|
||
|
|
this.executeActions(actions, event, 'feature');
|
||
|
|
// if all features were completed, the FeatureMachine gets nulled
|
||
|
|
// out and won't exist here as there is no next step
|
||
|
|
if (FeatureMachine) {
|
||
|
|
let next;
|
||
|
|
if (this.get('currentMachine') === 'secrets' && value === 'display') {
|
||
|
|
next = FeatureMachine.transition(value, 'REPEAT', this.get('componentState'));
|
||
|
|
} else {
|
||
|
|
next = FeatureMachine.transition(value, 'CONTINUE', this.get('componentState'));
|
||
|
|
}
|
||
|
|
this.saveState('nextStep', next.value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
saveExtState(key, value) {
|
||
|
|
this.storage().setItem(key, value);
|
||
|
|
},
|
||
|
|
|
||
|
|
getExtState(key) {
|
||
|
|
return this.storage().getItem(key);
|
||
|
|
},
|
||
|
|
|
||
|
|
storageHasKey(key) {
|
||
|
|
return Boolean(this.getExtState(key));
|
||
|
|
},
|
||
|
|
|
||
|
|
executeActions(actions, event, machineType) {
|
||
|
|
let transitionURL;
|
||
|
|
let expectedRouteName;
|
||
|
|
let router = this.get('router');
|
||
|
|
|
||
|
|
for (let action of actions) {
|
||
|
|
let type = action;
|
||
|
|
if (action.type) {
|
||
|
|
type = action.type;
|
||
|
|
}
|
||
|
|
switch (type) {
|
||
|
|
case 'render':
|
||
|
|
this.set(`${action.level}Component`, action.component);
|
||
|
|
break;
|
||
|
|
case 'routeTransition':
|
||
|
|
expectedRouteName = action.params[0];
|
||
|
|
transitionURL = router.urlFor(...action.params).replace(/^\/ui/, '');
|
||
|
|
Ember.run.next(() => {
|
||
|
|
router.transitionTo(...action.params);
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case 'saveFeatures':
|
||
|
|
this.saveFeatures(event.features);
|
||
|
|
break;
|
||
|
|
case 'completeFeature':
|
||
|
|
this.completeFeature();
|
||
|
|
break;
|
||
|
|
case 'handleDismissed':
|
||
|
|
this.handleDismissed();
|
||
|
|
break;
|
||
|
|
case 'handlePaused':
|
||
|
|
this.handlePaused();
|
||
|
|
return;
|
||
|
|
case 'handleResume':
|
||
|
|
this.handleResume();
|
||
|
|
break;
|
||
|
|
case 'showTutorialWhenAuthenticated':
|
||
|
|
this.set('showWhenUnauthenticated', false);
|
||
|
|
break;
|
||
|
|
case 'showTutorialAlways':
|
||
|
|
this.set('showWhenUnauthenticated', true);
|
||
|
|
break;
|
||
|
|
case 'continueFeature':
|
||
|
|
this.transitionFeatureMachine(this.get('featureState'), 'CONTINUE', this.get('componentState'));
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (machineType === 'tutorial') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// if we're transitioning in the actions, we want that url,
|
||
|
|
// else we want the URL we land on in didTransition in the
|
||
|
|
// application route - we'll notify the application route to
|
||
|
|
// update the route
|
||
|
|
if (transitionURL) {
|
||
|
|
this.set('expectedURL', transitionURL);
|
||
|
|
this.set('expectedRouteName', expectedRouteName);
|
||
|
|
this.set('setURLAfterTransition', false);
|
||
|
|
} else {
|
||
|
|
this.set('setURLAfterTransition', true);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
handlePaused() {
|
||
|
|
let expected = this.get('expectedURL');
|
||
|
|
if (expected) {
|
||
|
|
this.saveExtState(RESUME_URL, this.get('expectedURL'));
|
||
|
|
this.saveExtState(RESUME_ROUTE, this.get('expectedRouteName'));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
handleResume() {
|
||
|
|
let resumeURL = this.storage().getItem(RESUME_URL);
|
||
|
|
if (!resumeURL) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.get('router').transitionTo(resumeURL).followRedirects().then(() => {
|
||
|
|
this.set('expectedRouteName', this.storage().getItem(RESUME_ROUTE));
|
||
|
|
this.set('expectedURL', resumeURL);
|
||
|
|
this.initializeMachines();
|
||
|
|
this.storage().removeItem(RESUME_URL);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
handleDismissed() {
|
||
|
|
this.storage().removeItem(FEATURE_STATE);
|
||
|
|
this.storage().removeItem(FEATURE_LIST);
|
||
|
|
this.storage().removeItem(COMPONENT_STATE);
|
||
|
|
},
|
||
|
|
|
||
|
|
saveFeatures(features) {
|
||
|
|
this.set('featureList', features);
|
||
|
|
this.saveExtState(FEATURE_LIST, this.get('featureList'));
|
||
|
|
this.buildFeatureMachine();
|
||
|
|
},
|
||
|
|
|
||
|
|
buildFeatureMachine() {
|
||
|
|
if (this.get('featureList') === null) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.startFeature();
|
||
|
|
if (this.storageHasKey(FEATURE_STATE)) {
|
||
|
|
this.saveState('featureState', this.getExtState(FEATURE_STATE));
|
||
|
|
}
|
||
|
|
this.saveExtState(FEATURE_STATE, this.get('featureState'));
|
||
|
|
let nextFeature =
|
||
|
|
this.get('featureList').length > 1 ? this.get('featureList').objectAt(1).capitalize() : 'Finish';
|
||
|
|
this.set('nextFeature', nextFeature);
|
||
|
|
let next;
|
||
|
|
if (this.get('currentMachine') === 'secrets' && this.get('featureState') === 'display') {
|
||
|
|
next = FeatureMachine.transition(this.get('featureState'), 'REPEAT', this.get('componentState'));
|
||
|
|
} else {
|
||
|
|
next = FeatureMachine.transition(this.get('featureState'), 'CONTINUE', this.get('componentState'));
|
||
|
|
}
|
||
|
|
this.saveState('nextStep', next.value);
|
||
|
|
let stateNodes = FeatureMachine.getStateNodes(this.get('featureState'));
|
||
|
|
this.executeActions(stateNodes.reduce((acc, node) => acc.concat(node.onEntry), []), null, 'feature');
|
||
|
|
},
|
||
|
|
|
||
|
|
startFeature() {
|
||
|
|
const FeatureMachineConfig = MACHINES[this.get('featureList').objectAt(0)];
|
||
|
|
FeatureMachine = Machine(FeatureMachineConfig);
|
||
|
|
this.set('currentMachine', this.get('featureList').objectAt(0));
|
||
|
|
this.saveState('featureState', FeatureMachine.initialState);
|
||
|
|
},
|
||
|
|
|
||
|
|
completeFeature() {
|
||
|
|
let features = this.get('featureList');
|
||
|
|
let done = features.shift();
|
||
|
|
if (!this.getExtState(COMPLETED_FEATURES)) {
|
||
|
|
let completed = [];
|
||
|
|
completed.push(done);
|
||
|
|
this.saveExtState(COMPLETED_FEATURES, completed);
|
||
|
|
} else {
|
||
|
|
this.saveExtState(COMPLETED_FEATURES, this.getExtState(COMPLETED_FEATURES).toArray().addObject(done));
|
||
|
|
}
|
||
|
|
|
||
|
|
this.saveExtState(FEATURE_LIST, features.length ? features : null);
|
||
|
|
this.storage().removeItem(FEATURE_STATE);
|
||
|
|
if (features.length > 0) {
|
||
|
|
this.buildFeatureMachine();
|
||
|
|
} else {
|
||
|
|
this.storage().removeItem(FEATURE_LIST);
|
||
|
|
FeatureMachine = null;
|
||
|
|
this.transitionTutorialMachine(this.get('currentState'), 'DONE');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
storage() {
|
||
|
|
return getStorage();
|
||
|
|
},
|
||
|
|
});
|