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-ui/src/api/routes/portfolios.js | 35 +++--------------- opendc-web/opendc-web-ui/src/api/routes/prefabs.js | 33 +++-------------- .../opendc-web-ui/src/api/routes/projects.js | 33 +++-------------- .../opendc-web-ui/src/api/routes/scenarios.js | 35 +++--------------- .../opendc-web-ui/src/api/routes/schedulers.js | 4 +-- .../opendc-web-ui/src/api/routes/topologies.js | 35 +++--------------- opendc-web/opendc-web-ui/src/api/routes/traces.js | 4 +-- opendc-web/opendc-web-ui/src/api/routes/users.js | 41 +++------------------- opendc-web/opendc-web-ui/src/api/routes/util.js | 37 ------------------- 9 files changed, 34 insertions(+), 223 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/util.js (limited to 'opendc-web/opendc-web-ui/src/api/routes') diff --git a/opendc-web/opendc-web-ui/src/api/routes/portfolios.js b/opendc-web/opendc-web-ui/src/api/routes/portfolios.js index 7c9ea02a..ba15e828 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/portfolios.js +++ b/opendc-web/opendc-web-ui/src/api/routes/portfolios.js @@ -1,42 +1,17 @@ -import { deleteById, getById } from './util' -import { sendRequest } from '../index' +import { request } from '../index' export function addPortfolio(projectId, portfolio) { - return sendRequest({ - path: '/projects/{projectId}/portfolios', - method: 'POST', - parameters: { - body: { - portfolio, - }, - path: { - projectId, - }, - query: {}, - }, - }) + return request(`projects/${projectId}/portfolios`, 'POST', { portfolio }) } export function getPortfolio(portfolioId) { - return getById('/portfolios/{portfolioId}', { portfolioId }) + return request(`portfolios/${portfolioId}`) } export function updatePortfolio(portfolioId, portfolio) { - return sendRequest({ - path: '/portfolios/{projectId}', - method: 'POST', - parameters: { - body: { - portfolio, - }, - path: { - portfolioId, - }, - query: {}, - }, - }) + return request(`portfolios/${portfolioId}`, 'PUT', { portfolio }) } export function deletePortfolio(portfolioId) { - return deleteById('/portfolios/{portfolioId}', { portfolioId }) + return request(`portfolios/${portfolioId}`, 'DELETE') } diff --git a/opendc-web/opendc-web-ui/src/api/routes/prefabs.js b/opendc-web/opendc-web-ui/src/api/routes/prefabs.js index 8a1debfa..032e12bc 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/prefabs.js +++ b/opendc-web/opendc-web-ui/src/api/routes/prefabs.js @@ -1,40 +1,17 @@ -import { sendRequest } from '../index' -import { deleteById, getById } from './util' +import { request } from '../index' export function getPrefab(prefabId) { - return getById('/prefabs/{prefabId}', { prefabId }) + return request(`prefabs/${prefabId}`) } export function addPrefab(prefab) { - return sendRequest({ - path: '/prefabs', - method: 'POST', - parameters: { - body: { - prefab, - }, - path: {}, - query: {}, - }, - }) + return request('prefabs', 'POST', { prefab }) } export function updatePrefab(prefab) { - return sendRequest({ - path: '/prefabs/{prefabId}', - method: 'PUT', - parameters: { - body: { - prefab, - }, - path: { - prefabId: prefab._id, - }, - query: {}, - }, - }) + return request(`prefabs/${prefab._id}`, 'PUT', { prefab }) } export function deletePrefab(prefabId) { - return deleteById('/prefabs/{prefabId}', { prefabId }) + return request(`prefabs/${prefabId}`, 'DELETE') } diff --git a/opendc-web/opendc-web-ui/src/api/routes/projects.js b/opendc-web/opendc-web-ui/src/api/routes/projects.js index 4109079c..cd46036f 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/projects.js +++ b/opendc-web/opendc-web-ui/src/api/routes/projects.js @@ -1,40 +1,17 @@ -import { sendRequest } from '../index' -import { deleteById, getById } from './util' +import { request } from '../index' export function getProject(projectId) { - return getById('/projects/{projectId}', { projectId }) + return request(`projects/${projectId}`) } export function addProject(project) { - return sendRequest({ - path: '/projects', - method: 'POST', - parameters: { - body: { - project, - }, - path: {}, - query: {}, - }, - }) + return request('projects', 'POST', { project }) } export function updateProject(project) { - return sendRequest({ - path: '/projects/{projectId}', - method: 'PUT', - parameters: { - body: { - project, - }, - path: { - projectId: project._id, - }, - query: {}, - }, - }) + return request(`projects/${project._id}`, 'PUT', { project }) } export function deleteProject(projectId) { - return deleteById('/projects/{projectId}', { projectId }) + return request(`projects/${projectId}`, 'DELETE') } diff --git a/opendc-web/opendc-web-ui/src/api/routes/scenarios.js b/opendc-web/opendc-web-ui/src/api/routes/scenarios.js index ab2e8b86..00cc1eb0 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/scenarios.js +++ b/opendc-web/opendc-web-ui/src/api/routes/scenarios.js @@ -1,42 +1,17 @@ -import { deleteById, getById } from './util' -import { sendRequest } from '../index' +import { request } from '../index' export function addScenario(portfolioId, scenario) { - return sendRequest({ - path: '/portfolios/{portfolioId}/scenarios', - method: 'POST', - parameters: { - body: { - scenario, - }, - path: { - portfolioId, - }, - query: {}, - }, - }) + return request(`portfolios/${portfolioId}/scenarios`, 'POST', { scenario }) } export function getScenario(scenarioId) { - return getById('/scenarios/{scenarioId}', { scenarioId }) + return request(`scenarios/${scenarioId}`) } export function updateScenario(scenarioId, scenario) { - return sendRequest({ - path: '/scenarios/{projectId}', - method: 'POST', - parameters: { - body: { - scenario, - }, - path: { - scenarioId, - }, - query: {}, - }, - }) + return request(`scenarios/${scenarioId}`, 'PUT', { scenario }) } export function deleteScenario(scenarioId) { - return deleteById('/scenarios/{scenarioId}', { scenarioId }) + return request(`scenarios/${scenarioId}`, 'DELETE') } diff --git a/opendc-web/opendc-web-ui/src/api/routes/schedulers.js b/opendc-web/opendc-web-ui/src/api/routes/schedulers.js index 4481fb2a..5e129d33 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/schedulers.js +++ b/opendc-web/opendc-web-ui/src/api/routes/schedulers.js @@ -1,5 +1,5 @@ -import { getAll } from './util' +import { request } from '../index' export function getAllSchedulers() { - return getAll('/schedulers') + return request('schedulers') } diff --git a/opendc-web/opendc-web-ui/src/api/routes/topologies.js b/opendc-web/opendc-web-ui/src/api/routes/topologies.js index a8f0d6b1..076895ff 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/topologies.js +++ b/opendc-web/opendc-web-ui/src/api/routes/topologies.js @@ -1,42 +1,17 @@ -import { deleteById, getById } from './util' -import { sendRequest } from '../index' +import { request } from '../index' export function addTopology(topology) { - return sendRequest({ - path: '/projects/{projectId}/topologies', - method: 'POST', - parameters: { - body: { - topology, - }, - path: { - projectId: topology.projectId, - }, - query: {}, - }, - }) + return request(`projects/${topology.projectId}/topologies`, 'POST', { topology }) } export function getTopology(topologyId) { - return getById('/topologies/{topologyId}', { topologyId }) + return request(`topologies/${topologyId}`) } export function updateTopology(topology) { - return sendRequest({ - path: '/topologies/{topologyId}', - method: 'PUT', - parameters: { - body: { - topology, - }, - path: { - topologyId: topology._id, - }, - query: {}, - }, - }) + return request(`topologies/${topology._id}`, 'PUT', { topology }) } export function deleteTopology(topologyId) { - return deleteById('/topologies/{topologyId}', { topologyId }) + return request(`topologies/${topologyId}`, 'DELETE') } diff --git a/opendc-web/opendc-web-ui/src/api/routes/traces.js b/opendc-web/opendc-web-ui/src/api/routes/traces.js index 67895a87..eb2526ee 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/traces.js +++ b/opendc-web/opendc-web-ui/src/api/routes/traces.js @@ -1,5 +1,5 @@ -import { getAll } from './util' +import { request } from '../index' export function getAllTraces() { - return getAll('/traces') + return request('traces') } diff --git a/opendc-web/opendc-web-ui/src/api/routes/users.js b/opendc-web/opendc-web-ui/src/api/routes/users.js index 3028f3f7..619aec1f 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/users.js +++ b/opendc-web/opendc-web-ui/src/api/routes/users.js @@ -1,48 +1,17 @@ -import { sendRequest } from '../index' -import { deleteById } from './util' +import { request } from '../index' export function getUserByEmail(email) { - return sendRequest({ - path: '/users', - method: 'GET', - parameters: { - body: {}, - path: {}, - query: { - email, - }, - }, - }) + return request(`users` + new URLSearchParams({ email })) } export function addUser(user) { - return sendRequest({ - path: '/users', - method: 'POST', - parameters: { - body: { - user, - }, - path: {}, - query: {}, - }, - }) + return request('users', 'POST', { user }) } export function getUser(userId) { - return sendRequest({ - path: '/users/{userId}', - method: 'GET', - parameters: { - body: {}, - path: { - userId, - }, - query: {}, - }, - }) + return request(`users/${userId}`) } export function deleteUser(userId) { - return deleteById('/users/{userId}', { userId }) + return request(`users/${userId}`, 'DELETE') } diff --git a/opendc-web/opendc-web-ui/src/api/routes/util.js b/opendc-web/opendc-web-ui/src/api/routes/util.js deleted file mode 100644 index 67e7173b..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/util.js +++ /dev/null @@ -1,37 +0,0 @@ -import { sendRequest } from '../index' - -export function getAll(path) { - return sendRequest({ - path, - method: 'GET', - parameters: { - body: {}, - path: {}, - query: {}, - }, - }) -} - -export function getById(path, pathObject) { - return sendRequest({ - path, - method: 'GET', - parameters: { - body: {}, - path: pathObject, - query: {}, - }, - }) -} - -export function deleteById(path, pathObject) { - return sendRequest({ - path, - method: 'DELETE', - parameters: { - body: {}, - path: pathObject, - query: {}, - }, - }) -} -- 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/routes/token-signin.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/api/routes') diff --git a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js index ced5d2e0..1c285bdb 100644 --- a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js +++ b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js @@ -1,7 +1,5 @@ -import config from '../../config' - export function performTokenSignIn(token) { - const apiUrl = config['API_BASE_URL'] + const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL return fetch(`${apiUrl}/tokensignin`, { method: 'POST', -- cgit v1.2.3 From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 16 May 2021 17:07:58 +0200 Subject: ui: Restructure OpenDC frontend This change updates the structure of the OpenDC frontend in order to improve the maintainability of the frontend. --- opendc-web/opendc-web-ui/src/api/routes/portfolios.js | 17 ----------------- opendc-web/opendc-web-ui/src/api/routes/prefabs.js | 17 ----------------- opendc-web/opendc-web-ui/src/api/routes/projects.js | 17 ----------------- opendc-web/opendc-web-ui/src/api/routes/scenarios.js | 17 ----------------- opendc-web/opendc-web-ui/src/api/routes/schedulers.js | 5 ----- opendc-web/opendc-web-ui/src/api/routes/token-signin.js | 10 ---------- opendc-web/opendc-web-ui/src/api/routes/topologies.js | 17 ----------------- opendc-web/opendc-web-ui/src/api/routes/traces.js | 5 ----- opendc-web/opendc-web-ui/src/api/routes/users.js | 17 ----------------- 9 files changed, 122 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/portfolios.js delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/prefabs.js delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/projects.js delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/scenarios.js delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/schedulers.js delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/token-signin.js delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/topologies.js delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/traces.js delete mode 100644 opendc-web/opendc-web-ui/src/api/routes/users.js (limited to 'opendc-web/opendc-web-ui/src/api/routes') diff --git a/opendc-web/opendc-web-ui/src/api/routes/portfolios.js b/opendc-web/opendc-web-ui/src/api/routes/portfolios.js deleted file mode 100644 index ba15e828..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/portfolios.js +++ /dev/null @@ -1,17 +0,0 @@ -import { request } from '../index' - -export function addPortfolio(projectId, portfolio) { - return request(`projects/${projectId}/portfolios`, 'POST', { portfolio }) -} - -export function getPortfolio(portfolioId) { - return request(`portfolios/${portfolioId}`) -} - -export function updatePortfolio(portfolioId, portfolio) { - return request(`portfolios/${portfolioId}`, 'PUT', { portfolio }) -} - -export function deletePortfolio(portfolioId) { - return request(`portfolios/${portfolioId}`, 'DELETE') -} diff --git a/opendc-web/opendc-web-ui/src/api/routes/prefabs.js b/opendc-web/opendc-web-ui/src/api/routes/prefabs.js deleted file mode 100644 index 032e12bc..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/prefabs.js +++ /dev/null @@ -1,17 +0,0 @@ -import { request } from '../index' - -export function getPrefab(prefabId) { - return request(`prefabs/${prefabId}`) -} - -export function addPrefab(prefab) { - return request('prefabs', 'POST', { prefab }) -} - -export function updatePrefab(prefab) { - return request(`prefabs/${prefab._id}`, 'PUT', { prefab }) -} - -export function deletePrefab(prefabId) { - return request(`prefabs/${prefabId}`, 'DELETE') -} diff --git a/opendc-web/opendc-web-ui/src/api/routes/projects.js b/opendc-web/opendc-web-ui/src/api/routes/projects.js deleted file mode 100644 index cd46036f..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/projects.js +++ /dev/null @@ -1,17 +0,0 @@ -import { request } from '../index' - -export function getProject(projectId) { - return request(`projects/${projectId}`) -} - -export function addProject(project) { - return request('projects', 'POST', { project }) -} - -export function updateProject(project) { - return request(`projects/${project._id}`, 'PUT', { project }) -} - -export function deleteProject(projectId) { - return request(`projects/${projectId}`, 'DELETE') -} diff --git a/opendc-web/opendc-web-ui/src/api/routes/scenarios.js b/opendc-web/opendc-web-ui/src/api/routes/scenarios.js deleted file mode 100644 index 00cc1eb0..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/scenarios.js +++ /dev/null @@ -1,17 +0,0 @@ -import { request } from '../index' - -export function addScenario(portfolioId, scenario) { - return request(`portfolios/${portfolioId}/scenarios`, 'POST', { scenario }) -} - -export function getScenario(scenarioId) { - return request(`scenarios/${scenarioId}`) -} - -export function updateScenario(scenarioId, scenario) { - return request(`scenarios/${scenarioId}`, 'PUT', { scenario }) -} - -export function deleteScenario(scenarioId) { - return request(`scenarios/${scenarioId}`, 'DELETE') -} diff --git a/opendc-web/opendc-web-ui/src/api/routes/schedulers.js b/opendc-web/opendc-web-ui/src/api/routes/schedulers.js deleted file mode 100644 index 5e129d33..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/schedulers.js +++ /dev/null @@ -1,5 +0,0 @@ -import { request } from '../index' - -export function getAllSchedulers() { - return request('schedulers') -} diff --git a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js deleted file mode 100644 index 1c285bdb..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js +++ /dev/null @@ -1,10 +0,0 @@ -export function performTokenSignIn(token) { - const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL - - return fetch(`${apiUrl}/tokensignin`, { - method: 'POST', - body: new URLSearchParams({ - idtoken: token, - }), - }).then((res) => res.json()) -} diff --git a/opendc-web/opendc-web-ui/src/api/routes/topologies.js b/opendc-web/opendc-web-ui/src/api/routes/topologies.js deleted file mode 100644 index 076895ff..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/topologies.js +++ /dev/null @@ -1,17 +0,0 @@ -import { request } from '../index' - -export function addTopology(topology) { - return request(`projects/${topology.projectId}/topologies`, 'POST', { topology }) -} - -export function getTopology(topologyId) { - return request(`topologies/${topologyId}`) -} - -export function updateTopology(topology) { - return request(`topologies/${topology._id}`, 'PUT', { topology }) -} - -export function deleteTopology(topologyId) { - return request(`topologies/${topologyId}`, 'DELETE') -} diff --git a/opendc-web/opendc-web-ui/src/api/routes/traces.js b/opendc-web/opendc-web-ui/src/api/routes/traces.js deleted file mode 100644 index eb2526ee..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/traces.js +++ /dev/null @@ -1,5 +0,0 @@ -import { request } from '../index' - -export function getAllTraces() { - return request('traces') -} diff --git a/opendc-web/opendc-web-ui/src/api/routes/users.js b/opendc-web/opendc-web-ui/src/api/routes/users.js deleted file mode 100644 index 619aec1f..00000000 --- a/opendc-web/opendc-web-ui/src/api/routes/users.js +++ /dev/null @@ -1,17 +0,0 @@ -import { request } from '../index' - -export function getUserByEmail(email) { - return request(`users` + new URLSearchParams({ email })) -} - -export function addUser(user) { - return request('users', 'POST', { user }) -} - -export function getUser(userId) { - return request(`users/${userId}`) -} - -export function deleteUser(userId) { - return request(`users/${userId}`, 'DELETE') -} -- cgit v1.2.3