Skip to content

Commit

Permalink
More updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@LilyCaroline17
LilyCaroline17 committed Aug 30, 2024
1 parent 55775a4 commit d2387b4
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 119 deletions.
255 changes: 150 additions & 105 deletions public/pages/Configuration/Configuration.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import React, { useMemo, useCallback, useState, useEffect } from 'react';
import {
EuiFlexItem,
EuiPanel,
EuiTitle,
EuiFlexGrid,
EuiText,
EuiBottomBar,
EuiButton,
EuiButtonEmpty,
EuiFieldNumber,
EuiSelect,
EuiFlexGrid,
EuiFlexGroup,
EuiFormRow,
EuiFlexItem,
EuiForm,
EuiButton,
EuiButtonEmpty,
EuiBottomBar,
EuiSwitch,
EuiFormRow,
EuiHealth,
EuiPanel,
EuiSelect,
EuiSpacer,
EuiSwitch,
EuiText,
EuiTitle
} from '@elastic/eui';
import { useHistory, useLocation } from 'react-router-dom';
import { CoreStart } from '../../../../../src/core/public';
Expand Down Expand Up @@ -165,119 +166,163 @@ const Configuration = ({

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>;

return (
<div>
<EuiFlexItem grow={false} style={{ width: '60%' }}>
<EuiPanel paddingSize='m'>
<EuiForm>
<EuiFlexGroup>
<EuiFlexItem grow={6}>
<EuiPanel paddingSize='m'>
<EuiForm>
<EuiFlexItem>
<EuiTitle size="s">
<EuiText size="s">
<h2>Top n queries monitoring configuration settings</h2>
</EuiText>
</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>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
<EuiSelect
id="metricType"
required={true}
options={metricTypes}
value={metric}
onChange={(e) => onMetricChange(e)}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="xs">
<h3>Enabled</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
{`Enable/disable top N query monitoring by ${metric}.`}
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
<EuiFlexItem>
<EuiSpacer size="s" />
<EuiSwitch label="" checked={isEnabled} onChange={(e) => onEnabledChange(e)} />
</EuiFlexItem>
</EuiFormRow>
</EuiFlexItem>
{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>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
label={`${metric}.top_n_size`}
helpText="Max allowed limit 100."
style={formRowPadding}
>
<EuiFieldNumber
min={1}
max={100}
required={isEnabled}
value={topNSize}
onChange={(e) => onTopNSizeChange(e)}
/>
</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>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
label={`${metric}.window_size`}
helpText="Max allowed limit 24 hours."
style={{ padding: '15px 0px 5px' }}
>
<EuiFlexGroup>
<EuiFlexItem style={{ flexDirection: 'row' }}>
<WindowChoice />
</EuiFlexItem>
<EuiFlexItem>
<EuiSelect
id="timeUnit"
required={isEnabled}
options={timeUnits}
value={time}
onChange={(e) => onTimeChange(e)}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
</EuiFlexItem>
</>
) : null}
</EuiFlexGrid>
</EuiFlexItem>
</EuiForm>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem grow={2}>
<EuiPanel paddingSize='m' grow={false}>
<EuiFlexItem>
<EuiTitle size="s">
<EuiText size="s">
<h2>Configuration settings</h2>
<h2>Statuses for configuration metrics</h2>
</EuiText>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGrid columns={2} gutterSize="s" style={{ padding: '15px 0px' }}>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="xs">
<h3>Metric Type</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
Specify the metric type to set settings for.
</EuiText>
<EuiText size="m">Latency</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
<EuiSelect
id="metricType"
required={true}
options={metricTypes}
value={metric}
onChange={(e) => onMetricChange(e)}
/>
</EuiFormRow>
<EuiSpacer size="xs" />
{latencySettings.isEnabled ? enabledSymb : disabledSymb}
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="xs">
<h3>Enabled</h3>
</EuiText>
<EuiText size="xs" style={textPadding}>
{`Enable/disable ${metric} to be include in Top N Queries.`}
</EuiText>
<EuiText size="m">CPU Usage</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiSpacer size="xs" />
{cpuSettings.isEnabled ? enabledSymb : disabledSymb}
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText size="m">Memory</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={formRowPadding}>
<EuiFlexItem>
<EuiSpacer size="s" />
<EuiSwitch label="" checked={isEnabled} onChange={(e) => onEnabledChange(e)} />
</EuiFlexItem>
</EuiFormRow>
<EuiSpacer size="xs" />
{memorySettings.isEnabled ? enabledSymb : disabledSymb}
</EuiFlexItem>
{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>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
label={`${metric}.top_n_size`}
helpText="Max allowed limit 100."
style={formRowPadding}
>
<EuiFieldNumber
min={1}
max={100}
required={isEnabled}
value={topNSize}
onChange={(e) => onTopNSizeChange(e)}
/>
</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>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
label={`${metric}.window_size`}
helpText="Max allowed limit 24 hours."
style={{ padding: '15px 0px 5px' }}
>
<EuiFlexGroup>
<EuiFlexItem style={{ flexDirection: 'row' }}>
<WindowChoice />
</EuiFlexItem>
<EuiFlexItem>
<EuiSelect
id="timeUnit"
required={isEnabled}
options={timeUnits}
value={time}
onChange={(e) => onTimeChange(e)}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
</EuiFlexItem>
</>
) : null}
</EuiFlexGrid>
</EuiFlexGroup>
</EuiFlexItem>
</EuiForm>
</EuiPanel>
</EuiFlexItem>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
{changed && valid ? (
<EuiBottomBar>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
Expand Down
2 changes: 1 addition & 1 deletion public/pages/QueryDetails/Components/QuerySummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { EuiFlexItem, EuiPanel, EuiText, EuiHorizontalRule, EuiFlexGrid } from '@elastic/eui';
import { EuiFlexGrid, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiText } from '@elastic/eui';

const QuerySummary = ({ query }: { query: any }) => {
const convertTime = (unixTime: number) => {
Expand Down
14 changes: 7 additions & 7 deletions public/pages/QueryDetails/QueryDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React, { useEffect } from 'react';
import Plotly from 'plotly.js-dist';
import {
EuiTitle,
EuiButton,
EuiCodeBlock,
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiPanel,
EuiText,
EuiSpacer,
EuiHorizontalRule,
EuiFlexGrid,
EuiCodeBlock,
EuiButton,
EuiFlexGroup,
EuiText,
EuiTitle
} from '@elastic/eui';
import { useParams, useHistory, useLocation } from 'react-router-dom';
import { CoreStart } from '../../../../../src/core/public';
Expand Down
4 changes: 2 additions & 2 deletions public/pages/QueryInsights/QueryInsights.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { EuiBasicTableColumn, EuiSuperDatePicker, EuiInMemoryTable, EuiLink } from '@elastic/eui';
import { EuiBasicTableColumn, EuiInMemoryTable, EuiLink, EuiSuperDatePicker } from '@elastic/eui';
import { useHistory, useLocation } from 'react-router-dom';
import { CoreStart } from '../../../../../src/core/public';
import { QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
Expand Down Expand Up @@ -126,7 +126,7 @@ const QueryInsights = ({
onTimeChange({ start, end });
};

const filterDuplicates = (options: any[]) => options.filter((value, index, self) =>
const filterDuplicates = (options: any[]) => options.filter((value, index, self) =>
index === self.findIndex((t) => (
t.value === value.value
)));
Expand Down
7 changes: 3 additions & 4 deletions public/pages/TopNQueries/TopNQueries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const TopNQueries = ({ core }: { core: CoreStart }) => {
const history = useHistory();
const location = useLocation();
const [loading, setLoading] = useState(false);
const [currStart, setStart] = useState('now-1y');
const [currStart, setStart] = useState('now-1d');
const [currEnd, setEnd] = useState('now');
const [recentlyUsedRanges, setRecentlyUsedRanges] = useState([
{ start: currStart, end: currEnd },
Expand Down Expand Up @@ -100,14 +100,13 @@ const TopNQueries = ({ core }: { core: CoreStart }) => {
return date ? date.toDate().getTime() : new Date().getTime();
};

// Not guaranteed without error msg from calling a newly allowed metric
const retrieveQueries = useCallback(
async (start: string, end: string) => {
const nullResponse = { response: { top_queries: [] } };
const params = {
query: {
from: parseDateString(start),
to: parseDateString(end),
from: new Date(parseDateString(start)).toISOString(),
to: new Date(parseDateString(end)).toISOString(),
},
};
const fetchMetric = async (endpoint : string) => {
Expand Down
13 changes: 13 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


object-hash@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==

plotly.js-dist@^2.34.0:
version "2.34.0"
resolved "https://registry.yarnpkg.com/plotly.js-dist/-/plotly.js-dist-2.34.0.tgz#7664ca33520b5dc1f142a1f6377e1c7354e6514d"
integrity sha512-FZR9QT60vtE1ocdSIfop+zDIJEoy1lejwOvAjTSy+AmE4GZ//rW1nnIXwCRv4o9ejfzWq++lQMu6FJf9G+NtFg==

0 comments on commit d2387b4

Please sign in to comment.