Skip to content

Commit

Permalink
Edit visualization time range change (opensearch-project#617)
Browse files Browse the repository at this point in the history 
Signed-off-by: Eugene Lee <eugenesk@amazon.com>
  • Loading branch information
@eugenesk24
eugenesk24 committed Jun 6, 2022
1 parent 99ad726 commit 81d178b
Show file tree
Hide file tree
Showing 12 changed files with 111 additions and 86 deletions.
65 changes: 49 additions & 16 deletions dashboards-observability/.cypress/integration/app_analytics.spec.js
View file
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
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
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
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
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

0 comments on commit 81d178b

Please sign in to comment.