From 2dbb06f433964ccac13fd64ef512ed03142ed97b Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 11 May 2021 16:34:25 +0200 Subject: ui: Move communication to REST API This change removes the socket.io websocket connection/client in favour of the OpenDC REST API. The socket.io websocket implementation was intended to be used for interactive and collaborative datacenter design and exploration. However, we do not support this functionality at the moment (collaborative design and exploration) and having the entire API run over this websocket connection is fragile and not standard practice. To improve maintainability, we therefore remove the websocket implementation in favour of the OpenDC REST API implementation using the fetch API. If we want to implement collaboration in the future, we will develop appropriate extensions in conjuction with the existing REST API. For this, we should look for standard and existing implementation of this functionality. --- opendc-web/opendc-web-ui/src/api/index.js | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/api/index.js') diff --git a/opendc-web/opendc-web-ui/src/api/index.js b/opendc-web/opendc-web-ui/src/api/index.js index cefcb2c5..e6528fd9 100644 --- a/opendc-web/opendc-web-ui/src/api/index.js +++ b/opendc-web/opendc-web-ui/src/api/index.js @@ -1,13 +1,22 @@ -import { sendSocketRequest } from './socket' - -export function sendRequest(request) { - return new Promise((resolve, reject) => { - sendSocketRequest(request, (response) => { - if (response.status.code === 200) { - resolve(response.content) - } else { - reject(response) - } - }) +import config from '../config' +import { getAuthToken } from '../auth' + +const apiUrl = config['API_BASE_URL'] + +export async function request(path, method = 'GET', body) { + const res = await fetch(`${apiUrl}/v2/${path}`, { + method: method, + headers: { + 'auth-token': getAuthToken(), + 'Content-Type': 'application/json', + }, + body: body && JSON.stringify(body), }) + const { status, content } = await res.json() + + if (status.code !== 200) { + throw status + } + + return content } -- cgit v1.2.3 From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 12 May 2021 22:42:12 +0200 Subject: ui: Migrate from CRA to Next.js This change updates the web frontend to use Next.js instead of Create React App (CRA). Next.js enables the possibility of rendering pages on the server side (which reduces the time to first frame) and overall provides a better development experience. Future commits will try to futher optimize the implementation for Next.js. --- opendc-web/opendc-web-ui/src/api/index.js | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/api/index.js') diff --git a/opendc-web/opendc-web-ui/src/api/index.js b/opendc-web/opendc-web-ui/src/api/index.js index e6528fd9..65358745 100644 --- a/opendc-web/opendc-web-ui/src/api/index.js +++ b/opendc-web/opendc-web-ui/src/api/index.js @@ -1,8 +1,35 @@ -import config from '../config' +/* + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + import { getAuthToken } from '../auth' -const apiUrl = config['API_BASE_URL'] +const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL +/** + * Send the specified request to the OpenDC API. + * @param path Relative path for the API. + * @param method The method to use for the request. + * @param body The body of the request. + */ export async function request(path, method = 'GET', body) { const res = await fetch(`${apiUrl}/v2/${path}`, { method: method, -- cgit v1.2.3 From a6865b86cc8d710374fc0b6cfcbd2b863f1942a9 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 16 May 2021 23:18:02 +0200 Subject: ui: Migrate to Auth0 as Identity Provider This change updates the frontend codebase to move away from the Google login and instead use Auth0 as generic Identity Provider. This allows users to login with other accounts as well. Since Auth0 has a free tier, users can experiment themselves with OpenDC locally without having to pay for the login functionality. The code has been written so that we should be able to migrate away from Auth0 once it is not a suitable Identity Provider for OpenDC anymore. --- opendc-web/opendc-web-ui/src/api/index.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/api/index.js') diff --git a/opendc-web/opendc-web-ui/src/api/index.js b/opendc-web/opendc-web-ui/src/api/index.js index 65358745..680d49ce 100644 --- a/opendc-web/opendc-web-ui/src/api/index.js +++ b/opendc-web/opendc-web-ui/src/api/index.js @@ -20,30 +20,32 @@ * SOFTWARE. */ -import { getAuthToken } from '../auth' - const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL /** * Send the specified request to the OpenDC API. + * + * @param auth The authentication context. * @param path Relative path for the API. * @param method The method to use for the request. * @param body The body of the request. */ -export async function request(path, method = 'GET', body) { - const res = await fetch(`${apiUrl}/v2/${path}`, { +export async function request(auth, path, method = 'GET', body) { + const { getAccessTokenSilently } = auth + const token = await getAccessTokenSilently() + const response = await fetch(`${apiUrl}/${path}`, { method: method, headers: { - 'auth-token': getAuthToken(), + Authorization: `Bearer ${token}`, 'Content-Type': 'application/json', }, body: body && JSON.stringify(body), }) - const { status, content } = await res.json() + const json = await response.json() - if (status.code !== 200) { - throw status + if (!response.ok) { + throw response.message } - return content + return json.data } -- cgit v1.2.3