NETOBSERV-648 Put unimplemented panels behind feature gates (#219)

* updated overview feature gate

* fixed tests

web/src/components/__tests__/netflow-traffic.spec.tsx

@@ -3,18 +3,23 @@ import { mount, render, shallow } from 'enzyme';
 import * as React from 'react';
 import { waitFor } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { getFlows } from '../../api/routes';
+import { getFlows, getTopology } from '../../api/routes';
 import NetflowTraffic from '../netflow-traffic';
 import { extensionsMock } from '../__tests-data__/extensions';
 import { FlowsResultSample } from '../__tests-data__/flows';
 import NetflowTrafficParent from '../netflow-traffic-parent';
+import { TopologyResult } from '../../api/loki';
 
 const useResolvedExtensionsMock = useResolvedExtensions as jest.Mock;
 
 jest.mock('../../api/routes', () => ({
-  getFlows: jest.fn(() => Promise.resolve(FlowsResultSample))
+  getFlows: jest.fn(() => Promise.resolve(FlowsResultSample)),
+  getTopology: jest.fn(() =>
+    Promise.resolve({ metrics: [], stats: { numQueries: 0, limitReached: false } } as TopologyResult)
+  )
 }));
 const getFlowsMock = getFlows as jest.Mock;
+const getTopologyMock = getTopology as jest.Mock;
 
 describe('<NetflowTraffic />', () => {
   beforeAll(() => {
@@ -36,21 +41,22 @@ describe('<NetflowTraffic />', () => {
   });
 
   it('should refresh on button click', async () => {
-    const wrapper = mount(<NetflowTrafficParent />);
     act(() => {
-      //should have called getFlow twice after click
+      const wrapper = mount(<NetflowTrafficParent />);
+      //should have called getTopology 4 times after click (2 for current scope and 2 for app)
       wrapper.find('#refresh-button').at(0).simulate('click');
     });
     await waitFor(() => {
-      expect(getFlowsMock).toHaveBeenCalledTimes(1);
+      expect(getFlowsMock).toHaveBeenCalledTimes(0);
+      expect(getTopologyMock).toHaveBeenCalledTimes(4);
     });
   });
 
   it('should render toolbar components', async () => {
     act(() => {
       const cheerio = render(<NetflowTrafficParent />);
       expect(cheerio.find('#filter-toolbar').length).toEqual(1);
-      expect(cheerio.find('#manage-columns-button').length).toEqual(1);
+      expect(cheerio.find('#manage-overview-panels-button').length).toEqual(1);
     });
   });
 });

web/src/components/netflow-traffic.tsx

@@ -59,7 +59,6 @@ import { loadConfig } from '../utils/config';
 import { ContextSingleton } from '../utils/context';
 import { computeStepInterval, TimeRange } from '../utils/datetime';
 import { getHTTPErrorDetails } from '../utils/errors';
-import { Feature, isAllowed } from '../utils/features-gate';
 import { useK8sModelsWithColors } from '../utils/k8s-models-hook';
 import {
   LOCAL_STORAGE_COLS_KEY,
@@ -166,10 +165,7 @@ export const NetflowTraffic: React.FC<{
   const [isOverviewModalOpen, setOverviewModalOpen] = React.useState(false);
   const [isColModalOpen, setColModalOpen] = React.useState(false);
   const [isExportModalOpen, setExportModalOpen] = React.useState(false);
-  const [selectedViewId, setSelectedViewId] = useLocalStorage<ViewId>(
-    LOCAL_STORAGE_VIEW_ID_KEY,
-    isAllowed(Feature.Overview) ? 'overview' : 'table'
-  );
+  const [selectedViewId, setSelectedViewId] = useLocalStorage<ViewId>(LOCAL_STORAGE_VIEW_ID_KEY, 'overview');
   const [filters, setFilters] = React.useState<Filter[]>([]);
   const [match, setMatch] = React.useState<Match>(getMatchFromURL());
   const [reporter, setReporter] = React.useState<Reporter>(getReporterFromURL());
@@ -485,13 +481,11 @@ export const NetflowTraffic: React.FC<{
         onSelect={(event, eventkey) => selectView(eventkey as ViewId)}
         role="region"
       >
-        {isAllowed(Feature.Overview) && (
-          <Tab
-            className="netflow-traffic-tab"
-            eventKey={'overview'}
-            title={<TabTitleText>{t('Overview')}</TabTitleText>}
-          />
-        )}
+        <Tab
+          className="netflow-traffic-tab"
+          eventKey={'overview'}
+          title={<TabTitleText>{t('Overview')}</TabTitleText>}
+        />
         <Tab
           className="netflow-traffic-tab"
           eventKey={'table'}

web/src/utils/overview-panels.ts

@@ -1,4 +1,5 @@
 import { TFunction } from 'i18next';
+import { Feature, isAllowed } from './features-gate';
 
 export type OverviewPanelId =
   | 'overview'
@@ -18,18 +19,27 @@ export type OverviewPanel = {
 };
 
 export const getDefaultOverviewPanels = (): OverviewPanel[] => {
-  return [
-    { id: 'overview', isSelected: true },
+  let panels: OverviewPanel[] = [];
+
+  panels = panels.concat([
     { id: 'top_avg_donut', isSelected: true },
     { id: 'top_latest_donut', isSelected: true },
     { id: 'top_bar', isSelected: true },
     { id: 'total_timeseries', isSelected: true },
     { id: 'top_bar_total', isSelected: true },
-    { id: 'top_timeseries', isSelected: true },
-    { id: 'top_sankey', isSelected: true },
-    { id: 'packets_dropped', isSelected: true },
-    { id: 'inbound_flows_region', isSelected: true }
-  ];
+    { id: 'top_timeseries', isSelected: true }
+  ]);
+  if (isAllowed(Feature.Overview)) {
+    panels.unshift({ id: 'overview', isSelected: true });
+
+    panels = panels.concat([
+      { id: 'top_sankey', isSelected: true },
+      { id: 'packets_dropped', isSelected: true },
+      { id: 'inbound_flows_region', isSelected: true }
+    ]);
+  }
+
+  return panels;
 };
 
 export const getOverviewPanelTitle = (t: TFunction, id: OverviewPanelId, limit: string | number = 'X'): string => {