From c2b058781bc953a14a71da9c5fb6b7407b7bbb3c Mon Sep 17 00:00:00 2001 From: jacovinus Date: Thu, 22 Dec 2022 13:58:15 +0100 Subject: [PATCH] fix: extra requests to labels, protected route --- src/App.tsx | 9 ++-- .../LabelBrowser/components/QueryBar.js | 49 ++++--------------- .../LabelBrowser/components/ValuesList.js | 2 +- src/index.tsx | 6 +-- src/providers/ProtectedRoute.js | 29 +++++++++++ src/views/Main.js | 29 ++++++++--- 6 files changed, 68 insertions(+), 56 deletions(-) create mode 100644 src/providers/ProtectedRoute.js diff --git a/src/App.tsx b/src/App.tsx index 32cde3e3..5381e976 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,10 +6,11 @@ interface storeProps { apiUrl:string; } export default function App() { - const url = useSelector((store:storeProps) => store.apiUrl) - useEffect(()=>{ - boscoRequest('https://cdn.jsdelivr.net/gh/metrico/boscaiolog@main/boscaiolog.js',{url}) - },[]) +// const url = useSelector((store:storeProps) => store.apiUrl) +// useEffect(()=>{ +// console.log('making apiUrl request to',url) +// boscoRequest('https://cdn.jsdelivr.net/gh/metrico/boscaiolog@main/boscaiolog.js',{url}) +// },[]) return
; diff --git a/src/components/LabelBrowser/components/QueryBar.js b/src/components/LabelBrowser/components/QueryBar.js index 5006c471..47ab3234 100644 --- a/src/components/LabelBrowser/components/QueryBar.js +++ b/src/components/LabelBrowser/components/QueryBar.js @@ -198,13 +198,13 @@ export const QueryBar = (props) => { } // search for auth params and send inside - const labels = sendLabels( - dataSourceId, - dataSourceType, - currentDataSource?.url, // which one should be? - start, - stop - ); + // const labels = sendLabels( + // dataSourceId, + // dataSourceType, + // currentDataSource?.url, // which one should be? + // start, + // stop + // ); // if is view only mode (embedded) do an auto request on init if (isEmbed) dispatch( @@ -221,38 +221,10 @@ export const QueryBar = (props) => { ) ); - if (onQueryValid(expr) && currentDataSource?.type !== "flux") { - return labels.then((data) => { - if (data) { - const prevLabels = [...props.data.labels]; - const prevMap = prevLabels.map((m) => m.name) || []; - const newLabels = [...data]; - setLabels(newLabels); - if (newLabels.length > 0) { - if (prevMap.length > 0) { - newLabels.forEach((l) => { - const labelFound = prevMap.includes(l.name); - if (labelFound) { - const pl = prevLabels.find( - (f) => f.name === l.name - ); - l = { ...pl }; - } - }); - } - decodeQuery( - expr, - currentDataSource.url, - newLabels, - currentDataSource.id - ); - } - } - }); - } else { + // if there is nothing to request, show empty view - dispatch(setIsEmptyView(true)); - } + // dispatch(setIsEmptyView(true)); + }, []); // force single view from small width @@ -291,7 +263,6 @@ export const QueryBar = (props) => { ); } const labelsDecoded = decodeExpr(data.expr); - panelCP.forEach((query) => { if (query.id === id) { query.labels = [...labelsDecoded]; diff --git a/src/components/LabelBrowser/components/ValuesList.js b/src/components/LabelBrowser/components/ValuesList.js index fdc6c4fb..4af834c0 100644 --- a/src/components/LabelBrowser/components/ValuesList.js +++ b/src/components/LabelBrowser/components/ValuesList.js @@ -56,7 +56,7 @@ export const ValuesList = (props) => { const actQuery = panelQuery.find((f) => f.id === id); isOpen = actQuery["browserOpen"]; setOpen(isOpen); - }, [panelQuery, id]); + }, [panelQuery,id]); return ( open && ( diff --git a/src/index.tsx b/src/index.tsx index 36138ac6..03a73fda 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,8 +10,8 @@ import store from "./store/store"; import DataSources from "./views/DataSources/DataSources"; import { CookiesProvider } from "react-cookie"; +import ProtectedRoute from "./providers/ProtectedRoute"; errorInterceptor(axios); -const showDs = store.getState()["showDataSourceSetting"] || false; ReactDOM.render( @@ -20,12 +20,10 @@ ReactDOM.render( } /> } /> - {showDs && ( : } + element={ } /> - )} diff --git a/src/providers/ProtectedRoute.js b/src/providers/ProtectedRoute.js new file mode 100644 index 00000000..396322c0 --- /dev/null +++ b/src/providers/ProtectedRoute.js @@ -0,0 +1,29 @@ +import { useMemo } from "react"; +import { Navigate } from "react-router-dom"; + +export default function ProtectedRoute({ children }) { + const cookieMemo = useMemo(() => { + let cookie = false; + let url = ""; + try { + const key = btoa("cookie-location"); + const hasCookie = localStorage.getItem(key); + const parsed = JSON.parse(atob(hasCookie)); + + if (parsed && parsed?.cookiesAvailable) { + cookie = parsed?.cookiesAvailable; + url = "/" + parsed?.url; + } else { + cookie = false; + } + } catch (e) { + cookie = false; + } + return { cookie, url }; + }, []); + + if (cookieMemo.cookie) { + return ; + } + return children; +} diff --git a/src/views/Main.js b/src/views/Main.js index d9df4f64..078249b0 100644 --- a/src/views/Main.js +++ b/src/views/Main.js @@ -17,7 +17,6 @@ import { useLocation } from "react-router-dom"; import setDataSources from "./DataSources/store/setDataSources"; import { setShowDataSourceSetting } from "./Main/setShowDataSourceSetting"; - export const MainContainer = styled.div` position: absolute; display: flex; @@ -284,9 +283,9 @@ export function updateDataSourcesWithUrl( if (!haveUrl && basicAuth) { apiUrl = window.location.protocol + "//" + window.location.host; urlApi = true; - } - - if(apiUrl === '') { + } + + if (apiUrl === "") { urlApi = true; apiUrl = url; } @@ -317,11 +316,11 @@ export function updateDataSourcesWithUrl( }, })); - if(cookies && cookieAuth) { - - dispatch(setShowDataSourceSetting(false)) + if (cookies && cookieAuth) { + dispatch(setShowDataSourceSetting(false)); } + localStorage.setItem("dataSources", JSON.stringify(newDs)); dispatch(setDataSources(newDs)); } @@ -361,6 +360,17 @@ export default function Main() { } }, []); + useEffect(() => { + const urlSetting = { + url: window.location.hash, + cookiesAvailable, + }; + + localStorage.setItem( + btoa("cookie-location"), + btoa(JSON.stringify(urlSetting)) + ); + }, [cookiesAvailable]); const isTabletOrMobile = useMediaQuery({ query: "(max-width: 914px)" }); const isAutoDark = useMediaQuery({ query: "(prefers-color-scheme: dark)" }); const dispatch = useDispatch(); @@ -375,7 +385,10 @@ export default function Main() { if (autoTheme) { const theme = isAutoDark ? "dark" : "light"; dispatch(setTheme(theme)); - localStorage.setItem("theme", JSON.stringify({ theme: theme, auto: autoTheme })); + localStorage.setItem( + "theme", + JSON.stringify({ theme: theme, auto: autoTheme }) + ); } }, [isAutoDark, autoTheme, dispatch]); if (!isTabletOrMobile) {