Skip to content
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

[Backport 2.x] Fix: Query Insights Dashboards style integration - Configuration Page #108

Merged
merged 1 commit into from
Feb 14, 2025
Merged

[Backport 2.x] Fix: Query Insights Dashboards style integration - Configuration Page #108

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
144 changes: 77 additions & 67 deletions public/pages/Configuration/Configuration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
EuiSwitch,
EuiText,
EuiTitle,
EuiDescriptionList,
} from '@elastic/eui';
import { useHistory, useLocation } from 'react-router-dom';
import { AppMountParameters, CoreStart } from 'opensearch-dashboards/public';
Expand Down Expand Up @@ -215,7 +216,6 @@ const Configuration = ({
return windowVal >= 1 && windowVal <= 24;
})();

const textPadding = { lineHeight: '22px', padding: '5px 0px' };
const formRowPadding = { padding: '0px 0px 20px' };
const enabledSymb = <EuiHealth color="primary">Enabled</EuiHealth>;
const disabledSymb = <EuiHealth color="default">Disabled</EuiHealth>;
Expand All @@ -241,20 +241,21 @@ const Configuration = ({
<EuiForm>
<EuiFlexItem>
<EuiTitle size="s">
<EuiText size="s">
<h2>Top n queries monitoring configuration settings</h2>
</EuiText>
<h2>Top n queries monitoring configuration settings</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGrid columns={2} gutterSize="s" style={{ padding: '15px 0px' }}>
<EuiFlexItem>
<EuiText size="xs">
<h3>Metric Type</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
Specify the metric type to set settings for.
</EuiText>
<EuiDescriptionList
compressed={true}
listItems={[
{
title: <h3>Metric Type</h3>,
description: 'Specify the metric type to set settings for.',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
Expand All @@ -268,12 +269,15 @@ const Configuration = ({
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="xs">
<h3>Enabled</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
{`Enable/disable top N query monitoring by ${metric}.`}
</EuiText>
<EuiDescriptionList
compressed={true}
listItems={[
{
title: <h3>Enabled</h3>,
description: 'Enable/disable top N query monitoring by ${metric}.',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
Expand All @@ -291,13 +295,16 @@ const Configuration = ({
{isEnabled ? (
<>
<EuiFlexItem>
<EuiText size="xs">
<h3>Value of N (count)</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
Specify the value of N. N is the number of queries to be collected within
the window size.
</EuiText>
<EuiDescriptionList
compressed={true}
listItems={[
{
title: <h3>Value of N (count)</h3>,
description:
'Specify the value of N. N is the number of queries to be collected within the window size.',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
Expand All @@ -315,12 +322,16 @@ const Configuration = ({
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="xs">
<h3>Window size</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
The duration during which the Top N queries are collected.
</EuiText>
<EuiDescriptionList
compressed={true}
listItems={[
{
title: <h3>Window size</h3>,
description:
' The duration during which the Top N queries are collected.',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
Expand Down Expand Up @@ -355,15 +366,13 @@ const Configuration = ({
<EuiPanel paddingSize="m" grow={false}>
<EuiFlexItem>
<EuiTitle size="s">
<EuiText size="s">
<h2>Statuses for configuration metrics</h2>
</EuiText>
<h2>Statuses for configuration metrics</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="m">Latency</EuiText>
<EuiText size="s">Latency</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="xs" />
Expand All @@ -372,7 +381,7 @@ const Configuration = ({
</EuiFlexGroup>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="m">CPU Usage</EuiText>
<EuiText size="s">CPU Usage</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="xs" />
Expand All @@ -381,7 +390,7 @@ const Configuration = ({
</EuiFlexGroup>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="m">Memory</EuiText>
<EuiText size="s">Memory</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="xs" />
Expand All @@ -398,20 +407,21 @@ const Configuration = ({
<EuiForm>
<EuiFlexItem>
<EuiTitle size="s">
<EuiText size="s">
<h2>Top n queries grouping configuration settings</h2>
</EuiText>
<h2>Top n queries grouping configuration settings</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGrid columns={2} gutterSize="s" style={{ padding: '15px 0px' }}>
<EuiFlexItem>
<EuiText size="xs">
<h3>Group By</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
Specify the group by type.
</EuiText>
<EuiDescriptionList
compressed={true}
listItems={[
{
title: <h3>Group By</h3>,
description: ' Specify the group by type.',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
Expand All @@ -433,15 +443,13 @@ const Configuration = ({
<EuiPanel paddingSize="m" grow={false}>
<EuiFlexItem>
<EuiTitle size="s">
<EuiText size="s">
<h2>Statuses for group by</h2>
</EuiText>
<h2>Statuses for group by</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="m">Group By</EuiText>
<EuiText size="s">Group By</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="xs" />
Expand All @@ -458,20 +466,21 @@ const Configuration = ({
<EuiForm>
<EuiFlexItem>
<EuiTitle size="s">
<EuiText size="s">
<h2>Query Insights export and data retention settings</h2>
</EuiText>
<h2>Query Insights export and data retention settings</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGrid columns={2} gutterSize="s" style={{ padding: '15px 0px' }}>
<EuiFlexItem>
<EuiText size="xs">
<h3>Exporter</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
Configure a sink for exporting Query Insights data.
</EuiText>
<EuiDescriptionList
compressed={true}
listItems={[
{
title: <h3>Exporter</h3>,
description: ' Configure a sink for exporting Query Insights data.',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
Expand All @@ -485,12 +494,15 @@ const Configuration = ({
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="xs">
<h3>Delete After (days)</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
Number of days to retain Query Insights data.
</EuiText>
<EuiDescriptionList
compressed={true}
listItems={[
{
title: <h3>Delete After (days)</h3>,
description: ' Number of days to retain Query Insights data.',
},
]}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
Expand All @@ -512,15 +524,13 @@ const Configuration = ({
<EuiPanel paddingSize="m" grow={false}>
<EuiFlexItem>
<EuiTitle size="s">
<EuiText size="s">
<h2>Statuses for data retention</h2>
</EuiText>
<h2>Statuses for data retention</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="m">Exporter</EuiText>
<EuiText size="s">Exporter</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="xs" />
Expand Down
Loading
Loading