Skip to content

Commit

Permalink
Rename Panels => Observability Dashboard (#380)
Browse files Browse the repository at this point in the history
* Rename Panels => Observability Dashboard
---------

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
Signed-off-by: Joshua Li <joshuali925@gmail.com>
Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>
  • Loading branch information
4 people authored Apr 18, 2023
1 parent ba93e95 commit d05f136
Show file tree
Hide file tree
Showing 12 changed files with 67 additions and 61 deletions.
28 changes: 15 additions & 13 deletions public/components/custom_panels/custom_panel_table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -158,7 +158,7 @@ export const CustomPanelTable = ({
history.goBack();
},
'Name',
'Create operational panel',
'Create Observability Dashboard',
'Cancel',
'Create',
undefined,
Expand All @@ -174,7 +174,7 @@ export const CustomPanelTable = ({
onRename,
closeModal,
'Name',
'Rename Panel',
'Rename Dashboard',
'Cancel',
'Rename',
selectedCustomPanels[0].title,
Expand All @@ -190,7 +190,7 @@ export const CustomPanelTable = ({
onClone,
closeModal,
'Name',
'Duplicate Panel',
'Duplicate Dashboard',
'Cancel',
'Duplicate',
selectedCustomPanels[0].title + ' (copy)',
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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)}
/>
Expand Down Expand Up @@ -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>
Expand All @@ -416,7 +418,7 @@ export const CustomPanelTable = ({
fullWidth={false}
href="#/create"
>
Create panel
Create Dashboard
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
26 changes: 13 additions & 13 deletions public/components/custom_panels/custom_panel_view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
});
};

Expand Down Expand Up @@ -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();
Expand All @@ -254,7 +254,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
onRename,
closeModal,
'Name',
'Rename Panel',
'Rename Dashboard',
'Cancel',
'Rename',
openPanelName,
Expand Down Expand Up @@ -286,7 +286,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
onClone,
closeModal,
'Name',
'Duplicate Panel',
'Duplicate Dashboard',
'Cancel',
'Duplicate',
openPanelName + ' (copy)',
Expand Down Expand Up @@ -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);
});
};
Expand All @@ -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);
});
};
Expand Down Expand Up @@ -463,7 +463,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
onClick={() => setPanelsMenuPopover(true)}
disabled={addVizDisabled}
>
Panel actions
Dashboard Actions
</EuiButton>
);

Expand Down Expand Up @@ -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);
Expand All @@ -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]);
Expand Down
22 changes: 11 additions & 11 deletions public/components/custom_panels/custom_panel_view_so.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand All @@ -236,7 +236,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
onRename,
closeModal,
'Name',
'Rename Panel',
'Rename Dashboard',
'Cancel',
'Rename',
panel.title,
Expand All @@ -257,7 +257,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
onClone,
closeModal,
'Name',
'Duplicate Panel',
'Duplicate Dashboard',
'Cancel',
'Duplicate',
panel.title + ' (copy)',
Expand Down Expand Up @@ -440,7 +440,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
onClick={() => setPanelsMenuPopover(true)}
disabled={addVizDisabled}
>
Panel actions
Dashboard Actions
</EuiButton>
);

Expand All @@ -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);
}
};
Expand Down Expand Up @@ -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);
Expand All @@ -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));
Expand Down
4 changes: 2 additions & 2 deletions public/components/custom_panels/helpers/modal_containers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
8 changes: 4 additions & 4 deletions public/components/custom_panels/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit d05f136

Please sign in to comment.