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

Cypress test update and related linting fixes #220

Merged
merged 5 commits into from
Jan 26, 2023
Merged

Cypress test update and related linting fixes #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b03d9ab
resolve one failing test and remove tests of unreleased visualizations
mengweieric Jan 18, 2023
a773079
fix failing table view tests and remove/modify metric switcher
mengweieric Jan 18, 2023
512a0ef
update events tests and added vis tests
mengweieric Jan 24, 2023
7fc31ae
added fixes for linting
mengweieric Jan 24, 2023
91d1eee
update one snapshot
mengweieric Jan 24, 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
718 changes: 144 additions & 574 deletions .cypress/integration/1_event_analytics.spec.js
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 20 additions & 7 deletions .cypress/utils/event_analytics/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { COMMAND_TIMEOUT_LONG, supressResizeObserverIssue, TIMEOUT_DELAY } from '../constants';
import { COMMAND_TIMEOUT_LONG, supressResizeObserverIssue } from '../constants';

export const delay = 1000;
export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]';
Expand All @@ -20,6 +20,7 @@ export const TEST_QUERIES = [
},
{
query: 'source = opensearch_dashboards_sample_data_logs',
dateRangeDOM: YEAR_TO_DATE_DOM_ID,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: how is this index timestamp determined - is it when you add the data? Will this break next year?

Copy link
Collaborator Author

@mengweieric mengweieric Jan 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

timestamp is determined automatically (if users don't override) in event explorer by looking for the first encountered date type in an index mappings. It will not break as long as the sample data is not changed.

},
{
query:
Expand Down Expand Up @@ -78,30 +79,25 @@ export const querySearch = (query, rangeSelected) => {
.type(query, { delay: 50 });
cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
cy.get(rangeSelected).click();
cy.wait(delay * 2);
cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
};

export const landOnEventHome = () => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`);
cy.wait(delay);
};

export const landOnEventExplorer = () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
);
supressResizeObserverIssue();
cy.wait(delay);
};

export const landOnEventVisualizations = () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
);
supressResizeObserverIssue(); // have to add
cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
supressResizeObserverIssue();
cy.wait(delay);
};

export const landOnPanels = () => {
Expand Down Expand Up @@ -252,3 +248,20 @@ export const renderGaugeChart = () => {
.type('Gauge')
.type('{enter}');
};

export const HOST_TEXT_1 = "artifacts.opensearch.org";
export const HOST_TEXT_2 = "www.opensearch.org";
export const HOST_TEXT_3 = "cdn.opensearch-opensearch-opensearch.org";
export const HOST_TEXT_4 = "opensearch-opensearch-opensearch.org";
export const AGENT_TEXT_1 = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)";
export const AGENT_TEXT_2 = "Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24";
export const AGENT_TEXT_3 = "Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1";
export const BAR_LEG_TEXT_1 = `${AGENT_TEXT_1},count()`;
export const BAR_LEG_TEXT_2 = `${AGENT_TEXT_2},count()`;
export const BAR_LEG_TEXT_3 = `${AGENT_TEXT_3},count()`;
export const VIS_TYPE_PIE = 'Pie';
export const VIS_TYPE_VBAR = 'Vertical bar';
export const VIS_TYPE_HBAR = 'Horizontal bar';
export const VIS_TYPE_HEATMAP = 'Heatmap';
export const FIELD_HOST = 'host';
export const FIELD_AGENT = 'agent';
4 changes: 2 additions & 2 deletions common/types/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ export interface PatternTableData {
pattern: string;
sampleLog: string;
anomalyCount?: number;
};
}

export interface ConfigListEntry {
label: string;
Expand Down Expand Up @@ -380,7 +380,7 @@ export interface VisMeta {
}

export interface VisualizationState {
query: Query;
queryState: Query;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any reason why this was changed?

Copy link
Collaborator Author

@mengweieric mengweieric Jan 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

linting fix, there's a global 'query' within the context where scoped 'query' will shadow the global one.

visData: any;
visConfMetadata: ConfigList;
visMeta: VisMeta;
Expand Down
37 changes: 16 additions & 21 deletions public/components/common/search/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import './search.scss';

import React, { useState } from 'react';
import { isEqual } from 'lodash';
import {
EuiFlexGroup,
EuiButton,
Expand All @@ -16,7 +17,7 @@ import {
EuiBadge,
EuiContextMenuPanel,
EuiToolTip,
EuiCallOut
EuiCallOut,
} from '@elastic/eui';
import { DatePicker } from './date_picker';
import '@algolia/autocomplete-theme-classic';
Expand All @@ -26,6 +27,7 @@ import { PPLReferenceFlyout } from '../helpers';
import { uiSettingsService } from '../../../../common/utils';
import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button';
import { PPL_SPAN_REGEX } from '../../../../common/constants/shared';
export interface IQueryBarProps {
query: string;
tempQuery: string;
Expand Down Expand Up @@ -68,7 +70,6 @@ export const Search = (props: any) => {
showSavePanelOptionsList,
showSaveButton = true,
handleTimeRangePickerRefresh,
liveTailButton,
isLiveTailPopoverOpen,
closeLiveTailPopover,
popoverItems,
Expand All @@ -84,14 +85,9 @@ export const Search = (props: any) => {
liveTailName,
searchError = null,
curVisId,
spanValue,
setSubType,
metricMeasure,
setMetricMeasure,
setMetricLabel,
metricChecked,
} = props;

const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
Expand Down Expand Up @@ -221,15 +217,12 @@ export const Search = (props: any) => {
showOptionList={
showSavePanelOptionsList &&
searchBarConfigs[selectedSubTabId]?.showSavePanelOptionsList

}
curVisId={curVisId}
spanValue={spanValue}
setSubType={setSubType}
metricMeasure={metricMeasure}
setMetricMeasure={setMetricMeasure}
setMetricLabel={setMetricLabel}
metricChecked={metricChecked}
isSaveAsMetricEnabled={
isEqual(curVisId, 'line') && tempQuery.match(PPL_SPAN_REGEX) !== null
}
Comment on lines +223 to +225
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain what is this doing/why this change was made here? Any issue linking the bug here?

Copy link
Collaborator Author

@mengweieric mengweieric Jan 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comes from linting autofix. This relates to the latter comments regarding passing in boolean enabled/disabled switch state. Save panel I feel should stay overall stateless, and the computed values should be passed in.

/>
<EuiPopoverFooter>
<EuiFlexGroup justifyContent="flexEnd">
Expand Down Expand Up @@ -262,17 +255,19 @@ export const Search = (props: any) => {
</>
)}
</EuiFlexGroup>
{ searchError && searchError.error && (
{searchError && searchError.error && (
<EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
<EuiFlexItem>
<EuiCallOut title={JSON.parse(searchError.message).error.reason} color="danger" iconType="alert">
<p>
{JSON.parse(searchError.message).error.details}
</p>
<EuiCallOut
title={JSON.parse(searchError.message).error.reason}
color="danger"
iconType="alert"
>
<p>{JSON.parse(searchError.message).error.details}</p>
</EuiCallOut>
</EuiFlexItem>
</EuiFlexGroup>)
}
</EuiFlexGroup>
)}
{flyout}
</div>
);
Expand Down
48 changes: 22 additions & 26 deletions public/components/event_analytics/explorer/explorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,10 +187,8 @@ export const Explorer = ({
value: string;
}>();
const [viewLogPatterns, setViewLogPatterns] = useState(false);
const [spanValue, setSpanValue] = useState(false);
const [subType, setSubType] = useState('visualization');
const [metricMeasure, setMetricMeasure] = useState('');
const [metricLabel, setMetricLabel] = useState([]);
const [metricChecked, setMetricChecked] = useState(false);
const queryRef = useRef();
const appBasedRef = useRef('');
Expand Down Expand Up @@ -570,7 +568,10 @@ export const Explorer = ({
await updateQueryInStore(patternSelectQuery);
// Passing in empty string will remove pattern query
const patternErrorHandler = getErrorHandler('Error fetching patterns');
getPatterns(selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', patternErrorHandler);
getPatterns(
selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
patternErrorHandler
);
}
};

Expand Down Expand Up @@ -645,7 +646,10 @@ export const Explorer = ({
getErrorHandler('Error overriding default pattern')
);
setIsOverridingPattern(false);
await getPatterns(selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', getErrorHandler('Error fetching patterns'));
await getPatterns(
selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
getErrorHandler('Error fetching patterns')
);
};

const totalHits: number = useMemo(() => {
Expand Down Expand Up @@ -850,7 +854,10 @@ export const Explorer = ({
})
);
await getPatterns(
selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
selectedIntervalRef.current?.value.replace(
/^auto_/,
''
) || 'y',
getErrorHandler('Error fetching patterns')
);
}}
Expand Down Expand Up @@ -1253,7 +1260,7 @@ export const Explorer = ({
? JSON.stringify(userVizConfigs[curVisId])
: JSON.stringify({}),
description: vizDescription,
subType: subType,
subType,
})
.then((res: any) => {
setToast(
Expand Down Expand Up @@ -1288,7 +1295,7 @@ export const Explorer = ({
? JSON.stringify(userVizConfigs[curVisId])
: JSON.stringify({}),
description: vizDescription,
subType: subType,
subType,
})
.then((res: any) => {
batch(() => {
Expand Down Expand Up @@ -1430,25 +1437,17 @@ export const Explorer = ({
[tempQuery]
);

const generateViewQuery = (query: string) => {
if (query.includes(appBaseQuery)) {
if (query.includes('|')) {
const generateViewQuery = (queryString: string) => {
if (queryString.includes(appBaseQuery)) {
if (queryString.includes('|')) {
// Some scenarios have ' | ' after base query and some have '| '
return query.replace(' | ', '| ').replace(appBaseQuery + '| ', '');
return queryString.replace(' | ', '| ').replace(appBaseQuery + '| ', '');
}
return '';
}
return query;
return queryString;
};

useEffect(() => {
if (isEqual(selectedContentTabId, TAB_CHART_ID)) {
const statsTokens = queryManager.queryParser().parse(tempQuery).getStats();
const updatedDataConfig = getDefaultVisConfig(statsTokens);
setSpanValue(!isEqual(typeof updatedDataConfig.span, 'undefined'));
}
}, [tempQuery, selectedContentTabId, curVisId]);

Comment on lines -1444 to -1451
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why removed?

Copy link
Collaborator Author

@mengweieric mengweieric Jan 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The way metric uses to determine disabled/enabled saving-as-metric switch, as far as I can see, only cares about if the query contains timespan on saving-panel open. This code piece does the work to record timespan but it triggers query manager parsing and setSpanValue on every query typing/changing which causes performance degradation.

return (
<TabContext.Provider
value={{
Expand All @@ -1469,7 +1468,9 @@ export const Explorer = ({
query,
}}
>
<div className={`dscAppContainer${uiSettingsService.get('theme:darkMode') && ' explorer-dark'}`}>
<div
className={`dscAppContainer${uiSettingsService.get('theme:darkMode') && ' explorer-dark'}`}
>
<Search
key="search-component"
query={appLogEvents ? generateViewQuery(tempQuery) : query[RAW_QUERY]}
Expand Down Expand Up @@ -1504,12 +1505,7 @@ export const Explorer = ({
liveTailName={liveTailNameRef.current}
searchError={explorerVisualizations}
curVisId={curVisId}
spanValue={spanValue}
setSubType={setSubType}
metricMeasure={metricMeasure}
setMetricMeasure={setMetricMeasure}
setMetricLabel={setMetricLabel}
metricChecked={metricChecked}
/>
<EuiTabbedContent
className="mainContentTabs"
Expand Down
4 changes: 2 additions & 2 deletions ...ents/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -738,7 +738,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
onMouseOver={[Function]}
>
<EuiSwitch
checked={true}
checked={false}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this behavior not tested properly - this seems like a pretty big snapshot change?

compressed={true}
disabled={true}
label="Save as Metric"
Expand All @@ -751,7 +751,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
className="euiSwitch euiSwitch--compressed"
>
<button
aria-checked={true}
aria-checked={false}
aria-labelledby="random_html_id"
className="euiSwitch__button"
disabled={true}
Expand Down
Loading