From d05f136f1b42d821cb49e2a8c1a0b8fe81381702 Mon Sep 17 00:00:00 2001 From: Peter Fitzgibbons Date: Tue, 18 Apr 2023 11:21:33 -0700 Subject: [PATCH] Rename Panels => Observability Dashboard (#380) * Rename Panels => Observability Dashboard --------- Signed-off-by: Peter Fitzgibbons Signed-off-by: Joshua Li Signed-off-by: Shenoy Pratik Co-authored-by: Peter Fitzgibbons Co-authored-by: Joshua Li Co-authored-by: Shenoy Pratik --- .../custom_panels/custom_panel_table.tsx | 28 ++++++++++--------- .../custom_panels/custom_panel_view.tsx | 26 ++++++++--------- .../custom_panels/custom_panel_view_so.tsx | 22 +++++++-------- .../helpers/modal_containers.tsx | 4 +-- public/components/custom_panels/home.tsx | 8 +++--- .../panel_modules/empty_panel.tsx | 2 +- .../visualization_flyout.tsx | 7 +++-- .../visualization_flyout_so.tsx | 5 ++-- .../custom_panels/redux/panel_slice.ts | 8 +++--- .../components/metrics/top_menu/top_menu.tsx | 6 ++-- public/plugin.ts | 8 ++++-- .../ppl/save_as_new_vis.ts | 4 +-- 12 files changed, 67 insertions(+), 61 deletions(-) diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx index 00340d9750..c0914e0b74 100644 --- a/public/components/custom_panels/custom_panel_table.tsx +++ b/public/components/custom_panels/custom_panel_table.tsx @@ -141,7 +141,7 @@ export const CustomPanelTable = ({ }; const onDelete = async () => { - const toastMessage = `Custom Panels ${ + const toastMessage = `Observability Dashboards ${ selectedCustomPanels.length > 1 ? 's' : ' ' + selectedCustomPanels[0].title } successfully deleted!`; const PanelList = selectedCustomPanels.map((panel) => panel.id); @@ -158,7 +158,7 @@ export const CustomPanelTable = ({ history.goBack(); }, 'Name', - 'Create operational panel', + 'Create Observability Dashboard', 'Cancel', 'Create', undefined, @@ -174,7 +174,7 @@ export const CustomPanelTable = ({ onRename, closeModal, 'Name', - 'Rename Panel', + 'Rename Dashboard', 'Cancel', 'Rename', selectedCustomPanels[0].title, @@ -190,7 +190,7 @@ export const CustomPanelTable = ({ onClone, closeModal, 'Name', - 'Duplicate Panel', + 'Duplicate Dashboard', 'Cancel', 'Duplicate', selectedCustomPanels[0].title + ' (copy)', @@ -201,7 +201,9 @@ export const CustomPanelTable = ({ }; const deletePanel = () => { - const customPanelString = `operational panel${selectedCustomPanels.length > 1 ? 's' : ''}`; + const customPanelString = `Observability Dashboard${ + selectedCustomPanels.length > 1 ? 's' : '' + }`; setModalLayout(

- Panels + Dashboard ({customPanels.length})

- Use Operational panels to create and view different visualizations on ingested - observability data, using PPL (Piped Processing Language) queries.{' '} + Use Observability Dashboard to create and view different visualizations on + ingested observability data, using PPL (Piped Processing Language) queries.{' '} Learn more @@ -350,7 +352,7 @@ export const CustomPanelTable = ({ - Create panel + Create Dashboard @@ -362,7 +364,7 @@ export const CustomPanelTable = ({ setSearchQuery(e.target.value)} /> @@ -400,10 +402,10 @@ export const CustomPanelTable = ({ <> -

No Operational Panels

+

No Observability Dashboards

- Use operational panels to dive deeper into observability + Use Observability Dashboards to dive deeper into observability
using PPL queries and insightful visualizations @@ -416,7 +418,7 @@ export const CustomPanelTable = ({ fullWidth={false} href="#/create" > - Create panel + Create Dashboard diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx index 2bf984adf6..99075358bf 100644 --- a/public/components/custom_panels/custom_panel_view.tsx +++ b/public/components/custom_panels/custom_panel_view.tsx @@ -69,7 +69,7 @@ import { DeleteModal } from '../common/helpers/delete_modal'; import { coreRefs } from '../../framework/core_refs'; /* - * "CustomPanelsView" module used to render an Operational Panel + * "CustomPanelsView" module used to render an Observability Dashboard * * Props taken in as params are: * panelId: Name of the panel opened @@ -196,7 +196,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { setPanelVisualizations(res.operationalPanel.visualizations); }) .catch((err) => { - console.error('Issue in fetching the operational panels', err); + console.error('Issue in fetching the Observability Dashboards', err); }); }; @@ -235,7 +235,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { onConfirm={onDelete} onCancel={closeModal} title={`Delete ${openPanelName}`} - message={`Are you sure you want to delete this Operational Panel?`} + message={`Are you sure you want to delete this Observability Dashboard?`} /> ); showModal(); @@ -254,7 +254,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { onRename, closeModal, 'Name', - 'Rename Panel', + 'Rename Dashboard', 'Cancel', 'Rename', openPanelName, @@ -286,7 +286,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { onClone, closeModal, 'Name', - 'Duplicate Panel', + 'Duplicate Dashboard', 'Cancel', 'Duplicate', openPanelName + ' (copy)', @@ -392,7 +392,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { setOnRefresh(!onRefresh); }) .catch((err) => { - setToast('Error is adding filters to the operational panel', 'danger'); + setToast('Error is adding filters to the Observability Dashboard', 'danger'); console.error(err.body.message); }); }; @@ -410,7 +410,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { setToast(`Visualization ${visualzationTitle} successfully added!`, 'success'); }) .catch((err) => { - setToast(`Error in adding ${visualzationTitle} visualization to the panel`, 'danger'); + setToast(`Error in adding ${visualzationTitle} visualization to the Dashboard`, 'danger'); console.error(err); }); }; @@ -463,7 +463,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { onClick={() => setPanelsMenuPopover(true)} disabled={addVizDisabled} > - Panel actions + Dashboard Actions ); @@ -498,7 +498,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { title: 'Panel actions', items: [ { - name: 'Reload panel', + name: 'Reload Dashboard', 'data-test-subj': 'reloadPanelContextMenuItem', onClick: () => { setPanelsMenuPopover(false); @@ -506,7 +506,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { }, }, { - name: 'Rename panel', + name: 'Rename Dashboard', 'data-test-subj': 'renamePanelContextMenuItem', onClick: () => { setPanelsMenuPopover(false); @@ -514,7 +514,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { }, }, { - name: 'Duplicate panel', + name: 'Duplicate Dashboard', 'data-test-subj': 'duplicatePanelContextMenuItem', onClick: () => { setPanelsMenuPopover(false); @@ -522,7 +522,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { }, }, { - name: 'Delete panel', + name: 'Delete Dashboard', 'data-test-subj': 'deletePanelContextMenuItem', onClick: () => { setPanelsMenuPopover(false); @@ -533,7 +533,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { }, ]; - // Fetch the custom panel on Initial Mount + // Fetch the Observability Dashboard on Initial Mount useEffect(() => { fetchCustomPanel(); }, [panelId]); diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx index dcaf61fc17..19eb6cde4d 100644 --- a/public/components/custom_panels/custom_panel_view_so.tsx +++ b/public/components/custom_panels/custom_panel_view_so.tsx @@ -83,7 +83,7 @@ import { import { coreRefs } from '../../framework/core_refs'; /* - * "CustomPanelsView" module used to render an Operational Panel + * "CustomPanelsView" module used to render an Observability Dashboard * * Props taken in as params are: * panelId: Name of the panel opened @@ -224,7 +224,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { onConfirm={onDelete} onCancel={closeModal} title={`Delete ${panel?.title}`} - message={`Are you sure you want to delete this Operational Panel?`} + message={`Are you sure you want to delete this Observability Dashboard?`} /> ); showModal(); @@ -236,7 +236,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { onRename, closeModal, 'Name', - 'Rename Panel', + 'Rename Dashboard', 'Cancel', 'Rename', panel.title, @@ -257,7 +257,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { onClone, closeModal, 'Name', - 'Duplicate Panel', + 'Duplicate Dashboard', 'Cancel', 'Duplicate', panel.title + ' (copy)', @@ -440,7 +440,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { onClick={() => setPanelsMenuPopover(true)} disabled={addVizDisabled} > - Panel actions + Dashboard Actions ); @@ -463,7 +463,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { try { dispatch(updatePanel(updatedPanel)); } catch (err) { - setToast('Error adding visualization to this panel', 'danger'); + setToast('Error adding visualization to this Dashboard', 'danger'); console.error(err?.body?.message || err); } }; @@ -505,7 +505,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { title: 'Panel actions', items: [ { - name: 'Reload panel', + name: 'Reload Dashboard', 'data-test-subj': 'reloadPanelContextMenuItem', onClick: () => { setPanelsMenuPopover(false); @@ -513,7 +513,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { }, }, { - name: 'Rename panel', + name: 'Rename Dashboard', 'data-test-subj': 'renamePanelContextMenuItem', onClick: () => { setPanelsMenuPopover(false); @@ -521,7 +521,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { }, }, { - name: 'Duplicate panel', + name: 'Duplicate Dashboard', 'data-test-subj': 'duplicatePanelContextMenuItem', onClick: () => { setPanelsMenuPopover(false); @@ -529,7 +529,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { }, }, { - name: 'Delete panel', + name: 'Delete Dashboard', 'data-test-subj': 'deletePanelContextMenuItem', onClick: () => { setPanelsMenuPopover(false); @@ -539,7 +539,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => { ], }, ]; - // Fetch the custom panel on Initial Mount + // Fetch the Observability Dashboard on Initial Mount useEffect(() => { setLoading(true); dispatch(fetchPanel(panelId)); diff --git a/public/components/custom_panels/helpers/modal_containers.tsx b/public/components/custom_panels/helpers/modal_containers.tsx index 0fb80a5979..cdc93226c9 100644 --- a/public/components/custom_panels/helpers/modal_containers.tsx +++ b/public/components/custom_panels/helpers/modal_containers.tsx @@ -67,14 +67,14 @@ export const getCloneModal = ( return ( -

Do you want to clone this operational panel?

+

Do you want to clone this Observability Dashboard?

 ); diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx index f72f830c42..6c86318e26 100644 --- a/public/components/custom_panels/home.tsx +++ b/public/components/custom_panels/home.tsx @@ -126,25 +126,25 @@ export const Home = ({ }); }; - // Deletes an existing Operational Panel + // Deletes an existing Observability Dashboard const deleteCustomPanel = async (customPanelId: string, customPanelName: string) => { return http .delete(`${CUSTOM_PANELS_API_PREFIX}/panels/` + customPanelId) .then((res) => { dispatch(fetchPanels()); - setToast(`Operational Panel "${customPanelName}" successfully deleted!`); + setToast(`Observability Dashboard "${customPanelName}" successfully deleted!`); return res; }) .catch((err) => { setToast( - 'Error deleting Operational Panel, please make sure you have the correct permission.', + 'Error deleting Observability Dashboard, please make sure you have the correct permission.', 'danger' ); console.error(err.body.message); }); }; - // Deletes an existing SO Operational Panel + // Deletes an existing SO Observability Dashboard const deleteCustomPanelSO = async (customPanelId: string, customPanelName: string) => { dispatch(deletePanel(customPanelId)); // TODO: toast here diff --git a/public/components/custom_panels/panel_modules/empty_panel.tsx b/public/components/custom_panels/panel_modules/empty_panel.tsx index 32a1226b76..dcebe55732 100644 --- a/public/components/custom_panels/panel_modules/empty_panel.tsx +++ b/public/components/custom_panels/panel_modules/empty_panel.tsx @@ -8,7 +8,7 @@ import React, { useState } from 'react'; import { AddVisualizationPopover } from '../helpers/add_visualization_popover'; /* - * EmptyPanelView - This Sub-component is shown to the user when a operational panel is empty + * EmptyPanelView - This Sub-component is shown to the user when a Observability Dashboard is empty * * Props taken in as params are: * addVizDisabled -> Boolean to enable/disable the add visualization button diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx index 944db72377..99fb39112f 100644 --- a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx +++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx @@ -61,7 +61,7 @@ import './visualization_flyout.scss'; * VisaulizationFlyout - This module create a flyout to add visualization * * Props taken in as params are: - * panelId: panel Id of current operational panel + * panelId: panel Id of current Observability Dashboard * closeFlyout: function to close the flyout * start: start time in date filter * end: end time in date filter @@ -187,7 +187,10 @@ export const VisaulizationFlyout = ({ setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success'); }) .catch((err) => { - setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger'); + setToast( + `Error in adding ${newVisualizationTitle} visualization to the Dashboard`, + 'danger' + ); console.error(err); }); } else { diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx index c2db1d193b..5ffb427592 100644 --- a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx +++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx @@ -35,6 +35,7 @@ import { import _, { isError } from 'lodash'; import React, { useEffect, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; +import { useDispatch, useSelector } from 'react-redux'; import { FlyoutContainers } from '../../../common/flyout_containers'; import { displayVisualization, getQueryResponse, isDateValid } from '../../helpers/utils'; import { convertDateTime } from '../../helpers/utils'; @@ -52,13 +53,12 @@ import './visualization_flyout.scss'; import { uiSettingsService } from '../../../../../common/utils'; import { ILegacyScopedClusterClient } from '../../../../../../../src/core/server'; import { replaceVizInPanel, selectPanel } from '../../redux/panel_slice'; -import { useDispatch, useSelector } from 'react-redux'; /* * VisaulizationFlyoutSO - This module create a flyout to add visualization for SavedObjects custom Panels * * Props taken in as params are: - * panelId: panel Id of current operational panel + * panelId: panel Id of current Observability Dashboard * closeFlyout: function to close the flyout * start: start time in date filter * end: end time in date filter @@ -108,7 +108,6 @@ export const VisaulizationFlyoutSO = ({ replaceVisualizationId, addVisualizationPanel, }: VisualizationFlyoutSOProps) => { - const dispatch = useDispatch(); const panel = useSelector(selectPanel); diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index fc60ee2c32..a3028a4dfd 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -142,7 +142,7 @@ export const updatePanel = (panel: CustomPanelType) => async (dispatch, getState const panelList = getState().customPanel.panelList.map((p) => (p.id === panel.id ? panel : p)); dispatch(setPanelList(panelList)); } catch (err) { - console.log('Error updating panel', { err, panel }); + console.log('Error updating Dashboard', { err, panel }); } }; @@ -237,7 +237,7 @@ export const renameCustomPanel = (editedCustomPanelName: string, id: string) => getState ) => { if (!isNameValid(editedCustomPanelName)) { - console.log('Invalid Custom Panel name', 'danger'); + console.log('Invalid Observability Dashboard name', 'danger'); return Promise.reject(); } @@ -256,10 +256,10 @@ export const renameCustomPanel = (editedCustomPanelName: string, id: string) => // // if (renamedCustomPanel) renamedCustomPanel.name = editedCustomPanelName; // // return newCustomPanelData; // // }); - // // setToast(`Operational Panel successfully renamed into "${editedCustomPanelName}"`); + // // setToast(`Observability Dashboard successfully renamed into "${editedCustomPanelName}"`); // } catch (err) { // console.log( - // 'Error renaming Operational Panel, please make sure you have the correct permission.', + // 'Error renaming Observability Dashboard, please make sure you have the correct permission.', // 'danger' // ); // console.error(err.body.message); diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx index cd3d17e3b3..8ab98fb2e3 100644 --- a/public/components/metrics/top_menu/top_menu.tsx +++ b/public/components/metrics/top_menu/top_menu.tsx @@ -21,8 +21,8 @@ import { } from '@elastic/eui'; import { DurationRange } from '@elastic/eui/src/components/date_picker/types'; import { useDispatch, useSelector } from 'react-redux'; -import { uiSettingsService } from '../../../../common/utils'; import React, { useEffect, useState } from 'react'; +import { uiSettingsService } from '../../../../common/utils'; import { MetricType } from '../../../../common/types/metrics'; import { resolutionOptions } from '../../../../common/constants/metrics'; import './top_menu.scss'; @@ -92,7 +92,7 @@ export const TopMenu = ({ const [originalPanelVisualizations, setOriginalPanelVisualizations] = useState([]); const [isSavePanelOpen, setIsSavePanelOpen] = useState(false); const [selectedPanelOptions, setSelectedPanelOptions] = useState< - EuiComboBoxOptionOption[] | undefined + Array> | undefined >([]); // toggle between panel edit mode @@ -206,7 +206,7 @@ export const TopMenu = ({ console.error(message, e); setToast('Issue in saving metrics', 'danger'); } - setToast('Saved metrics to panels successfully!'); + setToast('Saved metrics to Dashboards successfully!'); } }; diff --git a/public/plugin.ts b/public/plugin.ts index 81b61c6576..7726e80de1 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -111,11 +111,11 @@ export class ObservabilityPlugin setupDeps.dashboard.registerDashboardProvider({ appId: 'observability-panel', savedObjectsType: 'observability-panel', - savedObjectsName: 'Observability Panel', + savedObjectsName: 'Observability', editUrlPathFn: (obj: SavedObject) => `/app/observability-dashboards#/${obj.id}/edit`, viewUrlPathFn: (obj: SavedObject) => `/app/observability-dashboards#/${obj.id}`, - createLinkText: 'Observability Panel', - createSortText: 'Observability Panel', + createLinkText: 'Observability Dashboard', + createSortText: 'Observability Dashboard', createUrl: '/app/observability-dashboards#/create', }); @@ -235,6 +235,7 @@ export class ObservabilityPlugin // Return methods that should be available to other plugins return {}; } + public start(core: CoreStart): ObservabilityStart { const pplService: PPLService = new PPLService(core.http); @@ -244,5 +245,6 @@ export class ObservabilityPlugin return {}; } + public stop() {} } diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts index 9d3821740d..5ca6bb8c40 100644 --- a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts +++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts @@ -96,13 +96,13 @@ export class SaveAsNewVisualization extends SavedQuerySaver { .then((res: any) => { notifications.toasts.addSuccess({ title: 'Saved successfully.', - text: `Visualization '${saveTitle}' has been successfully saved to operation panels.`, + text: `Visualization '${saveTitle}' has been successfully saved to Observability Dashboards.`, }); }) .catch((error: any) => { notifications.toasts.addError(error, { title: 'Failed to save', - text: `Cannot add Visualization '${saveTitle}' to operation panels`, + text: `Cannot add Visualization '${saveTitle}' to Observability Dashboards`, }); }); }