fix tab crash when loading from url (#454)

Author: jpinsonneau

web/src/components/netflow-tab.tsx

@@ -16,7 +16,6 @@ import { Filters } from '../model/filters';
 import { loadConfig } from '../utils/config';
 import { findFilter, getFilterDefinitions } from '../utils/filter-definitions';
 import { usePrevious } from '../utils/previous-hook';
-import NetflowTraffic from './netflow-traffic';
 import NetflowTrafficParent from './netflow-traffic-parent';
 
 type RouteProps = K8sResourceCommon & {
@@ -39,10 +38,9 @@ type HPAProps = K8sResourceCommon & {
 
 export const NetflowTab: React.FC<PageComponentProps> = ({ obj }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
-  const [loading, setLoading] = React.useState(true);
   const initState = React.useRef<Array<'initDone' | 'configLoading' | 'configLoaded' | 'forcedFiltersLoaded'>>([]);
   const [config, setConfig] = React.useState<Config>(defaultConfig);
-  const [forcedFilters, setForcedFilters] = React.useState<Filters | null>(null);
+  const [forcedFilters, setForcedFilters] = React.useState<Filters>();
   const previous = usePrevious({ obj });
 
   React.useEffect(() => {
@@ -55,7 +53,6 @@ export const NetflowTab: React.FC<PageComponentProps> = ({ obj }) => {
         initState.current.push('configLoading');
         loadConfig().then(v => {
           setConfig(v);
-          setLoading(false);
           initState.current.push('configLoaded');
         });
       }
@@ -171,26 +168,26 @@ export const NetflowTab: React.FC<PageComponentProps> = ({ obj }) => {
     }
   }, [config, obj, previous, t]);
 
-  return forcedFilters ? (
-    <NetflowTrafficParent>
-      <NetflowTraffic forcedFilters={forcedFilters} isTab parentConfig={config} />
-    </NetflowTrafficParent>
-  ) : (
-    <PageSection id="pageSection" data-test="tab-page-section">
-      {loading ? (
-        <Bullseye data-test="loading-tab">
-          <Spinner size="xl" />
-        </Bullseye>
-      ) : (
+  if (!initState.current.includes('forcedFiltersLoaded')) {
+    return (
+      <Bullseye data-test="loading-tab">
+        <Spinner size="xl" />
+      </Bullseye>
+    );
+  } else if (forcedFilters) {
+    return <NetflowTrafficParent forcedFilters={forcedFilters} isTab={true} parentConfig={config} />;
+  } else {
+    return (
+      <PageSection id="pageSection" data-test="tab-page-section">
         <EmptyState data-test="error-state" variant={EmptyStateVariant.small}>
           <Title headingLevel="h2" size="lg">
             {t('Kind not managed')}
           </Title>
           <EmptyStateBody>{obj?.kind}</EmptyStateBody>
         </EmptyState>
-      )}
-    </PageSection>
-  );
+      </PageSection>
+    );
+  }
 };
 
 export default NetflowTab;

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { clearURLParams } from '../utils/url';
 import { clearLocalStorage } from '../utils/local-storage-hook';
-import NetflowTraffic from './netflow-traffic';
+import NetflowTraffic, { NetflowTrafficProps } from './netflow-traffic';
 import AlertFetcher from './alerts/fetcher';
 import DynamicLoader from './dynamic-loader/dynamic-loader';
 
-type Props = {};
+type Props = NetflowTrafficProps & {};
+
 type State = {
   error?: Error;
 };
@@ -47,15 +48,14 @@ class NetflowTrafficParent extends React.Component<Props, State> {
         </div>
       );
     }
-    if (this.props.children) {
-      return this.props.children;
-    }
-    // else render default NetworkTraffic
-
     return (
       <DynamicLoader>
         <AlertFetcher>
-          <NetflowTraffic forcedFilters={null} />
+          <NetflowTraffic
+            isTab={this.props.isTab}
+            forcedFilters={this.props.isTab ? this.props.forcedFilters : null}
+            parentConfig={this.props.parentConfig}
+          />
         </AlertFetcher>
       </DynamicLoader>
     );

web/src/components/netflow-traffic.tsx

@@ -169,11 +169,13 @@ import { SearchComponent, SearchEvent, SearchHandle } from './search/search';
 
 export type ViewId = 'overview' | 'table' | 'topology';
 
-export const NetflowTraffic: React.FC<{
-  forcedFilters: Filters | null;
+export type NetflowTrafficProps = {
+  forcedFilters?: Filters | null;
   isTab?: boolean;
   parentConfig?: Config;
-}> = ({ forcedFilters, isTab, parentConfig }) => {
+};
+
+export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({ forcedFilters, isTab, parentConfig }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const [extensions] = useResolvedExtensions<ModelFeatureFlag>(isModelFeatureFlag);
   const k8sModels = useK8sModelsWithColors();