Skip to content

Commit

Permalink
Fix Panels Duplication Action
Browse files Browse the repository at this point in the history 
- Fix stability of 3_panels.spec.ts E2E test
- Fix Explorer/Visualizaitons routes and Exolorer-Create

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
  • Loading branch information
Peter Fitzgibbons committed Apr 16, 2023
1 parent f625a53 commit 6886b60
Show file tree
Hide file tree
Showing 7 changed files with 80 additions and 133 deletions.
122 changes: 67 additions & 55 deletions .cypress/integration/3_panels.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,10 @@ describe('Testing panels table', () => {
});

describe('Without Any Panels', () => {
beforeEach(() => {
moveToPanelHome();
});

it('Displays error toast for invalid panel name', () => {
clickCreatePanelButton();
confirmModal();
Expand All @@ -101,18 +105,25 @@ describe('Testing panels table', () => {
});

describe('with a Legacy Panel', () => {
it('Duplicates the legacy panel', () => {
beforeEach(() => {
createLegacyPanel();
moveToPanelHome();
});

it('Duplicates a legacy panel', () => {
cy.get('.euiTableRow').should('have.length', 1);
selectThePanel();
openActionsDropdown();
cy.get('button[data-test-subj="duplicateContextMenuItem"]').click();
cy.get('button[data-test-subj="runModalButton"]').click();
cy.contains(TEST_PANEL + ' (copy)').should('exist');
const duplicate = testPanelTableCell();
cy.get('.euiTableRow').should('have.length', 2);
const duplicateName = TEST_PANEL + ' (copy)';
cy.contains(duplicateName).should('exist');
const duplicate = cy.get('.euiLink').contains(duplicateName);
expectUuid(duplicate);
});

it('Renames the legacy panel', () => {
it('Renames the panel', () => {
createLegacyPanel();
cy.reload();
const cell = cy.get('.euiTableCellContent');
Expand All @@ -126,7 +137,7 @@ describe('Testing panels table', () => {
expectUuid(renamed);
});

it('Deletes the legacy panel', () => {
it('Deletes the panel', () => {
cy.get('input[data-test-subj="checkboxSelectAll"]').click();
openActionsDropdown();
cy.get('button[data-test-subj="deleteContextMenuItem"]').click();
Expand All @@ -142,25 +153,27 @@ describe('Testing panels table', () => {
});

describe('with a SavedObjects Panel', () => {
it.only('Duplicates a saved object panel', () => {
createSavedObjectPanel()
cy.reload();
cy.wait(250)
beforeEach(() => {
createSavedObjectPanel();
moveToPanelHome();
cy.get('.euiTableRow').should('have.length', 1);
});

it('Duplicates the panel', () => {
selectThePanel();
cy.wait(250)
openActionsDropdown();
console.log('about to click duplicate');
cy.get('button[data-test-subj="duplicateContextMenuItem"]').click();
cy.get('button[data-test-subj="runModalButton"]').click();
const duplicateName = TEST_PANEL + " (copy)"
console.log('confirmed modal');
const duplicateName = TEST_PANEL + ' (copy)';
cy.get('.euiTableRow').should('have.length', 2);
cy.contains(duplicateName).should('exist');
const duplicate = cy.get('.euiLink').contains(duplicateName).parent()
expectUuid(duplicate)
const duplicate = cy.get('.euiLink').contains(duplicateName);
expectUuid(duplicate);
});

it('Renames a saved-objects panel', () => {
createSavedObjectPanel();
cy.reload();

it('Renames the panel', () => {
selectThePanel();
openActionsDropdown();
cy.get('button[data-test-subj="renameContextMenuItem"]').click();
Expand All @@ -170,7 +183,7 @@ describe('Testing panels table', () => {
cy.get('button[data-test-subj="runModalButton"]').click();
});

it('Deletes saved object panels', () => {
it('Deletes the panel', () => {
createSavedObjectPanel();
cy.get('input[data-test-subj="checkboxSelectAll"]').click();
openActionsDropdown();
Expand Down Expand Up @@ -209,6 +222,7 @@ describe('Testing panels table', () => {
});

it('Create a panel for testing', () => {
moveToPanelHome();
// keep a panel for testing
clickCreatePanelButton();
cy.get('input.euiFieldText').focus().type(TEST_PANEL, {
Expand Down Expand Up @@ -524,18 +538,18 @@ describe('Clean up all test data', () => {
});

const moveToEventsHome = () => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-events#/`);
cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/`);
cy.wait(delay * 3);
};

const moveToPanelHome = () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/`
, {timeout: 3000});
cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/`, {
timeout: 3000,
});
cy.wait(delay * 3);
};

const testPanelTableCell = (name = TEST_PANEL) => cy.get('.euiTableCellContent').contains(name)
const testPanelTableCell = (name = TEST_PANEL) => cy.get('.euiTableCellContent').contains(name);

const moveToTestPanel = () => {
moveToPanelHome();
Expand All @@ -556,25 +570,22 @@ const eraseLegacyPanels = () => {
'osd-xsrf': true,
},
}).then((response) => {
response.body.panels
.map(panel => {
cy.request({
method: 'DELETE',
failOnStatusCode: false,
url: `api/observability/operational_panels/panels/${panel.id}`,
headers: {
'content-type': 'application/json;charset=UTF-8',
'osd-xsrf': true,
}
}).then(response => {
const deletedId = response.allRequestResponses[0]['Request URL'].split('/').slice(-1)
console.log("erased panel", deletedId)
})
}
)
}
)
}
response.body.panels.map((panel) => {
cy.request({
method: 'DELETE',
failOnStatusCode: false,
url: `api/observability/operational_panels/panels/${panel.id}`,
headers: {
'content-type': 'application/json;charset=UTF-8',
'osd-xsrf': true,
},
}).then((response) => {
const deletedId = response.allRequestResponses[0]['Request URL'].split('/').slice(-1);
console.log('erased panel', deletedId);
});
});
});
};

const eraseSavedObjectPaenls = () => {
return cy
Expand Down Expand Up @@ -603,9 +614,9 @@ const eraseSavedObjectPaenls = () => {
};

const eraseTestPanels = () => {
eraseLegacyPanels()
eraseSavedObjectPaenls()
}
eraseLegacyPanels();
eraseSavedObjectPaenls();
};
const uuidRx = /[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/;

const clickCreatePanelButton = () =>
Expand Down Expand Up @@ -640,7 +651,10 @@ const createSavedObjectPanel = () => {
},
},
})
.then((response) => console.log(response));
.then((response) => {
console.log('savedObject panel created', response);
moveToPanelHome();
});
};

const createLegacyPanel = () => {
Expand All @@ -656,16 +670,12 @@ const createLegacyPanel = () => {
});
};

const expectUuid = (cell) => {
cell.find('a').its('href').should('match', uuidRx);
// const id = url.split('/').slice(-1)
// expect(id).not.to.match(uuidRx)
const expectUuid = (anchorElem) => {
anchorElem.invoke('attr', 'href').should('match', uuidRx);
};

const expectLegacyId = (cell) => {
cell.find('a').its('href').should('not.match', uuidRx);
// const id = url.split('/').slice(-1)
// expect(id).not.to.match(uuidRx)
const expectLegacyId = (anchorElem) => {
anchorElem.invoke('attr', 'href').should('not.match', uuidRx);
};

const clickDeleteAction = () => {
Expand All @@ -677,7 +687,9 @@ const openActionsDropdown = () => {
};

const selectThePanel = () => {
cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).trigger('mouseover').click();
cy.get('.euiCheckbox__input[title="Select this row"]').then(() => {
cy.get('.euiCheckbox__input[title="Select this row"]').check({ force: true });
});
};

const expectToastWith = (title) => {
Expand Down
10 changes: 2 additions & 8 deletions public/components/custom_panels/custom_panel_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,15 +129,9 @@ export const CustomPanelTable = ({

const onClone = async (newName: string) => {
const sourcePanel = selectedCustomPanels[0];
console.log('onClone', { sourcePanel });
if (sourcePanel.savedObject) {
const { id, ...newPanel } = { ...sourcePanel, title: sourcePanel.title + ' (copy)' };
console.log('onClone', { newPanel });
const { id, ...newPanel } = { ...sourcePanel, title: sourcePanel.title + ' (copy)' };

dispatch(createPanel(newPanel));
} else {
cloneCustomPanel(newName, selectedCustomPanels[0].id);
}
dispatch(createPanel(newPanel));
closeModal();
};

Expand Down
22 changes: 8 additions & 14 deletions public/components/custom_panels/custom_panel_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import React, { useEffect, useState } from 'react';
import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
import moment from 'moment';
import _ from 'lodash';
import { useDispatch, useSelector } from 'react-redux';
import DSLService from '../../services/requests/dsl';
import { CoreStart } from '../../../../../src/core/public';
import { EmptyPanelView } from './panel_modules/empty_panel';
Expand All @@ -49,10 +48,9 @@ import PPLService from '../../services/requests/ppl';
import {
isDateValid,
convertDateTime,
prependRecentlyUsedRange as onTimeChange,
onTimeChange,
isPPLFilterValid,
fetchVisualizationById,
prependRecentlyUsedRange,
} from './helpers/utils';
import { UI_DATE_FORMAT } from '../../../common/constants/shared';
import { VisaulizationFlyout } from './panel_modules/visualization_flyout';
Expand All @@ -66,7 +64,6 @@ import {
} from '../common/search/autocomplete_logic';
import { AddVisualizationPopover } from './helpers/add_visualization_popover';
import { DeleteModal } from '../common/helpers/delete_modal';
import { selectPanel, updatePanel } from './redux/panel_slice';

/*
* "CustomPanelsView" module used to render an Operational Panel
Expand Down Expand Up @@ -145,9 +142,6 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
onAddClick,
} = props;

const dispatch = useDispatch();
const panel = useSelector(selectPanel);

const [openPanelName, setOpenPanelName] = useState('');
const [panelCreatedTime, setPanelCreatedTime] = useState('');
const [pplFilterValue, setPPLFilterValue] = useState('');
Expand Down Expand Up @@ -214,14 +208,14 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
};

const onDatePickerChange = (timeProps: OnTimeChangeProps) => {
const updatedRanges = prependRecentlyUsedRange(
onTimeChange(
timeProps.start,
timeProps.end,
recentlyUsedRanges
recentlyUsedRanges,
setRecentlyUsedRanges,
setStartTime,
setEndTime
);
dispatch(updatePanel({ ...panel, timeRange: { from: timeProps.start, to: timeProps.end } }));

setRecentlyUsedRanges(updatedRanges.slice(0, 9));
onRefreshFilters(timeProps.start, timeProps.end);
};

Expand Down Expand Up @@ -643,8 +637,8 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
<EuiFlexItem grow={false}>
<EuiSuperDatePicker
dateFormat={uiSettingsService.get('dateFormat')}
start={panel.timeRange.from}
end={panel.timeRange.to}
start={startTime}
end={endTime}
onTimeChange={onDatePickerChange}
recentlyUsedRanges={recentlyUsedRanges}
isDisabled={dateDisabled}
Expand Down
51 changes: 0 additions & 51 deletions public/components/custom_panels/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,54 +161,6 @@ export const Home = ({
// });
};

// Clones an existing Custom Panel, return new Custom Panel id
const cloneCustomPanel = async (
clonedCustomPanelName: string,
clonedCustomPanelId: string
): Promise<string> => {
if (!isNameValid(clonedCustomPanelName)) {
setToast('Invalid Operational Panel name', 'danger');
return Promise.reject();
}

const fetchPanelFn = isUuid(clonedCustomPanelId) ? fetchSavedObjectPanel : fetchLegacyPanel;

try {
// const panelToClone = await fetchPanelfn(clonedCustomPanelId)
// const newPanel: PanelType = {
// ...panelToClone,
// title: clonedCustomPanelName,
// dateCreated: new Date().getTime(),
// dateModified: new Date().getTime()
// }
// const clonedPanel: CustomPanelType = await coreRefs.savedObjectsClient!.create(
// CUSTOM_PANELS_SAVED_OBJECT_TYPE, newPanel, { id: panelToClone.id }
// )
// setcustomPanelData((prevCustomPanelData) => {
// const newPanelData = [
// ...prevCustomPanelData,
// {
// id: clonedPanel.id,
// title: clonedCustomPanelName,
// dateCreated: clonedPanel.dateCreated,
// dateModified: clonedPanel.dateModified,
// },
// ];
// console.log("setcustomPanelData", newPanelData)
// return newPanelData
// });
// setToast(`Operational Panel "${clonedCustomPanelName}" successfully created!`);
// return clonedPanel.id;
} catch (err) {
setToast(
'Error cloning Operational Panel, please make sure you have the correct permission.',
'danger'
);
}

console.error(err.body.message);
};

const deletePanelSO = (customPanelIdList: string[]) => {
const soPanelIds = customPanelIdList.filter((id) => id.match(uuidRx));
return Promise.all(
Expand Down Expand Up @@ -340,7 +292,6 @@ export const Home = ({
createCustomPanel={createCustomPanel}
setBreadcrumbs={chrome.setBreadcrumbs}
parentBreadcrumbs={customPanelBreadCrumbs}
cloneCustomPanel={cloneCustomPanel}
deleteCustomPanelList={deleteCustomPanelList}
addSamplePanels={addSamplePanels}
/>
Expand All @@ -357,7 +308,6 @@ export const Home = ({
panelId={props.match.params.id}
chrome={chrome}
parentBreadcrumbs={customPanelBreadCrumbs}
cloneCustomPanel={cloneCustomPanel}
deleteCustomPanel={deleteCustomPanel}
setToast={setToast}
onEditClick={onEditClick}
Expand All @@ -373,7 +323,6 @@ export const Home = ({
chrome={chrome}
parentBreadcrumbs={customPanelBreadCrumbs}
// renameCustomPanel={renameCustomPanel}
cloneCustomPanel={cloneCustomPanel}
deleteCustomPanel={deleteCustomPanel}
setToast={setToast}
onEditClick={onEditClick}
Expand Down
Loading

0 comments on commit 6886b60

Please sign in to comment.