diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx index 9f84ac5a0..fca0db5ac 100644 --- a/public/components/custom_panels/custom_panel_view.tsx +++ b/public/components/custom_panels/custom_panel_view.tsx @@ -219,6 +219,8 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { timeProps.end, recentlyUsedRanges ); + setStartTime(timeProps.start); + setEndTime(timeProps.end); dispatch(updatePanel({ ...panel, timeRange: { from: timeProps.start, to: timeProps.end } })); setRecentlyUsedRanges(updatedRanges.slice(0, 9)); diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx index a34908552..3f6c61f30 100644 --- a/public/components/custom_panels/custom_panel_view_so.tsx +++ b/public/components/custom_panels/custom_panel_view_so.tsx @@ -5,6 +5,7 @@ /* // eslint-disable no-console */ /* eslint-disable react-hooks/exhaustive-deps */ +import { useCallback } from 'react'; import { EuiBreadcrumb, EuiButton, @@ -298,11 +299,11 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { setIsEditing(true); }; - const applyEdits = () => { - console.log('applyEdits', panel); + const applyEdits = useCallback(() => { dispatch(updatePanel(panel)); setIsEditing(false); - }; + setEditActionType('save'); + }, [panel]); const cancelEdit = () => { console.log('cancelEdits'); @@ -374,7 +375,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { return; }; - const onRefreshFilters = (start: ShortDate, end: ShortDate) => { + const onRefreshFilters = async (start: ShortDate, end: ShortDate) => { if (!isDateValid(convertDateTime(start), convertDateTime(end, false), setToast)) { return; } @@ -384,13 +385,17 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { return; } - const panelFilterBody = { - panelId, - query: pplFilterValue, - language: 'ppl', - to: end, - from: start, - }; + await coreRefs.savedObjectsClient?.update('observability-panel', panelId, { + ...panel, + timeRange: { + to: end, + from: start, + }, + queryFilter: { + query: pplFilterValue, + language: 'ppl', + }, + }); setOnRefresh(!onRefresh); }; 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 cd7bb74e9..1f9a68e44 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 @@ -4,17 +4,18 @@ */ /* eslint-disable react-hooks/exhaustive-deps */ -import _ from 'lodash'; -import React, { useEffect, useState } from 'react'; +import _, { forEach } from 'lodash'; +import React, { useCallback, useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout'; import useObservable from 'react-use/lib/useObservable'; import { CoreStart } from '../../../../../../../src/core/public'; import { VisualizationContainer } from '../visualization_container'; import { VisualizationType } from '../../../../../common/types/custom_panels'; -import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels'; import './panel_grid.scss'; import { mergeLayoutAndVisualizations } from '../../helpers/utils'; import { coreRefs } from '../../../../framework/core_refs'; +import { selectPanel } from '../../redux/panel_slice'; // HOC container to provide dynamic width for Grid layout const ResponsiveGridLayout = WidthProvider(Responsive); @@ -73,6 +74,8 @@ export const PanelGridSO = (props: PanelGridProps) => { showFlyout, editActionType, } = props; + + const panel = useSelector(selectPanel); const [currentLayout, setCurrentLayout] = useState([]); const [postEditLayout, setPostEditLayout] = useState([]); const [gridData, setGridData] = useState(panelVisualizations.map(() => <>)); @@ -128,27 +131,40 @@ export const PanelGridSO = (props: PanelGridProps) => { const newVisualizationList = _.reject(panelVisualizations, { id: visualizationId, }); - console.log('removeVisualization', newVisualizationList); mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations); }; - // Save Visualization Layouts when not in edit mode anymore (after users saves the panel) - const saveVisualizationLayouts = async (panelID: string, visualizationParams: any) => { - return http - .put(`${CUSTOM_PANELS_API_PREFIX}/visualizations/edit`, { - body: JSON.stringify({ - panelId: panelID, - visualizationParams, - }), - }) - .then(async (res) => { - setPanelVisualizations(res.visualizations); - }) - .catch((err) => { - console.error(err); + const updateLayout = (visualizations, newLayouts) => { + const newVisualizations = []; + forEach(visualizations, (viz) => { + let newviz = { ...viz }; + forEach(newLayouts, (nwlyt) => { + if (viz.id === nwlyt.i) { + newviz = { + ...newviz, + ...nwlyt, + }; + return; + } }); + newVisualizations.push({ ...newviz }); + }); + return newVisualizations; }; + // 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] + ); + // Update layout whenever user edit gets completed useEffect(() => { if (editMode) { diff --git a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap index 4d3fbeeb0..552a09624 100644 --- a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap +++ b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap @@ -134,7 +134,7 @@ exports[` spec renders the component 1`] = ` > spec renders the component 1`] = ` > path-0 @@ -504,7 +504,7 @@ exports[` spec renders the component 1`] = ` > path-1 @@ -579,7 +579,7 @@ exports[` spec renders the component 1`] = ` > path-2 @@ -654,7 +654,7 @@ exports[` spec renders the component 1`] = ` > path-3 @@ -729,7 +729,7 @@ exports[` spec renders the component 1`] = ` > path-4 @@ -1025,7 +1025,7 @@ exports[` spec renders the empty component 1`] = ` >