Skip to content

metrics bug fixes #1 #1248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ps48 merged 1 commit into from
Nov 4, 2022
Merged

metrics bug fixes #1 #1248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 3 additions & 15 deletions dashboards-observability/public/components/custom_panels/helpers/utils.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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