From 93c42838ef448f407ca56809ede58e0244bda7ee Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Tue, 25 Apr 2023 17:22:24 -0400 Subject: [PATCH 1/8] change samples to saved object Signed-off-by: Derek Ho --- public/components/custom_panels/home.tsx | 32 ++++++++++++------- .../custom_panels/redux/panel_slice.ts | 11 +++++++ 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx index 14de98e91..737370d3c 100644 --- a/public/components/custom_panels/home.tsx +++ b/public/components/custom_panels/home.tsx @@ -28,7 +28,14 @@ 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 { deletePanel, fetchPanels, uuidRx } from './redux/panel_slice'; +import { + createPanel, + createPanelWithVizs, + deletePanel, + fetchPanels, + newPanelTemplate, + uuidRx, +} from './redux/panel_slice'; // import { ObjectFetcher } from '../common/objectFetcher'; @@ -182,16 +189,19 @@ 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()); - }); - setToast(`Sample panels successfully added.`); + const savedObjectSamplePanel = newPanelTemplate('[Logs] Web traffic Panel'); + dispatch(createPanelWithVizs(savedObjectSamplePanel, savedVisualizationIds)); + + // await http + // .post(`${CUSTOM_PANELS_API_PREFIX}/panels/addSamplePanels`, { + // body: JSON.stringify({ + // savedVisualizationIds, + // }), + // }) + // .then((res) => { + // dispatch(fetchPanels()); + // }); + // setToast(`Sample panels successfully added.`); } catch (err: any) { setToast('Error adding sample panels.', 'danger'); console.error(err.body?.message || err); diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index 62d0f4d6c..be6306f2f 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -218,6 +218,17 @@ export const createPanel = (panel) => async (dispatch, getState) => { window.location.replace(`#/${newPanel.id}`); }; +export const createPanelWithVizs = (panel, vizIds) => async (dispatch, getState) => { + const visualizationsWithNewPanel = addMultipleVisualizations(vizIds, []); + const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel }; + const newSOPanel = await savedObjectPanelsClient.create(updatedPanel); + const newPanel = savedObjectToCustomPanel(newSOPanel); + const panelList = getState().customPanel.panelList; + dispatch(setPanelList([...panelList, newPanel])); + + window.location.replace(`#/${newPanel.id}`); +}; + export const clonePanel = (panel, newPanelName) => async (dispatch, getState) => { const { id, ...panelCopy } = { ...panel, From 94b2fabf123fbf08588c9f225d25f0edbd95e404 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 26 Apr 2023 12:31:20 -0400 Subject: [PATCH 2/8] add sample to so Signed-off-by: Derek Ho --- public/components/custom_panels/home.tsx | 15 ++------------- .../components/custom_panels/redux/panel_slice.ts | 8 ++++---- 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx index 737370d3c..ab22a613f 100644 --- a/public/components/custom_panels/home.tsx +++ b/public/components/custom_panels/home.tsx @@ -30,6 +30,7 @@ import { CustomPanelView } from './custom_panel_view'; import { CustomPanelViewSO } from './custom_panel_view_so'; import { createPanel, + createPanelSample, createPanelWithVizs, deletePanel, fetchPanels, @@ -189,19 +190,7 @@ export const Home = ({ .get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/addSampleSavedObjects/panels`) .then((resp) => (savedVisualizationIds = [...resp.savedVizIds])); - const savedObjectSamplePanel = newPanelTemplate('[Logs] Web traffic Panel'); - dispatch(createPanelWithVizs(savedObjectSamplePanel, savedVisualizationIds)); - - // await http - // .post(`${CUSTOM_PANELS_API_PREFIX}/panels/addSamplePanels`, { - // body: JSON.stringify({ - // savedVisualizationIds, - // }), - // }) - // .then((res) => { - // dispatch(fetchPanels()); - // }); - // setToast(`Sample panels successfully added.`); + dispatch(createPanelSample(savedVisualizationIds)); } catch (err: any) { setToast('Error adding sample panels.', 'danger'); console.error(err.body?.message || err); diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index be6306f2f..baac882ff 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -26,6 +26,7 @@ import { addMultipleVisualizations, addVisualizationPanel, } from '../helpers/add_visualization_helper'; +import { createDemoPanel } from '../../../../server/common/helpers/custom_panels/sample_panels'; interface InitialState { id: string; @@ -218,10 +219,9 @@ export const createPanel = (panel) => async (dispatch, getState) => { window.location.replace(`#/${newPanel.id}`); }; -export const createPanelWithVizs = (panel, vizIds) => async (dispatch, getState) => { - const visualizationsWithNewPanel = addMultipleVisualizations(vizIds, []); - const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel }; - const newSOPanel = await savedObjectPanelsClient.create(updatedPanel); +export const createPanelSample = (vizIds) => async (dispatch, getState) => { + const samplePanel = createDemoPanel(vizIds); + const newSOPanel = await savedObjectPanelsClient.create(samplePanel); const newPanel = savedObjectToCustomPanel(newSOPanel); const panelList = getState().customPanel.panelList; dispatch(setPanelList([...panelList, newPanel])); From cef3c71fc7b3d3acd2a54a01c9708a5f35ac333f Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 26 Apr 2023 13:20:49 -0400 Subject: [PATCH 3/8] fix saved object sample Signed-off-by: Derek Ho --- public/components/custom_panels/redux/panel_slice.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index baac882ff..598d4a556 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -220,13 +220,16 @@ export const createPanel = (panel) => async (dispatch, getState) => { }; export const createPanelSample = (vizIds) => async (dispatch, getState) => { - const samplePanel = createDemoPanel(vizIds); + const samplePanel = { + ...createDemoPanel(vizIds), + dateCreated: new Date().getTime(), + dateModified: new Date().getTime(), + title: '[Logs] Web traffic Panel', + }; const newSOPanel = await savedObjectPanelsClient.create(samplePanel); const newPanel = savedObjectToCustomPanel(newSOPanel); const panelList = getState().customPanel.panelList; dispatch(setPanelList([...panelList, newPanel])); - - window.location.replace(`#/${newPanel.id}`); }; export const clonePanel = (panel, newPanelName) => async (dispatch, getState) => { From d312c86cc7fb7c3ffef0130cf53a023e29fa4650 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 26 Apr 2023 13:23:40 -0400 Subject: [PATCH 4/8] fix up Signed-off-by: Derek Ho --- public/components/custom_panels/helpers/utils.tsx | 2 ++ public/components/custom_panels/redux/panel_slice.ts | 4 ++-- server/common/helpers/custom_panels/sample_panels.ts | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx index 266939d09..4fc7d49b8 100644 --- a/public/components/custom_panels/helpers/utils.tsx +++ b/public/components/custom_panels/helpers/utils.tsx @@ -50,6 +50,8 @@ export const isNameValid = (name: string) => { return name.length >= 50 || name.length === 0 ? false : true; }; +export const samplePanelName = '[Logs] Web traffic Panel'; + // DateTime convertor to required format export const convertDateTime = (datetime: string, isStart = true, formatted = true) => { let returnTime: undefined | Moment; diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index 598d4a556..35d47411b 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -21,7 +21,7 @@ import { } from '../../../../common/types/custom_panels'; import { coreRefs } from '../../../framework/core_refs'; import { SavedObject, SimpleSavedObject } from '../../../../../../src/core/public'; -import { isNameValid } from '../helpers/utils'; +import { isNameValid, samplePanelName } from '../helpers/utils'; import { addMultipleVisualizations, addVisualizationPanel, @@ -224,7 +224,7 @@ export const createPanelSample = (vizIds) => async (dispatch, getState) => { ...createDemoPanel(vizIds), dateCreated: new Date().getTime(), dateModified: new Date().getTime(), - title: '[Logs] Web traffic Panel', + title: samplePanelName, }; const newSOPanel = await savedObjectPanelsClient.create(samplePanel); const newPanel = savedObjectToCustomPanel(newSOPanel); diff --git a/server/common/helpers/custom_panels/sample_panels.ts b/server/common/helpers/custom_panels/sample_panels.ts index 3ef7a31c8..cc44d0bdc 100644 --- a/server/common/helpers/custom_panels/sample_panels.ts +++ b/server/common/helpers/custom_panels/sample_panels.ts @@ -4,10 +4,11 @@ */ import { v4 as uuidv4 } from 'uuid'; +import { samplePanelName } from '../../../../public/components/custom_panels/helpers/utils'; export const createDemoPanel = (savedVisualizationIds: string[]) => { return { - name: '[Logs] Web traffic Panel', + name: samplePanelName, visualizations: [ { id: 'panel_viz_' + uuidv4(), From 2cc1454e3e6754a0e4836e73f3d0320ade7756c9 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 26 Apr 2023 13:24:43 -0400 Subject: [PATCH 5/8] add back toast Signed-off-by: Derek Ho --- public/components/custom_panels/home.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx index ab22a613f..75ff91713 100644 --- a/public/components/custom_panels/home.tsx +++ b/public/components/custom_panels/home.tsx @@ -191,6 +191,7 @@ export const Home = ({ .then((resp) => (savedVisualizationIds = [...resp.savedVizIds])); dispatch(createPanelSample(savedVisualizationIds)); + setToast(`Sample panels successfully added.`); } catch (err: any) { setToast('Error adding sample panels.', 'danger'); console.error(err.body?.message || err); From 6b22110d70de396f0886aabc84e8785e90f71f88 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 26 Apr 2023 14:09:27 -0400 Subject: [PATCH 6/8] revert file Signed-off-by: Derek Ho --- server/common/helpers/custom_panels/sample_panels.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/server/common/helpers/custom_panels/sample_panels.ts b/server/common/helpers/custom_panels/sample_panels.ts index cc44d0bdc..3ef7a31c8 100644 --- a/server/common/helpers/custom_panels/sample_panels.ts +++ b/server/common/helpers/custom_panels/sample_panels.ts @@ -4,11 +4,10 @@ */ import { v4 as uuidv4 } from 'uuid'; -import { samplePanelName } from '../../../../public/components/custom_panels/helpers/utils'; export const createDemoPanel = (savedVisualizationIds: string[]) => { return { - name: samplePanelName, + name: '[Logs] Web traffic Panel', visualizations: [ { id: 'panel_viz_' + uuidv4(), From d597aa65c67195c52ada0b418eaac1218ea2acc6 Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 26 Apr 2023 17:36:39 -0400 Subject: [PATCH 7/8] refactoring Signed-off-by: Derek Ho --- common/constants/custom_panels.ts | 78 ++++++++++++++++++ .../custom_panels/helpers/utils.tsx | 2 - .../custom_panels/redux/panel_slice.ts | 5 +- .../custom_panels/custom_panel_adaptor.ts | 2 +- .../helpers/custom_panels/sample_panels.ts | 80 ------------------- 5 files changed, 82 insertions(+), 85 deletions(-) delete mode 100644 server/common/helpers/custom_panels/sample_panels.ts diff --git a/common/constants/custom_panels.ts b/common/constants/custom_panels.ts index 1062d63a2..97ffe5b15 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: '[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' }, + }; +}; diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx index 4fc7d49b8..266939d09 100644 --- a/public/components/custom_panels/helpers/utils.tsx +++ b/public/components/custom_panels/helpers/utils.tsx @@ -50,8 +50,6 @@ export const isNameValid = (name: string) => { return name.length >= 50 || name.length === 0 ? false : true; }; -export const samplePanelName = '[Logs] Web traffic Panel'; - // DateTime convertor to required format export const convertDateTime = (datetime: string, isStart = true, formatted = true) => { let returnTime: undefined | Moment; diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index 35d47411b..2754f49f0 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, @@ -21,12 +22,12 @@ import { } from '../../../../common/types/custom_panels'; import { coreRefs } from '../../../framework/core_refs'; import { SavedObject, SimpleSavedObject } from '../../../../../../src/core/public'; -import { isNameValid, samplePanelName } from '../helpers/utils'; +import { isNameValid } from '../helpers/utils'; +import { samplePanelName } from '../../../../common/constants/custom_panels'; import { addMultipleVisualizations, addVisualizationPanel, } from '../helpers/add_visualization_helper'; -import { createDemoPanel } from '../../../../server/common/helpers/custom_panels/sample_panels'; interface InitialState { id: string; 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' }, - }; -}; From c05ec9fa77f732aa952a2ccd547fb2a4d777ac8a Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 26 Apr 2023 17:37:49 -0400 Subject: [PATCH 8/8] use constant Signed-off-by: Derek Ho --- common/constants/custom_panels.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/constants/custom_panels.ts b/common/constants/custom_panels.ts index 97ffe5b15..28474a1bd 100644 --- a/common/constants/custom_panels.ts +++ b/common/constants/custom_panels.ts @@ -18,7 +18,7 @@ export const samplePanelName = '[Logs] Web traffic Panel'; export const createDemoPanel = (savedVisualizationIds: string[]) => { return { - name: '[Logs] Web traffic Panel', + name: samplePanelName, visualizations: [ { id: 'panel_viz_' + uuidv4(),