From 06da0e77b56e866037969d4b3ef8d6147389d2be Mon Sep 17 00:00:00 2001 From: Diana Derevyankina <54894989+DziyanaDzeraviankina@users.noreply.github.com> Date: Mon, 30 Nov 2020 14:08:50 +0300 Subject: [PATCH 01/63] TSVB field list performance issue on using annotations (#84407) * TSVB field list performance issue on using annotations * Add AbortController to fetchFields and change translation id in annotations_editor * Rename fetchFields to debouncedFetchFields Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../vis_type_timeseries/common/constants.ts | 1 + .../components/aggs/field_select.js | 2 +- .../components/annotations_editor.js | 17 +++++++-- .../application/components/vis_editor.js | 15 +++++++- .../public/application/lib/fetch_fields.js | 38 +++++++++++-------- .../server/routes/fields.ts | 3 +- 6 files changed, 54 insertions(+), 22 deletions(-) diff --git a/src/plugins/vis_type_timeseries/common/constants.ts b/src/plugins/vis_type_timeseries/common/constants.ts index bfcb5e8e15b9d..019afcba60000 100644 --- a/src/plugins/vis_type_timeseries/common/constants.ts +++ b/src/plugins/vis_type_timeseries/common/constants.ts @@ -22,4 +22,5 @@ export const INDEXES_SEPARATOR = ','; export const AUTO_INTERVAL = 'auto'; export const ROUTES = { VIS_DATA: '/api/metrics/vis/data', + FIELDS: '/api/metrics/fields', }; diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.js index a4168fd1398f1..b1ff749494b10 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.js +++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.js @@ -91,7 +91,7 @@ function FieldSelectUi({ } FieldSelectUi.defaultProps = { - indexPattern: '*', + indexPattern: '', disabled: false, restrict: [], placeholder: i18n.translate('visTypeTimeseries.fieldSelect.selectFieldPlaceholder', { diff --git a/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js b/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js index 34132e5f72716..3d38aa72fc271 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js +++ b/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js @@ -43,13 +43,14 @@ import { EuiCode, EuiText, } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; function newAnnotation() { return { id: uuid.v1(), color: '#F00', - index_pattern: '*', + index_pattern: '', time_field: '@timestamp', icon: 'fa-tag', ignore_global_filters: 1, @@ -84,7 +85,7 @@ export class AnnotationsEditor extends Component { const defaults = { fields: '', template: '', - index_pattern: '*', + index_pattern: '', query_string: { query: '', language: getDefaultQueryLanguage() }, }; const model = { ...defaults, ...row }; @@ -100,6 +101,8 @@ export class AnnotationsEditor extends Component { const htmlId = htmlIdGenerator(model.id); const handleAdd = collectionActions.handleAdd.bind(null, this.props, newAnnotation); const handleDelete = collectionActions.handleDelete.bind(null, this.props, model); + const defaultIndexPattern = this.props.model.default_index_pattern; + return (
- {items.map((item) => (
-
- )}
+
+ {items.map((item) => (
+
|
|
@@ -1395,21 +1415,46 @@ exports[`MonitorList component renders the monitor list 1`] = `
-
+
-
+
+
+
+
+
-
-
+ in 0/1 location,
-
-
-
+
- 5m ago
-
+ Checked Sept 4, 2020 9:31:38 AM
-
- in 0/1 Location
-
- |
|
|
-
-`;
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx
index 8e5ae13836f47..769df84a6b83b 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx
@@ -18,6 +18,8 @@ import { renderWithRouter, shallowWithRouter } from '../../../../lib';
import * as redux from 'react-redux';
import moment from 'moment';
import { IHttpFetchError } from '../../../../../../../../src/core/public';
+import { mockMoment } from '../../../../lib/helper/test_helpers';
+import { EuiThemeProvider } from '../../../../../../observability/public';
jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
return {
@@ -58,7 +60,7 @@ const testFooPings: Ping[] = [
const testFooSummary: MonitorSummary = {
monitor_id: 'foo',
state: {
- monitor: {},
+ monitor: { type: 'http' },
summaryPings: testFooPings,
summary: {
up: 1,
@@ -93,7 +95,7 @@ const testBarPings: Ping[] = [
const testBarSummary: MonitorSummary = {
monitor_id: 'bar',
state: {
- monitor: {},
+ monitor: { type: 'http' },
summaryPings: testBarPings,
summary: {
up: 2,
@@ -107,6 +109,10 @@ const testBarSummary: MonitorSummary = {
describe('MonitorList component', () => {
let localStorageMock: any;
+ beforeAll(() => {
+ mockMoment();
+ });
+
const getMonitorList = (timestamp?: string): MonitorSummariesResult => {
if (timestamp) {
testBarSummary.state.timestamp = timestamp;
@@ -171,14 +177,16 @@ describe('MonitorList component', () => {
it('renders the monitor list', () => {
const component = renderWithRouter(
-
-
-
-
-
-
-
-
-
-
-
-
- Up
-
-
-
-
-
-
- a few seconds ago
-
-
-
-
- in 1/3 Locations
-
-
+
+`;
+
+exports[`MonitorListStatusColumn provides expected tooltip and display times 1`] = `
+
+
+`;
+
+exports[`MonitorListStatusColumn will display location status 1`] = `
+
+
+`;
+
+exports[`MonitorListStatusColumn will render display location status 1`] = `
+.c1 {
+ padding-right: 4px;
+}
+
+@media (max-width:574px) {
+ .c0 {
+ min-width: 230px;
+ }
+}
+
+
+
+`;
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list_status_column.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__tests__/monitor_status_column.test.tsx
similarity index 87%
rename from x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list_status_column.test.tsx
rename to x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__tests__/monitor_status_column.test.tsx
index cc91f9ccc20a6..79aa79783bdcf 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list_status_column.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__tests__/monitor_status_column.test.tsx
@@ -7,9 +7,10 @@
import React from 'react';
import moment from 'moment';
import { renderWithIntl, shallowWithIntl } from '@kbn/test/jest';
-import { getLocationStatus, MonitorListStatusColumn } from '../monitor_list_status_column';
-import { Ping } from '../../../../../common/runtime_types';
-import { STATUS } from '../../../../../common/constants';
+import { Ping } from '../../../../../../common/runtime_types';
+import { STATUS } from '../../../../../../common/constants';
+import { getLocationStatus, MonitorListStatusColumn } from '../monitor_status_column';
+import { EuiThemeProvider } from '../../../../../../../observability/public';
describe('MonitorListStatusColumn', () => {
beforeAll(() => {
@@ -253,30 +254,32 @@ describe('MonitorListStatusColumn', () => {
it('will render display location status', () => {
const component = renderWithIntl(
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ in 1/3 locations,
+
+
+
+
+
+ Checked Dec 31, 2018 7:00:00 PM
+
+
+
+ );
+};
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx
new file mode 100644
index 0000000000000..5b76e6c5e371f
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx
@@ -0,0 +1,195 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useContext } from 'react';
+import moment from 'moment';
+import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, EuiBadge, EuiSpacer } from '@elastic/eui';
+import { parseTimestamp } from '../parse_timestamp';
+import { Ping } from '../../../../../common/runtime_types';
+import {
+ STATUS,
+ SHORT_TIMESPAN_LOCALE,
+ UNNAMED_LOCATION,
+ SHORT_TS_LOCALE,
+} from '../../../../../common/constants';
+
+import * as labels from '../translations';
+import { UptimeThemeContext } from '../../../../contexts';
+import { euiStyled } from '../../../../../../observability/public';
+
+interface MonitorListStatusColumnProps {
+ status: string;
+ timestamp: string;
+ summaryPings: Ping[];
+}
+
+const StatusColumnFlexG = styled(EuiFlexGroup)`
+ @media (max-width: 574px) {
+ min-width: 230px;
+ }
+`;
+
+export const getHealthMessage = (status: string): string | null => {
+ switch (status) {
+ case STATUS.UP:
+ return labels.UP;
+ case STATUS.DOWN:
+ return labels.DOWN;
+ default:
+ return null;
+ }
+};
+
+export const getShortTimeStamp = (timeStamp: moment.Moment, relative = false) => {
+ if (relative) {
+ const prevLocale: string = moment.locale() ?? 'en';
+
+ const shortLocale = moment.locale(SHORT_TS_LOCALE) === SHORT_TS_LOCALE;
+
+ if (!shortLocale) {
+ moment.defineLocale(SHORT_TS_LOCALE, SHORT_TIMESPAN_LOCALE);
+ }
+
+ let shortTimestamp;
+ if (typeof timeStamp === 'string') {
+ shortTimestamp = parseTimestamp(timeStamp).fromNow();
+ } else {
+ shortTimestamp = timeStamp.fromNow();
+ }
+
+ // Reset it so, it does't impact other part of the app
+ moment.locale(prevLocale);
+ return shortTimestamp;
+ } else {
+ if (moment().diff(timeStamp, 'd') > 1) {
+ return timeStamp.format('ll LTS');
+ }
+ return timeStamp.format('LTS');
+ }
+};
+
+export const getLocationStatus = (summaryPings: Ping[], status: string) => {
+ const upPings: Set
+
+
+
+ );
+};
+
+const PaddedText = euiStyled(EuiText)`
+ padding-right: ${(props) => props.theme.eui.paddingSizes.xs};
+`;
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
index f31e25484a936..1732602b39d8d 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
@@ -9,30 +9,28 @@ import {
EuiBasicTable,
EuiFlexGroup,
EuiFlexItem,
- EuiIcon,
EuiLink,
EuiPanel,
EuiSpacer,
} from '@elastic/eui';
import React, { useState } from 'react';
-import styled from 'styled-components';
import { HistogramPoint, X509Expiry } from '../../../../common/runtime_types';
import { MonitorSummary } from '../../../../common/runtime_types';
-import { MonitorListStatusColumn } from './monitor_list_status_column';
+import { MonitorListStatusColumn } from './columns/monitor_status_column';
import { ExpandedRowMap } from './types';
import { MonitorBarSeries } from '../../common/charts';
-import { MonitorPageLink } from '../../common/monitor_page_link';
import { OverviewPageLink } from './overview_page_link';
import * as labels from './translations';
import { MonitorListPageSizeSelect } from './monitor_list_page_size_select';
import { MonitorListDrawer } from './monitor_list_drawer/list_drawer_container';
import { MonitorListProps } from './monitor_list_container';
import { MonitorList } from '../../../state/reducers/monitor_list';
-import { CertStatusColumn } from './cert_status_column';
+import { CertStatusColumn } from './columns/cert_status_column';
import { MonitorListHeader } from './monitor_list_header';
import { URL_LABEL } from '../../common/translations';
import { EnableMonitorAlert } from './columns/enable_alert';
import { STATUS_ALERT_COLUMN } from './translations';
+import { MonitorNameColumn } from './columns/monitor_name_col';
interface Props extends MonitorListProps {
pageSize: number;
@@ -40,12 +38,6 @@ interface Props extends MonitorListProps {
monitorList: MonitorList;
}
-const TruncatedEuiLink = styled(EuiLink)`
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-`;
-
export const noItemsMessage = (loading: boolean, filters?: string) => {
if (loading) return labels.LOADING;
return !!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE;
@@ -54,16 +46,9 @@ export const noItemsMessage = (loading: boolean, filters?: string) => {
export const MonitorListComponent: ({
filters,
monitorList: { list, error, loading },
- linkParameters,
- pageSize,
- setPageSize,
-}: Props) => any = ({
- filters,
- monitorList: { list, error, loading },
- linkParameters,
pageSize,
setPageSize,
-}) => {
+}: Props) => any = ({ filters, monitorList: { list, error, loading }, pageSize, setPageSize }) => {
const [drawerIds, updateDrawerIds] = useState
+ ,
- ,
- - Most recent error (5 days ago) --
- {i18n.translate('xpack.uptime.monitorList.enabledAlerts.title', {
- defaultMessage: 'Enabled alerts:',
- description: 'Alerts enabled for this monitor',
+ |