Merge pull request #204 from metrico/dev

fix: extra requests to labels, protected route

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 <Main />;

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];

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 && (

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(
     <React.StrictMode>
         <CookiesProvider>
@@ -20,12 +20,10 @@ ReactDOM.render(
                     <Routes>
                         <Route path="/" element={<App />} />
                         <Route path="/search" element={<App />} />
-                        {showDs && (
                             <Route
                                 path="/datasources/*"
-                                element={showDs ? <DataSources /> : <App />}
+                                element={<ProtectedRoute> <DataSources /></ProtectedRoute>}
                             />
-                        )}
                     </Routes>
                 </BrowserRouter>
             </Provider>

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 <Navigate to={cookieMemo.url} />;
+    }
+    return children;
+}

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) {