Skip to content

Commit

Permalink
Backport main - Metrics Explorer updated with PromQL (opensearch-proj…
Browse files Browse the repository at this point in the history 
…ect#1303) (opensearch-project#1305)

* Metrics Explorer updated with PromQL (opensearch-project#1303)

---------

Signed-off-by: Peter Fitzgibbons <[email protected]>
  • Loading branch information
@pjfitzgibbons
pjfitzgibbons authored Dec 20, 2023
1 parent 994ae0e commit f31d969
Show file tree
Hide file tree
Showing 89 changed files with 4,584 additions and 5,894 deletions.
2 changes: 1 addition & 1 deletion .cypress/integration/metrics_analytics_test/metrics_analytics.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ const createSavedObjectMetric = ({ testMetricIndex }) => {
name: PPL_METRICS_NAMES[testMetricIndex],
description: '',
type: 'line',
sub_type: 'metric',
subType: 'metric',
},
},
},
Expand Down
108 changes: 68 additions & 40 deletions .cypress/integration/panels_test/panels.spec.ts
View file
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
15 changes: 7 additions & 8 deletions common/constants/metrics.ts
View file
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
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
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;
}

export interface PPLResponse {
Expand Down
Loading

0 comments on commit f31d969

Please sign in to comment.