Skip to content

Commit

Permalink
refactor(Services): ♻️ Re organize services
Browse files Browse the repository at this point in the history
  • Loading branch information
@bartoval
bartoval committed Sep 16, 2024
1 parent 59a23ee commit a683f17
Show file tree
Hide file tree
Showing 17 changed files with 190 additions and 303 deletions.
36 changes: 1 addition & 35 deletions __tests__/pages/Services/HttpRequests.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,15 @@ import { Server } from 'miragejs';
import HttpRequests from '@pages/Services/components/HttpRequests';

import flowPairsData from '../../../mocks/data/FLOW_PAIRS.json';
import processesData from '../../../mocks/data/PROCESSES.json';
import servicesData from '../../../mocks/data/SERVICES.json';
import { loadMockServer } from '../../../mocks/server';
import { waitForElementToBeRemovedTimeout } from '../../../src/config/config';
import { getTestsIds } from '../../../src/config/testIds';
import { Wrapper } from '../../../src/core/components/Wrapper';
import { TAB_0_KEY, TAB_1_KEY, TAB_2_KEY } from '../../../src/pages/Services/Services.constants';
import LoadingPage from '../../../src/pages/shared/Loading';
import { MetricsLabels } from '../../../src/pages/shared/Metrics/Metrics.enum';

const servicesResults = servicesData.results;
const flowPairsResults = flowPairsData.results;
const processResult = processesData.results;

