Skip to content

Commit

Permalink
bulk update separation (#356)
Browse files Browse the repository at this point in the history
* bulk update separation

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix up pr

Signed-off-by: Derek Ho <dxho@amazon.com>

* individual panel delete SO

Signed-off-by: Derek Ho <dxho@amazon.com>

* also separate out on newly created ones

Signed-off-by: Derek Ho <dxho@amazon.com>

* resolve pr comments

Signed-off-by: Derek Ho <dxho@amazon.com>

* bulk update new so panels

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix PR

Signed-off-by: Derek Ho <dxho@amazon.com>

---------

Signed-off-by: Derek Ho <dxho@amazon.com>
  • Loading branch information
derek-ho authored Apr 17, 2023
1 parent aad37d8 commit b0a87fc
Show file tree
Hide file tree
Showing 6 changed files with 82 additions and 64 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const addVisualizationPanel = (
// client: ILegacyScopedClusterClient,
// panelId: string,
savedVisualizationId: string,
oldVisualizationId?: string,
oldVisualizationId: string | undefined,
allPanelVisualizations: VisualizationType[]
) => {
try {
Expand Down
76 changes: 37 additions & 39 deletions public/components/custom_panels/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +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';
import { fetchPanels } from './redux/panel_slice';
import { deletePanel, fetchPanels, uuidRx } from './redux/panel_slice';

// import { ObjectFetcher } from '../common/objectFetcher';

Expand Down Expand Up @@ -143,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) => {
Expand Down Expand Up @@ -178,44 +175,46 @@ 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
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 () => {
Expand Down Expand Up @@ -258,7 +257,6 @@ export const Home = ({
})
.then((res) => {
dispatch(fetchPanels());
// setcustomPanelData([...customPanelData, ...res.demoPanelsData]);
});
setToast(`Sample panels successfully added.`);
} catch (err: any) {
Expand Down
28 changes: 21 additions & 7 deletions public/components/custom_panels/redux/panel_slice.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -59,10 +61,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 },
Expand Down Expand Up @@ -125,8 +124,6 @@ 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}$/;

const isUuid = (id) => !!id.match(uuidRx);

export const updatePanel = (panel: CustomPanelType) => async (dispatch, getState) => {
Expand All @@ -142,6 +139,23 @@ export const updatePanel = (panel: CustomPanelType) => async (dispatch, getState
}
};

export const addVizToPanels = (panels, vizId) => async (dispatch, getState) => {
forEach(panels, (oldPanel) => {
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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ export const SavePanel = ({
setSubType,
isSaveAsMetricEnabled,
}: ISavedPanelProps) => {
const [options, setOptions] = useState([]);
const [checked, setChecked] = useState(false);
const [svpnlError, setSvpnlError] = useState(null);

Expand All @@ -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<boolean> } }) => {
setChecked(e.target.checked);
if (e.target.checked) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
* SPDX-License-Identifier: Apache-2.0
*/

import {
addVizToPanels,
uuidRx,
} from '../../../../../public/components/custom_panels/redux/panel_slice';
import { SavedQuerySaver } from './saved_query_saver';

export class SaveAsCurrentVisualization extends SavedQuerySaver {
Expand Down Expand Up @@ -46,9 +50,14 @@ export class SaveAsCurrentVisualization extends SavedQuerySaver {
}

addToPanel({ selectedPanels, saveTitle, notifications, visId }) {
const { dispatch } = this.dispatchers;
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
.updateBulk({
selectedCustomPanels: selectedPanels,
selectedCustomPanels: opsPanels,
savedVisualizationId: visId,
})
.then((res: any) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,20 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { forEach } from 'lodash';
import {
addVizToPanels,
fetchPanel,
uuidRx,
} from '../../../../../public/components/custom_panels/redux/panel_slice';
import {
SAVED_OBJECT_ID,
SAVED_OBJECT_TYPE,
SAVED_VISUALIZATION,
} 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(
Expand Down Expand Up @@ -76,9 +83,14 @@ export class SaveAsNewVisualization extends SavedQuerySaver {
}

addToPanel({ selectedPanels, saveTitle, notifications, visId }) {
const { dispatch } = this.dispatchers;
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
.updateBulk({
selectedCustomPanels: selectedPanels,
selectedCustomPanels: opsPanels,
savedVisualizationId: visId,
})
.then((res: any) => {
Expand Down

0 comments on commit b0a87fc

Please sign in to comment.