GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-08 16:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: happy flow for services from list view to all the three details tab rendering the correct tables (#3942)

Browse Source 
* feat: complete services flow

* feat: complete all the three tab flows

* feat: address review comments
This commit is contained in:
Vikrant Gupta 2023-11-14 18:06:17 +05:30 committed by GitHub
parent f86fc03fd6
commit 2ae75e6196
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 105 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
View File

@ -104,7 +104,7 @@ function DBCall(): JSX.Element {
>
View Traces
</Button>
<Card>
<Card data-testid="database_call_rps">
<GraphContainer>
<Graph
name="database_call_rps"
@ -138,7 +138,7 @@ function DBCall(): JSX.Element {
View Traces
</Button>
<Card>
<Card data-testid="database_call_avg_duration">
<GraphContainer>
<Graph
name="database_call_avg_duration"

8
frontend/src/container/MetricsApplication/Tabs/External.tsx
View File

@ -145,7 +145,7 @@ function External(): JSX.Element {
>
View Traces
</Button>
<Card>
<Card data-testid="external_call_error_percentage">
<GraphContainer>
<Graph
headerMenuList={MENU_ITEMS}
@ -180,7 +180,7 @@ function External(): JSX.Element {
View Traces
</Button>
<Card>
<Card data-testid="external_call_duration">
<GraphContainer>
<Graph
name="external_call_duration"
@ -216,7 +216,7 @@ function External(): JSX.Element {
>
View Traces
</Button>
<Card>
<Card data-testid="external_call_rps_by_address">
<GraphContainer>
<Graph
name="external_call_rps_by_address"
@ -251,7 +251,7 @@ function External(): JSX.Element {
View Traces
</Button>
<Card>
<Card data-testid="external_call_duration_by_address">
<GraphContainer>
<Graph
name="external_call_duration_by_address"

2
frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx
View File

@ -30,7 +30,7 @@ function ApDexApplication({
}
return (
<Card>
<Card data-testid="apdex">
<GraphContainer>
<ApDexMetricsApplication
handleGraphClick={handleGraphClick}

2
frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
View File

@ -80,7 +80,7 @@ function ServiceOverview({
>
View Traces
</Button>
<Card>
<Card data-testid="service_latency">
<GraphContainer>
<Graph
name="service_latency"

2
frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
View File

@ -18,7 +18,7 @@ function TopLevelOperation({
topLevelOperationsIsLoading,
}: TopLevelOperationProps): JSX.Element {
return (
<Card>
<Card data-testid={name}>
{topLevelOperationsIsError ? (
<Typography>
{axios.isAxiosError(topLevelOperationsError)

112
frontend/tests/service/servicesLanding.spec.ts
View File

@ -3,10 +3,11 @@ import ROUTES from 'constants/routes';
import servicesSuccessResponse from '../fixtures/api/services/200.json';
import { loginApi } from '../fixtures/common';
import { SERVICE_TABLE_HEADERS } from './utils';
let page: Page;
test.describe('Service Page', () => {
test.describe('Service flow', () => {
test.beforeEach(async ({ baseURL, browser }) => {
const context = await browser.newContext({ storageState: 'tests/auth.json' });
const newPage = await context.newPage();
@ -18,7 +19,7 @@ test.describe('Service Page', () => {
page = newPage;
});
test('Services Empty Page', async ({ baseURL }) => {
test('Services empty page', async ({ baseURL }) => {
// visit services page
await page.goto(`${baseURL}${ROUTES.APPLICATION}`);
@ -33,13 +34,16 @@ test.describe('Service Page', () => {
await expect(page.getByText('No data')).toBeVisible();
});
test('Services Table Rendered with correct data', async ({ baseURL }) => {
test('Services table and service details page rendered with correct data', async ({
baseURL,
}) => {
// visit services page
await page.goto(`${baseURL}${ROUTES.APPLICATION}`);
// assert the URL of the services page
await expect(page).toHaveURL(`${baseURL}${ROUTES.APPLICATION}`);
// mock the services list call to return non-empty data
await page.route(`**/services`, (route) =>
route.fulfill({
status: 200,
@ -55,28 +59,92 @@ test.describe('Service Page', () => {
await expect(breadcrumbServicesText).toEqual('Services');
// expect the services headers to be loaded correctly
const p99Latency = await page
.locator(
`th[aria-label*="this column's title is P99 latency (in ms)"] .ant-table-column-title`,
)
.textContent();
const p99Latency = page.locator(
`th:has-text("${SERVICE_TABLE_HEADERS.P99LATENCY}")`,
);
await expect(p99Latency).toEqual('P99 latency (in ms)');
const errorRate = await page
.locator(
`th[aria-label*="this column's title is Error Rate (% of total)"] .ant-table-column-title`,
)
.textContent();
await expect(p99Latency).toBeVisible();
const errorRate = await page.locator(
`th:has-text("${SERVICE_TABLE_HEADERS.ERROR_RATE}")`,
);
await expect(errorRate).toEqual('Error Rate (% of total)');
const operationsPerSecond = await page
.locator(
`th[aria-label="this column's title is Operations Per Second,this column is sortable"] .ant-table-column-title`,
)
.textContent();
await expect(errorRate).toBeVisible();
const operationsPerSecond = await page.locator(
`th:has-text("${SERVICE_TABLE_HEADERS.OPS_PER_SECOND}")`,
);
await expect(operationsPerSecond).toBeVisible();
await expect(operationsPerSecond).toEqual('Operations Per Second');
// expect services to be listed in the table
await page.locator('a[href="/services/redis"]').isVisible();
const redisService = await page
.locator('a[href="/services/redis"]')
.isVisible();
expect(redisService).toBeTruthy();
// route to a service details page
await page.locator('a[href="/services/redis"]').click();
// wait for the network calls to be settled
await page.waitForLoadState('networkidle');
// render the overview tab
await page.getByRole('tab', { name: 'Overview' }).click();
// check the presence of different graphs on the overview tab
const latencyGraph = await page
.locator('[data-testid="service_latency"]')
.isVisible();
expect(latencyGraph).toBeTruthy();
const rateOps = await page
.locator('[data-testid="operations_per_sec"]')
.isVisible();
expect(rateOps).toBeTruthy();
const errorPercentage = await page
.locator('[data-testid="error_percentage_%"]')
.isVisible();
expect(errorPercentage).toBeTruthy();
// navigate to the DB call metrics and validate the tables
await page.getByRole('tab', { name: 'DB Call Metrics' }).click();
const databaseCallRps = await page
.locator('[data-testid="database_call_rps"]')
.isVisible();
expect(databaseCallRps).toBeTruthy();
const databaseCallsAvgDuration = await page
.locator('[data-testid="database_call_avg_duration"]')
.isVisible();
expect(databaseCallsAvgDuration).toBeTruthy();
// navigate to external metrics and validate the tables
await page.getByRole('tab', { name: 'External Metrics' }).click();
const externalCallErrorPerc = await page
.locator('[data-testid="external_call_error_percentage"]')
.isVisible();
expect(externalCallErrorPerc).toBeTruthy();
const externalCallDuration = await page
.locator('[data-testid="external_call_duration"]')
.isVisible();
expect(externalCallDuration).toBeTruthy();
const externalCallRps = await page
.locator('[data-testid="external_call_rps_by_address"]')
.isVisible();
expect(externalCallRps).toBeTruthy();
const externalCallDurationByAddress = await page
.locator('[data-testid="external_call_duration_by_address"]')
.isVisible();
expect(externalCallDurationByAddress).toBeTruthy();
});
});

6
frontend/tests/service/utils.ts Normal file
View File

@ -0,0 +1,6 @@
export const SERVICE_TABLE_HEADERS = {
APPLICATION: 'Applicaton',
P99LATENCY: 'P99 latency (in ms)',
ERROR_RATE: 'Error Rate (% of total)',
OPS_PER_SECOND: 'Operations Per Second',
};