From d6a404ad14bf507642604d6b6ff78c9b1a8de9e4 Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 14:50:49 -0500 Subject: [PATCH 01/15] Alert messages --- .../components/Allocations/Allocations.scss | 11 +++++- .../Allocations/AllocationsLayout.js | 39 +++++++++++-------- .../Applications/AppLayout/AppLayout.js | 4 ++ client/src/components/Dashboard/Dashboard.js | 6 ++- client/src/components/DataFiles/DataFiles.js | 4 ++ client/src/components/History/History.js | 5 ++- 6 files changed, 50 insertions(+), 19 deletions(-) diff --git a/client/src/components/Allocations/Allocations.scss b/client/src/components/Allocations/Allocations.scss index 4f539f7c5..3df12fa4c 100644 --- a/client/src/components/Allocations/Allocations.scss +++ b/client/src/components/Allocations/Allocations.scss @@ -37,7 +37,16 @@ #allocations-container > :last-child { flex-grow: 1; } - +#allocations-alert { + display: flex; + flex-direction: column; + + padding: 20px 40px 0 20px; + .alert { + margin-bottom: 0px; + } +} + #allocations-header { @include alloc-button(); display: flex; diff --git a/client/src/components/Allocations/AllocationsLayout.js b/client/src/components/Allocations/AllocationsLayout.js index 04d02500c..dca5d67f3 100644 --- a/client/src/components/Allocations/AllocationsLayout.js +++ b/client/src/components/Allocations/AllocationsLayout.js @@ -1,7 +1,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { Link, NavLink as RRNavLink } from 'react-router-dom'; -import { Button, Nav, NavItem, NavLink } from 'reactstrap'; +import { Button, Nav, NavItem, NavLink, Alert } from 'reactstrap'; import { string } from 'prop-types'; import { Icon, LoadingSpinner } from '_common'; import { AllocationsTable } from './AllocationsTables'; @@ -11,22 +11,29 @@ import * as ROUTES from '../../constants/routes'; export const Header = ({ page }) => { const [openModal, setOpenModal] = React.useState(false); return ( -
-
- Allocations -  /  - {page[0].toUpperCase() + page.substring(1)} + <> +
+ + Monitor the status of allocations on the HPC systems and view a breakdown of team usage. + +
+
+
+ Allocations +  /  + {page[0].toUpperCase() + page.substring(1)} +
+ + {openModal && ( + setOpenModal(!openModal)} + /> + )}
- - {openModal && ( - setOpenModal(!openModal)} - /> - )} -
+ ); }; Header.propTypes = { page: string.isRequired }; diff --git a/client/src/components/Applications/AppLayout/AppLayout.js b/client/src/components/Applications/AppLayout/AppLayout.js index 4198c1d53..08a8e5909 100644 --- a/client/src/components/Applications/AppLayout/AppLayout.js +++ b/client/src/components/Applications/AppLayout/AppLayout.js @@ -1,5 +1,6 @@ import React from 'react'; import { Route, useRouteMatch } from 'react-router-dom'; +import { Alert } from 'reactstrap'; import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import { LoadingSpinner } from '_common'; import './AppLayout.scss'; @@ -19,6 +20,9 @@ const AppsLayout = appDict => { return ( <> + + Submit jobs to the HPC systems using a wide variety of applications. +
Applications diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js index 48ff05182..928c4e808 100644 --- a/client/src/components/Dashboard/Dashboard.js +++ b/client/src/components/Dashboard/Dashboard.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Container, Row, Col } from 'reactstrap'; +import { Button, Container, Row, Col, Alert } from 'reactstrap'; import { useDispatch } from 'react-redux'; import { Link, Route, Switch } from 'react-router-dom'; import JobsView from '../Jobs'; @@ -15,6 +15,10 @@ function Dashboard() { return (
+ + Monitor jobs, get help via tickets, view the status of the High Performance + Computing (HPC) systems, and add quick links to frequently used applications. +
Dashboard
diff --git a/client/src/components/DataFiles/DataFiles.js b/client/src/components/DataFiles/DataFiles.js index c9a2cf235..a6aa8bd49 100644 --- a/client/src/components/DataFiles/DataFiles.js +++ b/client/src/components/DataFiles/DataFiles.js @@ -7,6 +7,7 @@ import { useLocation } from 'react-router-dom'; import { useSelector, useDispatch, shallowEqual } from 'react-redux'; +import { Alert } from 'reactstrap'; import { parse } from 'query-string'; import './DataFiles.module.css'; @@ -70,6 +71,9 @@ const DataFiles = () => { return (
+ + Upload and manage files in a private directory. + {/* row containing breadcrumbs and toolbar */}
{ return (
+ + Access a log of all previous job submissions. +
From f163a5925b60f859b41c15fee2a99dda2ec0aba6 Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 15:06:16 -0500 Subject: [PATCH 02/15] Revert "Alert messages" This reverts commit d6a404ad14bf507642604d6b6ff78c9b1a8de9e4. --- .../components/Allocations/Allocations.scss | 11 +----- .../Allocations/AllocationsLayout.js | 39 ++++++++----------- .../Applications/AppLayout/AppLayout.js | 4 -- client/src/components/Dashboard/Dashboard.js | 6 +-- client/src/components/DataFiles/DataFiles.js | 4 -- client/src/components/History/History.js | 5 +-- 6 files changed, 19 insertions(+), 50 deletions(-) diff --git a/client/src/components/Allocations/Allocations.scss b/client/src/components/Allocations/Allocations.scss index 3df12fa4c..4f539f7c5 100644 --- a/client/src/components/Allocations/Allocations.scss +++ b/client/src/components/Allocations/Allocations.scss @@ -37,16 +37,7 @@ #allocations-container > :last-child { flex-grow: 1; } -#allocations-alert { - display: flex; - flex-direction: column; - - padding: 20px 40px 0 20px; - .alert { - margin-bottom: 0px; - } -} - + #allocations-header { @include alloc-button(); display: flex; diff --git a/client/src/components/Allocations/AllocationsLayout.js b/client/src/components/Allocations/AllocationsLayout.js index dca5d67f3..04d02500c 100644 --- a/client/src/components/Allocations/AllocationsLayout.js +++ b/client/src/components/Allocations/AllocationsLayout.js @@ -1,7 +1,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { Link, NavLink as RRNavLink } from 'react-router-dom'; -import { Button, Nav, NavItem, NavLink, Alert } from 'reactstrap'; +import { Button, Nav, NavItem, NavLink } from 'reactstrap'; import { string } from 'prop-types'; import { Icon, LoadingSpinner } from '_common'; import { AllocationsTable } from './AllocationsTables'; @@ -11,29 +11,22 @@ import * as ROUTES from '../../constants/routes'; export const Header = ({ page }) => { const [openModal, setOpenModal] = React.useState(false); return ( - <> -
- - Monitor the status of allocations on the HPC systems and view a breakdown of team usage. - -
-
-
- Allocations -  /  - {page[0].toUpperCase() + page.substring(1)} -
- - {openModal && ( - setOpenModal(!openModal)} - /> - )} +
+
+ Allocations +  /  + {page[0].toUpperCase() + page.substring(1)}
- + + {openModal && ( + setOpenModal(!openModal)} + /> + )} +
); }; Header.propTypes = { page: string.isRequired }; diff --git a/client/src/components/Applications/AppLayout/AppLayout.js b/client/src/components/Applications/AppLayout/AppLayout.js index 08a8e5909..4198c1d53 100644 --- a/client/src/components/Applications/AppLayout/AppLayout.js +++ b/client/src/components/Applications/AppLayout/AppLayout.js @@ -1,6 +1,5 @@ import React from 'react'; import { Route, useRouteMatch } from 'react-router-dom'; -import { Alert } from 'reactstrap'; import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import { LoadingSpinner } from '_common'; import './AppLayout.scss'; @@ -20,9 +19,6 @@ const AppsLayout = appDict => { return ( <> - - Submit jobs to the HPC systems using a wide variety of applications. -
Applications diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js index 928c4e808..48ff05182 100644 --- a/client/src/components/Dashboard/Dashboard.js +++ b/client/src/components/Dashboard/Dashboard.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Container, Row, Col, Alert } from 'reactstrap'; +import { Button, Container, Row, Col } from 'reactstrap'; import { useDispatch } from 'react-redux'; import { Link, Route, Switch } from 'react-router-dom'; import JobsView from '../Jobs'; @@ -15,10 +15,6 @@ function Dashboard() { return (
- - Monitor jobs, get help via tickets, view the status of the High Performance - Computing (HPC) systems, and add quick links to frequently used applications. -
Dashboard
diff --git a/client/src/components/DataFiles/DataFiles.js b/client/src/components/DataFiles/DataFiles.js index a6aa8bd49..c9a2cf235 100644 --- a/client/src/components/DataFiles/DataFiles.js +++ b/client/src/components/DataFiles/DataFiles.js @@ -7,7 +7,6 @@ import { useLocation } from 'react-router-dom'; import { useSelector, useDispatch, shallowEqual } from 'react-redux'; -import { Alert } from 'reactstrap'; import { parse } from 'query-string'; import './DataFiles.module.css'; @@ -71,9 +70,6 @@ const DataFiles = () => { return (
- - Upload and manage files in a private directory. - {/* row containing breadcrumbs and toolbar */}
{ return (
- - Access a log of all previous job submissions. -
From 382ce81b0a217f5fb270b2ee235dcadaced296ee Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 15:11:41 -0500 Subject: [PATCH 03/15] Refactor messages to workbench component --- client/src/components/Workbench/Workbench.js | 31 +++++++++++++++++++ .../src/components/Workbench/Workbench.scss | 7 +++++ client/src/redux/reducers/index.js | 4 ++- 3 files changed, 41 insertions(+), 1 deletion(-) diff --git a/client/src/components/Workbench/Workbench.js b/client/src/components/Workbench/Workbench.js index a5b6fc986..413b8afdd 100644 --- a/client/src/components/Workbench/Workbench.js +++ b/client/src/components/Workbench/Workbench.js @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; import { Route, Switch, useRouteMatch, Redirect } from 'react-router-dom'; +import { Alert } from 'reactstrap'; import { useDispatch, useSelector } from 'react-redux'; import Dashboard from '../Dashboard'; import Allocations from '../Allocations'; @@ -37,6 +38,36 @@ function Workbench() {
+
+ + + + Monitor jobs, get help via tickets, view the status of the High Performance + Computing (HPC) systems, and add quick links to frequently used applications. + + + + + Upload and manage files in a private directory. + + + + + Submit jobs to the HPC systems using a wide variety of applications. + + + + + Monitor the status of allocations on the HPC systems and view a breakdown of team usage. + + + + + Access a lot of all previous job.submissions. + + + +
diff --git a/client/src/components/Workbench/Workbench.scss b/client/src/components/Workbench/Workbench.scss index 851919a73..1878d6ead 100644 --- a/client/src/components/Workbench/Workbench.scss +++ b/client/src/components/Workbench/Workbench.scss @@ -103,3 +103,10 @@ justify-content: center; align-items: center; } + +.workbench__alert { + padding: 20px 20px 0 20px; + .alert { + margin-bottom: 0px; + } +} \ No newline at end of file diff --git a/client/src/redux/reducers/index.js b/client/src/redux/reducers/index.js index 6b79a954a..60fa039b0 100644 --- a/client/src/redux/reducers/index.js +++ b/client/src/redux/reducers/index.js @@ -14,6 +14,7 @@ import authenticatedUser from './authenticated_user.reducer'; import { pushKeys } from './systems.reducers'; import notifications from './notifications.reducers'; import workbench from './workbench.reducers'; +import { welcomeMessages } from './welcome.reducers'; export default combineReducers({ jobs, @@ -31,5 +32,6 @@ export default combineReducers({ apps, pushKeys, notifications, - workbench + workbench, + welcomeMessages }); From ac0dd150768ac3c77b207283ae434e9632eb15da Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 15:12:43 -0500 Subject: [PATCH 04/15] Add welcome message state reducers and sagas --- client/src/redux/reducers/welcome.reducers.js | 29 +++++++++++++++++++ client/src/redux/sagas/welcome.sagas.js | 20 +++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 client/src/redux/reducers/welcome.reducers.js create mode 100644 client/src/redux/sagas/welcome.sagas.js diff --git a/client/src/redux/reducers/welcome.reducers.js b/client/src/redux/reducers/welcome.reducers.js new file mode 100644 index 000000000..240a75da2 --- /dev/null +++ b/client/src/redux/reducers/welcome.reducers.js @@ -0,0 +1,29 @@ +const initialWelcomeMessages = { + sections: { + 'dashboard': false, + 'applications': false, + 'datafiles': false, + 'allocations': false, + 'history': false + } +}; + +export function welcomeMessages(state = initialWelcomeMessages, action) { + switch (action.type) { + case 'WELCOME_FETCH_STARTED': + return { + ...state, + }; + case 'WELCOME_FETCH_SUCCESS': + return { + ...state, + ...action.payload, + }; + case 'WELCOME_FETCH_ERROR': + return { + ...state + }; + default: + return state; + } +} \ No newline at end of file diff --git a/client/src/redux/sagas/welcome.sagas.js b/client/src/redux/sagas/welcome.sagas.js new file mode 100644 index 000000000..2a47bcf65 --- /dev/null +++ b/client/src/redux/sagas/welcome.sagas.js @@ -0,0 +1,20 @@ +import { put, takeLatest, call, all } from 'redux-saga/effects'; +import Cookies from 'js-cookie'; +import { fetchUtil } from 'utils/fetchUtil'; +import 'cross-fetch'; + +export function* fetchWelcomeMessages(action) { + yield put({ type: 'WELCOME_FETCH_STARTED' }); + try { + const messages = localStorage.getItem('welcomeMessages') || {} + yield put({ + type: 'WELCOME_FETCH_SUCCESS', + payload: messages + }); + } catch (error) { + yield put({ + type: 'WELCOME_FETCH_ERROR', + payload: error + }); + } +} From ed2d6c527cc6a5bc9369fa34b88f09d42f23ae40 Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 15:59:58 -0500 Subject: [PATCH 05/15] Refactor css --- client/src/components/Workbench/Workbench.js | 73 +++++++++++-------- .../src/components/Workbench/Workbench.scss | 7 +- 2 files changed, 44 insertions(+), 36 deletions(-) diff --git a/client/src/components/Workbench/Workbench.js b/client/src/components/Workbench/Workbench.js index 413b8afdd..01e638640 100644 --- a/client/src/components/Workbench/Workbench.js +++ b/client/src/components/Workbench/Workbench.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { Route, Switch, useRouteMatch, Redirect } from 'react-router-dom'; import { Alert } from 'reactstrap'; import { useDispatch, useSelector } from 'react-redux'; @@ -31,43 +31,54 @@ function Workbench() { dispatch({ type: 'GET_APP_START' }); dispatch({ type: 'GET_JOBS', params: { offset: 0, limit: 20 } }); dispatch({ type: 'FETCH_NOTIFICATIONS' }); + dispatch({ type: 'FETCH_WELCOME' }) }, []); + const savedWelcomeMessages = useSelector(state => state.welcomeMessages); + const [ welcomeMessages, setWelcomeMessages ] = useState(savedWelcomeMessages); + + const onDismissWelcome = (section) => { + const newMessagesState = { + ...welcomeMessages, + [section]: false + } + setWelcomeMessages(newMessagesState); + dispatch({ type: 'SAVE_WELCOME', payload: newMessagesState}); + } + return (
-
- - - - Monitor jobs, get help via tickets, view the status of the High Performance - Computing (HPC) systems, and add quick links to frequently used applications. - - - - - Upload and manage files in a private directory. - - - - - Submit jobs to the HPC systems using a wide variety of applications. - - - - - Monitor the status of allocations on the HPC systems and view a breakdown of team usage. - - - - - Access a lot of all previous job.submissions. - - - -
+ + + + Monitor jobs, get help via tickets, view the status of the High Performance + Computing (HPC) systems, and add quick links to frequently used applications. + + + + + Upload and manage files in a private directory. + + + + + Submit jobs to the HPC systems using a wide variety of applications. + + + + + Monitor the status of allocations on the HPC systems and view a breakdown of team usage. + + + + + Access a lot of all previous job.submissions. + + + diff --git a/client/src/components/Workbench/Workbench.scss b/client/src/components/Workbench/Workbench.scss index 1878d6ead..aca53f066 100644 --- a/client/src/components/Workbench/Workbench.scss +++ b/client/src/components/Workbench/Workbench.scss @@ -104,9 +104,6 @@ align-items: center; } -.workbench__alert { - padding: 20px 20px 0 20px; - .alert { - margin-bottom: 0px; - } +.welcomeMessage { + margin: 20px 20px 0px 20px; } \ No newline at end of file From 07a5208951947b71872db23897e603392e475df5 Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 16:05:17 -0500 Subject: [PATCH 06/15] Dismissable messages --- client/src/components/Workbench/Workbench.js | 30 +++++++++++++++---- client/src/redux/reducers/welcome.reducers.js | 26 +++++++++++----- client/src/redux/sagas/index.js | 8 ++++- client/src/redux/sagas/welcome.sagas.js | 27 ++++++++++++++++- 4 files changed, 77 insertions(+), 14 deletions(-) diff --git a/client/src/components/Workbench/Workbench.js b/client/src/components/Workbench/Workbench.js index 01e638640..de422d327 100644 --- a/client/src/components/Workbench/Workbench.js +++ b/client/src/components/Workbench/Workbench.js @@ -53,28 +53,48 @@ function Workbench() {
- + onDismissWelcome('dashboard')} + color="info" + className="welcomeMessage"> Monitor jobs, get help via tickets, view the status of the High Performance Computing (HPC) systems, and add quick links to frequently used applications. - + onDismissWelcome('datafiles')} + color="info" + className="welcomeMessage"> Upload and manage files in a private directory. - + onDismissWelcome('applications')} + color="info" + className="welcomeMessage"> Submit jobs to the HPC systems using a wide variety of applications. - + onDismissWelcome('allocations')} + color="info" + className="welcomeMessage"> Monitor the status of allocations on the HPC systems and view a breakdown of team usage. - + onDismissWelcome('history')} + color="info" + className="welcomeMessage"> Access a lot of all previous job.submissions. diff --git a/client/src/redux/reducers/welcome.reducers.js b/client/src/redux/reducers/welcome.reducers.js index 240a75da2..5e28ca33e 100644 --- a/client/src/redux/reducers/welcome.reducers.js +++ b/client/src/redux/reducers/welcome.reducers.js @@ -1,11 +1,9 @@ const initialWelcomeMessages = { - sections: { - 'dashboard': false, - 'applications': false, - 'datafiles': false, - 'allocations': false, - 'history': false - } + dashboard: true, + applications: true, + datafiles: true, + allocations: true, + history: true }; export function welcomeMessages(state = initialWelcomeMessages, action) { @@ -23,6 +21,20 @@ export function welcomeMessages(state = initialWelcomeMessages, action) { return { ...state }; + case 'WELCOME_SAVE_STARTED': + return { + ...state, + }; + case 'WELCOME_SAVE_SUCCESS': + return { + ...state, + ...action.payload + } + case 'WECOME_SAVE_ERROR': + return { + ...state, + ...action.paylod + } default: return state; } diff --git a/client/src/redux/sagas/index.js b/client/src/redux/sagas/index.js index e0e629589..bb4ee5ba6 100644 --- a/client/src/redux/sagas/index.js +++ b/client/src/redux/sagas/index.js @@ -32,6 +32,10 @@ import { } from './tickets.sagas'; import { watchAuthenticatedUser } from './authenticated_user.sagas'; import { watchWorkbench } from './workbench.sagas'; +import { + watchFetchWelcomeMessages, + watchSaveWelcomeMessages +} from './welcome.sagas'; export default function* rootSaga() { yield all([ @@ -64,6 +68,8 @@ export default function* rootSaga() { watchAuthenticatedUser(), watchSocket(), watchFetchNotifications(), - watchWorkbench() + watchWorkbench(), + watchFetchWelcomeMessages(), + watchSaveWelcomeMessages() ]); } diff --git a/client/src/redux/sagas/welcome.sagas.js b/client/src/redux/sagas/welcome.sagas.js index 2a47bcf65..05cad798a 100644 --- a/client/src/redux/sagas/welcome.sagas.js +++ b/client/src/redux/sagas/welcome.sagas.js @@ -14,7 +14,32 @@ export function* fetchWelcomeMessages(action) { } catch (error) { yield put({ type: 'WELCOME_FETCH_ERROR', - payload: error }); } } + +export function* watchFetchWelcomeMessages() { + yield takeLatest('FETCH_WELCOME', fetchWelcomeMessages); +} + +export function* saveWelcomeMessages(action) { + yield put({ type: 'WELCOME_SAVE_STARTED' }); + try { + localStorage.setItem('welcomeMessages', action.payload) + yield put({ + type: 'WELCOME_SAVE_SUCCESS', + payload: action.payload + }) + } catch (error) { + // Return the intended state of welcome messages + // regardless of save success or failure + yield put({ + type: 'WELCOME_SAVE_ERROR', + payload: action.payload + }); + } +} + +export function* watchSaveWelcomeMessages() { + yield takeLatest('SAVE_WELCOME', saveWelcomeMessages); +} \ No newline at end of file From 0328c49de701197bc37c22fc6148c24af6a45098 Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 16:51:57 -0500 Subject: [PATCH 07/15] Dismissal is working --- client/src/components/Workbench/Workbench.js | 6 ++---- client/src/redux/sagas/index.js | 2 +- client/src/redux/sagas/welcome.sagas.js | 14 ++++++-------- 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/client/src/components/Workbench/Workbench.js b/client/src/components/Workbench/Workbench.js index de422d327..46a67c2df 100644 --- a/client/src/components/Workbench/Workbench.js +++ b/client/src/components/Workbench/Workbench.js @@ -23,6 +23,7 @@ function Workbench() { const showUIPatterns = isDebug; // Get systems and any other initial data we need from the backend useEffect(() => { + dispatch({ type: 'FETCH_WELCOME' }); dispatch({ type: 'FETCH_SYSTEMS' }); dispatch({ type: 'FETCH_AUTHENTICATED_USER' }); dispatch({ type: 'FETCH_WORKBENCH' }); @@ -31,18 +32,15 @@ function Workbench() { dispatch({ type: 'GET_APP_START' }); dispatch({ type: 'GET_JOBS', params: { offset: 0, limit: 20 } }); dispatch({ type: 'FETCH_NOTIFICATIONS' }); - dispatch({ type: 'FETCH_WELCOME' }) }, []); - const savedWelcomeMessages = useSelector(state => state.welcomeMessages); - const [ welcomeMessages, setWelcomeMessages ] = useState(savedWelcomeMessages); + const welcomeMessages = useSelector(state => state.welcomeMessages); const onDismissWelcome = (section) => { const newMessagesState = { ...welcomeMessages, [section]: false } - setWelcomeMessages(newMessagesState); dispatch({ type: 'SAVE_WELCOME', payload: newMessagesState}); } diff --git a/client/src/redux/sagas/index.js b/client/src/redux/sagas/index.js index bb4ee5ba6..2cbb1cb91 100644 --- a/client/src/redux/sagas/index.js +++ b/client/src/redux/sagas/index.js @@ -70,6 +70,6 @@ export default function* rootSaga() { watchFetchNotifications(), watchWorkbench(), watchFetchWelcomeMessages(), - watchSaveWelcomeMessages() + watchSaveWelcomeMessages(), ]); } diff --git a/client/src/redux/sagas/welcome.sagas.js b/client/src/redux/sagas/welcome.sagas.js index 05cad798a..4ba40f661 100644 --- a/client/src/redux/sagas/welcome.sagas.js +++ b/client/src/redux/sagas/welcome.sagas.js @@ -1,12 +1,10 @@ -import { put, takeLatest, call, all } from 'redux-saga/effects'; -import Cookies from 'js-cookie'; -import { fetchUtil } from 'utils/fetchUtil'; -import 'cross-fetch'; +import { put, takeLatest, takeLeading } from 'redux-saga/effects'; -export function* fetchWelcomeMessages(action) { +export function* fetchWelcomeMessages() { yield put({ type: 'WELCOME_FETCH_STARTED' }); try { - const messages = localStorage.getItem('welcomeMessages') || {} + const messages = JSON.parse(localStorage.getItem('welcomeMessages')) || {} + console.log("WELCOME MESSAGE STATE", messages); yield put({ type: 'WELCOME_FETCH_SUCCESS', payload: messages @@ -19,13 +17,13 @@ export function* fetchWelcomeMessages(action) { } export function* watchFetchWelcomeMessages() { - yield takeLatest('FETCH_WELCOME', fetchWelcomeMessages); + yield takeLeading('FETCH_WELCOME', fetchWelcomeMessages); } export function* saveWelcomeMessages(action) { yield put({ type: 'WELCOME_SAVE_STARTED' }); try { - localStorage.setItem('welcomeMessages', action.payload) + localStorage.setItem('welcomeMessages', JSON.stringify(action.payload)) yield put({ type: 'WELCOME_SAVE_SUCCESS', payload: action.payload From 4590d3cdabfbccb9f06dfa747e9dc5ef1e0b78fd Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 16:58:48 -0500 Subject: [PATCH 08/15] Fix workbench-content height artifact --- client/src/components/Workbench/Workbench.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/src/components/Workbench/Workbench.scss b/client/src/components/Workbench/Workbench.scss index aca53f066..8f1e7a70a 100644 --- a/client/src/components/Workbench/Workbench.scss +++ b/client/src/components/Workbench/Workbench.scss @@ -18,6 +18,11 @@ height: 100%; } +.workbench-content > :nth-child(2) { + flex-grow: 1; +} + + .workbench-content .wb-text-primary { color: #484848; } @@ -106,4 +111,5 @@ .welcomeMessage { margin: 20px 20px 0px 20px; -} \ No newline at end of file + flex-grow: 0; +} From 1ed0a8e19f3024768219068c4affcb9c977e644b Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 17:00:54 -0500 Subject: [PATCH 09/15] eslint --- client/src/components/Workbench/Workbench.js | 36 +++++++++++-------- client/src/redux/reducers/welcome.reducers.js | 12 +++---- client/src/redux/sagas/index.js | 4 +-- client/src/redux/sagas/welcome.sagas.js | 12 +++---- 4 files changed, 36 insertions(+), 28 deletions(-) diff --git a/client/src/components/Workbench/Workbench.js b/client/src/components/Workbench/Workbench.js index 46a67c2df..b64be1d19 100644 --- a/client/src/components/Workbench/Workbench.js +++ b/client/src/components/Workbench/Workbench.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { Route, Switch, useRouteMatch, Redirect } from 'react-router-dom'; import { Alert } from 'reactstrap'; import { useDispatch, useSelector } from 'react-redux'; @@ -36,13 +36,13 @@ function Workbench() { const welcomeMessages = useSelector(state => state.welcomeMessages); - const onDismissWelcome = (section) => { + const onDismissWelcome = section => { const newMessagesState = { ...welcomeMessages, [section]: false - } - dispatch({ type: 'SAVE_WELCOME', payload: newMessagesState}); - } + }; + dispatch({ type: 'SAVE_WELCOME', payload: newMessagesState }); + }; return (
@@ -55,9 +55,11 @@ function Workbench() { isOpen={welcomeMessages.dashboard} toggle={() => onDismissWelcome('dashboard')} color="info" - className="welcomeMessage"> - Monitor jobs, get help via tickets, view the status of the High Performance - Computing (HPC) systems, and add quick links to frequently used applications. + className="welcomeMessage" + > + Monitor jobs, get help via tickets, view the status of the High + Performance Computing (HPC) systems, and add quick links to + frequently used applications. @@ -65,7 +67,8 @@ function Workbench() { isOpen={welcomeMessages.datafiles} toggle={() => onDismissWelcome('datafiles')} color="info" - className="welcomeMessage"> + className="welcomeMessage" + > Upload and manage files in a private directory. @@ -74,8 +77,10 @@ function Workbench() { isOpen={welcomeMessages.applications} toggle={() => onDismissWelcome('applications')} color="info" - className="welcomeMessage"> - Submit jobs to the HPC systems using a wide variety of applications. + className="welcomeMessage" + > + Submit jobs to the HPC systems using a wide variety of + applications. @@ -83,8 +88,10 @@ function Workbench() { isOpen={welcomeMessages.allocations} toggle={() => onDismissWelcome('allocations')} color="info" - className="welcomeMessage"> - Monitor the status of allocations on the HPC systems and view a breakdown of team usage. + className="welcomeMessage" + > + Monitor the status of allocations on the HPC systems and view a + breakdown of team usage. @@ -92,7 +99,8 @@ function Workbench() { isOpen={welcomeMessages.history} toggle={() => onDismissWelcome('history')} color="info" - className="welcomeMessage"> + className="welcomeMessage" + > Access a lot of all previous job.submissions. diff --git a/client/src/redux/reducers/welcome.reducers.js b/client/src/redux/reducers/welcome.reducers.js index 5e28ca33e..f37a12311 100644 --- a/client/src/redux/reducers/welcome.reducers.js +++ b/client/src/redux/reducers/welcome.reducers.js @@ -10,12 +10,12 @@ export function welcomeMessages(state = initialWelcomeMessages, action) { switch (action.type) { case 'WELCOME_FETCH_STARTED': return { - ...state, + ...state }; case 'WELCOME_FETCH_SUCCESS': return { ...state, - ...action.payload, + ...action.payload }; case 'WELCOME_FETCH_ERROR': return { @@ -23,19 +23,19 @@ export function welcomeMessages(state = initialWelcomeMessages, action) { }; case 'WELCOME_SAVE_STARTED': return { - ...state, + ...state }; case 'WELCOME_SAVE_SUCCESS': return { ...state, ...action.payload - } + }; case 'WECOME_SAVE_ERROR': return { ...state, ...action.paylod - } + }; default: return state; } -} \ No newline at end of file +} diff --git a/client/src/redux/sagas/index.js b/client/src/redux/sagas/index.js index 2cbb1cb91..24c2c2ea6 100644 --- a/client/src/redux/sagas/index.js +++ b/client/src/redux/sagas/index.js @@ -32,7 +32,7 @@ import { } from './tickets.sagas'; import { watchAuthenticatedUser } from './authenticated_user.sagas'; import { watchWorkbench } from './workbench.sagas'; -import { +import { watchFetchWelcomeMessages, watchSaveWelcomeMessages } from './welcome.sagas'; @@ -70,6 +70,6 @@ export default function* rootSaga() { watchFetchNotifications(), watchWorkbench(), watchFetchWelcomeMessages(), - watchSaveWelcomeMessages(), + watchSaveWelcomeMessages() ]); } diff --git a/client/src/redux/sagas/welcome.sagas.js b/client/src/redux/sagas/welcome.sagas.js index 4ba40f661..da42c8f05 100644 --- a/client/src/redux/sagas/welcome.sagas.js +++ b/client/src/redux/sagas/welcome.sagas.js @@ -3,15 +3,15 @@ import { put, takeLatest, takeLeading } from 'redux-saga/effects'; export function* fetchWelcomeMessages() { yield put({ type: 'WELCOME_FETCH_STARTED' }); try { - const messages = JSON.parse(localStorage.getItem('welcomeMessages')) || {} - console.log("WELCOME MESSAGE STATE", messages); + const messages = JSON.parse(localStorage.getItem('welcomeMessages')) || {}; + console.log('WELCOME MESSAGE STATE', messages); yield put({ type: 'WELCOME_FETCH_SUCCESS', payload: messages }); } catch (error) { yield put({ - type: 'WELCOME_FETCH_ERROR', + type: 'WELCOME_FETCH_ERROR' }); } } @@ -23,11 +23,11 @@ export function* watchFetchWelcomeMessages() { export function* saveWelcomeMessages(action) { yield put({ type: 'WELCOME_SAVE_STARTED' }); try { - localStorage.setItem('welcomeMessages', JSON.stringify(action.payload)) + localStorage.setItem('welcomeMessages', JSON.stringify(action.payload)); yield put({ type: 'WELCOME_SAVE_SUCCESS', payload: action.payload - }) + }); } catch (error) { // Return the intended state of welcome messages // regardless of save success or failure @@ -40,4 +40,4 @@ export function* saveWelcomeMessages(action) { export function* watchSaveWelcomeMessages() { yield takeLatest('SAVE_WELCOME', saveWelcomeMessages); -} \ No newline at end of file +} From b3cf6cb28eac89df518e419b527f39eacbc4bdf0 Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 17:05:44 -0500 Subject: [PATCH 10/15] New language from thbrown --- client/src/components/Workbench/Workbench.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/client/src/components/Workbench/Workbench.js b/client/src/components/Workbench/Workbench.js index b64be1d19..e917c6a7a 100644 --- a/client/src/components/Workbench/Workbench.js +++ b/client/src/components/Workbench/Workbench.js @@ -57,9 +57,8 @@ function Workbench() { color="info" className="welcomeMessage" > - Monitor jobs, get help via tickets, view the status of the High - Performance Computing (HPC) systems, and add quick links to - frequently used applications. + This page allows you to monitor your job status, get help with tickets, + and view the status of the High Performance Computing (HPC) systems. @@ -69,7 +68,7 @@ function Workbench() { color="info" className="welcomeMessage" > - Upload and manage files in a private directory. + This page allows you to upload and manage your files. @@ -79,8 +78,8 @@ function Workbench() { color="info" className="welcomeMessage" > - Submit jobs to the HPC systems using a wide variety of - applications. + This page allows you to submit jobs to the HPC systems or access Cloud services + using a variety of applications. @@ -90,8 +89,8 @@ function Workbench() { color="info" className="welcomeMessage" > - Monitor the status of allocations on the HPC systems and view a - breakdown of team usage. + This page allows you to monitor the status of allocations on the HPC systems and + view a breakdown of team usage. @@ -101,7 +100,7 @@ function Workbench() { color="info" className="welcomeMessage" > - Access a lot of all previous job.submissions. + This page allows you to monitor a log of all previous job submissions. From e4d3ebc9820fd39eba6b54a7f43a14ce225a94fb Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 17:08:13 -0500 Subject: [PATCH 11/15] eslint --- client/src/redux/reducers/index.js | 2 +- client/src/redux/reducers/welcome.reducers.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/redux/reducers/index.js b/client/src/redux/reducers/index.js index 60fa039b0..45acd5e60 100644 --- a/client/src/redux/reducers/index.js +++ b/client/src/redux/reducers/index.js @@ -14,7 +14,7 @@ import authenticatedUser from './authenticated_user.reducer'; import { pushKeys } from './systems.reducers'; import notifications from './notifications.reducers'; import workbench from './workbench.reducers'; -import { welcomeMessages } from './welcome.reducers'; +import welcomeMessages from './welcome.reducers'; export default combineReducers({ jobs, diff --git a/client/src/redux/reducers/welcome.reducers.js b/client/src/redux/reducers/welcome.reducers.js index f37a12311..46fa6775c 100644 --- a/client/src/redux/reducers/welcome.reducers.js +++ b/client/src/redux/reducers/welcome.reducers.js @@ -6,7 +6,7 @@ const initialWelcomeMessages = { history: true }; -export function welcomeMessages(state = initialWelcomeMessages, action) { +function welcomeMessages(state = initialWelcomeMessages, action) { switch (action.type) { case 'WELCOME_FETCH_STARTED': return { @@ -39,3 +39,5 @@ export function welcomeMessages(state = initialWelcomeMessages, action) { return state; } } + +export default welcomeMessages; \ No newline at end of file From f0354db0d73aeda47f511290d746fa5d524f90c1 Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 17:12:46 -0500 Subject: [PATCH 12/15] eslint --- client/src/components/Workbench/Workbench.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/client/src/components/Workbench/Workbench.js b/client/src/components/Workbench/Workbench.js index e917c6a7a..e4a715d9c 100644 --- a/client/src/components/Workbench/Workbench.js +++ b/client/src/components/Workbench/Workbench.js @@ -57,8 +57,9 @@ function Workbench() { color="info" className="welcomeMessage" > - This page allows you to monitor your job status, get help with tickets, - and view the status of the High Performance Computing (HPC) systems. + This page allows you to monitor your job status, get help with + tickets, and view the status of the High Performance Computing + (HPC) systems. @@ -78,8 +79,8 @@ function Workbench() { color="info" className="welcomeMessage" > - This page allows you to submit jobs to the HPC systems or access Cloud services - using a variety of applications. + This page allows you to submit jobs to the HPC systems or access + Cloud services using a variety of applications. @@ -89,8 +90,8 @@ function Workbench() { color="info" className="welcomeMessage" > - This page allows you to monitor the status of allocations on the HPC systems and - view a breakdown of team usage. + This page allows you to monitor the status of allocations on the + HPC systems and view a breakdown of team usage. @@ -100,7 +101,8 @@ function Workbench() { color="info" className="welcomeMessage" > - This page allows you to monitor a log of all previous job submissions. + This page allows you to monitor a log of all previous job + submissions. From 5bbaa8758df3d721e040e9325a88a6a8339c6cba Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 17:16:55 -0500 Subject: [PATCH 13/15] eslint --- client/src/redux/reducers/welcome.reducers.js | 2 +- client/src/redux/sagas/welcome.sagas.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/client/src/redux/reducers/welcome.reducers.js b/client/src/redux/reducers/welcome.reducers.js index 46fa6775c..bc4ca64db 100644 --- a/client/src/redux/reducers/welcome.reducers.js +++ b/client/src/redux/reducers/welcome.reducers.js @@ -40,4 +40,4 @@ function welcomeMessages(state = initialWelcomeMessages, action) { } } -export default welcomeMessages; \ No newline at end of file +export default welcomeMessages; diff --git a/client/src/redux/sagas/welcome.sagas.js b/client/src/redux/sagas/welcome.sagas.js index da42c8f05..4106f4903 100644 --- a/client/src/redux/sagas/welcome.sagas.js +++ b/client/src/redux/sagas/welcome.sagas.js @@ -4,7 +4,6 @@ export function* fetchWelcomeMessages() { yield put({ type: 'WELCOME_FETCH_STARTED' }); try { const messages = JSON.parse(localStorage.getItem('welcomeMessages')) || {}; - console.log('WELCOME MESSAGE STATE', messages); yield put({ type: 'WELCOME_FETCH_SUCCESS', payload: messages From 297982fb99e263a4f2126efcb1bc2499832a6b30 Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Thu, 20 Aug 2020 17:21:27 -0500 Subject: [PATCH 14/15] eslint --- client/src/components/Workbench/Workbench.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Workbench/Workbench.scss b/client/src/components/Workbench/Workbench.scss index 8f1e7a70a..90d611700 100644 --- a/client/src/components/Workbench/Workbench.scss +++ b/client/src/components/Workbench/Workbench.scss @@ -110,6 +110,6 @@ } .welcomeMessage { - margin: 20px 20px 0px 20px; + margin: 20px 20px 0 20px; flex-grow: 0; } From e91c74a157ed3b766f05b83d1b9fff466a84632e Mon Sep 17 00:00:00 2001 From: jchuahtacc Date: Fri, 21 Aug 2020 09:35:23 -0500 Subject: [PATCH 15/15] Change color of messages to secondary --- client/src/components/Workbench/Workbench.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/components/Workbench/Workbench.js b/client/src/components/Workbench/Workbench.js index e4a715d9c..94c785cfb 100644 --- a/client/src/components/Workbench/Workbench.js +++ b/client/src/components/Workbench/Workbench.js @@ -54,7 +54,7 @@ function Workbench() { onDismissWelcome('dashboard')} - color="info" + color="secondary" className="welcomeMessage" > This page allows you to monitor your job status, get help with @@ -66,7 +66,7 @@ function Workbench() { onDismissWelcome('datafiles')} - color="info" + color="secondary" className="welcomeMessage" > This page allows you to upload and manage your files. @@ -76,7 +76,7 @@ function Workbench() { onDismissWelcome('applications')} - color="info" + color="secondary" className="welcomeMessage" > This page allows you to submit jobs to the HPC systems or access @@ -87,7 +87,7 @@ function Workbench() { onDismissWelcome('allocations')} - color="info" + color="secondary" className="welcomeMessage" > This page allows you to monitor the status of allocations on the @@ -98,7 +98,7 @@ function Workbench() { onDismissWelcome('history')} - color="info" + color="secondary" className="welcomeMessage" > This page allows you to monitor a log of all previous job