diff --git a/public/pages/Configuration/Configuration.tsx b/public/pages/Configuration/Configuration.tsx index cda1aa6..66a71ef 100644 --- a/public/pages/Configuration/Configuration.tsx +++ b/public/pages/Configuration/Configuration.tsx @@ -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'; @@ -165,119 +166,163 @@ const Configuration = ({ const textPadding = { lineHeight: '22px', padding: '5px 0px' }; const formRowPadding = { padding: '0px 0px 20px' }; + const enabledSymb = Enabled; + const disabledSymb = Disabled; return (
- - - + + + + + + + +

Top n queries monitoring configuration settings

+
+
+
+ + + + +

Metric Type

+
+ + Specify the metric type to set settings for. + +
+ + + onMetricChange(e)} + /> + + + + +

Enabled

+
+ + {`Enable/disable top N query monitoring by ${metric}.`} + +
+ + + + + onEnabledChange(e)} /> + + + + {isEnabled ? ( + <> + + +

Value of N (count)

+
+ + Specify the value of N. N is the number of queries to be collected within + the window size. + +
+ + + onTopNSizeChange(e)} + /> + + + + +

Window size

+
+ + The duration during which the Top N queries are collected. + +
+ + + + + + + + onTimeChange(e)} + /> + + + + + + ) : null} +
+
+
+
+
+ + -

Configuration settings

+

Statuses for configuration metrics

- + - -

Metric Type

-
- - Specify the metric type to set settings for. - + Latency
- - onMetricChange(e)} - /> - + + {latencySettings.isEnabled ? enabledSymb : disabledSymb} +
+ - -

Enabled

-
- - {`Enable/disable ${metric} to be include in Top N Queries.`} - + CPU Usage +
+ + + {cpuSettings.isEnabled ? enabledSymb : disabledSymb} + +
+ + + Memory - - - - onEnabledChange(e)} /> - - + + {memorySettings.isEnabled ? enabledSymb : disabledSymb} - {isEnabled ? ( - <> - - -

Value of N (count)

-
- - Specify the value of N. N is the number of queries to be collected within - the window size. - -
- - - onTopNSizeChange(e)} - /> - - - - -

Window size

-
- - The duration during which the Top N queries are collected. - -
- - - - - - - - onTimeChange(e)} - /> - - - - - - ) : null} -
+
- - - + + + {changed && valid ? ( diff --git a/public/pages/QueryDetails/Components/QuerySummary.tsx b/public/pages/QueryDetails/Components/QuerySummary.tsx index fcae816..7d6d5fb 100644 --- a/public/pages/QueryDetails/Components/QuerySummary.tsx +++ b/public/pages/QueryDetails/Components/QuerySummary.tsx @@ -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) => { diff --git a/public/pages/QueryDetails/QueryDetails.tsx b/public/pages/QueryDetails/QueryDetails.tsx index 9efe886..67dc932 100644 --- a/public/pages/QueryDetails/QueryDetails.tsx +++ b/public/pages/QueryDetails/QueryDetails.tsx @@ -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'; diff --git a/public/pages/QueryInsights/QueryInsights.tsx b/public/pages/QueryInsights/QueryInsights.tsx index 7263628..c3169f6 100644 --- a/public/pages/QueryInsights/QueryInsights.tsx +++ b/public/pages/QueryInsights/QueryInsights.tsx @@ -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'; @@ -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 ))); diff --git a/public/pages/TopNQueries/TopNQueries.tsx b/public/pages/TopNQueries/TopNQueries.tsx index c305574..406417b 100644 --- a/public/pages/TopNQueries/TopNQueries.tsx +++ b/public/pages/TopNQueries/TopNQueries.tsx @@ -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 }, @@ -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) => { diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..4f8fcd3 --- /dev/null +++ b/yarn.lock @@ -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==