diff --git a/common/constants/custom_panels.ts b/common/constants/custom_panels.ts index f0791d08c..555f778b1 100644 --- a/common/constants/custom_panels.ts +++ b/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' }, + }; +}; diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx index 69e94d61e..b43ec1cc5 100644 --- a/public/components/custom_panels/home.tsx +++ b/public/components/custom_panels/home.tsx @@ -23,13 +23,21 @@ 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 { REDIRECT_TAB, TAB_CREATED_TYPE, TAB_ID_TXT_PFX } from '../../../common/constants/explorer'; import { init as initFields } from '../event_analytics/redux/slices/field_slice'; import { init as initPatterns } from '../event_analytics/redux/slices/patterns_slice'; import { init as initQueryResult } from '../event_analytics/redux/slices/query_result_slice'; import { changeQuery, init as initQuery } from '../event_analytics/redux/slices/query_slice'; import { addTab, setSelectedQueryTab } from '../event_analytics/redux/slices/query_tab_slice'; +import { + createPanel, + createPanelSample, + createPanelWithVizs, + deletePanel, + fetchPanels, + newPanelTemplate, + uuidRx, +} from './redux/panel_slice'; import { useToast } from '../common/toast'; import { coreRefs } from '../../framework/core_refs'; @@ -149,15 +157,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'); diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index ae5f26a06..1bad8f452 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/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, @@ -247,6 +249,19 @@ export const createPanel = (panel) => async (dispatch, getState) => { } }; +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) => { try { const { id, ...panelCopy } = { diff --git a/server/adaptors/custom_panels/custom_panel_adaptor.ts b/server/adaptors/custom_panels/custom_panel_adaptor.ts index f687dca9c..5703a85dd 100644 --- a/server/adaptors/custom_panels/custom_panel_adaptor.ts +++ b/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; diff --git a/server/common/helpers/custom_panels/sample_panels.ts b/server/common/helpers/custom_panels/sample_panels.ts deleted file mode 100644 index 3ef7a31c8..000000000 --- a/server/common/helpers/custom_panels/sample_panels.ts +++ /dev/null @@ -1,80 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { v4 as uuidv4 } from 'uuid'; - -export const createDemoPanel = (savedVisualizationIds: string[]) => { - return { - name: '[Logs] Web traffic Panel', - 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' }, - }; -};