From: Laurence Maultsby Date: Wed, 29 Mar 2017 18:35:40 +0000 (-0400) Subject: Project switcher and user dropdown X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=commitdiff_plain;h=5fe8f677ae26b665ef8239086e520da56f675939 Project switcher and user dropdown Signed-off-by: Laurence Maultsby --- diff --git a/skyquake/framework/core/modules/api/sessions.js b/skyquake/framework/core/modules/api/sessions.js index 0ce030089..769ea2bb8 100644 --- a/skyquake/framework/core/modules/api/sessions.js +++ b/skyquake/framework/core/modules/api/sessions.js @@ -139,7 +139,7 @@ sessionsAPI.addProjectToSession = function(req, res) { return new Promise(function(resolve, reject) { if (req.session && req.session.loggedIn == true) { req.session.projectId = req.params.projectId; - var successMsg = 'Added project' + projectId + ' to session' + req.sessionID; + var successMsg = 'Added project' + req.session.projectId + ' to session' + req.sessionID; console.log(successMsg); return resolve ({ diff --git a/skyquake/framework/core/modules/api/userManagementAPI.js b/skyquake/framework/core/modules/api/userManagementAPI.js index 19bb85447..0608c5db6 100644 --- a/skyquake/framework/core/modules/api/userManagementAPI.js +++ b/skyquake/framework/core/modules/api/userManagementAPI.js @@ -72,9 +72,6 @@ UserManagement.getProfile = function(req) { userId: req.session.userdata.username, projectId: req.session.projectId }; - // if (result[0].body) { - // response['data']['users'] = JSON.parse(result[0].body)['rw-user:users']; - // } response.statusCode = constants.HTTP_RESPONSE_CODES.SUCCESS.OK resolve(response); diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx b/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx index b8d768c2a..9d601831a 100644 --- a/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx +++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx @@ -85,7 +85,7 @@ export default class skyquakeContainer extends React.Component { render() { const {displayNotification, notificationMessage, displayScreenLoader, notificationType, ...state} = this.state; var html; - + let nav = _.cloneDeep(this.state.nav); if (this.matchesLoginUrl()) { html = ( @@ -109,8 +109,10 @@ export default class skyquakeContainer extends React.Component { onDismiss={SkyquakeContainerActions.hideNotification} /> -
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js b/skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js index c03ae6f71..ed97f0c78 100644 --- a/skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js +++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js @@ -31,5 +31,6 @@ export default Alt.generateActions( 'showScreenLoader', 'hideScreenLoader', 'openProjectSocketSuccess', - 'getUserProfileSuccess' + 'getUserProfileSuccess', + 'selectActiveProjectSuccess' ); diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js b/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js index 7ea5ffcdb..a26de2b3d 100644 --- a/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js +++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js @@ -160,9 +160,37 @@ export default { });; }); }, + loading: Alt.actions.global.showScreenLoader, success: SkyquakeContainerActions.getUserProfileSuccess } - } + }, + selectActiveProject() { + return { + remote: function(state, event) { + let projectId; + try { + projectId = JSON.parse(JSON.parse(event.currentTarget.value)); + } catch(e) { + console.log('Something went wrong in the selectActiveProject source function', e); + } + + return new Promise(function(resolve, reject) { + $.ajax({ + url: `/session/${projectId}?api_server=${API_SERVER}`, + type: 'PUT', + beforeSend: Utils.addAuthorizationStub, + success: function(data) { + resolve(projectId); + } + }).fail(function(xhr) { + //Authentication and the handling of fail states should be wrapped up into a connection class. + Utils.checkAuthentication(xhr.status); + });; + }); + }, + success: SkyquakeContainerActions.selectActiveProjectSuccess + } + } } diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js b/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js index 07010cde5..1403d0a2f 100644 --- a/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js +++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js @@ -178,18 +178,25 @@ class SkyquakeContainerStore { Utils.checkAuthentication(data.statusCode, function() { self.closeSocket(); }); - - self.setState({ - projects: data.project - }); + if (!_.isEqual(data.project, self.projects)) { + self.setState({ + projects: data.project + }); + } } catch(e) { console.log('HIT an exception in openProjectSocketSuccess', e); } }; } getUserProfileSuccess = (user) => { + this.alt.actions.global.hideScreenLoader.defer(); this.setState({user}) } + selectActiveProjectSuccess = (projectId) => { + let user = this.user; + user.projectId = projectId; + this.setState({user}); + } //Notifications showNotification = (data) => { let state = { @@ -201,7 +208,8 @@ class SkyquakeContainerStore { if(typeof(data) == 'string') { } else { - state.notificationMessage = data.msg; + if(!data) data = {}; + state.notificationMessage = data.msg || 'Something very bad happened wrong'; if(data.type) { state.notificationType = data.type; } diff --git a/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx index 01158c7f0..a61ee541b 100644 --- a/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx +++ b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx @@ -52,26 +52,65 @@ class LogoutAppMenuItem extends React.Component { } } - -class UserNav extends React.Component { +class SelectProject extends React.Component { constructor(props) { super(props); } selectProject(e) { - let value = JSON.parse(e.currentTarget.value) + let value = JSON.parse(e.currentTarget.value); console.log('selected project', value) } render() { + let props = this.props; + let currentValue = JSON.stringify(props.currentProject); let projects = this.props.projects.map((p,i) => { return { label: p.name, - value: p + value: p.name } - }) + }); return ( -
+
Project: - + +
+ ) + } +} + +class UserNav extends React.Component { + constructor(props) { + super(props); + } + handleLogout() { + Utils.clearAuthentication(); + } + selectProject(e) { + let value = JSON.parse(e.currentTarget.value) + console.log('selected project', value) + } + render() { + let props = this.props; + return ( + ) } @@ -211,8 +250,12 @@ export function buildNav(nav, currentPlugin, props) { let secondaryNavHTML = (
{secondaryNav} - - + +
) for (let k in nav) { diff --git a/skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss index 76df1ab16..f15af7b65 100644 --- a/skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss +++ b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss @@ -12,6 +12,7 @@ position:relative; z-index: 10; font-size:0.75rem; + padding-right:1rem; .secondaryNav { -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -22,8 +23,7 @@ } .app { position:relative; - display:-ms-flexbox; - display:flex; + margin:auto; h2 { font-size:0.75rem; border-right: 1px solid black; @@ -95,9 +95,9 @@ text-transform:uppercase; border-left:1px solid white; .projectSelect { - padding-left: 0.5rem; + padding: 0 0.5rem; font-size: 1rem; - min-width: 75%; + /* min-width: 75%;*/ height: 25px; } } diff --git a/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js b/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js index 08460ba09..267387a4d 100644 --- a/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js +++ b/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js @@ -42,7 +42,7 @@ module.exports = function(Alt) { 'error': 'There was an error retrieving the resource orchestrator information.' }), success: Alt.actions.global.getUsersSuccess, - loading: Alt.actions.global.showScreenLoader, + loading: Alt.actions.global.showScreenLoader, error: Alt.actions.global.showNotification }, updateUser: {