Skip to content

Commit

Permalink
Metrics Explorer updated with PromQL (#1303)
Browse files Browse the repository at this point in the history
* Metrics Explorer updated with PromQL

including query for Prometheus Metrics and updated Export Panel

---------

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
  • Loading branch information
pjfitzgibbons authored Dec 18, 2023
1 parent 11ecfa6 commit d16f2b2
Show file tree
Hide file tree
Showing 89 changed files with 4,701 additions and 6,063 deletions.
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
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
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
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
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 d16f2b2

Please sign in to comment.