Project switcher and user dropdown
authorLaurence Maultsby <laurence.maultsby@riftio.com>
Wed, 29 Mar 2017 18:35:40 +0000 (14:35 -0400)
committerLaurence Maultsby <laurence.maultsby@riftio.com>
Wed, 29 Mar 2017 18:35:40 +0000 (14:35 -0400)
Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
skyquake/framework/core/modules/api/sessions.js
skyquake/framework/core/modules/api/userManagementAPI.js
skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx
skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js
skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js
skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js
skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx
skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss
skyquake/plugins/user_management/src/dashboard/userMgmtSource.js

index 0ce0300..769ea2b 100644 (file)
@@ -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 ({
index 19bb854..0608c5d 100644 (file)
@@ -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);
index b8d768c..9d60183 100644 (file)
@@ -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 = (
                 <AltContainer>
@@ -109,8 +109,10 @@ export default class skyquakeContainer extends React.Component {
                             onDismiss={SkyquakeContainerActions.hideNotification}
                         />
                         <ScreenLoader show={displayScreenLoader}/>
-                        <SkyquakeNav nav={this.state.nav}
-                            currentPlugin={this.state.currentPlugin}
+                        <SkyquakeNav nav={nav}
+                            currentPlugin={this.state.user.currentPlugin}
+                            currentUser={this.state.user.userId}
+                            currentProject={this.state.user.projectId}
                             store={SkyquakeContainerStore}
                             projects={this.state.projects} />
                         <div className="titleBar">
index c03ae6f..ed97f0c 100644 (file)
@@ -31,5 +31,6 @@ export default Alt.generateActions(
     'showScreenLoader',
     'hideScreenLoader',
     'openProjectSocketSuccess',
-    'getUserProfileSuccess'
+    'getUserProfileSuccess',
+    'selectActiveProjectSuccess'
 );
index 7ea5ffc..a26de2b 100644 (file)
@@ -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
+        }
+    }
 }
 
index 07010cd..1403d0a 100644 (file)
@@ -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;
             }
index 01158c7..a61ee54 100644 (file)
@@ -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 (
-            <div className="userSection">
+            <div className="userSection app">
                 Project:
-                <SelectOption options={projects} onChange={this.selectProject} className="projectSelect"/>
+                <SelectOption
+                    options={projects}
+                    value={currentValue}
+                    defaultValue={currentValue}
+                    onChange={props.onSelectProject}
+                    className="projectSelect" />
+            </div>
+        )
+    }
+}
+
+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 (
+            <div className="app">
+                <h2>
+                    <a>
+                        {props.currentUser}
+                    </a>
+                    <span className="oi" data-glyph="caret-bottom"></span>
+                </h2>
+                <ul className="menu">
+                    <li>
+                        <a onClick={this.handleLogout}>
+                            Logout
+                        </a>
+                    </li>
+                </ul>
             </div>
         )
     }
@@ -211,8 +250,12 @@ export function buildNav(nav, currentPlugin, props) {
     let secondaryNavHTML = (
         <div className="secondaryNav" key="secondaryNav">
             {secondaryNav}
-            <UserNav projects={props.projects}/>
-            <LogoutAppMenuItem />
+            <SelectProject
+                onSelectProject={props.store.selectActiveProject}
+                projects={props.projects}
+                currentProject={props.currentProject} />
+            <UserNav
+                currentUser={props.currentUser}  />
         </div>
     )
     for (let k in nav) {
index 76df1ab..f15af7b 100644 (file)
@@ -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;
             }
         }
index 08460ba..267387a 100644 (file)
@@ -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: {