-
Notifications
You must be signed in to change notification settings - Fork 11
/
exploreServices.spec.ts
214 lines (177 loc) · 9.18 KB
/
exploreServices.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
import { test, expect } from '@grafana/plugin-e2e';
import { ExplorePage } from './fixtures/explore';
import { testIds } from '../src/services/testIds';
import { mockVolumeApiResponse } from './mocks/mockVolumeApiResponse';
import { mockLabelsResponse } from './mocks/mockLabelsResponse';
import { ConsoleMessage } from '@playwright/test';
test.describe('explore services page', () => {
let explorePage: ExplorePage;
test.beforeEach(async ({ page }, testInfo) => {
explorePage = new ExplorePage(page, testInfo);
await explorePage.setDefaultViewportSize();
await explorePage.clearLocalStorage();
await explorePage.gotoServices();
explorePage.captureConsoleLogs();
});
test.afterEach(async ({ page }) => {
await explorePage.unroute();
explorePage.echoConsoleLogsOnRetry();
});
test('should filter service labels on search', async ({ page }) => {
await explorePage.setExtraTallViewportSize();
await explorePage.servicesSearch.click();
await explorePage.servicesSearch.pressSequentially('mimir');
// Volume can differ, scroll down so all of the panels are loaded
await explorePage.scrollToBottom();
await page.getByTestId('data-testid Panel header mimir-ingester').first().scrollIntoViewIfNeeded();
// service name should be in time series panel
await expect(page.getByTestId('data-testid Panel header mimir-ingester').nth(0)).toBeVisible();
// service name should also be in logs panel, just not visible to the user
await expect(page.getByTestId('data-testid Panel header mimir-ingester').nth(1)).toBeVisible();
// Exit out of the dropdown
await page.keyboard.press('Escape');
// Only the first title is visible
await expect(page.getByText('mimir-ingester').nth(0)).toBeVisible();
await expect(page.getByText('mimir-ingester').nth(1)).not.toBeVisible();
await expect(page.getByText('Showing 4 of 4 services')).toBeVisible();
});
test('should filter service labels on exact search', async ({ page }) => {
await explorePage.servicesSearch.click();
await explorePage.servicesSearch.pressSequentially('mimir-ingester');
// Volume can differ, scroll down so all of the panels are loaded
await explorePage.scrollToBottom();
// service name should be in time series panel
await expect(page.getByTestId('data-testid Panel header mimir-ingester').nth(0)).toBeVisible();
// service name should also be in logs panel, just not visible to the user
await expect(page.getByTestId('data-testid Panel header mimir-ingester').nth(1)).toBeVisible();
// Exit out of the dropdown
await page.keyboard.press('Escape');
// The matched string should exist in the search dropdown
await expect(page.getByText('mimir-ingester').nth(0)).toBeVisible();
// And the panel title
await expect(page.getByText('mimir-ingester').nth(1)).toBeVisible();
// And the logs panel title should be hidden
await expect(page.getByText('mimir-ingester').nth(2)).not.toBeVisible();
await expect(page.getByText('Showing 1 of 1 service')).toBeVisible();
});
test('should filter service labels on partial string', async ({ page }) => {
await explorePage.setExtraTallViewportSize();
await explorePage.servicesSearch.click();
await explorePage.servicesSearch.pressSequentially('imi');
// service name should be in time series panel
await expect(page.getByTestId('data-testid Panel header mimir-ingester').nth(0)).toBeVisible();
// service name should also be in logs panel, just not visible to the user
await expect(page.getByTestId('data-testid Panel header mimir-ingester').nth(1)).toBeVisible();
// Exit out of the dropdown
await page.keyboard.press('Escape');
// Only the first title is visible
await expect(page.getByText('mimir-ingester').nth(0)).toBeVisible();
await expect(page.getByText('mimir-ingester').nth(1)).not.toBeVisible();
await expect(page.getByText('Showing 4 of 4 services')).toBeVisible();
});
test('should select a service label value and navigate to log view', async ({ page }) => {
await explorePage.addServiceName();
await expect(explorePage.logVolumeGraph).toBeVisible();
});
test('should filter logs by clicking on the chart levels', async ({ page }) => {
await explorePage.servicesSearch.click();
await explorePage.servicesSearch.pressSequentially('tempo-distributor');
await page.keyboard.press('Escape');
// Volume can differ, scroll down so all of the panels are loaded
await explorePage.scrollToBottom();
await expect(page.getByText('Showing 1 of 1 service')).toBeVisible();
await expect(page.getByText(/level=info/).first()).toBeVisible();
await page.getByTitle('debug').first().click();
await expect(page.getByText(/level=debug/).first()).toBeVisible();
await expect(page.getByText(/level=info/)).not.toBeVisible();
});
test('should clear filters and levels when navigating back to previously activated service', async ({ page }) => {
await explorePage.addServiceName();
// Add detected_level filter
await page.getByTestId(testIds.exploreServiceDetails.tabLabels).click();
await page.getByLabel('Select detected_level').click();
await page.getByTestId(testIds.exploreServiceDetails.buttonFilterInclude).nth(1).click();
await expect(page.getByTestId('AdHocFilter-detected_level')).toBeVisible();
// Navigate to patterns so the scene is cached
await page.getByTestId(testIds.exploreServiceDetails.tabPatterns).click();
await expect(page.getByTestId('AdHocFilter-detected_level')).toBeVisible();
// Remove service so we're redirected back to the start
await page.getByTestId(testIds.variables.serviceName.label).click();
// Assert we're rendering the right scene and the services have loaded
await expect(page.getByText(/Showing \d+ of \d+ services/)).toBeVisible();
await explorePage.addServiceName();
await expect(page.getByTestId('AdHocFilter-detected_level')).not.toBeVisible();
await page.getByTestId(testIds.exploreServiceDetails.tabPatterns).click();
await expect(page.getByTestId('AdHocFilter-detected_level')).not.toBeVisible();
});
test.describe('mock volume API calls', () => {
let logsVolumeCount: number, logsQueryCount: number, labelsQueryCount: number;
test.beforeEach(async ({ page }) => {
logsVolumeCount = 0;
logsQueryCount = 0;
await page.route('**/index/volume*', async (route) => {
const volumeResponse = mockVolumeApiResponse;
logsVolumeCount++;
await page.waitForTimeout(25);
await route.fulfill({ json: volumeResponse });
});
await page.route('**/ds/query*', async (route) => {
logsQueryCount++;
await page.waitForTimeout(50);
await route.fulfill({ json: {} });
});
await Promise.all([
page.waitForResponse((resp) => resp.url().includes('index/volume')),
page.waitForResponse((resp) => resp.url().includes('ds/query')),
]);
});
test('refreshing time range should request panel data once', async ({ page }) => {
await page.waitForFunction(() => !document.querySelector('[title="Cancel query"]'));
expect(logsVolumeCount).toEqual(1);
expect(logsQueryCount).toEqual(4);
await explorePage.refreshPicker.click();
await explorePage.refreshPicker.click();
await explorePage.refreshPicker.click();
await page.waitForFunction(() => !document.querySelector('[title="Cancel query"]'));
expect(logsVolumeCount).toEqual(4);
expect(logsQueryCount).toEqual(16);
});
test('navigating back will not re-run volume query', async ({ page }) => {
await page.waitForFunction(() => !document.querySelector('[title="Cancel query"]'));
expect(logsVolumeCount).toEqual(1);
expect(logsQueryCount).toBeLessThanOrEqual(4);
// Click on first service
await explorePage.addServiceName();
await explorePage.assertTabsNotLoading();
// Clear variable
await page.getByTestId(testIds.variables.serviceName.label).click();
expect(logsVolumeCount).toEqual(1);
expect(logsQueryCount).toBeLessThanOrEqual(6);
// Click on first service
await explorePage.addServiceName();
await explorePage.assertTabsNotLoading();
// Clear variable
await page.getByTestId(testIds.variables.serviceName.label).click();
// Assert we're rendering the right scene and the services have loaded
await expect(page.getByText(/Showing \d+ of \d+ services/)).toBeVisible();
await explorePage.assertPanelsNotLoading();
// We just need to wait a few ms for the query to get fired?
await page.waitForTimeout(100);
expect(logsVolumeCount).toEqual(1);
});
test('changing datasource will trigger new queries', async ({ page }) => {
await page.waitForFunction(() => !document.querySelector('[title="Cancel query"]'));
await explorePage.assertPanelsNotLoading();
expect(logsVolumeCount).toEqual(1);
expect(logsQueryCount).toEqual(4);
await page
.locator('div')
.filter({ hasText: /^gdev-loki$/ })
.nth(1)
.click();
await page.getByText('gdev-loki-copy').click();
await explorePage.assertPanelsNotLoading();
expect(logsVolumeCount).toEqual(2);
});
});
});