NETOBSERV-650 Top X value is incorrect at first time (#212)

* top / limit fix

* reset button on error

Author: jpinsonneau

web/src/components/netflow-traffic-parent.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { clearURLParams } from '../utils/url';
+import { clearLocalStorage } from '../utils/local-storage-hook';
 import NetflowTraffic from './netflow-traffic';
 
 type Props = {};
@@ -24,13 +26,22 @@ class NetflowTrafficParent extends React.Component<Props, State> {
     this.setState({ error: error });
   }
 
+  reset() {
+    clearLocalStorage();
+    clearURLParams();
+  }
+
   render() {
     if (this.state.error) {
       return (
         <div data-test="error-message" style={{ padding: 10 }}>
           <h1>Unexpected error</h1>
           <p>{this.state.error.toString()}</p>
           <p>(check logs for more information)</p>
+          &nbsp;
+          <p>If the error persists, use the reset button below</p>
+          <p>to clear the local storage and remove url parameters before reloading the page</p>
+          <button onClick={() => this.reset()}>Reset</button>
         </div>
       );
     }

web/src/components/netflow-traffic.tsx

@@ -174,7 +174,9 @@ export const NetflowTraffic: React.FC<{
   const [match, setMatch] = React.useState<Match>(getMatchFromURL());
   const [reporter, setReporter] = React.useState<Reporter>(getReporterFromURL());
   const [layer, setLayer] = React.useState<Layer>(getLayerFromURL());
-  const [limit, setLimit] = React.useState<number>(getLimitFromURL());
+  const [limit, setLimit] = React.useState<number>(
+    getLimitFromURL(selectedViewId === 'table' ? LIMIT_VALUES[0] : TOP_VALUES[0])
+  );
   const [lastLimit, setLastLimit] = useLocalStorage<number>(LOCAL_STORAGE_LAST_LIMIT_KEY, LIMIT_VALUES[0]);
   const [lastTop, setLastTop] = useLocalStorage<number>(LOCAL_STORAGE_LAST_TOP_KEY, TOP_VALUES[0]);
   const [range, setRange] = React.useState<number | TimeRange>(getRangeFromURL());
@@ -264,7 +266,7 @@ export const NetflowTraffic: React.FC<{
       match === 'any' ? groupFiltersMatchAny(enabledFilters) : groupFiltersMatchAll(enabledFilters);
     const query: FlowQuery = {
       filters: groupedFilters,
-      limit: limit,
+      limit: LIMIT_VALUES.includes(limit) ? limit : LIMIT_VALUES[0],
       reporter: reporter,
       layer: layer
     };
@@ -282,8 +284,7 @@ export const NetflowTraffic: React.FC<{
       if (selectedViewId === 'topology') {
         query.groups = topologyOptions.groupTypes !== TopologyGroupTypes.NONE ? topologyOptions.groupTypes : undefined;
       } else if (selectedViewId === 'overview') {
-        //TODO: filter loki results like "metric":{} and sources equal to destinations from server side
-        query.limit = limit + 5;
+        query.limit = TOP_VALUES.includes(limit) ? limit : TOP_VALUES[0];
         query.groups = undefined;
       }
       const info = computeStepInterval(range);

web/src/utils/local-storage-hook.ts

@@ -49,6 +49,7 @@ export function useLocalStorage<T>(
       }
     } catch (error) {
       console.error(error);
+      clearLocalStorage();
       return initialValue;
     }
   });
@@ -81,7 +82,17 @@ export function useLocalStorage<T>(
       window.localStorage.setItem(LOCAL_STORAGE_PLUGIN_KEY, JSON.stringify(parsedItem));
     } catch (error) {
       console.error(error);
+      clearLocalStorage();
     }
   };
   return [storedValue, setValue];
 }
+
+export function clearLocalStorage() {
+  try {
+    console.info('clearing local storage ' + LOCAL_STORAGE_PLUGIN_KEY);
+    window.localStorage.removeItem(LOCAL_STORAGE_PLUGIN_KEY);
+  } catch (error) {
+    console.error(error);
+  }
+}

web/src/utils/router.ts

@@ -9,7 +9,6 @@ const filtersSeparator = ';';
 const filterKVSeparator = '=';
 const filterValuesSeparator = ',';
 export const defaultTimeRange = 300;
-const defaultLimit = 100;
 export const defaultReporter: Reporter = 'destination';
 //TODO: improve performances before applying 'application' layer by default
 export const defaultLayer: Layer = 'both';
@@ -43,8 +42,8 @@ export const getLayerFromURL = (): Layer => {
   return (getURLParam(URLParam.Layer) as Layer | null) || defaultLayer;
 };
 
-export const getLimitFromURL = (): number => {
-  return getURLParamAsNumber(URLParam.Limit) || defaultLimit;
+export const getLimitFromURL = (fallback: number): number => {
+  return getURLParamAsNumber(URLParam.Limit) || fallback;
 };
 
 export const getMatchFromURL = (): Match => {

web/src/utils/url.ts

@@ -62,6 +62,12 @@ export const removeURLParam = (param: URLParam) => {
   }
 };
 
+export const clearURLParams = () => {
+  const url = new URL(window.location.href);
+  console.info('clearing url parameters ' + url);
+  history.push(url.pathname);
+};
+
 export const getPathWithParams = (pathName = '') => {
   return `${pathName}?${new URLSearchParams(window.location.search).toString()}`;
 };