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

Edit visualization time change #617

Merged
merged 5 commits into from
Mar 30, 2022
Merged

Edit visualization time change #617

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
26c92de
Clean up panel search bar component
eugenesk24 Mar 30, 2022
9fbf349
Fix timestamp during edit visualization
eugenesk24 Mar 30, 2022
9fefcf2
Fix some lint
eugenesk24 Mar 30, 2022
430dd2d
Add cypress tests
eugenesk24 Mar 30, 2022
db61e34
Merge remote-tracking branch 'origin' into edit-visualization-time-ch…
eugenesk24 Mar 30, 2022
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
65 changes: 49 additions & 16 deletions dashboards-observability/.cypress/integration/app_analytics.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import {
changeTimeTo24,
expectMessageOnHover,
baseQuery,
name,
nameOne,
nameTwo,
description,
service_one,
service_two,
Expand All @@ -37,7 +38,7 @@ describe('Creating application', () => {

it('Disables create button if missing fields', () => {
expectMessageOnHover('Name is required.');
cy.get('[data-test-subj="nameFormRow"]').type(name);
cy.get('[data-test-subj="nameFormRow"]').type(nameOne);
expectMessageOnHover('Provide at least one log source, service, entity or trace group.');
cy.get('.euiAccordion').contains('Log source').click();
cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery);
Expand All @@ -46,7 +47,8 @@ describe('Creating application', () => {
expectMessageOnHover('Provide at least one log source, service, entity or trace group.');
cy.get('.euiAccordion').contains('Services & entities').click();
cy.get('[data-test-subj="servicesEntitiesComboBox"]').click();
cy.get('.euiFilterSelectItem').contains(service_one).click();
cy.focused().type('{downArrow}');
cy.focused().type('{enter}');
cy.get('.euiBadge').contains('1').should('exist');
cy.get('.euiButton').contains('Create').should('not.be.disabled');
cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery);
Expand Down Expand Up @@ -77,13 +79,14 @@ describe('Creating application', () => {
});

it('Creates an application and redirects to application', () => {
cy.get('[data-test-subj="nameFormRow"]').type(name);
cy.get('[data-test-subj="nameFormRow"]').type(nameOne);
cy.get('[data-test-subj="descriptionFormRow"]').type('This application is for testing.');
cy.get('.euiAccordion').contains('Log source').click();
cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery);
cy.get('.euiAccordion').contains('Services & entities').click();
cy.get('[data-test-subj="servicesEntitiesComboBox"]').click();
cy.get('.euiFilterSelectItem').contains(service_one).trigger('click');
cy.focused().type('{downArrow}');
cy.focused().type('{enter}');
cy.get('.euiBadge').contains('1').should('exist');
cy.get('.euiAccordion').contains('Trace groups').click();
cy.get('[data-test-subj="traceGroupsComboBox"]').type('http');
Expand All @@ -93,7 +96,7 @@ describe('Creating application', () => {
cy.get('.euiButton').contains('Create').should('not.be.disabled');
cy.get('.euiButton').contains('Create').click();
cy.wait(delay);
cy.get('.euiTitle').contains(name).should('exist');
cy.get('.euiTitle').contains(nameOne).should('exist');
cy.get('.euiTab').contains('Panel').click();
cy.get('.euiText').contains('Start by adding metrics').should('exist');
});
Expand All @@ -105,7 +108,7 @@ describe('Creating application', () => {
});

it('Saves current input on reload', () => {
cy.get('[data-test-subj="nameFormRow"]').type(name);
cy.get('[data-test-subj="nameFormRow"]').type(nameOne);
cy.get('[data-test-subj="descriptionFormRow"]').type(description);
cy.get('.euiAccordion').contains('Log source').click();
cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery);
Expand All @@ -120,7 +123,7 @@ describe('Creating application', () => {
cy.get('.euiBadge').contains('2').should('exist');
cy.reload();
cy.wait(delay);
cy.get('[data-test-subj="nameFormRow"]').find('.euiFieldText').should('contain.value', name);
cy.get('[data-test-subj="nameFormRow"]').find('.euiFieldText').should('contain.value', nameOne);
cy.get('[data-test-subj="descriptionFormRow"]').find('.euiFieldText').should('contain.value', description);
cy.get('.euiAccordion').contains('Log source').click();
cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', baseQuery);
Expand Down Expand Up @@ -162,13 +165,13 @@ describe('Creating application', () => {

describe('Viewing application', () => {
before(() => {
moveToApplication();
moveToApplication(nameOne);
});

it('Has working breadcrumbs', () => {
cy.get('.euiBreadcrumb').contains('Cypress').click();
cy.wait(delay);
cy.get('.euiTitle').contains(name).should('exist');
cy.get('.euiTitle').contains(nameOne).should('exist');
cy.get('.euiBreadcrumb').contains('Application analytics').click();
cy.wait(delay);
cy.get('.euiTitle').contains('Applications').should('exist');
Expand All @@ -178,7 +181,7 @@ describe('Viewing application', () => {
});

it('Shares time range among tabs', () => {
moveToApplication();
moveToApplication(nameOne);
changeTimeTo24('months');
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
cy.get('.euiTab').contains('Services').click();
Expand All @@ -191,7 +194,33 @@ describe('Viewing application', () => {
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
});

it('Saves time range for each application', () => {
moveToCreatePage();
cy.get('[data-test-subj="nameFormRow"]').type(nameTwo);
cy.get('.euiAccordion').contains('Log source').click();
cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery);
cy.get('.euiButton').contains('Create').should('not.be.disabled');
cy.get('.euiButton').contains('Create').click();
cy.wait(delay);
cy.get('.euiTitle').contains(nameTwo).should('exist');
changeTimeTo24('weeks');
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks');
cy.get('.euiBreadcrumb').contains('Application analytics').click();
cy.wait(delay);
cy.get('.euiLink').contains(nameOne).click();
cy.wait(delay);
cy.get('.euiTitle').contains(nameOne).should('exist');
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
cy.get('.euiBreadcrumb').contains('Application analytics').click();
cy.wait(delay);
cy.get('.euiLink').contains(nameTwo).click();
cy.wait(delay);
cy.get('.euiTitle').contains(nameTwo).should('exist');
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks');
});

it('Adds filter when Trace group name is clicked', () => {
moveToApplication(nameOne);
cy.get('.euiTab').contains('Overview').click();
cy.wait(delay);
cy.get('.euiLink').contains('client_create_order').click();
Expand Down Expand Up @@ -276,6 +305,7 @@ describe('Viewing application', () => {
cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear().wait(delay * 2).type(spanQueryPartOne);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryPartTwo);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryPartThree);
changeTimeTo24('hours');
cy.get('.euiButton').contains('Refresh').click();
cy.get('.euiTab').contains('Visualizations').click();
supressResizeObserverIssue();
Expand All @@ -295,6 +325,7 @@ describe('Viewing application', () => {
cy.get('.euiContextMenuItem').contains('Edit').click();
supressResizeObserverIssue();
cy.wait(delay);
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 hours');
cy.get('.euiBadge').contains('Bar').click();
cy.focused().type('{downArrow}');
cy.focused().type('{enter}');
Expand Down Expand Up @@ -349,7 +380,7 @@ describe('Editing application', () => {
cy.get('.euiCodeBlock__code').contains(baseQuery).should('exist');
cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 2);
cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 3);
cy.get('.euiTitle').contains(name).should('exist');
cy.get('.euiTitle').contains(nameOne).should('exist');
});
});

Expand All @@ -360,7 +391,7 @@ describe('Application Analytics home page', () => {

it('Show correct information in table', () => {
cy.get('.euiTableRow').first().within(($row) => {
cy.get('.euiLink').contains(name).should('exist');
cy.get('.euiLink').contains(nameOne).should('exist');
cy.get('.euiTableCellContent').contains(composition).should('exist');
cy.get('.euiBadge').contains('Available').should('exist');
cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist');
Expand Down Expand Up @@ -389,15 +420,17 @@ describe('Application Analytics home page', () => {
it('Deletes application', () => {
cy.get('.euiPopover').contains('Actions').click();
cy.get('.euiContextMenuItem-isDisabled').contains('Delete').should('exist');
cy.get('.euiTableRow').first().within(($row) => {
cy.get('.euiTableRow').eq(0).within(($row) => {
cy.get('.euiCheckbox').click();
});
cy.get('.euiTableRow').eq(1).within(($row) => {
cy.get('.euiCheckbox').click();
});
cy.wait(delay);
cy.get('.euiPopover').contains('Actions').click();
cy.get('.euiContextMenuItem').contains('Delete').click();
cy.get('.euiButton--fill').contains('Delete').click();
cy.wait(delay);
cy.get('.euiToast').contains(`Application "${newName}" successfully deleted!`);
cy.get('.euiToast').contains(`Applications successfully deleted!`);
cy.get('.euiLink').contains(newName).should('not.exist');
});
});
9 changes: 5 additions & 4 deletions dashboards-observability/.cypress/utils/app_constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@ export const moveToCreatePage = () => {
cy.get('.euiTitle').contains('Create application').should('exist');
};

export const moveToApplication = () => {
export const moveToApplication = (name) => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`);
cy.wait(delay * 5);
cy.wait(delay * 6);
cy.get('.euiLink').contains(name).click();
cy.wait(delay);
cy.get('.euiTitle').contains(name).should('exist');
changeTimeTo24('years');
};

export const moveToEditPage = () => {
moveToApplication();
moveToApplication(nameOne);
cy.get('.euiTab').contains('Configuration').click();
cy.get('.euiButton').contains('Edit').click();
supressResizeObserverIssue();
Expand All @@ -53,7 +53,8 @@ export const expectMessageOnHover = (message) => {
};

export const baseQuery = 'source = opensearch_dashboards_sample_data_flights';
export const name = 'Cypress';
export const nameOne = 'Cypress';
export const nameTwo = 'Pine';
export const description = 'This is my application for cypress testing.';
export const service_one = 'order';
export const service_two = 'payment';
Expand Down
5 changes: 0 additions & 5 deletions dashboards-observability/public/components/application_analytics/components/app_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,13 @@ interface AppTableProps extends AppAnalyticsComponentDeps {

export function AppTable(props: AppTableProps) {
const {
http,
chrome,
applications,
parentBreadcrumbs,
fetchApplications,
renameApplication,
deleteApplication,
setFilters,
setStartTime,
setEndTime,
clearStorage,
} = props;
const [isModalVisible, setIsModalVisible] = useState(false);
Expand All @@ -82,8 +79,6 @@ export function AppTable(props: AppTableProps) {

const clear = () => {
setFilters([]);
setStartTime('now-24h');
setEndTime('now');
clearStorage();
};

Expand Down
38 changes: 25 additions & 13 deletions dashboards-observability/public/components/application_analytics/components/application.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,15 +112,11 @@ export function Application(props: AppDetailProps) {
appId,
chrome,
parentBreadcrumbs,
startTime,
endTime,
query,
filters,
appConfigs,
updateApp,
setAppConfigs,
setStartTimeWithStorage,
setEndTimeWithStorage,
setToasts,
setFilters,
} = props;
Expand All @@ -143,14 +139,22 @@ export function Application(props: AppDetailProps) {
const [editVizId, setEditVizId] = useState<string>('');
const [visWithAvailability, setVisWithAvailability] = useState<EuiSelectOption[]>([]);
const handleContentTabClick = (selectedTab: IQueryTab) => setSelectedTab(selectedTab.id);
const [appStartTime, setAppStartTime] = useState<string>(
sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h'
);
const [appEndTime, setAppEndTime] = useState<string>(
sessionStorage.getItem(`${application.name}EndTime`) || 'now'
);

const history = useHistory();

const setStartTimeForApp = (newStartTime: string) => {
setStartTimeWithStorage(newStartTime, `${application.name}StartTime`);
setAppStartTime(newStartTime);
sessionStorage.setItem(`${application.name}StartTime`, newStartTime);
};

const setEndTimeForApp = (newEndTime: string) => {
setEndTimeWithStorage(newEndTime, `${application.name}EndTime`);
setAppEndTime(newEndTime);
sessionStorage.setItem(`${application.name}EndTime`, newEndTime);
};

const addSpanFilter = (field: string, value: any) => {
Expand Down Expand Up @@ -227,9 +231,9 @@ export function Application(props: AppDetailProps) {
}, [appId, application.name]);

useEffect(() => {
const DSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs);
const DSL = filtersToDsl(filters, query, appStartTime, appEndTime, 'app', appConfigs);
setSpanDSL(DSL);
}, [filters, appConfigs, query, startTime, endTime]);
}, [filters, appConfigs, query, appStartTime, appEndTime]);

useEffect(() => {
if (selectedTabId !== TAB_LOG_ID) {
Expand Down Expand Up @@ -285,6 +289,8 @@ export function Application(props: AppDetailProps) {
<DashboardContent
{...props}
page="app"
startTime={appStartTime}
endTime={appEndTime}
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
childBreadcrumbs={childBreadcrumbs}
Expand All @@ -306,6 +312,8 @@ export function Application(props: AppDetailProps) {
nameColumnAction={nameColumnAction}
traceColumnAction={traceColumnAction}
childBreadcrumbs={childBreadcrumbs}
startTime={appStartTime}
endTime={appEndTime}
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
/>
Expand All @@ -328,6 +336,8 @@ export function Application(props: AppDetailProps) {
page="app"
childBreadcrumbs={childBreadcrumbs}
traceIdColumnAction={traceIdColumnAction}
startTime={appStartTime}
endTime={appEndTime}
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
/>
Expand Down Expand Up @@ -364,8 +374,8 @@ export function Application(props: AppDetailProps) {
searchBarConfigs={searchBarConfigs}
appId={appId}
addVisualizationToPanel={addVisualizationToPanel}
startTime={startTime}
endTime={endTime}
startTime={appStartTime}
endTime={appEndTime}
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
appBaseQuery={application.baseQuery}
Expand All @@ -391,8 +401,8 @@ export function Application(props: AppDetailProps) {
page="app"
appName={application.name}
appId={appId}
startTime={startTime}
endTime={endTime}
startTime={appStartTime}
endTime={appEndTime}
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
switchToEvent={switchToEvent}
Expand Down Expand Up @@ -510,6 +520,8 @@ export function Application(props: AppDetailProps) {
<ServiceDetailFlyout
{...props}
serviceName={serviceFlyoutName}
startTime={appStartTime}
endTime={appEndTime}
closeServiceFlyout={closeServiceFlyout}
openSpanFlyout={openSpanFlyout}
setSelectedTab={setSelectedTab}
Expand Down
2 changes: 1 addition & 1 deletion ...ility/public/components/application_analytics/components/config_components/log_config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export const LogConfig = (props: LogConfigProps) => {
uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'
}`}
color="hollow"
onClick={() => showFlyout()}
onClick={showFlyout}
onClickAriaLabel={'pplLinkShowFlyout'}
>
PPL
Expand Down
Loading