From 626bdb4ae2fb739298a39bf6f8299ef820fa6272 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Mon, 24 Apr 2023 23:08:39 -0700 Subject: [PATCH 1/2] fix for SOpanels editMode Signed-off-by: Shenoy Pratik --- .../custom_panels/custom_panel_view_so.tsx | 34 ++++---------- .../panel_grid/panel_grid_so.tsx | 19 ++++---- .../visualization_flyout_so.tsx | 47 ++----------------- 3 files changed, 22 insertions(+), 78 deletions(-) diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx index 52b19ea1a..9d32b6b75 100644 --- a/public/components/custom_panels/custom_panel_view_so.tsx +++ b/public/components/custom_panels/custom_panel_view_so.tsx @@ -55,17 +55,14 @@ import { PanelGridSO } from './panel_modules/panel_grid/panel_grid_so'; import { VisaulizationFlyoutSO } from './panel_modules/visualization_flyout/visualization_flyout_so'; import { clonePanel, - createPanel, deletePanels, fetchPanel, - newPanelTemplate, selectPanel, setPanel, - setPanelEt, - setPanelId, - setPanelSt, updatePanel, } from './redux/panel_slice'; +import PPLService from '../../services/requests/ppl'; +import DSLService from '../../services/requests/dsl'; /* * "CustomPanelsView" module used to render an Observability Dashboard @@ -277,21 +274,10 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { }; // toggle between panel edit mode - - const startEdit = () => { - setIsEditing(true); - }; - - const applyEdits = useCallback(() => { - dispatch(updatePanel(panel)); - setIsEditing(false); - setEditActionType('save'); - }, [panel]); - - const cancelEdit = () => { - console.log('cancelEdits'); - dispatch(fetchPanel(panelId)); - setIsEditing(false); + const editPanel = (editType: string) => { + setIsEditing(!isEditing); + if (editType === 'cancel') dispatch(fetchPanel(panelId)); + setEditActionType(editType); }; const closeFlyout = () => { @@ -407,23 +393,23 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { data-test-subj="cancelPanelButton" iconType="cross" color="danger" - onClick={cancelEdit} + onClick={() => editPanel('cancel')} > Cancel ); const saveButton = ( - + editPanel('save')}> Save ); const editButton = ( editPanel('edit')} disabled={editDisabled} > Edit diff --git a/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx b/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx index 1f9a68e44..a2fa5e02b 100644 --- a/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx +++ b/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx @@ -153,17 +153,14 @@ export const PanelGridSO = (props: PanelGridProps) => { }; // Save Visualization Layouts when not in edit mode anymore (after users saves the panel) - const saveVisualizationLayouts = useCallback( - async (panelID: string, visualizationParams: any) => { - const newVisualizations = updateLayout(panel.visualizations, visualizationParams); - const updateRes = await coreRefs.savedObjectsClient?.update('observability-panel', panelID, { - ...panel, - visualizations: newVisualizations, - }); - setPanelVisualizations(updateRes?.attributes?.visualizations || []); - }, - [panel] - ); + const saveVisualizationLayouts = async (panelID: string, visualizationParams: any) => { + const newVisualizations = updateLayout(panel.visualizations, visualizationParams); + const updateRes = await coreRefs.savedObjectsClient?.update('observability-panel', panelID, { + ...panel, + visualizations: newVisualizations, + }); + setPanelVisualizations(updateRes?.attributes?.visualizations || []); + }; // Update layout whenever user edit gets completed useEffect(() => { diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx index 589cd7dea..6258349b2 100644 --- a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx +++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx @@ -32,9 +32,8 @@ import { EuiToolTip, ShortDate, } from '@elastic/eui'; -import _, { isError } from 'lodash'; +import _ from 'lodash'; import React, { useEffect, useState } from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { useDispatch, useSelector } from 'react-redux'; import { FlyoutContainers } from '../../../common/flyout_containers'; import { @@ -46,23 +45,17 @@ import { import { convertDateTime } from '../../helpers/utils'; import PPLService from '../../../../services/requests/ppl'; import { CoreStart } from '../../../../../../../src/core/public'; -import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels'; import { - BoxType, - PplResponse, + PPLResponse, SavedVisualizationType, VisualizationType, VizContainerError, } from '../../../../../common/types/custom_panels'; import './visualization_flyout.scss'; import { uiSettingsService } from '../../../../../common/utils'; -import { ILegacyScopedClusterClient } from '../../../../../../../src/core/server'; import { replaceVizInPanel, selectPanel } from '../../redux/panel_slice'; import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions'; -import { - ObservabilitySavedObject, - ObservabilitySavedVisualization, -} from '../../../../services/saved_objects/saved_object_client/types'; +import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types'; import { SAVED_VISUALIZATION } from '../../../../../common/constants/explorer'; /* @@ -128,7 +121,7 @@ export const VisaulizationFlyoutSO = ({ const [newVisualizationTimeField, setNewVisualizationTimeField] = useState(''); const [previewMetaData, setPreviewMetaData] = useState(); const [pplQuery, setPPLQuery] = useState(''); - const [previewData, setPreviewData] = useState({} as PplResponse); + const [previewData, setPreviewData] = useState({} as PPLResponse); const [previewArea, setPreviewArea] = useState(<>); const [previewLoading, setPreviewLoading] = useState(false); const [isPreviewError, setIsPreviewError] = useState({} as VizContainerError); @@ -189,43 +182,11 @@ export const VisaulizationFlyoutSO = ({ if (!isInputValid()) return; if (isFlyoutReplacement) { - // http - // .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/replace`, { - // body: JSON.stringify({ - // panelId, - // savedVisualizationId: selectValue, - // oldVisualizationId: replaceVisualizationId, - // }), - // }) - // .then(async (res) => { - // setPanelVisualizations(res.visualizations); - // setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success'); - // }) - // .catch((err) => { - // setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger'); - // console.error(err); - // }); dispatch(replaceVizInPanel(panel, replaceVisualizationId, selectValue)); } else { const visualizationsWithNewPanel = addVisualizationPanel({ savedVisualizationId: selectValue, }); - - // http - // .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, { - // body: JSON.stringify({ - // panelId, - // savedVisualizationId: selectValue, - // }), - // }) - // .then(async (res) => { - // setPanelVisualizations(res.visualizations); - // setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success'); - // }) - // .catch((err) => { - // setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger'); - // console.error(err); - // }); } closeFlyout(); }; From c898850f8e44fea136079b60f4c79a6e7f79ca53 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Mon, 24 Apr 2023 23:26:53 -0700 Subject: [PATCH 2/2] rename edit button data-test-subj Signed-off-by: Shenoy Pratik --- public/components/custom_panels/custom_panel_view_so.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx index 9d32b6b75..d1dd4f1bf 100644 --- a/public/components/custom_panels/custom_panel_view_so.tsx +++ b/public/components/custom_panels/custom_panel_view_so.tsx @@ -407,7 +407,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { const editButton = ( editPanel('edit')} disabled={editDisabled}