import React, {useEffect, useState} from 'react'; import Footer from "./modules/Footer"; import Search from "./modules/Search"; import Header from "./modules/Header"; import MonitorJobsList from "./modules/MonitorJobsList"; import './styles/index.css' import IFrontendSettings, {LoadFrontendSettings} from "./modules/interfaces/IFrontendSettings"; import {useCookies} from "react-cookie"; import Loader from "./modules/Loader"; export default function App(){ const [, setCookie] = useCookies(['apiUri', 'jobInterval']); const [connected, setConnected] = React.useState(false); const [showSearch, setShowSearch] = React.useState(false); const [frontendSettings, setFrontendSettings] = useState(LoadFrontendSettings()); const [updateInterval, setUpdateInterval] = React.useState(undefined); const checkConnectedInterval = 1000; useEffect(() => { setCookie('apiUri', frontendSettings.apiUri); setCookie('jobInterval', frontendSettings.jobInterval); updateConnected(frontendSettings.apiUri, connected, setConnected); }, [frontendSettings]); useEffect(() => { if(updateInterval === undefined){ setUpdateInterval(setInterval(() => { updateConnected(frontendSettings.apiUri, connected, setConnected); }, checkConnectedInterval)); }else{ clearInterval(updateInterval); setUpdateInterval(undefined); } }, [connected]); return(
{connected ? <> {showSearch ? <> setShowSearch(false)} />
: <>} setShowSearch(true)} connectedToBackend={connected} checkConnectedInterval={checkConnectedInterval} /> : <>

No connection to the Backend.

Check the Settings ApiUri.

}
) } export function getData(uri: string) : Promise { return makeRequest("GET", uri, null) as Promise; } export function postData(uri: string, content: object | string | number | boolean) : Promise { return makeRequest("POST", uri, content) as Promise; } export function deleteData(uri: string) : Promise { return makeRequest("DELETE", uri, null) as Promise; } export function patchData(uri: string, content: object | string | number | boolean) : Promise { return makeRequest("patch", uri, content) as Promise; } export function putData(uri: string, content: object | string | number | boolean) : Promise { return makeRequest("PUT", uri, content) as Promise; } let currentlyRequestedEndpoints: string[] = []; function makeRequest(method: string, uri: string, content: object | string | number | null | boolean) : Promise { const id = method + uri; if(currentlyRequestedEndpoints.find(x => x == id) != undefined) return Promise.reject(`Already requested: ${method} ${uri}`); currentlyRequestedEndpoints.push(id); return fetch(uri, { method: method, headers : { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: content ? JSON.stringify(content) : null }) .then(function(response){ if(!response.ok){ if(response.status === 503){ let retryHeaderVal = response.headers.get("Retry-After"); let seconds = 10; if(!retryHeaderVal){ return response.text().then(text => { seconds = parseInt(text); return new Promise(resolve => setTimeout(resolve, seconds * 1000)) .then(() => { return makeRequest(method, uri, content); }); }); }else { seconds = parseInt(retryHeaderVal); return new Promise(resolve => setTimeout(resolve, seconds * 1000)) .then(() => { return makeRequest(method, uri, content); }); } }else throw new Error(response.statusText); } let json = response.json(); return json.then((json) => json).catch(() => null); }) .catch(function(err : Error){ console.error(`Error ${method}ing Data ${uri}\n${err}`); return Promise.reject(); }).finally(() => currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1)); } export function isValidUri(uri: string) : boolean{ try { new URL(uri); return true; } catch (err) { return false; } } const updateConnected = (apiUri: string, connected: boolean, setConnected: (c: boolean) => void) => { checkConnection(apiUri) .then(res => { if(connected != res) setConnected(res); }) .catch(() => setConnected(false)); } export const checkConnection = async (apiUri: string): Promise =>{ return fetch(`${apiUri}/swagger/v2/swagger.json`, { method: 'GET', }) .then((response) => { if(!(response.ok && response.status == 200)) return false; return response.json().then((json) => (json as {openapi:string}).openapi.match("[0-9]+(?:\.[0-9]+)+")?true:false).catch(() => false); }) .catch(() => { return Promise.reject(); }); }