Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Stack Monitoring] Migrate logs-related components to TypeScript #203536

Merged
merged 4 commits into from
Dec 13, 2024
Merged

[Stack Monitoring] Migrate logs-related components to TypeScript #203536

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c482f69
Migrate logs-related component to TypeScript
gbamparop Dec 10, 2024
b86a52a
Fix types
gbamparop Dec 10, 2024
4c65312
Merge remote-tracking branch 'upstream/main' into monitoring-logs-ts-…
gbamparop Dec 12, 2024
6f13070
Update test
gbamparop Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions x-pack/plugins/monitoring/public/application/contexts/external_config_context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface ExternalConfig {
renderReactApp: boolean;
staleStatusThresholdSeconds: number;
isCcsEnabled: boolean;
logsIndices: string;
}

export const ExternalConfigContext = createContext({} as ExternalConfig);
0 ...ents/logs/__snapshots__/logs.test.js.snap → ...nts/logs/__snapshots__/logs.test.tsx.snap
View file
Open in desktop
File renamed without changes.
0 ...ts/logs/__snapshots__/reason.test.js.snap → ...s/logs/__snapshots__/reason.test.tsx.snap
View file
Open in desktop
File renamed without changes.
0 ...onitoring/public/components/logs/index.js → ...nitoring/public/components/logs/index.tsx
View file
Open in desktop
File renamed without changes.
10 changes: 1 addition & 9 deletions ...oring/public/components/logs/logs.test.js → ...ring/public/components/logs/logs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,7 @@ jest.mock('../../legacy_shims', () => ({
},
}));

const sharePlugin = {
url: {
locators: {
get: () => {
return sharePluginMock.createLocator();
},
},
},
};
const sharePlugin = sharePluginMock.createStartContract();

const logs = {
enabled: true,
Expand Down
61 changes: 47 additions & 14 deletions ...monitoring/public/components/logs/logs.js → ...onitoring/public/components/logs/logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down Expand Up @@ -51,7 +77,7 @@ const columns = [
field: 'timestamp',
name: columnTimestampTitle,
width: '12%',
render: (timestamp) => getFormattedDateTimeLocal(timestamp),
render: (timestamp: number | Date) => getFormattedDateTimeLocal(timestamp),
},
{
field: 'level',
Expand All @@ -62,7 +88,7 @@ const columns = [
field: 'type',
name: columnTypeTitle,
width: '10%',
render: (type) => upperFirst(type),
render: (type: string) => upperFirst(type),
},
{
field: 'message',
Expand All @@ -81,7 +107,7 @@ const clusterColumns = [
field: 'timestamp',
name: columnTimestampTitle,
width: '12%',
render: (timestamp) => getFormattedDateTimeLocal(timestamp),
render: (timestamp: number | Date) => getFormattedDateTimeLocal(timestamp),
},
{
field: 'level',
Expand All @@ -92,7 +118,7 @@ const clusterColumns = [
field: 'type',
name: columnTypeTitle,
width: '10%',
render: (type) => upperFirst(type),
render: (type: string) => upperFirst(type),
},
{
field: 'message',
Expand All @@ -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}`);
Expand All @@ -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,
Expand All @@ -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<MonitoringStartServices>();
const externalConfig = useContext(ExternalConfigContext);
return <LogsContent sharePlugin={share} logsIndices={externalConfig.logsIndices} {...props} />;
};
export class LogsContent extends PureComponent {

export class LogsContent extends PureComponent<LogsContentProps> {
renderLogs() {
const {
logs: { enabled, logs },
Expand Down
0 ...ing/public/components/logs/reason.test.js → ...ng/public/components/logs/reason.test.tsx
View file
Open in desktop
File renamed without changes.
32 changes: 22 additions & 10 deletions ...nitoring/public/components/logs/reason.js → ...itoring/public/components/logs/reason.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -36,7 +48,7 @@ export const Reason = ({ reason }) => {
/>
);

if (false === reason.indexPatternExists) {
if (false === reason?.indexPatternExists) {
title = i18n.translate('xpack.monitoring.logs.reason.noIndexPatternTitle', {
defaultMessage: 'No log data found',
});
Expand All @@ -56,8 +68,8 @@ export const Reason = ({ reason }) => {
/>
);
} 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',
Expand All @@ -68,7 +80,7 @@ export const Reason = ({ reason }) => {
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',
});
Expand All @@ -87,7 +99,7 @@ export const Reason = ({ reason }) => {
}}
/>
);
} else if (false === reason.usingStructuredLogs) {
} else if (false === reason?.usingStructuredLogs) {
title = i18n.translate('xpack.monitoring.logs.reason.notUsingStructuredLogsTitle', {
defaultMessage: 'No structured logs found',
});
Expand All @@ -107,7 +119,7 @@ export const Reason = ({ reason }) => {
}}
/>
);
} else if (false === reason.clusterExists) {
} else if (false === reason?.clusterExists) {
title = i18n.translate('xpack.monitoring.logs.reason.noClusterTitle', {
defaultMessage: 'No logs for this cluster',
});
Expand All @@ -126,7 +138,7 @@ export const Reason = ({ reason }) => {
}}
/>
);
} 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',
});
Expand All @@ -145,7 +157,7 @@ export const Reason = ({ reason }) => {
}}
/>
);
} else if (false === reason.indexExists) {
} else if (false === reason?.indexExists) {
title = i18n.translate('xpack.monitoring.logs.reason.noIndexTitle', {
defaultMessage: 'No logs for this index',
});
Expand All @@ -164,7 +176,7 @@ export const Reason = ({ reason }) => {
}}
/>
);
} else if (false === reason.correctIndexName) {
} else if (false === reason?.correctIndexName) {
title = i18n.translate('xpack.monitoring.logs.reason.correctIndexNameTitle', {
defaultMessage: 'Corrupted filebeat index',
});
Expand Down