[Panel] Fix panel resizing and date picker bugs (opensearch-project#364)

* fix panel resizing issue Signed-off-by: Eric Wei <menwe@amazon.com> * fix bug of panel relayout not reflected after page refresh Signed-off-by: Eric Wei <menwe@amazon.com> * fix panel date picker issue for new panel/visualization Signed-off-by: Eric Wei <menwe@amazon.com> * update snapshots Signed-off-by: Eric Wei <menwe@amazon.com> * fix bug of not seeing panel daterange change reflected for old visulization Signed-off-by: Eric Wei <menwe@amazon.com> --------- Signed-off-by: Eric Wei <menwe@amazon.com>
joshuali925 · Apr 18, 2023 · 06c8176 · 06c8176
1 parent e2f40f3
commit 06c8176
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 192 deletions.
diff --git 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
@@ -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
@@ -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<Layout[]>([]);
   const [postEditLayout, setPostEditLayout] = useState<Layout[]>([]);
   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
@@ -134,7 +134,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
               >
                 <a
                   class="euiButton euiButton--primary euiButton--fill"
-                  href="#/notebooks/create"
+                  href="#/create"
                   rel="noreferrer"
                 >
                   <span
@@ -429,7 +429,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-0"
+                        href="#/id-0"
                         rel="noreferrer"
                       >
                         path-0
@@ -504,7 +504,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-1"
+                        href="#/id-1"
                         rel="noreferrer"
                       >
                         path-1
@@ -579,7 +579,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-2"
+                        href="#/id-2"
                         rel="noreferrer"
                       >
                         path-2
@@ -654,7 +654,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-3"
+                        href="#/id-3"
                         rel="noreferrer"
                       >
                         path-3
@@ -729,7 +729,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-4"
+                        href="#/id-4"
                         rel="noreferrer"
                       >
                         path-4
@@ -1025,7 +1025,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
               >
                 <a
                   class="euiButton euiButton--primary euiButton--fill"
-                  href="#/notebooks/create"
+                  href="#/create"
                   rel="noreferrer"
                 >
                   <span