diff --git a/web/src/components/__tests__/netflow-traffic.spec.tsx b/web/src/components/__tests__/netflow-traffic.spec.tsx index 051f55918..e65df1e64 100644 --- a/web/src/components/__tests__/netflow-traffic.spec.tsx +++ b/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('', () => { beforeAll(() => { @@ -36,13 +41,14 @@ describe('', () => { }); it('should refresh on button click', async () => { - const wrapper = mount(); act(() => { - //should have called getFlow twice after click + const wrapper = mount(); + //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); }); }); @@ -50,7 +56,7 @@ describe('', () => { act(() => { const cheerio = render(); 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); }); }); }); diff --git a/web/src/components/netflow-traffic.tsx b/web/src/components/netflow-traffic.tsx index da2cd67bc..d071ac0c5 100644 --- a/web/src/components/netflow-traffic.tsx +++ b/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( - LOCAL_STORAGE_VIEW_ID_KEY, - isAllowed(Feature.Overview) ? 'overview' : 'table' - ); + const [selectedViewId, setSelectedViewId] = useLocalStorage(LOCAL_STORAGE_VIEW_ID_KEY, 'overview'); const [filters, setFilters] = React.useState([]); const [match, setMatch] = React.useState(getMatchFromURL()); const [reporter, setReporter] = React.useState(getReporterFromURL()); @@ -485,13 +481,11 @@ export const NetflowTraffic: React.FC<{ onSelect={(event, eventkey) => selectView(eventkey as ViewId)} role="region" > - {isAllowed(Feature.Overview) && ( - {t('Overview')}} - /> - )} + {t('Overview')}} + /> { - 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 => {