Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature][Metrics] Metrics Explorer UX with PromQL and Export Panel - merge to main #1291

Closed
wants to merge 8 commits into from
Closed

[Feature][Metrics] Metrics Explorer UX with PromQL and Export Panel - merge to main #1291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c19259d
Metrics Explorer updated with PromQL query for Prometheus Metrics and…
pjfitzgibbons Dec 7, 2023
3d6f8ef
Correct circular dependency
pjfitzgibbons Dec 7, 2023
84d1172
Fix: broken import on MetricExport. Updated snapshots
pjfitzgibbons Dec 7, 2023
d30ad61
Cleanup console.logs, unused code
pjfitzgibbons Dec 8, 2023
1f751ee
Simplify PromQL data query. Calculate CSS height of Metric Grid pane…
pjfitzgibbons Dec 8, 2023
074051f
Update snapshots
pjfitzgibbons Dec 8, 2023
291f88b
Update testing across Metrics module
pjfitzgibbons Dec 14, 2023
6a8a299
Remove debug logging
pjfitzgibbons Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 68 additions & 40 deletions .cypress/integration/3_panels.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
} from '../utils/panel_constants';

describe('Panels testing with Sample Data', () => {
suppressResizeObserverIssue();//needs to be in file once
suppressResizeObserverIssue(); //needs to be in file once

before(() => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
Expand All @@ -30,7 +30,7 @@ describe('Panels testing with Sample Data', () => {
beforeEach(() => {
eraseTestPanels();
eraseSavedVisualizations();
})
});

after(() => {
eraseTestPanels();
Expand All @@ -54,8 +54,8 @@ describe('Panels testing with Sample Data', () => {
.click({ force: true });
cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]')
.trigger('mouseover')
.click({force: true});
cy.wait(delay*5); //Wont save as correct name without wait
.click({ force: true });
cy.wait(delay * 5); //Wont save as correct name without wait
cy.get('[data-test-subj="eventExplorer__querySaveName"]')
.focus()
.type(PPL_VISUALIZATIONS_NAMES[0]);
Expand Down Expand Up @@ -151,7 +151,7 @@ describe('Panels testing with Sample Data', () => {
it('Searches panels', () => {
createLegacyPanel('Legacy Named');
createSavedObjectPanel('Saved Object');
cy.wait(delay);//Needed so the panel appears on the dashboard page
cy.wait(delay); //Needed so the panel appears on the dashboard page
cy.reload();
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
Expand Down Expand Up @@ -203,7 +203,7 @@ describe('Panels testing with Sample Data', () => {

it('Deletes the panel', () => {
createSavedObjectPanel();
cy.get('a[data-test-subj="breadcrumb last"]').click();//refresh so panel appears
cy.get('a[data-test-subj="breadcrumb last"]').click(); //refresh so panel appears
cy.get('input[data-test-subj="checkboxSelectAll"]').click();
openActionsDropdown();
cy.get('button[data-test-subj="deleteContextMenuItem"]').click({ force: true });
Expand Down Expand Up @@ -251,7 +251,7 @@ describe('Panels testing with Sample Data', () => {
beforeEach(() => {
const test_name = `test_${new Date().getTime()}`;
createSavedObjectPanel(test_name).as('thePanel');
cy.then(function (){
cy.then(function () {
moveToThePanel(this.thePanel.id);
});
});
Expand All @@ -264,29 +264,35 @@ describe('Panels testing with Sample Data', () => {

it('Redirects to correct page on breadcrumb click', () => {
cy.get('a[data-test-subj="breadcrumb last"]').click();
cy.then(function (){
cy.get('h1[data-test-subj="panelNameHeader"]').contains(this.thePanel.attributes.title).should('exist');
cy.then(function () {
cy.get('h1[data-test-subj="panelNameHeader"]')
.contains(this.thePanel.attributes.title)
.should('exist');
});
});

it('Duplicate the open panel', () => {
cy.get('button[data-test-subj="panelActionContextMenu"]').click();
cy.get('button[data-test-subj="duplicatePanelContextMenuItem"]').click();
cy.then(function (){
cy.get(`input.euiFieldText[value="${this.thePanel.attributes.title} (copy)"]`).should('exist');
cy.then(function () {
cy.get(`input.euiFieldText[value="${this.thePanel.attributes.title} (copy)"]`).should(
'exist'
);
});
cy.get('button[data-test-subj="runModalButton"]').click();
cy.then(function (){
cy.then(function () {
cy.get('h1[data-test-subj="panelNameHeader"]')
.contains(this.thePanel.attributes.title + ' (copy)')
.should('exist');
});
});

it('Rename the open panel', () => {
cy.then(function (){
cy.then(function () {
cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
.type(this.thePanel.attributes.title);
cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
cy.get('button[data-test-subj="panelActionContextMenu"]').click();
cy.get('button[data-test-subj="renamePanelContextMenuItem"]').click();
Expand All @@ -295,15 +301,19 @@ describe('Panels testing with Sample Data', () => {
.clear({ force: true })
.focus()
.type('Renamed Panel');
});
});
cy.get('button[data-test-subj="runModalButton"]').click();
cy.get('h1[data-test-subj="panelNameHeader"]').contains('Renamed Panel').should('exist');
});

it('Change date filter of the panel', () => {
cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({force: true});
cy.wait(delay);//flyout won't open sometimes without
cy.get('button[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click({force: true});
cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({
force: true,
});
cy.wait(delay); //flyout won't open sometimes without
cy.get('button[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click({
force: true,
});
cy.get('button[data-test-subj="superDatePickerShowDatesButton"]')
.contains('This year')
.should('exist');
Expand All @@ -320,7 +330,7 @@ describe('Panels testing with Sample Data', () => {
cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]);
cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
cy.get('.plot-container').should('exist');
cy.get('button[data-test-subj="addFlyoutButton"]').click({force: true});
cy.get('button[data-test-subj="addFlyoutButton"]').click({ force: true });
cy.get('.euiToastHeader__title').contains('successfully').should('exist');
});

Expand All @@ -335,7 +345,7 @@ describe('Panels testing with Sample Data', () => {
cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]);
cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
cy.get('.plot-container').should('exist');
cy.get('button[data-test-subj="addFlyoutButton"]').click({force: true});
cy.get('button[data-test-subj="addFlyoutButton"]').click({ force: true });
cy.get('.euiToastHeader__title').contains('successfully').should('exist');
});

Expand All @@ -350,11 +360,15 @@ describe('Panels testing with Sample Data', () => {
addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
moveToThePanel(this.thePanel.id);
cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
.type(this.thePanel.attributes.title);
cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
});

cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({force: true,});
cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({
force: true,
});
cy.get('[data-test-subj="superDatePickerQuickMenu"')
.first()
.within(() => {
Expand All @@ -365,11 +379,11 @@ describe('Panels testing with Sample Data', () => {

cy.get('[data-test-subj="searchAutocompleteTextArea"]')
.trigger('mouseover')
.click({force: true})
.wait(delay*5)
.click({ force: true })
.wait(delay * 5)
.focus()
.type(PPL_FILTER);
cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click({force: true});
cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click({ force: true });
cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
cy.get('.xtick').should('contain', 'Munich Airport');
cy.get('.xtick').contains('Zurich Airport').should('not.exist');
Expand All @@ -389,7 +403,9 @@ describe('Panels testing with Sample Data', () => {
addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
moveToThePanel(this.thePanel.id);
cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
.type(this.thePanel.attributes.title);
cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
});

Expand Down Expand Up @@ -419,7 +435,9 @@ describe('Panels testing with Sample Data', () => {
addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
moveToThePanel(this.thePanel.id);
cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
.type(this.thePanel.attributes.title);
cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
});

Expand All @@ -446,7 +464,9 @@ describe('Panels testing with Sample Data', () => {
addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
moveToThePanel(this.thePanel.id);
cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
.type(this.thePanel.attributes.title);
cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
});

Expand All @@ -470,7 +490,9 @@ describe('Panels testing with Sample Data', () => {
addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
moveToThePanel(this.thePanel.id);
cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
.type(this.thePanel.attributes.title);
cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
});

Expand Down Expand Up @@ -503,15 +525,17 @@ describe('Panels testing with Sample Data', () => {
PPL_VISUALIZATIONS[2],
PPL_VISUALIZATION_CONFIGS[2]
).as('vis2');

cy.then(function () {
addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
moveToThePanel(this.thePanel.id);
cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
.type(this.thePanel.attributes.title);
cy.get('a.euiLink').contains(this.thePanel.attributes.title).click({ force: true });
});

cy.get('button[aria-label="actionMenuButton"]').eq(0).click();
cy.get('button[data-test-subj="replaceVizContextMenuItem"]').click();
cy.get('select').select(PPL_VISUALIZATIONS_NAMES[2]);
Expand Down Expand Up @@ -540,18 +564,20 @@ describe('Panels testing with Sample Data', () => {
cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]')
.trigger('mouseover')
.click();

cy.then(function () {
cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(this.thePanel.attributes.title);
cy.get(`input[value="${this.thePanel.attributes.title}"]`).trigger('mouseover').click();
});

cy.then(function () {
cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(
this.thePanel.attributes.title
);
cy.get(`input[value="${this.thePanel.attributes.title}"]`).trigger('mouseover').click();
});

cy.get('[data-test-subj="eventExplorer__querySaveName"]')
.focus()
.type(PPL_VISUALIZATIONS_NAMES[2]);
cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click();
cy.get('.euiToastHeader__title').contains('successfully').should('exist');

cy.then(function () {
moveToThePanel(this.thePanel.id);
});
Expand All @@ -572,7 +598,9 @@ describe('Panels testing with Sample Data', () => {
addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
moveToThePanel(this.thePanel.id);
cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
cy.get('input[data-test-subj="operationalPanelSearchBar"]')
.focus()
.type(this.thePanel.attributes.title);
cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
});

Expand Down Expand Up @@ -813,7 +841,7 @@ const createVisualization = (newName, query, vizConfig) => {
description: '',
type: 'bar',
user_configs: vizConfig,
sub_type: 'visualization',
subType: 'visualization',
},
},
},
Expand Down
8 changes: 4 additions & 4 deletions .cypress/integration/8_metrics_analytics.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import {
delay,
PPL_METRICS,
PPL_METRICS_NAMES,
VIS_TYPE_LINE,
TESTING_PANEL,
VIS_TYPE_LINE,
} from '../utils/metrics_constants';
import { suppressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants';
import { landOnPanels, clearQuerySearchBoxText } from '../utils/event_analytics/helpers';
import { COMMAND_TIMEOUT_LONG, suppressResizeObserverIssue } from '../utils/constants';
import { clearQuerySearchBoxText, landOnPanels } from '../utils/event_analytics/helpers';

describe('Metrics Analytics', () => {
beforeEach(() => {
Expand Down Expand Up @@ -281,7 +281,7 @@ const createSavedObjectMetric = ({ testMetricIndex }) => {
name: PPL_METRICS_NAMES[testMetricIndex],
description: '',
type: 'line',
sub_type: 'metric',
subType: 'metric',
},
},
},
Expand Down
15 changes: 7 additions & 8 deletions common/constants/metrics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* SPDX-License-Identifier: Apache-2.0
*/

export const METRIC_EXPLORER_BASE_PATH = 'observability-metrics#/';

// requests constants
export const VISUALIZATION = 'viz';
export const SAVED_VISUALIZATION = 'savedVisualization';
Expand All @@ -24,13 +26,10 @@ export const resolutionOptions = [
{ value: 'y', text: 'years' },
];

export const DEFAULT_METRIC_HEIGHT = 2;
export const DEFAULT_METRIC_WIDTH = 12;

export const AGGREGATION_OPTIONS = [
{ label: 'avg' },
{ label: 'sum' },
{ label: 'count' },
{ label: 'min' },
{ label: 'max' },
{ value: 'avg', text: 'avg()' },
{ value: 'sum', text: 'sum()' },
{ value: 'count', text: 'count()' },
{ value: 'min', text: 'min()' },
{ value: 'max', text: 'max()' },
];
6 changes: 6 additions & 0 deletions common/constants/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@ export const PPL_PATTERNS_DOCUMENTATION_URL =
export const UI_DATE_FORMAT = 'MM/DD/YYYY hh:mm A';
export const PPL_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSSSSS';
export const SPAN_REGEX = /span/;

export const PROMQL_METRIC_SUBTYPE = 'promqlmetric';
export const PPL_METRIC_SUBTYPE = 'metric';

export const PPL_SPAN_REGEX = /by\s*span/i;
export const PPL_STATS_REGEX = /\|\s*stats/i;
export const PPL_INDEX_INSERT_POINT_REGEX = /(search source|source|index)\s*=\s*([^|\s]+)(.*)/i;
Expand Down Expand Up @@ -190,6 +194,7 @@ export const LIVE_OPTIONS = [
];

export const LIVE_END_TIME = 'now';

export interface DefaultChartStylesProps {
DefaultModeLine: string;
Interpolation: string;
Expand Down Expand Up @@ -243,6 +248,7 @@ export const VISUALIZATION_ERROR = {
NO_DATA: 'No data found.',
INVALID_DATA: 'Invalid visualization data',
NO_SERIES: 'Add a field to start',
NO_METRIC: 'Invalid Metric MetaData',
};

export const S3_DATASOURCE_TYPE = 'S3_DATASOURCE';
Expand Down
2 changes: 1 addition & 1 deletion common/types/custom_panels.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export interface SavedVisualizationType {
selected_date_range: { start: string; end: string; text: string };
timeField: string;
application_id?: string;
user_configs: any;
userConfigs: any;
pjfitzgibbons marked this conversation as resolved.
Show resolved Hide resolved
}

export interface PPLResponse {
Expand Down
Loading
Loading