Rename Panels => Observability Dashboard

public/components/custom_panels/custom_panel_table.tsx

@@ -46,7 +46,13 @@ import { CustomPanelListType } from '../../../common/types/custom_panels';
 import { getSampleDataModal } from '../common/helpers/add_sample_modal';
 import { pageStyles } from '../../../common/constants/shared';
 import { DeleteModal } from '../common/helpers/delete_modal';
-import { createPanel, fetchPanels, renameCustomPanel, selectPanelList } from './redux/panel_slice';
+import {
+  createPanel,
+  fetchPanels,
+  newPanelTemplate,
+  renameCustomPanel,
+  selectPanelList,
+} from './redux/panel_slice';
 
 /*
  * "CustomPanelTable" module, used to view all the saved panels
@@ -65,7 +71,6 @@ import { createPanel, fetchPanels, renameCustomPanel, selectPanelList } from './
 
 interface Props {
   loading: boolean;
-  createCustomPanel: (newCustomPanelName: string) => void;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
   parentBreadcrumbs: EuiBreadcrumb[];
   cloneCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
@@ -75,7 +80,6 @@ interface Props {
 
 export const CustomPanelTable = ({
   loading,
-  createCustomPanel,
   setBreadcrumbs,
   parentBreadcrumbs,
   cloneCustomPanel,
@@ -118,7 +122,8 @@ export const CustomPanelTable = ({
   };
 
   const onCreate = async (newCustomPanelName: string) => {
-    createCustomPanel(newCustomPanelName);
+    const newPanel = newPanelTemplate(newCustomPanelName);
+    dispatch(createPanel(newPanel));
     closeModal();
   };
 
@@ -136,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);
@@ -153,7 +158,7 @@ export const CustomPanelTable = ({
           history.goBack();
         },
         'Name',
-        'Create operational panel',
+        'Create Observability Dashboard',
         'Cancel',
         'Create',
         undefined,
@@ -169,7 +174,7 @@ export const CustomPanelTable = ({
         onRename,
         closeModal,
         'Name',
-        'Rename Panel',
+        'Rename Dashboard',
         'Cancel',
         'Rename',
         selectedCustomPanels[0].title,
@@ -185,7 +190,7 @@ export const CustomPanelTable = ({
         onClone,
         closeModal,
         'Name',
-        'Duplicate Panel',
+        'Duplicate Dashboard',
         'Cancel',
         'Duplicate',
         selectedCustomPanels[0].title + ' (copy)',
@@ -196,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}
@@ -318,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>
@@ -345,7 +352,7 @@ export const CustomPanelTable = ({
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiButton fill href="#/create" data-test-subj="customPanels__createNewPanels">
-                      Create panel
+                      Create Dashboard
                     </EuiButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
@@ -357,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)}
                 />
@@ -395,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>
@@ -411,7 +418,7 @@ export const CustomPanelTable = ({
                       fullWidth={false}
                       href="#/create"
                     >
-                      Create panel
+                      Create Dashboard
                     </EuiButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>

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);
       });
   };
 
@@ -213,19 +213,10 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
   };
 
   const onDatePickerChange = (timeProps: OnTimeChangeProps) => {
-    onTimeChange(
-      timeProps.start,
-      timeProps.end,
-      recentlyUsedRanges,
-      setRecentlyUsedRanges,
-      setStartTime,
-      setEndTime
-    );
+    const { updatedRanges } = onTimeChange(timeProps.start, timeProps.end, recentlyUsedRanges);
     setStartTime(timeProps.start);
     setEndTime(timeProps.end);
-    dispatch(updatePanel({ ...panel, timeRange: { from: timeProps.start, to: timeProps.end } }));
-
-    setRecentlyUsedRanges(updatedRanges.slice(0, 9));
+    setRecentlyUsedRanges(updatedRanges);
     onRefreshFilters(timeProps.start, timeProps.end);
   };
 
@@ -244,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();
@@ -263,7 +254,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         onRename,
         closeModal,
         'Name',
-        'Rename Panel',
+        'Rename Dashboard',
         'Cancel',
         'Rename',
         openPanelName,
@@ -295,7 +286,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         onClone,
         closeModal,
         'Name',
-        'Duplicate Panel',
+        'Duplicate Dashboard',
         'Cancel',
         'Duplicate',
         openPanelName + ' (copy)',
@@ -401,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);
       });
   };
@@ -419,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);
       });
   };
@@ -472,7 +463,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
       onClick={() => setPanelsMenuPopover(true)}
       disabled={addVizDisabled}
     >
-      Panel actions
+      Dashboard Actions
     </EuiButton>
   );
 
@@ -507,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);
@@ -542,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]);