From 8bf80a89eaeab4b861b444c1635a3ce7391b9a6c Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Fri, 14 Apr 2023 16:08:53 -0400 Subject: [PATCH 1/7] bulk update separation Signed-off-by: Derek Ho --- .../custom_panels/custom_panel_table.tsx | 2 +- public/components/custom_panels/home.tsx | 36 +++++++++---------- .../custom_panels/redux/panel_slice.ts | 13 ++++--- .../explorer/save_panel/save_panel.tsx | 15 -------- .../ppl/save_as_current_vis.ts | 28 ++++++++++++++- 5 files changed, 54 insertions(+), 40 deletions(-) diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx index c8956b86a2..745e9033e6 100644 --- a/public/components/custom_panels/custom_panel_table.tsx +++ b/public/components/custom_panels/custom_panel_table.tsx @@ -46,7 +46,7 @@ import { CustomPanelListType } from '../../../common/types/custom_panels'; import { getSampleDataModal } from '../common/helpers/add_sample_modal'; import { pageStyles } from '../../../common/constants/shared'; import { DeleteModal } from '../common/helpers/delete_modal'; -import { createPanel, fetchPanels, renameCustomPanel, selectPanelList } from './redux/panel_slice'; +import { createPanel, deletePanels, fetchPanels, renameCustomPanel, selectPanelList } from './redux/panel_slice'; /* * "CustomPanelTable" module, used to view all the saved panels diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx index 2d31001837..baa4373899 100644 --- a/public/components/custom_panels/home.tsx +++ b/public/components/custom_panels/home.tsx @@ -222,24 +222,24 @@ export const Home = ({ // Deletes multiple existing Operational Panels const deleteCustomPanelList = (customPanelIdList: string[], toastMessage: string) => { - // Promise.all([ - // deletePanelSO(customPanelIdList), - // deletePanels(customPanelIdList) - // ]).then((res) => { - // setcustomPanelData((prevCustomPanelData) => { - // return prevCustomPanelData.filter( - // (customPanel) => !customPanelIdList.includes(customPanel.id) - // ); - // }); - // setToast(toastMessage); - // }) - // .catch((err) => { - // setToast( - // 'Error deleting Operational Panels, please make sure you have the correct permission.', - // 'danger' - // ); - // console.error(err.body.message); - // }); + Promise.all([ + deletePanelSO(customPanelIdList), + deletePanels(customPanelIdList) + ]).then((res) => { + // setcustomPanelData((prevCustomPanelData) => { + // return prevCustomPanelData.filter( + // (customPanel) => !customPanelIdList.includes(customPanel.id) + // ); + // }); + // setToast(toastMessage); + }) + .catch((err) => { + setToast( + 'Error deleting Operational Panels, please make sure you have the correct permission.', + 'danger' + ); + console.error(err.body.message); + }); }; // Deletes an existing Operational Panel diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index 219b9f5b0e..223b17166e 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -1,5 +1,5 @@ import { createSelector, createSlice } from '@reduxjs/toolkit'; -import { concat, from, Observable, of } from 'rxjs'; +import { async, concat, from, Observable, of } from 'rxjs'; import { map, mergeMap, tap, toArray } from 'rxjs/operators'; import { CUSTOM_PANELS_API_PREFIX, @@ -56,10 +56,7 @@ export const panelReducer = panelSlice.reducer; export const selectPanel = (rootState): CustomPanelType => rootState.customPanel.panel; -export const selectPanelList = (rootState): CustomPanelType[] => { - // console.log('selectPanelList', { rootState, panelList: rootState.customPanel.panelList }); - return rootState.customPanel.panelList; -}; +export const selectPanelList = (rootState): CustomPanelType[] => rootState.customPanel.panelList; // export const selectPanelList = createSelector( // rootState => { console.log("selectPanelList", { rootState }); return rootState.customPanel.panelList }, @@ -146,6 +143,12 @@ export const deletePanel = (id) => async (dispatch, getState) => { dispatch(setPanelList(panelList)); }; +export const deletePanels = (ids) => async (dispatch, getState) => { + ids.array.forEach(element => { + dispatch(deletePanel(element)) + }); +} + export const createPanel = (panel) => async (dispatch, getState) => { const newPanel = await savedObjectPanelsClient.create(panel); const panelList = getState().panelList; diff --git a/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/public/components/event_analytics/explorer/save_panel/save_panel.tsx index a2dc5b44bf..d6ee5940c4 100644 --- a/public/components/event_analytics/explorer/save_panel/save_panel.tsx +++ b/public/components/event_analytics/explorer/save_panel/save_panel.tsx @@ -50,7 +50,6 @@ export const SavePanel = ({ setSubType, isSaveAsMetricEnabled, }: ISavedPanelProps) => { - const [options, setOptions] = useState([]); const [checked, setChecked] = useState(false); const [svpnlError, setSvpnlError] = useState(null); @@ -62,20 +61,6 @@ export const SavePanel = ({ dispatch(fetchPanels()); }, []); - const getCustomPabnelList = async (svobj: SavedObjects) => { - const optionRes = await svobj - .fetchCustomPanels() - .then((res: any) => { - return res; - }) - .catch((error: any) => setSvpnlError(error)); - setOptions(optionRes?.panels || []); - }; - - useEffect(() => { - getCustomPabnelList(savedObjects); - }, []); - const onToggleChange = (e: { target: { checked: React.SetStateAction } }) => { setChecked(e.target.checked); if (e.target.checked) { diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts index d6708ae4fe..1697f61c64 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { dispatch } from 'd3'; +import { indexPatternLoad } from '../../../../../../../src/plugins/data/public/index_patterns/expressions/load_index_pattern'; import { SavedQuerySaver } from './saved_query_saver'; export class SaveAsCurrentVisualization extends SavedQuerySaver { @@ -46,9 +48,33 @@ export class SaveAsCurrentVisualization extends SavedQuerySaver { } addToPanel({ selectedPanels, saveTitle, notifications, visId }) { + + // const deletePanelSO = (customPanelIdList: string[]) => { + // const soPanelIds = customPanelIdList.filter((id) => id.match(uuidRx)); + // return Promise.all( + // soPanelIds.map((id) => + // coreRefs.savedObjectsClient?.delete(CUSTOM_PANELS_SAVED_OBJECT_TYPE, id) + // ) + // ); + // }; + + // const deletePanels = (customPanelIdList: string[]) => { + // const panelIds = customPanelIdList.filter((id) => !id.match(uuidRx)); + // const concatList = panelIds.toString(); + // return http.delete(`${CUSTOM_PANELS_API_PREFIX}/panelList/` + concatList); + // }; + 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}$/; + + console.log(selectedPanels) + + const soPanels = selectedPanels.filter((id) => id.panel.id.match(uuidRx)); + const opsPanels = selectedPanels.filter((id) => !id.panel.id.match(uuidRx)) + console.log(opsPanels) + // dispatch(bulkupdateblah(sopanels, vizid)) this.panelClient .updateBulk({ - selectedCustomPanels: selectedPanels, + // selectedCustomPanels: opsPanels, + selectedCustomPanels: opsPanels, savedVisualizationId: visId, }) .then((res: any) => { From 35f260d79e7544ff44407f48fe8d385e62b4f82b Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Fri, 14 Apr 2023 16:34:28 -0400 Subject: [PATCH 2/7] fix up pr Signed-off-by: Derek Ho --- .../custom_panels/custom_panel_table.tsx | 2 +- .../custom_panels/redux/panel_slice.ts | 48 ++++++++----------- .../ppl/save_as_current_vis.ts | 25 +--------- 3 files changed, 23 insertions(+), 52 deletions(-) diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx index 745e9033e6..c8956b86a2 100644 --- a/public/components/custom_panels/custom_panel_table.tsx +++ b/public/components/custom_panels/custom_panel_table.tsx @@ -46,7 +46,7 @@ import { CustomPanelListType } from '../../../common/types/custom_panels'; import { getSampleDataModal } from '../common/helpers/add_sample_modal'; import { pageStyles } from '../../../common/constants/shared'; import { DeleteModal } from '../common/helpers/delete_modal'; -import { createPanel, deletePanels, fetchPanels, renameCustomPanel, selectPanelList } from './redux/panel_slice'; +import { createPanel, fetchPanels, renameCustomPanel, selectPanelList } from './redux/panel_slice'; /* * "CustomPanelTable" module, used to view all the saved panels diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index 223b17166e..b017c8596d 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -1,5 +1,5 @@ import { createSelector, createSlice } from '@reduxjs/toolkit'; -import { async, concat, from, Observable, of } from 'rxjs'; +import { concat, from, Observable, of } from 'rxjs'; import { map, mergeMap, tap, toArray } from 'rxjs/operators'; import { CUSTOM_PANELS_API_PREFIX, @@ -87,16 +87,18 @@ const fetchCustomPanels = async () => { const panels$: Observable = concat( fetchSavedObjectPanels$(), fetchObservabilityPanels$() - ).pipe(map((res) => { - console.log("fetchCustomPanels", res); - return res as CustomPanelListType - })); + ).pipe( + map((res) => { + console.log('fetchCustomPanels', res); + return res as CustomPanelListType; + }) + ); return panels$.pipe(toArray()).toPromise(); }; export const fetchPanels = () => async (dispatch, getState) => { - const panels = await fetchCustomPanels() + const panels = await fetchCustomPanels(); console.log('fetchPanels', { panels }); dispatch(setPanelList(panels)); }; @@ -109,31 +111,27 @@ export const fetchPanel = (id) => async (dispatch, getState) => { export const fetchVisualization = () => (dispatch, getState) => {}; -const updateLegacyPanel = (panel: CustomPanelType) => coreRefs.http! - .post(`${CUSTOM_PANELS_API_PREFIX}/panels/update`, { +const updateLegacyPanel = (panel: CustomPanelType) => + coreRefs.http!.post(`${CUSTOM_PANELS_API_PREFIX}/panels/update`, { body: JSON.stringify({ panelId: panel.id, panel: panel as PanelType }), }); const updateSavedObjectPanel = (panel: CustomPanelType) => savedObjectPanelsClient.update(panel); - 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 isUuid = (id) => !!id.match(uuidRx); - export const updatePanel = (panel: CustomPanelType) => async (dispatch, getState) => { try { - if (isUuid(panel.id)) - await updateSavedObjectPanel(panel) - else - await updateLegacyPanel(panel) + if (isUuid(panel.id)) await updateSavedObjectPanel(panel); + else await updateLegacyPanel(panel); dispatch(setPanel(panel)); const panelList = getState().customPanel.panelList.map((p) => (p.id === panel.id ? panel : p)); dispatch(setPanelList(panelList)); } catch (err) { - console.log("Error updating panel", { err, panel }) + console.log('Error updating panel', { err, panel }); } }; @@ -143,19 +141,12 @@ export const deletePanel = (id) => async (dispatch, getState) => { dispatch(setPanelList(panelList)); }; -export const deletePanels = (ids) => async (dispatch, getState) => { - ids.array.forEach(element => { - dispatch(deletePanel(element)) - }); -} - export const createPanel = (panel) => async (dispatch, getState) => { const newPanel = await savedObjectPanelsClient.create(panel); const panelList = getState().panelList; dispatch(setPanelList([...panelList, newPanel])); }; - const saveRenamedPanel = async (id, name) => { const renamePanelObject = { panelId: id, @@ -177,17 +168,20 @@ const saveRenamedPanelSO = async (id, name) => { }; // Renames an existing CustomPanel -export const renameCustomPanel = (editedCustomPanelName: string, id: string) => async (dispatch, getState) => { - console.log("renameCustomPanel dispatched", { editedCustomPanelName, id }) +export const renameCustomPanel = (editedCustomPanelName: string, id: string) => async ( + dispatch, + getState +) => { + console.log('renameCustomPanel dispatched', { editedCustomPanelName, id }); if (!isNameValid(editedCustomPanelName)) { console.log('Invalid Custom Panel name', 'danger'); return Promise.reject(); } - const panel = getState().customPanel.panelList.find(p => p.id === id) - const updatedPanel = { ...panel, title: editedCustomPanelName } - dispatch(updatePanel(updatedPanel)) + const panel = getState().customPanel.panelList.find((p) => p.id === id); + const updatedPanel = { ...panel, title: editedCustomPanelName }; + dispatch(updatePanel(updatedPanel)); // try { // // await savePanelFn(editedCustomPanelId, editedCustomPanelName); diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts index 1697f61c64..6b6019c4e3 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { dispatch } from 'd3'; -import { indexPatternLoad } from '../../../../../../../src/plugins/data/public/index_patterns/expressions/load_index_pattern'; import { SavedQuerySaver } from './saved_query_saver'; export class SaveAsCurrentVisualization extends SavedQuerySaver { @@ -48,32 +46,11 @@ export class SaveAsCurrentVisualization extends SavedQuerySaver { } addToPanel({ selectedPanels, saveTitle, notifications, visId }) { - - // const deletePanelSO = (customPanelIdList: string[]) => { - // const soPanelIds = customPanelIdList.filter((id) => id.match(uuidRx)); - // return Promise.all( - // soPanelIds.map((id) => - // coreRefs.savedObjectsClient?.delete(CUSTOM_PANELS_SAVED_OBJECT_TYPE, id) - // ) - // ); - // }; - - // const deletePanels = (customPanelIdList: string[]) => { - // const panelIds = customPanelIdList.filter((id) => !id.match(uuidRx)); - // const concatList = panelIds.toString(); - // return http.delete(`${CUSTOM_PANELS_API_PREFIX}/panelList/` + concatList); - // }; 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}$/; - - console.log(selectedPanels) - const soPanels = selectedPanels.filter((id) => id.panel.id.match(uuidRx)); - const opsPanels = selectedPanels.filter((id) => !id.panel.id.match(uuidRx)) - console.log(opsPanels) - // dispatch(bulkupdateblah(sopanels, vizid)) + const opsPanels = selectedPanels.filter((id) => !id.panel.id.match(uuidRx)); this.panelClient .updateBulk({ - // selectedCustomPanels: opsPanels, selectedCustomPanels: opsPanels, savedVisualizationId: visId, }) From ea5baf7cdc4162c1b01967d0efeb329abc8c3034 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Fri, 14 Apr 2023 16:43:35 -0400 Subject: [PATCH 3/7] individual panel delete SO Signed-off-by: Derek Ho --- public/components/custom_panels/home.tsx | 72 +++++++++++------------- 1 file changed, 34 insertions(+), 38 deletions(-) diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx index baa4373899..0276722904 100644 --- a/public/components/custom_panels/home.tsx +++ b/public/components/custom_panels/home.tsx @@ -12,6 +12,7 @@ import { StaticContext } from 'react-router'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { map, mergeMap, tap, toArray } from 'rxjs/operators'; import { concat, from, Observable, of } from 'rxjs'; +import { useDispatch } from 'react-redux'; import PPLService from '../../services/requests/ppl'; import DSLService from '../../services/requests/dsl'; import { CoreStart, SavedObjectsStart } from '../../../../../src/core/public'; @@ -39,8 +40,7 @@ import { SavedObject } from '../../../../../src/core/types'; import { CustomPanelViewSO } from './custom_panel_view_so'; import { coreRefs } from '../../framework/core_refs'; import { CustomPanelType } from '../../../common/types/custom_panels'; -import { fetchPanels } from './redux/panel_slice'; -import { useDispatch } from 'react-redux'; +import { deletePanel, fetchPanels } from './redux/panel_slice'; // import { ObjectFetcher } from '../common/objectFetcher'; @@ -80,7 +80,7 @@ export const Home = ({ const [start, setStart] = useState(''); const [end, setEnd] = useState(''); - const dispatch = useDispatch() + const dispatch = useDispatch(); const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => { if (!text) text = ''; @@ -138,7 +138,6 @@ export const Home = ({ const isUuid = (id) => !!id.match(uuidRx); - const fetchSavedObjectPanel = async (id: string) => { const soPanel = await coreRefs.savedObjectsClient?.get(CUSTOM_PANELS_SAVED_OBJECT_TYPE, id); return savedObjectToCustomPanel(soPanel); @@ -167,19 +166,15 @@ export const Home = ({ 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, @@ -222,17 +217,15 @@ export const Home = ({ // Deletes multiple existing Operational Panels const deleteCustomPanelList = (customPanelIdList: string[], toastMessage: string) => { - Promise.all([ - deletePanelSO(customPanelIdList), - deletePanels(customPanelIdList) - ]).then((res) => { - // setcustomPanelData((prevCustomPanelData) => { - // return prevCustomPanelData.filter( - // (customPanel) => !customPanelIdList.includes(customPanel.id) - // ); - // }); - // setToast(toastMessage); - }) + Promise.all([deletePanelSO(customPanelIdList), deletePanels(customPanelIdList)]) + .then((res) => { + // setcustomPanelData((prevCustomPanelData) => { + // return prevCustomPanelData.filter( + // (customPanel) => !customPanelIdList.includes(customPanel.id) + // ); + // }); + // setToast(toastMessage); + }) .catch((err) => { setToast( 'Error deleting Operational Panels, please make sure you have the correct permission.', @@ -244,22 +237,26 @@ export const Home = ({ // Deletes an existing Operational Panel const deleteCustomPanel = async (customPanelId: string, customPanelName: string) => { - // return http - // .delete(`${CUSTOM_PANELS_API_PREFIX}/panels/` + customPanelId) - // .then((res) => { - // setcustomPanelData((prevCustomPanelData) => { - // return prevCustomPanelData.filter((customPanel) => customPanel.id !== customPanelId); - // }); - // setToast(`Operational Panel "${customPanelName}" successfully deleted!`); - // return res; - // }) - // .catch((err) => { - // setToast( - // 'Error deleting Operational Panel, please make sure you have the correct permission.', - // 'danger' - // ); - // console.error(err.body.message); - // }); + return http + .delete(`${CUSTOM_PANELS_API_PREFIX}/panels/` + customPanelId) + .then((res) => { + dispatch(fetchPanels()); + setToast(`Operational Panel "${customPanelName}" successfully deleted!`); + return res; + }) + .catch((err) => { + setToast( + 'Error deleting Operational Panel, please make sure you have the correct permission.', + 'danger' + ); + console.error(err.body.message); + }); + }; + + // Deletes an existing SO Operational Panel + const deleteCustomPanelSO = async (customPanelId: string, customPanelName: string) => { + dispatch(deletePanel(customPanelId)); + // TODO: toast here }; const addSamplePanels = async () => { @@ -301,8 +298,7 @@ export const Home = ({ }), }) .then((res) => { - dispatch(fetchPanels()) - // setcustomPanelData([...customPanelData, ...res.demoPanelsData]); + dispatch(fetchPanels()); }); setToast(`Sample panels successfully added.`); } catch (err: any) { @@ -354,7 +350,7 @@ export const Home = ({ chrome={chrome} parentBreadcrumbs={parentBreadcrumbs} cloneCustomPanel={cloneCustomPanel} - deleteCustomPanel={deleteCustomPanel} + deleteCustomPanel={deleteCustomPanelSO} setToast={setToast} onEditClick={onEditClick} page="operationalPanels" From 2b1837ee76a50bdc1e411588d77a424529af66a6 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Fri, 14 Apr 2023 16:57:46 -0400 Subject: [PATCH 4/7] also separate out on newly created ones Signed-off-by: Derek Ho --- .../saved_objects/saved_object_savers/ppl/save_as_new_vis.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts index b0c57d4c7d..76ddade45d 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts @@ -76,9 +76,12 @@ export class SaveAsNewVisualization extends SavedQuerySaver { } addToPanel({ selectedPanels, saveTitle, notifications, visId }) { + 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 soPanels = selectedPanels.filter((id) => id.panel.id.match(uuidRx)); + const opsPanels = selectedPanels.filter((id) => !id.panel.id.match(uuidRx)); this.panelClient .updateBulk({ - selectedCustomPanels: selectedPanels, + selectedCustomPanels: opsPanels, savedVisualizationId: visId, }) .then((res: any) => { From d5bc709d61f122c32d8af24c0897325517281e63 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Mon, 17 Apr 2023 13:15:49 -0400 Subject: [PATCH 5/7] resolve pr comments Signed-off-by: Derek Ho --- public/components/custom_panels/home.tsx | 10 +--------- public/components/custom_panels/redux/panel_slice.ts | 2 +- .../saved_object_savers/ppl/save_as_current_vis.ts | 6 +++--- .../saved_object_savers/ppl/save_as_new_vis.ts | 6 +++--- 4 files changed, 8 insertions(+), 16 deletions(-) diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx index 1c14742f14..39739ab416 100644 --- a/public/components/custom_panels/home.tsx +++ b/public/components/custom_panels/home.tsx @@ -32,18 +32,12 @@ import { ObservabilityPanelAttrs, PanelType, } from '../../../common/types/custom_panels'; -import { ObservabilitySideBar } from '../common/side_nav'; import { CustomPanelTable } from './custom_panel_table'; import { CustomPanelView } from './custom_panel_view'; import { isNameValid } from './helpers/utils'; import { CustomPanelViewSO } from './custom_panel_view_so'; import { coreRefs } from '../../framework/core_refs'; -<<<<<<< HEAD -import { CustomPanelType } from '../../../common/types/custom_panels'; -import { deletePanel, fetchPanels } from './redux/panel_slice'; -======= -import { fetchPanels } from './redux/panel_slice'; ->>>>>>> 5f2b777a2c7963680f4bea3746e6badea65b9303 +import { deletePanel, fetchPanels, uuidRx } from './redux/panel_slice'; // import { ObjectFetcher } from '../common/objectFetcher'; @@ -148,8 +142,6 @@ export const Home = ({ }); }; - 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 isUuid = (id) => !!id.match(uuidRx); const fetchSavedObjectPanel = async (id: string) => { diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index b017c8596d..d7bdf06b26 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -118,7 +118,7 @@ const updateLegacyPanel = (panel: CustomPanelType) => const updateSavedObjectPanel = (panel: CustomPanelType) => savedObjectPanelsClient.update(panel); -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}$/; +export 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 isUuid = (id) => !!id.match(uuidRx); diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts index 6b6019c4e3..e9eb4bdb5f 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts @@ -3,6 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { uuidRx } from '../../../../../public/components/custom_panels/redux/panel_slice'; import { SavedQuerySaver } from './saved_query_saver'; export class SaveAsCurrentVisualization extends SavedQuerySaver { @@ -46,9 +47,8 @@ export class SaveAsCurrentVisualization extends SavedQuerySaver { } addToPanel({ selectedPanels, saveTitle, notifications, visId }) { - 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 soPanels = selectedPanels.filter((id) => id.panel.id.match(uuidRx)); - const opsPanels = selectedPanels.filter((id) => !id.panel.id.match(uuidRx)); + const soPanels = selectedPanels.filter((panel) => panel.panel.id.test(uuidRx)); + const opsPanels = selectedPanels.filter((panel) => !panel.panel.id.test(uuidRx)); this.panelClient .updateBulk({ selectedCustomPanels: opsPanels, diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts index 76ddade45d..713ecf31e0 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts @@ -3,6 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { uuidRx } from '../../../../../public/components/custom_panels/redux/panel_slice'; import { SAVED_OBJECT_ID, SAVED_OBJECT_TYPE, @@ -76,9 +77,8 @@ export class SaveAsNewVisualization extends SavedQuerySaver { } addToPanel({ selectedPanels, saveTitle, notifications, visId }) { - 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 soPanels = selectedPanels.filter((id) => id.panel.id.match(uuidRx)); - const opsPanels = selectedPanels.filter((id) => !id.panel.id.match(uuidRx)); + const soPanels = selectedPanels.filter((panel) => panel.panel.id.test(uuidRx)); + const opsPanels = selectedPanels.filter((panel) => !panel.panel.id.test(uuidRx)); this.panelClient .updateBulk({ selectedCustomPanels: opsPanels, From 9a0d1507c856f9eca0a6d41669af1de8cdb2b713 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Mon, 17 Apr 2023 14:01:19 -0400 Subject: [PATCH 6/7] bulk update new so panels Signed-off-by: Derek Ho --- .../helpers/add_visualization_helper.ts | 2 +- .../custom_panels/redux/panel_slice.ts | 23 ++++++++++++++++++- .../ppl/save_as_current_vis.ts | 8 ++++++- .../ppl/save_as_new_vis.ts | 11 ++++++++- 4 files changed, 40 insertions(+), 4 deletions(-) diff --git a/public/components/custom_panels/helpers/add_visualization_helper.ts b/public/components/custom_panels/helpers/add_visualization_helper.ts index 9b7b5c2369..5c57ab53a2 100644 --- a/public/components/custom_panels/helpers/add_visualization_helper.ts +++ b/public/components/custom_panels/helpers/add_visualization_helper.ts @@ -58,7 +58,7 @@ export const addVisualizationPanel = ( // client: ILegacyScopedClusterClient, // panelId: string, savedVisualizationId: string, - oldVisualizationId?: string, + oldVisualizationId: string | undefined, allPanelVisualizations: VisualizationType[] ) => { try { diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index d7bdf06b26..3f71b41dd3 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -1,6 +1,7 @@ import { createSelector, createSlice } from '@reduxjs/toolkit'; -import { concat, from, Observable, of } from 'rxjs'; +import { async, concat, from, Observable, of } from 'rxjs'; import { map, mergeMap, tap, toArray } from 'rxjs/operators'; +import { forEach } from 'lodash'; import { CUSTOM_PANELS_API_PREFIX, CUSTOM_PANELS_SAVED_OBJECT_TYPE, @@ -16,6 +17,7 @@ import { import { coreRefs } from '../../../framework/core_refs'; import { SavedObject, SimpleSavedObject } from '../../../../../../src/core/public'; import { isNameValid } from '../helpers/utils'; +import { addVisualizationPanel } from '../helpers/add_visualization_helper'; interface InitialState { id: string; @@ -135,6 +137,25 @@ export const updatePanel = (panel: CustomPanelType) => async (dispatch, getState } }; +export const addVizToPanels = (panels, vizId) => async (dispatch, getState) => { + forEach(panels, (oldPanel) => { + console.log(oldPanel); + console.log(getState().customPanel.panelList); + const panel = getState().customPanel.panelList.find((p) => p.id === oldPanel.panel.id); + + const allVisualizations = panel!.visualizations; + + const visualizationsWithNewPanel = addVisualizationPanel(vizId, undefined, allVisualizations); + + const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel }; + try { + dispatch(updatePanel(updatedPanel)); + } catch (err) { + console.error(err?.body?.message || err); + } + }); +}; + export const deletePanel = (id) => async (dispatch, getState) => { await savedObjectPanelsClient.delete(id); const panelList: CustomPanelType[] = getState().panelList.filter((p) => p.id !== id); diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts index e9eb4bdb5f..950d8b0df4 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts @@ -3,7 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { uuidRx } from '../../../../../public/components/custom_panels/redux/panel_slice'; +import { + addVizToPanels, + uuidRx, +} from '../../../../../public/components/custom_panels/redux/panel_slice'; import { SavedQuerySaver } from './saved_query_saver'; export class SaveAsCurrentVisualization extends SavedQuerySaver { @@ -47,8 +50,11 @@ export class SaveAsCurrentVisualization extends SavedQuerySaver { } addToPanel({ selectedPanels, saveTitle, notifications, visId }) { + const { dispatch } = this.dispatchers; const soPanels = selectedPanels.filter((panel) => panel.panel.id.test(uuidRx)); const opsPanels = selectedPanels.filter((panel) => !panel.panel.id.test(uuidRx)); + dispatch(addVizToPanels(soPanels, visId)); + this.panelClient .updateBulk({ selectedCustomPanels: opsPanels, diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts index 713ecf31e0..94da59917d 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts @@ -3,7 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { uuidRx } from '../../../../../public/components/custom_panels/redux/panel_slice'; +import { forEach } from 'lodash'; +import { + addVizToPanels, + fetchPanel, + uuidRx, +} from '../../../../../public/components/custom_panels/redux/panel_slice'; import { SAVED_OBJECT_ID, SAVED_OBJECT_TYPE, @@ -11,6 +16,7 @@ import { } from '../../../../../common/constants/explorer'; import { ISavedObjectsClient } from '../../saved_object_client/client_interface'; import { SavedQuerySaver } from './saved_query_saver'; +import { addVisualizationPanel } from '../../../../../public/components/custom_panels/helpers/add_visualization_helper'; export class SaveAsNewVisualization extends SavedQuerySaver { constructor( @@ -77,8 +83,11 @@ export class SaveAsNewVisualization extends SavedQuerySaver { } addToPanel({ selectedPanels, saveTitle, notifications, visId }) { + const { dispatch } = this.dispatchers; const soPanels = selectedPanels.filter((panel) => panel.panel.id.test(uuidRx)); const opsPanels = selectedPanels.filter((panel) => !panel.panel.id.test(uuidRx)); + + dispatch(addVizToPanels(soPanels, visId)); this.panelClient .updateBulk({ selectedCustomPanels: opsPanels, From 19b9c9f7dd45e1b1531e750b1c1cfaf74b614a5d Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Mon, 17 Apr 2023 14:10:22 -0400 Subject: [PATCH 7/7] fix PR Signed-off-by: Derek Ho --- public/components/custom_panels/redux/panel_slice.ts | 2 -- .../saved_object_savers/ppl/save_as_current_vis.ts | 4 ++-- .../saved_objects/saved_object_savers/ppl/save_as_new_vis.ts | 4 ++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index 3f71b41dd3..766c73e1c7 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -139,8 +139,6 @@ export const updatePanel = (panel: CustomPanelType) => async (dispatch, getState export const addVizToPanels = (panels, vizId) => async (dispatch, getState) => { forEach(panels, (oldPanel) => { - console.log(oldPanel); - console.log(getState().customPanel.panelList); const panel = getState().customPanel.panelList.find((p) => p.id === oldPanel.panel.id); const allVisualizations = panel!.visualizations; diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts index 950d8b0df4..7eb552586c 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts @@ -51,8 +51,8 @@ export class SaveAsCurrentVisualization extends SavedQuerySaver { addToPanel({ selectedPanels, saveTitle, notifications, visId }) { const { dispatch } = this.dispatchers; - const soPanels = selectedPanels.filter((panel) => panel.panel.id.test(uuidRx)); - const opsPanels = selectedPanels.filter((panel) => !panel.panel.id.test(uuidRx)); + const soPanels = selectedPanels.filter((panel) => uuidRx.test(panel.panel.id)); + const opsPanels = selectedPanels.filter((panel) => !uuidRx.test(panel.panel.id)); dispatch(addVizToPanels(soPanels, visId)); this.panelClient diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts index 94da59917d..9d3821740d 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts @@ -84,8 +84,8 @@ export class SaveAsNewVisualization extends SavedQuerySaver { addToPanel({ selectedPanels, saveTitle, notifications, visId }) { const { dispatch } = this.dispatchers; - const soPanels = selectedPanels.filter((panel) => panel.panel.id.test(uuidRx)); - const opsPanels = selectedPanels.filter((panel) => !panel.panel.id.test(uuidRx)); + const soPanels = selectedPanels.filter((panel) => uuidRx.test(panel.panel.id)); + const opsPanels = selectedPanels.filter((panel) => !uuidRx.test(panel.panel.id)); dispatch(addVizToPanels(soPanels, visId)); this.panelClient