Skip to content
Snippets Groups Projects
Commit ed8a55e8 authored by Klaas Kliffen's avatar Klaas Kliffen :satellite:
Browse files

Misc clean-up and formatting

parent f9788f08
No related branches found
No related tags found
1 merge request!109Clean up GUI part I
Hide whitespace changes
Inline Side-by-side
README.md
+ 0
− 5
View file @ ed8a55e8
......@@ -12,11 +12,6 @@ Local deployment
npm install
npm start
```
or
```
yarn install
yarn start
```
## Contributing
......
src/components/NavBar.js
+ 2
− 7
View file @ ed8a55e8
......@@ -13,18 +13,13 @@ import esap_logo from "../assets/esap_logo.png";
export default function NavBar() {
let history = useHistory()
const { navbar, isAuthenticated, refreshLogin } = useContext(GlobalContext);
const { navbar, refreshLogin } = useContext(GlobalContext);
const { config } = useContext(QueryContext);
if (!navbar) return null;
if (!config) return null;
refreshLogin(history)
//let loggedIn = localStorage.getItem('esap_logged_in')
//if ((!isAuthenticated) && (loggedIn)) {
// history.push("/login");
//}
refreshLogin(history);
// construct the navigation bar based on the configuration
const navlist = navbar.navbar;
return (
......
src/components/services/SubmitJob.js
+ 2
− 2
View file @ ed8a55e8
......@@ -9,7 +9,7 @@ export default function SubmitJob() {
const { api_host, accessToken } = useContext(GlobalContext);
const location = useLocation();
const { workflowfile, facility } = location.state;
const { workflowfile } = location.state;
const [jobData, setJobData] = useState(undefined);
const [params, setParams] = useState({});
const [state, setState] = useState({
......@@ -33,7 +33,7 @@ export default function SubmitJob() {
.catch(error => {
console.log("Error when querying batch app api for workflow", error);
});
}, [api_host]);
}, [api_host, workflowfile]);
const onClickSubmitButton = e => {
e.preventDefault();
......
src/components/services/query_results/LOFARResults.js
+ 6
− 34
View file @ ed8a55e8
......@@ -8,7 +8,11 @@ import LoadingSpinner from "../../LoadingSpinner";
export default function LOFARResults({ catalog }) {
const { queryMap } = useContext(QueryContext);
const { api_host } = useContext(GlobalContext);
const [page, setPage] = useState(queryMap.get(catalog).page);
const page = queryMap.get(catalog).page;
// TODO: support proper pagination for LofarResults
// const [page, setPage ] = useState();
useEffect(() => {
queryMap.set(catalog, {
......@@ -38,7 +42,7 @@ export default function LOFARResults({ catalog }) {
});
});
}, [page])
if (!queryMap) return null;
if (queryMap.get(catalog).status === "fetched") {
if (!("results" in queryMap.get(catalog).results))
......@@ -50,22 +54,9 @@ export default function LOFARResults({ catalog }) {
console.log("Query results:", queryMap.get(catalog).results.results);
return (
<>
{/* <Paginate
getNewPage={(args) => {
return args.target ? setPage(parseFloat(args.target.text)) : null;
}}
currentPage={page}
numAdjacent={3}
numPages={numPages}
/> */}
<Table className="mt-3" responsive>
<thead>
<tr className="bg-light">
{/* <th>
<InputGroup>
<InputGroup.Checkbox />
</InputGroup>
</th> */}
<th>Project</th>
<th>SAS ID</th>
<th>Target Name</th>
......@@ -99,25 +90,6 @@ export default function LOFARResults({ catalog }) {
<td>{result.pipeline}</td>
<td>{result.antennaSet}</td>
<td>{result.instrumentFilter}</td>
{/* <td>
<a
href={result.url}
target="_blank"
rel="noopener noreferrer"
>
View data
</a>
{result.dataProductSubType === "continuumMF" ? (
<a
href={result.thumbnail}
target="_blank"
rel="noopener noreferrer"
className="ml-3"
>
Thumbnail
</a>
) : null}
</td> */}
</tr>
);
})}
......
src/contexts/GlobalContext.js
+ 146
− 147
View file @ ed8a55e8
import React, { createContext, useState, useEffect } from "react";
import { Alert } from "react-bootstrap";
import axios from "axios";
import React, { createContext, useEffect, useState } from "react";
import { Alert } from "react-bootstrap";
import getCookie from "../utils/getCookie";
export const GlobalContext = createContext();
// request the user profile (async) and on return set pieces of global state
function setProfileState(api_host,
setLoggedInUserName,
setIdToken,
setAccessToken,
setTokenExpiration,
setIsAuthenticated){
const profileUrl = api_host + "accounts/user-profiles/";
axios
.get(profileUrl, {withCredentials: true})
setLoggedInUserName,
setIdToken,
setAccessToken,
setTokenExpiration,
setIsAuthenticated) {
const profileUrl = api_host + "accounts/user-profiles/";
axios
.get(profileUrl, { withCredentials: true })
.then((response) => {
setLoggedInUserName(response.data.results[0].full_name);
setIdToken(response.data.results[0].oidc_id_token)
setAccessToken(response.data.results[0].oidc_access_token)
setLoggedInUserName(response.data.results[0].full_name);
setIdToken(response.data.results[0].oidc_id_token)
setAccessToken(response.data.results[0].oidc_access_token)
let tokenExpiration = response.data.results[0].id_token_expiration
setTokenExpiration(tokenExpiration)
let tokenExpiration = response.data.results[0].id_token_expiration
setTokenExpiration(tokenExpiration)
localStorage.setItem('esap_logged_in', true)
setIsAuthenticated(true);
localStorage.setItem('esap_logged_in', true)
setIsAuthenticated(true);
})
.catch((error) => {
console.log('GlobalContext.setProfileState:' + error)
// when the token is no longer valid, .get with credentials will fail
// mark the user as being logged out
localStorage.removeItem('esap_logged_in')
setIsAuthenticated(false);
setLoggedInUserName("");
console.log('GlobalContext.setProfileState:' + error)
// when the token is no longer valid, .get with credentials will fail
// mark the user as being logged out
localStorage.removeItem('esap_logged_in')
setIsAuthenticated(false);
setLoggedInUserName("");
});
}
export function GlobalContextProvider({ children }) {
const api_host =
const api_host =
process.env.NODE_ENV === "development"
? "http://localhost:5555/esap-api/"
: "/esap-api/";
const [archives, setArchives] = useState([]);
const [datasets, setDatasets] = useState([]);
const [navbar, setNavbar] = useState();
const [loggedInUserName, setLoggedInUserName] = useState();
const [idToken, setIdToken] = useState([]);
const [accessToken, setAccessToken] = useState([]);
const [tokenExpiration, setTokenExpiration] = useState([]);
useEffect(() => {
axios
.get(api_host + "query/archives-uri")
.then((response) => setArchives(response.data.results));
}, [api_host]);
useEffect(() => {
axios
.get(api_host + "query/datasets-uri")
.then((response) => setDatasets(response.data.results));
}, [api_host]);
useEffect(() => {
axios
.get(api_host + "query/configuration?name=navbar")
.then((response) => {
console.log("navbar response", response.data.configuration);
setNavbar(response.data.configuration);
});
}, [api_host]);
// Zheng: "!!!!! Still need to look at sessionid and stuff"
const [sessionid, setSessionid] = useState(getCookie("sessionid"));
const [isAuthenticated, setIsAuthenticated] = useState(sessionid ? true : false);
const handleLogin = ({ history }) => {
console.log('handleLogin()')
setIsAuthenticated(true);
setSessionid(getCookie("sessionid"));
// If it has a previous state, go there
if (history.location.state && history.location.state.prev)
{
history.replace(history.location.state.prev)
} else {
// reroute to the main page
history.replace("/");
}
const [archives, setArchives] = useState([]);
const [datasets, setDatasets] = useState([]);
const [navbar, setNavbar] = useState();
const [loggedInUserName, setLoggedInUserName] = useState();
const [idToken, setIdToken] = useState([]);
const [accessToken, setAccessToken] = useState([]);
const [tokenExpiration, setTokenExpiration] = useState([]);
useEffect(() => {
axios
.get(api_host + "query/archives-uri")
.then((response) => setArchives(response.data.results));
}, [api_host]);
setProfileState(
api_host,
setLoggedInUserName,
setIdToken,
setAccessToken,
setTokenExpiration,
setIsAuthenticated);
return null;
};
// used when token expiration is detected before or during an axios fetch
const loginAgain = (history) => {
console.log('loginAgain()')
const loginUrl = api_host + "oidc/authenticate"
console.log('history = '+history)
//history.replace("/login");
window.location = loginUrl
//alert('history push')
//history.push("/login");
useEffect(() => {
axios
.get(api_host + "query/datasets-uri")
.then((response) => setDatasets(response.data.results));
}, [api_host]);
useEffect(() => {
axios
.get(api_host + "query/configuration?name=navbar")
.then((response) => {
console.log("navbar response", response.data.configuration);
setNavbar(response.data.configuration);
});
}, [api_host]);
// Zheng: "!!!!! Still need to look at sessionid and stuff"
const [sessionid, setSessionid] = useState(getCookie("sessionid"));
const [isAuthenticated, setIsAuthenticated] = useState(sessionid ? true : false);
const handleLogin = ({ history }) => {
console.log('handleLogin()')
setIsAuthenticated(true);
setSessionid(getCookie("sessionid"));
// If it has a previous state, go there
if (history.location.state && history.location.state.prev) {
history.replace(history.location.state.prev)
} else {
// reroute to the main page
history.replace("/");
}
const handleLogout = ({ history }) => {
console.log('handleLogout()')
setIsAuthenticated(false);
setSessionid(null);
history.replace("/");
setLoggedInUserName("");
localStorage.removeItem('esap_logged_in')
setProfileState(
api_host,
setLoggedInUserName,
setIdToken,
setAccessToken,
setTokenExpiration,
setIsAuthenticated);
return null;
};
// when a page refresh is given, react loses its state.
// handleLogin therefore stores a flag in localstorage, which is checked on refresh
const refreshLogin = (history) => {
let loggedIn = localStorage.getItem('esap_logged_in')
console.log("refresh_history", history.location)
console.log('refreshLogin:',isAuthenticated,loggedIn)
if ((!isAuthenticated) && (loggedIn)) {
history.replace("/login", {prev: history.location});
}
}
};
// compare the tokenExpiration timestamp with the current time
// to determine if the token is still valid.
const isTokenValid = () => {
let expiration = Date.parse(tokenExpiration)
let now = Date.parse(new Date())
let valid = (expiration - now) > 0
return (expiration - now)/1000
}
// used when token expiration is detected before or during an axios fetch
const loginAgain = (history) => {
console.log('loginAgain()')
const loginUrl = api_host + "oidc/authenticate"
console.log('history = ' + history)
//history.replace("/login");
window.location = loginUrl
//alert('history push')
//history.push("/login");
}
const handleLogout = ({ history }) => {
console.log('handleLogout()')
setIsAuthenticated(false);
setSessionid(null);
history.replace("/");
setLoggedInUserName("");
localStorage.removeItem('esap_logged_in')
return null;
};
const handleError = (event) => {
// when a page refresh is given, react loses its state.
// handleLogin therefore stores a flag in localstorage, which is checked on refresh
const refreshLogin = (history) => {
let loggedIn = localStorage.getItem('esap_logged_in')
console.log("refresh_history", history.location)
console.log('refreshLogin:', isAuthenticated, loggedIn)
if ((!isAuthenticated) && (loggedIn)) {
history.replace("/login", { prev: history.location });
}
}
// compare the tokenExpiration timestamp with the current time
// to determine if the token is still valid.
const isTokenValid = () => {
let expiration = Date.parse(tokenExpiration)
let now = Date.parse(new Date())
// let valid = (expiration - now) > 0
return (expiration - now) / 1000
}
const handleError = (event) => {
setIsAuthenticated(false);
setSessionid(null);
return (
<>
<Alert variant="warning">An error has occurred during login!</Alert>
<Alert variant="warning">{event.staticContext}</Alert>
<Alert variant="warning">An error has occurred during login!</Alert>
<Alert variant="warning">{event.staticContext}</Alert>
</>
);
};
// find a dataset record in the list of datasets
const getDataset = (uri) => {
return datasets.filter(
function(datasets) {
return datasets.uri === uri
}
)
}
// find a dataset record in the list of datasets
const getDataset = (uri) => {
return datasets.filter(
function (datasets) {
return datasets.uri === uri
}
)
}
return (
<GlobalContext.Provider
value={{
api_host,
isAuthenticated,
sessionid,
archives,
datasets,
navbar,
handleLogin,
handleLogout,
handleError,
loggedInUserName,
idToken,
accessToken,
tokenExpiration,
refreshLogin,
isTokenValid,
loginAgain,
getDataset
api_host,
isAuthenticated,
sessionid,
archives,
datasets,
navbar,
handleLogin,
handleLogout,
handleError,
loggedInUserName,
idToken,
accessToken,
tokenExpiration,
refreshLogin,
isTokenValid,
loginAgain,
getDataset
}}
>
{children}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment