From c482f691885d4caf3afa6956939e9bd22fd7c280 Mon Sep 17 00:00:00 2001 From: gbamparop Date: Tue, 10 Dec 2024 11:00:29 +0000 Subject: [PATCH] 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;