Skip to content

Commit

Permalink
Use Oui for dashboard style
Browse files Browse the repository at this point in the history
  • Loading branch information
@LilyCaroline17
LilyCaroline17 committed Aug 21, 2024
1 parent 83970c3 commit 55775a4
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 49 deletions.
25 changes: 16 additions & 9 deletions public/pages/Configuration/Configuration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
EuiButtonEmpty,
EuiBottomBar,
EuiSwitch,
EuiSpacer,
} from '@elastic/eui';
import { useHistory, useLocation } from 'react-router-dom';
import { CoreStart } from '../../../../../src/core/public';
Expand Down Expand Up @@ -162,10 +163,13 @@ const Configuration = ({
}
}

const textPadding = { lineHeight: '22px', padding: '5px 0px' };
const formRowPadding = { padding: '0px 0px 20px' };

return (
<div>
<EuiFlexItem grow={false} style={{ width: '60%' }}>
<EuiPanel style={{ padding: '20px 20px' }}>
<EuiPanel paddingSize='m'>
<EuiForm>
<EuiFlexItem>
<EuiTitle size="s">
Expand All @@ -180,12 +184,12 @@ const Configuration = ({
<EuiText size="xs">
<h3>Metric Type</h3>
</EuiText>
<EuiText size="xs" style={{ lineHeight: '22px', padding: '5px 0px' }}>
<EuiText size="xs" style={textPadding}>
Specify the metric type to set settings for.
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={{ padding: '0px 0px 20px' }}>
<EuiFormRow style={formRowPadding}>
<EuiSelect
id="metricType"
required={true}
Expand All @@ -199,13 +203,16 @@ const Configuration = ({
<EuiText size="xs">
<h3>Enabled</h3>
</EuiText>
<EuiText size="xs" style={{ lineHeight: '22px', padding: '5px 0px' }}>
<EuiText size="xs" style={textPadding}>
{`Enable/disable ${metric} to be include in Top N Queries.`}
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow style={{ padding: '0px 0px 20px' }}>
<EuiSwitch label="" checked={isEnabled} onChange={(e) => onEnabledChange(e)} />
<EuiFormRow style={formRowPadding}>
<EuiFlexItem>
<EuiSpacer size="s" />
<EuiSwitch label="" checked={isEnabled} onChange={(e) => onEnabledChange(e)} />
</EuiFlexItem>
</EuiFormRow>
</EuiFlexItem>
{isEnabled ? (
Expand All @@ -214,7 +221,7 @@ const Configuration = ({
<EuiText size="xs">
<h3>Value of N (count)</h3>
</EuiText>
<EuiText size="xs" style={{ lineHeight: '22px', padding: '5px 0px' }}>
<EuiText size="xs" style={textPadding}>
Specify the value of N. N is the number of queries to be collected within
the window size.
</EuiText>
Expand All @@ -223,7 +230,7 @@ const Configuration = ({
<EuiFormRow
label={`${metric}.top_n_size`}
helpText="Max allowed limit 100."
style={{ padding: '0px 0px 20px' }}
style={formRowPadding}
>
<EuiFieldNumber
min={1}
Expand All @@ -238,7 +245,7 @@ const Configuration = ({
<EuiText size="xs">
<h3>Window size</h3>
</EuiText>
<EuiText size="xs" style={{ lineHeight: '22px', padding: '5px 0px' }}>
<EuiText size="xs" style={textPadding}>
The duration during which the Top N queries are collected.
</EuiText>
</EuiFlexItem>
Expand Down
55 changes: 52 additions & 3 deletions public/pages/QueryInsights/QueryInsights.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { EuiBasicTableColumn, EuiSuperDatePicker, EuiInMemoryTable, EuiLink } from '@elastic/eui';
import { useHistory, useLocation } from 'react-router-dom';
import { CoreStart } from '../../../../../src/core/public';
Expand Down Expand Up @@ -34,6 +34,7 @@ const QueryInsights = ({
const history = useHistory();
const location = useLocation();
const hash = require('object-hash');
const [pagination, setPagination] = useState({ pageIndex: 0});

useEffect(() => {
core.chrome.setBreadcrumbs([
Expand All @@ -56,7 +57,8 @@ const QueryInsights = ({

const cols: Array<EuiBasicTableColumn<any>> = [
{
name: 'Time stamp',
// Make into flyout instead?
name: 'Timestamp',
render: (query: any) => {
return (
<span>
Expand Down Expand Up @@ -95,7 +97,7 @@ const QueryInsights = ({
{
field: INDICES_FIELD,
name: 'Indices',
render: (indices: string[]) => indices.toString(),
render: (indices: string[]) => Array.from(new Set(indices.flat())).join(', '),
sortable: true,
truncateText: true,
},
Expand Down Expand Up @@ -124,6 +126,11 @@ const QueryInsights = ({
onTimeChange({ start, end });
};

const filterDuplicates = (options: any[]) => options.filter((value, index, self) =>
index === self.findIndex((t) => (
t.value === value.value
)));

return (
<EuiInMemoryTable
items={queries}
Expand All @@ -134,12 +141,54 @@ const QueryInsights = ({
direction: 'desc',
},
}}
onTableChange={({ page: { index } }) =>
setPagination({ pageIndex: index })
}
pagination={pagination}
loading={loading}
search={{
box: {
placeholder: 'Search queries',
schema: false,
},
filters: [
{
type: 'field_value_selection',
field: INDICES_FIELD,
name: 'Indices',
multiSelect: true,
options: filterDuplicates(queries.map((query) => {
const values = Array.from(new Set(query[INDICES_FIELD].flat()));
return {
value: values.join(','),
name: values.join(','),
view: values.join(', ')
};
})),
},
{
type: 'field_value_selection',
field: SEARCH_TYPE_FIELD,
name: 'Search type',
multiSelect: false,
options: filterDuplicates(queries.map((query) => ({
value: query[SEARCH_TYPE_FIELD],
name: query[SEARCH_TYPE_FIELD],
view: query[SEARCH_TYPE_FIELD],
}))),
},
{
type: 'field_value_selection',
field: NODE_ID_FIELD,
name: 'Coordinator node ID',
multiSelect: true,
options: filterDuplicates(queries.map((query) => ({
value: query[NODE_ID_FIELD],
name: query[NODE_ID_FIELD],
view: query[NODE_ID_FIELD].replaceAll('_', ' '),
}))),
},
],
toolsRight: [
<EuiSuperDatePicker
start={currStart}
Expand Down
68 changes: 31 additions & 37 deletions public/pages/TopNQueries/TopNQueries.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useState } from 'react';
import { Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
import { EuiTab, EuiTabs, EuiTitle } from '@elastic/eui';
import { EuiTab, EuiTabs, EuiTitle, EuiSpacer } from '@elastic/eui';
import dateMath from '@elastic/datemath';
import QueryInsights from '../QueryInsights/QueryInsights';
import Configuration from '../Configuration/Configuration';
Expand Down Expand Up @@ -100,9 +100,9 @@ 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) => {
setLoading(true);
const nullResponse = { response: { top_queries: [] } };
const params = {
query: {
Expand All @@ -118,27 +118,23 @@ const TopNQueries = ({ core }: { core: CoreStart }) => {
return nullResponse;
}
};
const respLatency = latencySettings.isEnabled ? await fetchMetric('/api/top_queries/latency'): nullResponse;
const respCpu = cpuSettings.isEnabled ? await fetchMetric('/api/top_queries/cpu'): nullResponse;
const respMemory = memorySettings.isEnabled ? await fetchMetric('/api/top_queries/latency'): nullResponse;
const newQueries = [
...respLatency.response.top_queries,
...respCpu.response.top_queries,
...respMemory.response.top_queries,
];
// const startTimestamp = parseDateString(start);
// const endTimestamp = parseDateString(end);
const noDuplicates = newQueries.filter(
(array: any, index, self) =>
index === self.findIndex((t: any) => t.save === array.save && t.State === array.State)
);
setQueries(noDuplicates);
// setQueries(
// noDuplicates.filter(
// (item: any) => item.timestamp >= startTimestamp && item.timestamp <= endTimestamp
// )
// );
setLoading(false);
try {
setLoading(true);
const respLatency = latencySettings.isEnabled ? await fetchMetric('/api/top_queries/latency'): nullResponse;
const respCpu = cpuSettings.isEnabled ? await fetchMetric('/api/top_queries/cpu'): nullResponse;
const respMemory = memorySettings.isEnabled ? await fetchMetric('/api/top_queries/memory'): nullResponse;
const newQueries = [
...respLatency.response.top_queries,
...respCpu.response.top_queries,
...respMemory.response.top_queries,
];
const noDuplicates = Array.from(new Set(newQueries.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
setQueries(noDuplicates);
} catch (error) {
console.error('Error retrieving queries:', error);
} finally {
setLoading(false);
}
},
[latencySettings, cpuSettings, memorySettings, core]
);
Expand All @@ -152,7 +148,6 @@ const TopNQueries = ({ core }: { core: CoreStart }) => {
newWindowSize: string = '',
newTimeUnit: string = ''
) => {
setLoading(true);
if (get) {
try {
const resp = await core.http.get('/api/settings');
Expand Down Expand Up @@ -210,7 +205,6 @@ const TopNQueries = ({ core }: { core: CoreStart }) => {
console.error('Failed to set settings:', error);
}
}
setLoading(false);
},
[core]
);
Expand All @@ -228,12 +222,12 @@ const TopNQueries = ({ core }: { core: CoreStart }) => {
};

useEffect(() => {
const asyncUpdates = async () => {
await retrieveConfigInfo(true);
await retrieveQueries(currStart, currEnd);
}
asyncUpdates();
}, [currStart, currEnd]);
onTimeChange({start: currStart, end: currEnd});
}, []);

useEffect(() => {
retrieveQueries(currStart, currEnd);
}, [latencySettings, cpuSettings, memorySettings]);

return (
<div style={{ padding: '35px 35px' }}>
Expand All @@ -245,9 +239,9 @@ const TopNQueries = ({ core }: { core: CoreStart }) => {
<EuiTitle size="l">
<h1>Query insights - Top N queries</h1>
</EuiTitle>
<div style={{ padding: '25px 0px' }}>
<EuiTabs>{tabs.map(renderTab)}</EuiTabs>
</div>
<EuiSpacer size="l" />
<EuiTabs>{tabs.map(renderTab)}</EuiTabs>
<EuiSpacer size="l" />
<QueryInsights
queries={queries}
loading={loading}
Expand All @@ -262,9 +256,9 @@ const TopNQueries = ({ core }: { core: CoreStart }) => {
<EuiTitle size="l">
<h1>Query insights - Configuration</h1>
</EuiTitle>
<div style={{ padding: '25px 0px' }}>
<EuiTabs>{tabs.map(renderTab)}</EuiTabs>
</div>
<EuiSpacer size="l" />
<EuiTabs>{tabs.map(renderTab)}</EuiTabs>
<EuiSpacer size="l" />
<Configuration
latencySettings={latencySettings}
cpuSettings={cpuSettings}
Expand Down

0 comments on commit 55775a4

Please sign in to comment.