describe('Begin testing the Http requests component', () => {
let server: Server;
Expand All @@ -33,41 +29,11 @@ describe('Begin testing the Http requests component', () => {
jest.clearAllMocks();
});

it('should render the Requests view -> Overview after the data loading is complete', async () => {
const { getByText } = render(
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<HttpRequests id={servicesResults[0].identity} name={servicesResults[0].name} viewSelected={TAB_0_KEY} />
</Suspense>
</Wrapper>
);

await waitForElementToBeRemoved(() => screen.queryByTestId(getTestsIds.loadingView()), {
timeout: waitForElementToBeRemovedTimeout
});
expect(getByText(MetricsLabels.DataTransferTitle)).toBeInTheDocument();
});

it('should render the Requests view -> Servers after the data loading is complete', async () => {
const { getByText } = render(
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<HttpRequests id={servicesResults[0].identity} name={servicesResults[0].name} viewSelected={TAB_1_KEY} />
</Suspense>
</Wrapper>
);

await waitForElementToBeRemoved(() => screen.queryByTestId(getTestsIds.loadingView()), {
timeout: waitForElementToBeRemovedTimeout
});
expect(getByText(processResult[0].name)).toBeInTheDocument();
});

it('should render the Requests view -> Requests after the data loading is complete', async () => {
render(
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<HttpRequests id={servicesResults[0].identity} name={servicesResults[0].name} viewSelected={TAB_2_KEY} />
<HttpRequests id={servicesResults[0].identity} name={servicesResults[0].name} />
</Suspense>
</Wrapper>
);
Expand Down
54 changes: 1 addition & 53 deletions __tests__/pages/Services/TcpConnections.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,15 @@ import { Server } from 'miragejs';
import TcpConnections from '@pages/Services/components/TcpConnections';

import flowPairsData from '../../../mocks/data/FLOW_PAIRS.json';
import processesData from '../../../mocks/data/PROCESSES.json';
import servicesData from '../../../mocks/data/SERVICES.json';
import { loadMockServer } from '../../../mocks/server';
import { waitForElementToBeRemovedTimeout } from '../../../src/config/config';
import { getTestsIds } from '../../../src/config/testIds';
import { Wrapper } from '../../../src/core/components/Wrapper';
import { TAB_0_KEY, TAB_1_KEY, TAB_3_KEY, TAB_4_KEY } from '../../../src/pages/Services/Services.constants';
import LoadingPage from '../../../src/pages/shared/Loading';
import { MetricsLabels } from '../../../src/pages/shared/Metrics/Metrics.enum';

const servicesResults = servicesData.results;
const tcpBiFlowOpen = flowPairsData.results[5];
const tcpBiFlowTerminated = flowPairsData.results[6];
const processResult = processesData.results;

describe('Begin testing the TCP connections component', () => {
let server: Server;
Expand All @@ -34,41 +29,11 @@ describe('Begin testing the TCP connections component', () => {
jest.clearAllMocks();
});

it('should render the Connection view -> Overview after the data loading is complete', async () => {
const { getByText } = render(
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<TcpConnections id={servicesResults[5].identity} name={servicesResults[5].name} viewSelected={TAB_0_KEY} />
</Suspense>
</Wrapper>
);

await waitForElementToBeRemoved(() => screen.queryByTestId(getTestsIds.loadingView()), {
timeout: waitForElementToBeRemovedTimeout
});
expect(getByText(MetricsLabels.DataTransferTitle)).toBeInTheDocument();
});

it('should render the Connection view -> Servers after the data loading is complete', async () => {
const { getByText } = render(
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<TcpConnections id={servicesResults[2].identity} name={servicesResults[2].name} viewSelected={TAB_1_KEY} />
</Suspense>
</Wrapper>
);

await waitForElementToBeRemoved(() => screen.queryByTestId(getTestsIds.loadingView()), {
timeout: waitForElementToBeRemovedTimeout
});
expect(getByText(processResult[0].name)).toBeInTheDocument();
});

it('should render the Connection view -> Open connections after the data loading is complete', async () => {
render(
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<TcpConnections id={servicesResults[4].identity} name={servicesResults[4].name} viewSelected={TAB_3_KEY} />
<TcpConnections id={servicesResults[4].identity} name={servicesResults[4].name} />
</Suspense>
</Wrapper>
);
Expand All @@ -79,21 +44,4 @@ describe('Begin testing the TCP connections component', () => {

expect(screen.getAllByText(tcpBiFlowOpen.sourceProcessName)[0]).toBeInTheDocument();
});

it('should render the Connection view -> Old Connections after the data loading is complete', async () => {
const { queryByTestId, getByText, getAllByText } = render(
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<TcpConnections id={servicesResults[4].identity} name={servicesResults[4].name} viewSelected={TAB_4_KEY} />
</Suspense>
</Wrapper>
);

await waitForElementToBeRemoved(() => queryByTestId(getTestsIds.loadingView()), {
timeout: waitForElementToBeRemovedTimeout
});

expect(getAllByText(tcpBiFlowTerminated.sourceProcessName)[0]).toBeInTheDocument();
expect(getByText('Closed')).toBeInTheDocument();
});
});
48 changes: 48 additions & 0 deletions __tests__/pages/Services/TcpTerminatedConnections.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Suspense } from 'react';

import { render, waitForElementToBeRemoved } from '@testing-library/react';
import { Server } from 'miragejs';

import TcpTerminatedConnections from '@pages/Services/components/TcpTerminatedConnections';

import flowPairsData from '../../../mocks/data/FLOW_PAIRS.json';
import servicesData from '../../../mocks/data/SERVICES.json';
import { loadMockServer } from '../../../mocks/server';
import { waitForElementToBeRemovedTimeout } from '../../../src/config/config';
import { getTestsIds } from '../../../src/config/testIds';
import { Wrapper } from '../../../src/core/components/Wrapper';
import LoadingPage from '../../../src/pages/shared/Loading';

const servicesResults = servicesData.results;
const tcpBiFlowTerminated = flowPairsData.results[6];

describe('Begin testing the TCP connections component', () => {
let server: Server;

beforeEach(() => {
server = loadMockServer() as Server;
server.logging = false;
});

afterEach(() => {
server.shutdown();
jest.clearAllMocks();
});

it('should render the Connection view -> Old Connections after the data loading is complete', async () => {
const { queryByTestId, getByText, getAllByText } = render(
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<TcpTerminatedConnections id={servicesResults[4].identity} name={servicesResults[4].name} />
</Suspense>
</Wrapper>
);

await waitForElementToBeRemoved(() => queryByTestId(getTestsIds.loadingView()), {
timeout: waitForElementToBeRemovedTimeout
});

expect(getAllByText(tcpBiFlowTerminated.sourceProcessName)[0]).toBeInTheDocument();
expect(getByText('Closed')).toBeInTheDocument();
});
});
19 changes: 2 additions & 17 deletions src/API/Prometheus.api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { queries } from './Prometheus.queries';
import { convertToPrometheusQueryParams, gePrometheusQueryPATH } from './Prometheus.utils';

export const PrometheusApi = {
//When direction is outgoing, it is the response from from the server (sourceProcess) to the client (destProcess)
fetchByteRateByDirectionInTimeRange: async (
params: PrometheusQueryParams,
isRx = false
Expand Down Expand Up @@ -179,25 +178,11 @@ export const PrometheusApi = {
return result;
},

fetchTcpActiveFlowsByService: async (): Promise<PrometheusMetric<'vector'>[]> => {
fetchOpenConnectionsByService: async (): Promise<PrometheusMetric<'vector'>[]> => {
const {
data: { result }
} = await axiosFetch<PrometheusResponse<'vector'>>(gePrometheusQueryPATH('single'), {
params: { query: queries.getTcpActiveFlowsByService() }
});

return result;
},

fetchTcpByteRateByService: async ({
serviceName
}: {
serviceName: string;
}): Promise<PrometheusMetric<'vector'>[]> => {
const {
data: { result }
} = await axiosFetch<PrometheusResponse<'vector'>>(gePrometheusQueryPATH('single'), {
params: { query: queries.getTcpByteRateByService(serviceName) }
params: { query: queries.getOpenConnectionsByService() }
});

return result;
Expand Down
9 changes: 1 addition & 8 deletions src/API/Prometheus.queries.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const queries = {
},

// count the number of active tcp flows in the services table
getTcpActiveFlowsByService() {
getOpenConnectionsByService() {
return `sum by(${PrometheusLabelsV2.RoutingKey})(${PrometheusMetricsV2.TcpOpenConnections}{protocol="${AvailableProtocols.Tcp}"}-${PrometheusMetricsV2.TcpCloseCOnnections}{protocol="${AvailableProtocols.Tcp}"})`;
},

Expand Down Expand Up @@ -74,13 +74,6 @@ export const queries = {
},

// SERVICES queries
// calculate the open connections count (used in the services table)

// calculate the TCP byterate for exposed services
getTcpByteRateByService(serviceName: string) {
return `rate(${PrometheusMetricsV2.SentBytes}{protocol="tcp", ${PrometheusLabelsV2.RoutingKey}="${serviceName}"}[1m])`;
},

// calculate the byterate used by the sankey diagram in the requests/connections page
getResourcePairsByService(param: string, groupBy: string, time: string) {
return `sum by(${groupBy})(rate(${PrometheusMetricsV2.SentBytes}{${param}}[${time}]) > 0)`;
Expand Down
1 change: 0 additions & 1 deletion src/layout/MainContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ interface MainContainerProps {
linkLabel?: string;
iconName?: 'topologyIcon' | 'listIcon';
description?: string;
isPlain?: boolean;
hasMainContentPadding?: boolean;
navigationComponent?: ReactElement;
mainContentChildren?: ReactElement;
Expand Down
24 changes: 7 additions & 17 deletions src/pages/Services/Services.constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { SortDirection, TcpStatus } from '@API/REST.enum';
import { BIG_PAGINATION_SIZE } from '@config/config';
import SkEndTimeCell from '@core/components/SkEndTimeCell';
import { httpFlowPairsColumns, tcpFlowPairsColumns } from '@core/components/SkFlowPairsTable/FlowPair.constants';
import { FlowPairLabels } from '@core/components/SkFlowPairsTable/FlowPair.enum';
import SkLinkCell, { SkLinkCellProps } from '@core/components/SkLinkCell';
import { sankeyMetricOptions } from '@core/components/SKSanckeyChart/SkSankey.constants';
import { timeAgo } from '@core/utils/timeAgo';
import { ProcessesLabels } from '@pages/Processes/Processes.enum';
import { ServiceResponse, ProcessResponse, QueryFilters } from '@sk-types/REST.interfaces';
import { SKTableColumn } from 'types/SkTable.interfaces';
Expand All @@ -22,7 +22,8 @@ export const customServiceCells = {
...props,
type: 'service',
link: `${ServicesRoutesPaths.Services}/${props.data.name}@${props.data.identity}`
})
}),
TimestampCell: (props: SkLinkCellProps<ProcessResponse>) => SkEndTimeCell(props)
};

// Services Table
Expand All @@ -45,7 +46,6 @@ export const ServiceColumns: SKTableColumn<ServiceResponse>[] = [
{
name: ServicesLabels.CurrentFlowPairs,
columnDescription: 'Open connections',

prop: 'currentFlows' as keyof ServiceResponse,
width: 15
}
Expand All @@ -58,25 +58,20 @@ export const tcpServerColumns = [
prop: 'name' as keyof ProcessResponse,
customCellName: 'linkCell'
},
{
name: ProcessesLabels.Component,
prop: 'groupName' as keyof ProcessResponse,
customCellName: 'linkComponentCell'
},
{
name: ProcessesLabels.Site,
prop: 'parentName' as keyof ProcessResponse,
customCellName: 'linkCellSite'
},
{
name: ProcessesLabels.ByteRateRx,
prop: 'byteRate' as keyof ProcessResponse,
customCellName: 'ByteRateFormatCell'
name: ProcessesLabels.Component,
prop: 'groupName' as keyof ProcessResponse,
customCellName: 'linkComponentCell'
},
{
name: ProcessesLabels.Created,
prop: 'startTime' as keyof ProcessResponse,
format: timeAgo
customCellName: 'TimestampCell'
}
];

Expand Down Expand Up @@ -116,11 +111,6 @@ export const servicesSelectOptions: { name: string; id: string }[] = [
];

// Filters
export const initServersQueryParams = {
limit: BIG_PAGINATION_SIZE,
endTime: 0 // active servers
};

export const initActiveConnectionsQueryParams: QueryFilters = {
state: TcpStatus.Active,
limit: BIG_PAGINATION_SIZE,
Expand Down
Loading

0 comments on commit a683f17

Please sign in to comment.