Skip to content

Commit 7ec3526

Browse files
opensearch-trigger-bot[bot]github-actions[bot]Adam Tackett
authored
Traces - Filter Adjustment and DataGrid abstraction (#2321) (#2327)
* adjust filter to left ellipsis, abstract eui data grid * follow up files * clean up hidden columns logic * update style for eui data grid * update cypress testing * update snapshots * remove interactions while in full screen mode * fix flaky cypress test for event_analyics * address comments * cypress adjustment * adjust add filter/edit filter box * fix event cypress * remove events cypress fixes * address comments, move scss, add i18n --------- (cherry picked from commit 1877344) Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Adam Tackett <[email protected]>
1 parent b2d1acf commit 7ec3526

File tree

12 files changed

+1040
-888
lines changed

12 files changed

+1040
-888
lines changed

‎.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -179,22 +179,22 @@ describe('Testing traces tree view', () => {
179179
cy.get("[data-test-subj='treeExpandAll']").click();
180180
cy.get("[data-test-subj='treeCollapseAll']").click();
181181

182-
cy.get("[data-test-subj='spanId-link']")
182+
cy.get("[data-test-subj='spanId-flyout-button']")
183183
.should('have.length', 6)
184184
.then((initialSpanIds) => {
185185
const initialCount = initialSpanIds.length;
186186
expect(initialCount).to.equal(6);
187187

188188
cy.get("[data-test-subj='treeExpandAll']").click();
189189

190-
cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => {
190+
cy.get("[data-test-subj='spanId-flyout-button']").then((expandedSpanIds) => {
191191
const expandedCount = expandedSpanIds.length;
192192
expect(expandedCount).to.equal(10);
193193
});
194194

195195
cy.get("[data-test-subj='treeCollapseAll']").click();
196196

197-
cy.get("[data-test-subj='spanId-link']").then((collapsedSpanIds) => {
197+
cy.get("[data-test-subj='spanId-flyout-button']").then((collapsedSpanIds) => {
198198
const collapsedCount = collapsedSpanIds.length;
199199
expect(collapsedCount).to.equal(6); // Collapsed rows should match the initial count
200200
});
@@ -209,15 +209,15 @@ describe('Testing traces tree view', () => {
209209
cy.get("[data-test-subj='treeExpandAll']").click();
210210
cy.get("[data-test-subj='treeCollapseAll']").click();
211211

212-
cy.get("[data-test-subj='spanId-link']").then((initialSpanIds) => {
212+
cy.get("[data-test-subj='spanId-flyout-button']").then((initialSpanIds) => {
213213
const initialCount = initialSpanIds.length;
214214
expect(initialCount).to.equal(6);
215215

216216
// Find and click the first tree view expand arrow
217217
cy.get("[data-test-subj='treeViewExpandArrow']").first().click();
218218

219219
// Check the number of Span IDs after expanding the arrow (should be 7)
220-
cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => {
220+
cy.get("[data-test-subj='spanId-flyout-button']").then((expandedSpanIds) => {
221221
const expandedCount = expandedSpanIds.length;
222222
expect(expandedCount).to.equal(7);
223223
});
@@ -233,7 +233,7 @@ describe('Testing traces tree view', () => {
233233
cy.get("[data-test-subj='treeCollapseAll']").click();
234234

235235
// Open flyout for a span
236-
cy.get("[data-test-subj='spanId-link']")
236+
cy.get("[data-test-subj='spanId-flyout-button']")
237237
.contains(SPAN_ID_TREE_VIEW)
238238
.click()
239239
cy.contains('Span detail').should('exist');

‎public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ exports[`Filter popover component renders filter popover 1`] = `
2828
<div
2929
style={
3030
Object {
31-
"width": 500,
31+
"width": 600,
3232
}
3333
}
3434
>
@@ -44,28 +44,29 @@ exports[`Filter popover component renders filter popover 1`] = `
4444
}
4545
/>
4646
<EuiFlexGroup
47-
gutterSize="s"
47+
direction="column"
48+
gutterSize="m"
4849
>
4950
<div
50-
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
51+
className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionColumn euiFlexGroup--responsive"
5152
>
5253
<EuiFlexItem
53-
grow={6}
54+
grow={true}
5455
>
5556
<div
56-
className="euiFlexItem euiFlexItem--flexGrow6"
57+
className="euiFlexItem"
5758
>
5859
<EuiCompressedFormRow
5960
describedByIds={Array []}
6061
display="rowCompressed"
61-
fullWidth={false}
62+
fullWidth={true}
6263
hasChildLabel={true}
6364
hasEmptyLabelSpace={false}
6465
label="Field"
6566
labelType="label"
6667
>
6768
<div
68-
className="euiFormRow euiFormRow--compressed"
69+
className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
6970
id="random_html_id-row"
7071
>
7172
<div
@@ -92,7 +93,7 @@ exports[`Filter popover component renders filter popover 1`] = `
9293
async={false}
9394
compressed={true}
9495
data-test-subj="field-selector-filter-panel"
95-
fullWidth={false}
96+
fullWidth={true}
9697
id="random_html_id"
9798
isClearable={false}
9899
onBlur={[Function]}
@@ -129,15 +130,15 @@ exports[`Filter popover component renders filter popover 1`] = `
129130
<div
130131
aria-expanded={false}
131132
aria-haspopup="listbox"
132-
className="euiComboBox euiComboBox--compressed"
133+
className="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
133134
data-test-subj="field-selector-filter-panel"
134135
onKeyDown={[Function]}
135136
role="combobox"
136137
>
137138
<EuiComboBoxInput
138139
autoSizeInputRef={[Function]}
139140
compressed={true}
140-
fullWidth={false}
141+
fullWidth={true}
141142
hasSelectedOptions={false}
142143
id="random_html_id"
143144
inputRef={[Function]}
@@ -164,7 +165,7 @@ exports[`Filter popover component renders filter popover 1`] = `
164165
>
165166
<EuiFormControlLayout
166167
compressed={true}
167-
fullWidth={false}
168+
fullWidth={true}
168169
icon={
169170
Object {
170171
"aria-label": "Open list of options",
@@ -178,13 +179,13 @@ exports[`Filter popover component renders filter popover 1`] = `
178179
}
179180
>
180181
<div
181-
className="euiFormControlLayout euiFormControlLayout--compressed"
182+
className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
182183
>
183184
<div
184185
className="euiFormControlLayout__childrenWrapper"
185186
>
186187
<div
187-
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
188+
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
188189
data-test-subj="comboBoxInput"
189190
onClick={[Function]}
190191
tabIndex={-1}
@@ -332,22 +333,22 @@ exports[`Filter popover component renders filter popover 1`] = `
332333
</div>
333334
</EuiFlexItem>
334335
<EuiFlexItem
335-
grow={5}
336+
grow={true}
336337
>
337338
<div
338-
className="euiFlexItem euiFlexItem--flexGrow5"
339+
className="euiFlexItem"
339340
>
340341
<EuiCompressedFormRow
341342
describedByIds={Array []}
342343
display="rowCompressed"
343-
fullWidth={false}
344+
fullWidth={true}
344345
hasChildLabel={true}
345346
hasEmptyLabelSpace={false}
346347
label="Operator"
347348
labelType="label"
348349
>
349350
<div
350-
className="euiFormRow euiFormRow--compressed"
351+
className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
351352
id="random_html_id-row"
352353
>
353354
<div
@@ -374,7 +375,7 @@ exports[`Filter popover component renders filter popover 1`] = `
374375
async={false}
375376
compressed={true}
376377
data-test-subj="operator-selector-filter-panel"
377-
fullWidth={false}
378+
fullWidth={true}
378379
id="random_html_id"
379380
isClearable={false}
380381
isDisabled={true}
@@ -394,15 +395,15 @@ exports[`Filter popover component renders filter popover 1`] = `
394395
<div
395396
aria-expanded={false}
396397
aria-haspopup="listbox"
397-
className="euiComboBox euiComboBox--compressed euiComboBox-isDisabled"
398+
className="euiComboBox euiComboBox--compressed euiComboBox--fullWidth euiComboBox-isDisabled"
398399
data-test-subj="operator-selector-filter-panel"
399400
onKeyDown={[Function]}
400401
role="combobox"
401402
>
402403
<EuiComboBoxInput
403404
autoSizeInputRef={[Function]}
404405
compressed={true}
405-
fullWidth={false}
406+
fullWidth={true}
406407
hasSelectedOptions={false}
407408
id="random_html_id"
408409
inputRef={[Function]}
@@ -430,7 +431,7 @@ exports[`Filter popover component renders filter popover 1`] = `
430431
>
431432
<EuiFormControlLayout
432433
compressed={true}
433-
fullWidth={false}
434+
fullWidth={true}
434435
icon={
435436
Object {
436437
"aria-label": "Open list of options",
@@ -444,13 +445,13 @@ exports[`Filter popover component renders filter popover 1`] = `
444445
}
445446
>
446447
<div
447-
className="euiFormControlLayout euiFormControlLayout--compressed"
448+
className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
448449
>
449450
<div
450451
className="euiFormControlLayout__childrenWrapper"
451452
>
452453
<div
453-
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
454+
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
454455
data-test-subj="comboBoxInput"
455456
onClick={[Function]}
456457
tabIndex={-1}

0 commit comments

Comments
 (0)