Rename Panels => Observability Dashboard (opensearch-project#380)

* Rename Panels => Observability Dashboard --------- Signed-off-by: Peter Fitzgibbons <[email protected]> Signed-off-by: Joshua Li <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]> Co-authored-by: Peter Fitzgibbons <[email protected]> Co-authored-by: Joshua Li <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]>
joshuali925 · Apr 18, 2023 · 7fa9a09 · 7fa9a09
1 parent 6bbbd3c
commit 7fa9a09
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 61 deletions.
diff --git 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(
       <DeleteModal
         onConfirm={onDelete}
@@ -323,14 +325,14 @@ export const CustomPanelTable = ({
               <EuiPageContentHeaderSection>
                 <EuiTitle size="s">
                   <h3>
-                    Panels
+                    Dashboard
                     <span className="panel-header-count"> ({customPanels.length})</span>
                   </h3>
                 </EuiTitle>
                 <EuiSpacer size="s" />
                 <EuiText size="s" color="subdued">
-                  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.{' '}
                   <EuiLink external={true} href={CUSTOM_PANELS_DOCUMENTATION_URL} target="blank">
                     Learn more
                   </EuiLink>
@@ -350,7 +352,7 @@ export const CustomPanelTable = ({
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiButton fill href="#/create" data-test-subj="customPanels__createNewPanels">
-                      Create panel
+                      Create Dashboard
                     </EuiButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
@@ -362,7 +364,7 @@ export const CustomPanelTable = ({
                 <EuiFieldSearch
                   fullWidth
                   data-test-subj="operationalPanelSearchBar"
-                  placeholder="Search operational panel name"
+                  placeholder="Search Observability Dashboard name"
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                 />
@@ -400,10 +402,10 @@ export const CustomPanelTable = ({
               <>
                 <EuiSpacer size="xxl" />
                 <EuiText textAlign="center">
-                  <h2 data-test-subj="customPanels__noPanelsHome">No Operational Panels</h2>
+                  <h2 data-test-subj="customPanels__noPanelsHome">No Observability Dashboards</h2>
                   <EuiSpacer size="m" />
                   <EuiText color="subdued">
-                    Use operational panels to dive deeper into observability
+                    Use Observability Dashboards to dive deeper into observability
                     <br />
                     using PPL queries and insightful visualizations
                   </EuiText>
@@ -416,7 +418,7 @@ export const CustomPanelTable = ({
                       fullWidth={false}
                       href="#/create"
                     >
-                      Create panel
+                      Create Dashboard
                     </EuiButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>

diff --git 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
     </EuiButton>
   );
 
@@ -498,31 +498,31 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
       title: 'Panel actions',
       items: [
         {
-          name: 'Reload panel',
+          name: 'Reload Dashboard',
           'data-test-subj': 'reloadPanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             fetchCustomPanel();
           },
         },
         {
-          name: 'Rename panel',
+          name: 'Rename Dashboard',
           'data-test-subj': 'renamePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             renamePanel();
           },
         },
         {
-          name: 'Duplicate panel',
+          name: 'Duplicate Dashboard',
           'data-test-subj': 'duplicatePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             clonePanel();
           },
         },
         {
-          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
@@ -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
     </EuiButton>
   );
 
@@ -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,31 +505,31 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
       title: 'Panel actions',
       items: [
         {
-          name: 'Reload panel',
+          name: 'Reload Dashboard',
           'data-test-subj': 'reloadPanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             dispatch(fetchPanel(panelId));
           },
         },
         {
-          name: 'Rename panel',
+          name: 'Rename Dashboard',
           'data-test-subj': 'renamePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             renamePanel();
           },
         },
         {
-          name: 'Duplicate panel',
+          name: 'Duplicate Dashboard',
           'data-test-subj': 'duplicatePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             clonePanelModal();
           },
         },
         {
-          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
@@ -67,14 +67,14 @@ export const getCloneModal = (
   return (
     <EuiOverlayMask>
       <EuiConfirmModal
-        title="Clone operational panel"
+        title="Clone Observability Dashboard"
         onCancel={onCancel}
         onConfirm={onConfirm}
         cancelButtonText="Cancel"
         confirmButtonText="Yes"
         defaultFocusedButton="confirm"
       >
-        <p>Do you want to clone this operational panel?</p>
+        <p>Do you want to clone this Observability Dashboard?</p>
       </EuiConfirmModal>
     </EuiOverlayMask>
   );

diff --git 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
@@ -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
@@ -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 {