change samples to saved object (opensearch-project#427)

* change samples to saved object

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

* add sample to so

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

* fix saved object sample

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

* fix up

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

* add back toast

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

* revert file

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

* refactoring

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

* use constant

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

---------

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

Author: derek-ho

common/constants/custom_panels.ts

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { v4 as uuidv4 } from 'uuid';
+
 export const CUSTOM_PANELS_API_PREFIX = '/api/observability/operational_panels';
 export const CUSTOM_PANELS_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/observability-plugin/operational-panels/';
@@ -11,3 +13,79 @@ export const CREATE_PANEL_MESSAGE = 'Enter a name to describe the purpose of thi
 export const CUSTOM_PANELS_SAVED_OBJECT_TYPE = 'observability-panel';
 
 export const CUSTOM_PANEL_SLICE = 'customPanel';
+
+export const samplePanelName = '[Logs] Web traffic Panel';
+
+export const createDemoPanel = (savedVisualizationIds: string[]) => {
+  return {
+    name: samplePanelName,
+    visualizations: [
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[0],
+        x: 4,
+        y: 6,
+        w: 8,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[1],
+        x: 0,
+        y: 2,
+        w: 12,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[2],
+        x: 0,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[3],
+        x: 4,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[4],
+        x: 8,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[5],
+        x: 0,
+        y: 4,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[6],
+        x: 0,
+        y: 6,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[7],
+        x: 4,
+        y: 4,
+        w: 8,
+        h: 2,
+      },
+    ],
+    timeRange: { to: 'now/y', from: 'now/y' },
+    queryFilter: { query: '', language: 'ppl' },
+  };
+};

public/components/custom_panels/home.tsx

@@ -28,7 +28,15 @@ import PPLService from '../../services/requests/ppl';
 import { CustomPanelTable } from './custom_panel_table';
 import { CustomPanelView } from './custom_panel_view';
 import { CustomPanelViewSO } from './custom_panel_view_so';
-import { fetchPanels, uuidRx } from './redux/panel_slice';
+import {
+  createPanel,
+  createPanelSample,
+  createPanelWithVizs,
+  deletePanel,
+  fetchPanels,
+  newPanelTemplate,
+  uuidRx,
+} from './redux/panel_slice';
 
 // import { ObjectFetcher } from '../common/objectFetcher';
 
@@ -123,15 +131,7 @@ export const Home = ({
         .get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/addSampleSavedObjects/panels`)
         .then((resp) => (savedVisualizationIds = [...resp.savedVizIds]));
 
-      await http
-        .post(`${CUSTOM_PANELS_API_PREFIX}/panels/addSamplePanels`, {
-          body: JSON.stringify({
-            savedVisualizationIds,
-          }),
-        })
-        .then((res) => {
-          dispatch(fetchPanels());
-        });
+      dispatch(createPanelSample(savedVisualizationIds));
       setToast(`Sample panels successfully added.`);
     } catch (err: any) {
       setToast('Error adding sample panels.', 'danger');

public/components/custom_panels/redux/panel_slice.ts

@@ -11,6 +11,7 @@ import {
   CUSTOM_PANELS_API_PREFIX,
   CUSTOM_PANELS_SAVED_OBJECT_TYPE,
   CUSTOM_PANEL_SLICE,
+  createDemoPanel,
 } from '../../../../common/constants/custom_panels';
 import {
   CustomPanelListType,
@@ -22,6 +23,7 @@ import {
 import { coreRefs } from '../../../framework/core_refs';
 import { SavedObject, SimpleSavedObject } from '../../../../../../src/core/public';
 import { isNameValid } from '../helpers/utils';
+import { samplePanelName } from '../../../../common/constants/custom_panels';
 import {
   addMultipleVisualizations,
   addVisualizationPanel,
@@ -230,6 +232,19 @@ export const createPanel = (panel) => async (dispatch, getState) => {
   window.location.replace(`#/${newPanel.id}`);
 };
 
+export const createPanelSample = (vizIds) => async (dispatch, getState) => {
+  const samplePanel = {
+    ...createDemoPanel(vizIds),
+    dateCreated: new Date().getTime(),
+    dateModified: new Date().getTime(),
+    title: samplePanelName,
+  };
+  const newSOPanel = await savedObjectPanelsClient.create(samplePanel);
+  const newPanel = savedObjectToCustomPanel(newSOPanel);
+  const panelList = getState().customPanel.panelList;
+  dispatch(setPanelList([...panelList, newPanel]));
+};
+
 export const clonePanel = (panel, newPanelName) => async (dispatch, getState) => {
   const { id, ...panelCopy } = {
     ...panel,

server/adaptors/custom_panels/custom_panel_adaptor.ts

@@ -6,7 +6,7 @@
 import { v4 as uuidv4 } from 'uuid';
 import { PanelType, VisualizationType } from '../../../common/types/custom_panels';
 import { ILegacyScopedClusterClient } from '../../../../../src/core/server';
-import { createDemoPanel } from '../../common/helpers/custom_panels/sample_panels';
+import { createDemoPanel } from '../../../common/constants/custom_panels';
 
 interface boxType {
   x1: number;