Skip to content

Commit

Permalink
metrics bug fixes #1 (opensearch-project#1248)
Browse files Browse the repository at this point in the history 
Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
  • Loading branch information
@ps48
ps48 authored Nov 4, 2022
1 parent e88ab44 commit bfda43a
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 70 deletions.
18 changes: 3 additions & 15 deletions dashboards-observability/public/components/custom_panels/helpers/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const updateQuerySpanInterval = (
spanParam: string
) => {
return query.replace(
new RegExp(`span\\((.*?)${timestampField}(.*?),(.*?)\\)`),
new RegExp(`span\\(\\s*${timestampField}\\s*,(.*?)\\)`),
`span(${timestampField},${spanParam})`
);
};
Expand All @@ -103,15 +103,13 @@ export const updateQuerySpanInterval = (
* + | where Carrier='OpenSearch-Air'
* + | stats sum(FlightDelayMin) as delays by Carrier
*
* Also, checks is span interval update is needed and retruns accordingly
*/
const queryAccumulator = (
originalQuery: string,
timestampField: string,
startTime: string,
endTime: string,
panelFilterQuery: string,
spanParam: string | undefined
panelFilterQuery: string
) => {
const indexMatchArray = originalQuery.match(PPL_INDEX_REGEX);
if (indexMatchArray == null) {
Expand Down Expand Up @@ -179,7 +177,6 @@ export const getQueryResponse = (
type: string,
startTime: string,
endTime: string,
spanParam: string | undefined,
setVisualizationData: React.Dispatch<React.SetStateAction<any[]>>,
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
setIsError: React.Dispatch<React.SetStateAction<string>>,
Expand All @@ -191,14 +188,7 @@ export const getQueryResponse = (

let finalQuery = '';
try {
finalQuery = queryAccumulator(
query,
timestampField,
startTime,
endTime,
filterQuery,
spanParam
);
finalQuery = queryAccumulator(query, timestampField, startTime, endTime, filterQuery);
} catch (error) {
const errorMessage = 'Issue in building final query';
setIsError(errorMessage);
Expand Down Expand Up @@ -264,7 +254,6 @@ export const renderSavedVisualization = async (
visualization.type,
startTime,
endTime,
spanParam,
setVisualizationData,
setIsLoading,
setIsError,
Expand Down Expand Up @@ -349,7 +338,6 @@ export const renderCatalogVisualization = async (
visualizationType,
startTime,
endTime,
spanParam,
setVisualizationData,
setIsLoading,
setIsError,
Expand Down
153 changes: 105 additions & 48 deletions ...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,20 @@
*/

import {
EuiButton,
EuiButtonIcon,
EuiCodeBlock,
EuiContextMenuItem,
EuiContextMenuPanel,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiLoadingChart,
EuiModal,
EuiModalBody,
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiPanel,
EuiPopover,
EuiSpacer,
Expand Down Expand Up @@ -96,6 +103,39 @@ export const VisualizationContainer = ({
const onActionsMenuClick = () => setIsPopoverOpen((currPopoverOpen) => !currPopoverOpen);
const closeActionsMenu = () => setIsPopoverOpen(false);

const [isModalVisible, setIsModalVisible] = useState(false);

const closeModal = () => setIsModalVisible(false);
const showModal = () => setIsModalVisible(true);

let modal;

if (isModalVisible) {
modal = (
<EuiModal onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<h1>{visualizationMetaData.name}</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>

<EuiModalBody>
This PPL Query is generated in runtime from selected data source
<EuiSpacer />
<EuiCodeBlock language="html" isCopyable>
{visualizationMetaData.query}
</EuiCodeBlock>
</EuiModalBody>

<EuiModalFooter>
<EuiButton onClick={closeModal} fill>
Close
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
}

let popoverPanel = [
<EuiContextMenuItem
data-test-subj="editVizContextMenuItem"
Expand Down Expand Up @@ -130,8 +170,22 @@ export const VisualizationContainer = ({
</EuiContextMenuItem>,
];

let showModelPanel = [
<EuiContextMenuItem
data-test-subj="showCatalogPPLQuery"
key="view_query"
disabled={disablePopover}
onClick={() => {
closeActionsMenu();
showModal();
}}
>
View query
</EuiContextMenuItem>,
];

if (usedInNotebooks) {
popoverPanel = [popoverPanel[0]];
popoverPanel = catalogVisualization ? [showModelPanel] : [popoverPanel[0]];
}

const loadVisaulization = async () => {
Expand Down Expand Up @@ -199,52 +253,55 @@ export const VisualizationContainer = ({
}, [editMode]);

return (
<EuiPanel
data-test-subj={`${visualizationTitle}VisualizationPanel`}
className="panel-full-width"
grow={false}
>
<div className={editMode ? 'mouseGrabber' : ''}>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem
style={{
width: '35%',
}}
>
<EuiText grow={false} className="panels-title-text">
<EuiToolTip delay="long" position="top" content={visualizationTitle}>
<h5>{visualizationTitle}</h5>
</EuiToolTip>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false} className="visualization-action-button">
{disablePopover ? (
<EuiIcon
type="crossInACircleFilled"
onClick={() => {
removeVisualization(visualizationId);
}}
/>
) : (
<EuiPopover
button={
<EuiButtonIcon
aria-label="actionMenuButton"
iconType="boxesHorizontal"
onClick={onActionsMenuClick}
/>
}
isOpen={isPopoverOpen}
closePopover={closeActionsMenu}
anchorPosition="downLeft"
>
<EuiContextMenuPanel items={popoverPanel} />
</EuiPopover>
)}
</EuiFlexItem>
</EuiFlexGroup>
</div>
{memoisedVisualizationBox}
</EuiPanel>
<>
<EuiPanel
data-test-subj={`${visualizationTitle}VisualizationPanel`}
className="panel-full-width"
grow={false}
>
<div className={editMode ? 'mouseGrabber' : ''}>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem
style={{
width: '35%',
}}
>
<EuiText grow={false} className="panels-title-text">
<EuiToolTip delay="long" position="top" content={visualizationTitle}>
<h5>{visualizationTitle}</h5>
</EuiToolTip>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false} className="visualization-action-button">
{disablePopover ? (
<EuiIcon
type="crossInACircleFilled"
onClick={() => {
removeVisualization(visualizationId);
}}
/>
) : (
<EuiPopover
button={
<EuiButtonIcon
aria-label="actionMenuButton"
iconType="boxesHorizontal"
onClick={onActionsMenuClick}
/>
}
isOpen={isPopoverOpen}
closePopover={closeActionsMenu}
anchorPosition="downLeft"
>
<EuiContextMenuPanel items={popoverPanel} />
</EuiPopover>
)}
</EuiFlexItem>
</EuiFlexGroup>
</div>
{memoisedVisualizationBox}
</EuiPanel>
{modal}
</>
);
};
16 changes: 10 additions & 6 deletions dashboards-observability/public/components/metrics/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@ export const Home = ({
};

const onRefreshFilters = (startTime: ShortDate, endTime: ShortDate) => {
if (spanValue < 1) {
setToast('Please add a valid span interval', 'danger');
return;
}
setOnRefresh(!onRefresh);
};

Expand Down Expand Up @@ -110,17 +114,17 @@ export const Home = ({
};

useEffect(() => {
selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true);
}, [selectedMetrics]);
if (!editMode) {
selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true);
} else {
setIsTopPanelDisabled(true);
}
}, [selectedMetrics, editMode]);

useEffect(() => {
setPanelVisualizations(metricsLayout);
}, [metricsLayout]);

useEffect(() => {
if (editMode) setIsTopPanelDisabled(true);
}, [editMode]);

const mainSectionClassName = classNames({
'col-md-9': !isSidebarClosed,
'col-md-12': isSidebarClosed,
Expand Down
9 changes: 8 additions & 1 deletion dashboards-observability/public/components/metrics/top_menu/top_menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@ export const TopMenu = ({
setResolutionValue(e.target.value);
};

const cancelButton = (
<EuiButton size="s" iconType="cross" color="danger" onClick={() => editPanel('cancel')}>
Cancel
</EuiButton>
);

const saveButton = (
<EuiButton size="s" iconType="save" onClick={() => editPanel('save')}>
Save view
Expand Down Expand Up @@ -193,7 +199,7 @@ export const TopMenu = ({
console.error(message, e);
setToast('Issue in saving metrics', 'danger');
}
setToast('Saved metrics to panels!');
setToast('Saved metrics to panels successfully!');
}
};

Expand Down Expand Up @@ -291,6 +297,7 @@ export const TopMenu = ({
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
{editMode ? (
<>
<EuiFlexItem grow={false}>{cancelButton}</EuiFlexItem>
<EuiFlexItem grow={false}>{saveButton}</EuiFlexItem>
</>
) : (
Expand Down

0 comments on commit bfda43a

Please sign in to comment.