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