From c482f691885d4caf3afa6956939e9bd22fd7c280 Mon Sep 17 00:00:00 2001 From: gbamparop Date: Tue, 10 Dec 2024 11:00:29 +0000 Subject: [PATCH 1/3] Migrate logs-related component to TypeScript --- .../contexts/external_config_context.tsx | 1 + .../{logs.test.js.snap => logs.test.tsx.snap} | 0 ...ason.test.js.snap => reason.test.tsx.snap} | 0 .../components/logs/{index.js => index.tsx} | 0 .../logs/{logs.test.js => logs.test.tsx} | 10 +-- .../components/logs/{logs.js => logs.tsx} | 61 ++++++++++++++----- .../logs/{reason.test.js => reason.test.tsx} | 0 .../components/logs/{reason.js => reason.tsx} | 14 ++++- 8 files changed, 62 insertions(+), 24 deletions(-) rename x-pack/plugins/monitoring/public/components/logs/__snapshots__/{logs.test.js.snap => logs.test.tsx.snap} (100%) rename x-pack/plugins/monitoring/public/components/logs/__snapshots__/{reason.test.js.snap => reason.test.tsx.snap} (100%) rename x-pack/plugins/monitoring/public/components/logs/{index.js => index.tsx} (100%) rename x-pack/plugins/monitoring/public/components/logs/{logs.test.js => logs.test.tsx} (97%) rename x-pack/plugins/monitoring/public/components/logs/{logs.js => logs.tsx} (82%) rename x-pack/plugins/monitoring/public/components/logs/{reason.test.js => reason.test.tsx} (100%) rename x-pack/plugins/monitoring/public/components/logs/{reason.js => reason.tsx} (94%) diff --git a/x-pack/plugins/monitoring/public/application/contexts/external_config_context.tsx b/x-pack/plugins/monitoring/public/application/contexts/external_config_context.tsx index e86262defb65e..45791507fa726 100644 --- a/x-pack/plugins/monitoring/public/application/contexts/external_config_context.tsx +++ b/x-pack/plugins/monitoring/public/application/contexts/external_config_context.tsx @@ -14,6 +14,7 @@ export interface ExternalConfig { renderReactApp: boolean; staleStatusThresholdSeconds: number; isCcsEnabled: boolean; + logsIndices: string; } export const ExternalConfigContext = createContext({} as ExternalConfig); diff --git a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/logs.test.js.snap b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/logs.test.tsx.snap similarity index 100% rename from x-pack/plugins/monitoring/public/components/logs/__snapshots__/logs.test.js.snap rename to x-pack/plugins/monitoring/public/components/logs/__snapshots__/logs.test.tsx.snap diff --git a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.tsx.snap similarity index 100% rename from x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap rename to x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.tsx.snap diff --git a/x-pack/plugins/monitoring/public/components/logs/index.js b/x-pack/plugins/monitoring/public/components/logs/index.tsx similarity index 100% rename from x-pack/plugins/monitoring/public/components/logs/index.js rename to x-pack/plugins/monitoring/public/components/logs/index.tsx diff --git a/x-pack/plugins/monitoring/public/components/logs/logs.test.js b/x-pack/plugins/monitoring/public/components/logs/logs.test.tsx similarity index 97% rename from x-pack/plugins/monitoring/public/components/logs/logs.test.js rename to x-pack/plugins/monitoring/public/components/logs/logs.test.tsx index 9d3f68c854505..892796b0d2447 100644 --- a/x-pack/plugins/monitoring/public/components/logs/logs.test.js +++ b/x-pack/plugins/monitoring/public/components/logs/logs.test.tsx @@ -20,15 +20,7 @@ jest.mock('../../legacy_shims', () => ({ }, })); -const sharePlugin = { - url: { - locators: { - get: () => { - return sharePluginMock.createLocator(); - }, - }, - }, -}; +const sharePlugin = sharePluginMock.createStartContract(); const logs = { enabled: true, diff --git a/x-pack/plugins/monitoring/public/components/logs/logs.js b/x-pack/plugins/monitoring/public/components/logs/logs.tsx similarity index 82% rename from x-pack/plugins/monitoring/public/components/logs/logs.js rename to x-pack/plugins/monitoring/public/components/logs/logs.tsx index 82fdac6ea1f0d..828a342ea2f02 100644 --- a/x-pack/plugins/monitoring/public/components/logs/logs.js +++ b/x-pack/plugins/monitoring/public/components/logs/logs.tsx @@ -8,16 +8,42 @@ import React, { PureComponent, useContext } from 'react'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; import { upperFirst } from 'lodash'; -import { Legacy } from '../../legacy_shims'; import { EuiBasicTable, EuiTitle, EuiSpacer, EuiText, EuiCallOut, EuiLink } from '@elastic/eui'; -import { formatDateTimeLocal } from '../../../common/formatting'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { Reason } from './reason'; import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { SharePluginStart } from '@kbn/share-plugin/public'; +import { Reason, type IReason } from './reason'; +import { formatDateTimeLocal } from '../../../common/formatting'; +import { Legacy } from '../../legacy_shims'; import { ExternalConfigContext } from '../../application/contexts/external_config_context'; +import { MonitoringStartServices } from '../../types'; -const getFormattedDateTimeLocal = (timestamp) => { +interface LogsProps { + logs: { + logs?: Array<{ + timestamp: string; + component: string; + level: string; + type: string; + node: string; + message: string; + }>; + enabled: boolean; + limit: number; + reason: IReason; + }; + nodeId?: string; + indexUuid?: string; + clusterUuid?: string; +} + +interface LogsContentProps extends LogsProps { + sharePlugin: SharePluginStart; + logsIndices: string; +} + +const getFormattedDateTimeLocal = (timestamp: number | Date) => { const timezone = Legacy.shims.uiSettings?.get('dateFormat:tz'); return formatDateTimeLocal(timestamp, timezone); }; @@ -51,7 +77,7 @@ const columns = [ field: 'timestamp', name: columnTimestampTitle, width: '12%', - render: (timestamp) => getFormattedDateTimeLocal(timestamp), + render: (timestamp: number | Date) => getFormattedDateTimeLocal(timestamp), }, { field: 'level', @@ -62,7 +88,7 @@ const columns = [ field: 'type', name: columnTypeTitle, width: '10%', - render: (type) => upperFirst(type), + render: (type: string) => upperFirst(type), }, { field: 'message', @@ -81,7 +107,7 @@ const clusterColumns = [ field: 'timestamp', name: columnTimestampTitle, width: '12%', - render: (timestamp) => getFormattedDateTimeLocal(timestamp), + render: (timestamp: number | Date) => getFormattedDateTimeLocal(timestamp), }, { field: 'level', @@ -92,7 +118,7 @@ const clusterColumns = [ field: 'type', name: columnTypeTitle, width: '10%', - render: (type) => upperFirst(type), + render: (type: string) => upperFirst(type), }, { field: 'message', @@ -111,7 +137,13 @@ const clusterColumns = [ }, ]; -function getLogsUiLink(clusterUuid, nodeId, indexUuid, sharePlugin, logsIndices) { +function getLogsUiLink( + clusterUuid?: string, + nodeId?: string, + indexUuid?: string, + sharePlugin?: SharePluginStart, + logsIndices?: string +) { const params = []; if (clusterUuid) { params.push(`elasticsearch.cluster.uuid:${clusterUuid}`); @@ -124,9 +156,9 @@ function getLogsUiLink(clusterUuid, nodeId, indexUuid, sharePlugin, logsIndices) } const filter = params.join(' and '); - const discoverLocator = sharePlugin.url.locators.get('DISCOVER_APP_LOCATOR'); + const discoverLocator = sharePlugin?.url.locators.get('DISCOVER_APP_LOCATOR'); - const base = discoverLocator.getRedirectUrl({ + const base = discoverLocator?.getRedirectUrl({ dataViewSpec: { id: logsIndices, title: logsIndices, @@ -140,14 +172,15 @@ function getLogsUiLink(clusterUuid, nodeId, indexUuid, sharePlugin, logsIndices) return base; } -export const Logs = (props) => { +export const Logs = (props: LogsProps) => { const { services: { share }, - } = useKibana(); + } = useKibana(); const externalConfig = useContext(ExternalConfigContext); return ; }; -export class LogsContent extends PureComponent { + +export class LogsContent extends PureComponent { renderLogs() { const { logs: { enabled, logs }, diff --git a/x-pack/plugins/monitoring/public/components/logs/reason.test.js b/x-pack/plugins/monitoring/public/components/logs/reason.test.tsx similarity index 100% rename from x-pack/plugins/monitoring/public/components/logs/reason.test.js rename to x-pack/plugins/monitoring/public/components/logs/reason.test.tsx diff --git a/x-pack/plugins/monitoring/public/components/logs/reason.js b/x-pack/plugins/monitoring/public/components/logs/reason.tsx similarity index 94% rename from x-pack/plugins/monitoring/public/components/logs/reason.js rename to x-pack/plugins/monitoring/public/components/logs/reason.tsx index 4444c818d5cce..63c3241cd448b 100644 --- a/x-pack/plugins/monitoring/public/components/logs/reason.js +++ b/x-pack/plugins/monitoring/public/components/logs/reason.tsx @@ -12,7 +12,19 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { Legacy } from '../../legacy_shims'; import { Monospace } from '../metricbeat_migration/instruction_steps/components/monospace/monospace'; -export const Reason = ({ reason }) => { +export interface IReason { + indexPatternExists?: boolean; + indexPatternInTimeRangeExists?: boolean; + typeExists?: boolean; + typeExistsAtAnyTime?: boolean; + usingStructuredLogs?: boolean; + clusterExists?: boolean; + nodeExists?: boolean | null; + indexExists?: boolean; + correctIndexName?: boolean; +} + +export const Reason = ({ reason }: { reason: IReason }) => { const filebeatUrl = Legacy.shims.docLinks.links.filebeat.installation; const elasticsearchUrl = Legacy.shims.docLinks.links.filebeat.elasticsearchModule; const troubleshootUrl = Legacy.shims.docLinks.links.monitoring.troubleshootKibana; From b86a52a5a781d01b56cb2289f602209499b2bd84 Mon Sep 17 00:00:00 2001 From: gbamparop Date: Tue, 10 Dec 2024 12:00:05 +0000 Subject: [PATCH 2/3] Fix types --- .../public/components/logs/logs.tsx | 2 +- .../public/components/logs/reason.tsx | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logs/logs.tsx b/x-pack/plugins/monitoring/public/components/logs/logs.tsx index 828a342ea2f02..d0345be0ff0ae 100644 --- a/x-pack/plugins/monitoring/public/components/logs/logs.tsx +++ b/x-pack/plugins/monitoring/public/components/logs/logs.tsx @@ -31,7 +31,7 @@ interface LogsProps { }>; enabled: boolean; limit: number; - reason: IReason; + reason?: IReason; }; nodeId?: string; indexUuid?: string; diff --git a/x-pack/plugins/monitoring/public/components/logs/reason.tsx b/x-pack/plugins/monitoring/public/components/logs/reason.tsx index 63c3241cd448b..82a4f788df98b 100644 --- a/x-pack/plugins/monitoring/public/components/logs/reason.tsx +++ b/x-pack/plugins/monitoring/public/components/logs/reason.tsx @@ -24,7 +24,7 @@ export interface IReason { correctIndexName?: boolean; } -export const Reason = ({ reason }: { reason: IReason }) => { +export const Reason = ({ reason }: { reason?: IReason }) => { const filebeatUrl = Legacy.shims.docLinks.links.filebeat.installation; const elasticsearchUrl = Legacy.shims.docLinks.links.filebeat.elasticsearchModule; const troubleshootUrl = Legacy.shims.docLinks.links.monitoring.troubleshootKibana; @@ -48,7 +48,7 @@ export const Reason = ({ reason }: { reason: IReason }) => { /> ); - if (false === reason.indexPatternExists) { + if (false === reason?.indexPatternExists) { title = i18n.translate('xpack.monitoring.logs.reason.noIndexPatternTitle', { defaultMessage: 'No log data found', }); @@ -68,8 +68,8 @@ export const Reason = ({ reason }: { reason: IReason }) => { /> ); } else if ( - false === reason.indexPatternInTimeRangeExists || - (false === reason.typeExists && reason.typeExistsAtAnyTime) + false === reason?.indexPatternInTimeRangeExists || + (false === reason?.typeExists && reason.typeExistsAtAnyTime) ) { title = i18n.translate('xpack.monitoring.logs.reason.noIndexPatternInTimePeriodTitle', { defaultMessage: 'No logs for the selected time', @@ -80,7 +80,7 @@ export const Reason = ({ reason }: { reason: IReason }) => { defaultMessage="Use the time filter to adjust your timeframe." /> ); - } else if (false === reason.typeExists) { + } else if (false === reason?.typeExists) { title = i18n.translate('xpack.monitoring.logs.reason.noTypeTitle', { defaultMessage: 'No logs for Elasticsearch', }); @@ -99,7 +99,7 @@ export const Reason = ({ reason }: { reason: IReason }) => { }} /> ); - } else if (false === reason.usingStructuredLogs) { + } else if (false === reason?.usingStructuredLogs) { title = i18n.translate('xpack.monitoring.logs.reason.notUsingStructuredLogsTitle', { defaultMessage: 'No structured logs found', }); @@ -119,7 +119,7 @@ export const Reason = ({ reason }: { reason: IReason }) => { }} /> ); - } else if (false === reason.clusterExists) { + } else if (false === reason?.clusterExists) { title = i18n.translate('xpack.monitoring.logs.reason.noClusterTitle', { defaultMessage: 'No logs for this cluster', }); @@ -138,7 +138,7 @@ export const Reason = ({ reason }: { reason: IReason }) => { }} /> ); - } else if (false === reason.nodeExists) { + } else if (false === reason?.nodeExists) { title = i18n.translate('xpack.monitoring.logs.reason.noNodeTitle', { defaultMessage: 'No logs for this Elasticsearch node', }); @@ -157,7 +157,7 @@ export const Reason = ({ reason }: { reason: IReason }) => { }} /> ); - } else if (false === reason.indexExists) { + } else if (false === reason?.indexExists) { title = i18n.translate('xpack.monitoring.logs.reason.noIndexTitle', { defaultMessage: 'No logs for this index', }); @@ -176,7 +176,7 @@ export const Reason = ({ reason }: { reason: IReason }) => { }} /> ); - } else if (false === reason.correctIndexName) { + } else if (false === reason?.correctIndexName) { title = i18n.translate('xpack.monitoring.logs.reason.correctIndexNameTitle', { defaultMessage: 'Corrupted filebeat index', }); From 6f1307097a63f705aebfa86368877aa69e5c1618 Mon Sep 17 00:00:00 2001 From: gbamparop Date: Thu, 12 Dec 2024 15:17:18 +0000 Subject: [PATCH 3/3] Update test --- .../monitoring/public/components/logs/logs.test.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/monitoring/public/components/logs/logs.test.tsx b/x-pack/plugins/monitoring/public/components/logs/logs.test.tsx index e1c4b28efdce7..f103288a24980 100644 --- a/x-pack/plugins/monitoring/public/components/logs/logs.test.tsx +++ b/x-pack/plugins/monitoring/public/components/logs/logs.test.tsx @@ -19,7 +19,17 @@ jest.mock('../../legacy_shims', () => ({ }, })); -const sharePlugin = sharePluginMock.createStartContract(); +const sharePlugin = { + url: { + locators: { + get: () => { + const locatorMock = sharePluginMock.createLocator(); + locatorMock.getRedirectUrl.mockReturnValue('http://localhost:5601/app/discover'); + return locatorMock; + }, + }, + }, +} as unknown as ReturnType; const logs = { enabled: true,