[ML] Improving log pattern analysis messaging (#141130)

* [ML] Improving log pattern analysis messaging

* moving to separate component

* translations

* fixing unselection when time range changes

* changes based on review
This commit is contained in:
James Gowdy 2022-09-28 09:06:15 +01:00 committed by GitHub
parent e8ebc23dca
commit 2b09477759
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 114 additions and 1 deletions

View file

@ -0,0 +1,101 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { FC } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiEmptyPrompt } from '@elastic/eui';
interface Props {
eventRateLength: number;
fieldSelected: boolean;
categoriesLength: number | null;
loading: boolean;
}
export const InformationText: FC<Props> = ({
eventRateLength,
fieldSelected,
categoriesLength,
loading,
}) => {
if (loading === true) {
return null;
}
return (
<>
{eventRateLength === 0 ? (
<EuiEmptyPrompt
title={
<h2>
<FormattedMessage
id="xpack.aiops.logCategorization.noDocsTitle"
defaultMessage="No documents found"
/>
</h2>
}
titleSize="xs"
body={
<p>
<FormattedMessage
id="xpack.aiops.logCategorization.noDocsBody"
defaultMessage="Ensure the selected time range contains documents."
/>
</p>
}
data-test-subj="aiopsNoWindowParametersEmptyPrompt"
/>
) : null}
{eventRateLength > 0 && categoriesLength === null ? (
<EuiEmptyPrompt
title={
<h2>
<FormattedMessage
id="xpack.aiops.logCategorization.emptyPromptTitle"
defaultMessage="Select a text field and click run categorization to start analysis"
/>
</h2>
}
titleSize="xs"
body={
<p>
<FormattedMessage
id="xpack.aiops.logCategorization.emptyPromptBody"
defaultMessage="Log pattern analysis groups messages into common categories."
/>
</p>
}
data-test-subj="aiopsNoWindowParametersEmptyPrompt"
/>
) : null}
{eventRateLength > 0 && categoriesLength !== null && categoriesLength === 0 ? (
<EuiEmptyPrompt
title={
<h2>
<FormattedMessage
id="xpack.aiops.logCategorization.noCategoriesTitle"
defaultMessage="No categories found"
/>
</h2>
}
titleSize="xs"
body={
<p>
<FormattedMessage
id="xpack.aiops.logCategorization.noCategoriesBody"
defaultMessage="Ensure the selected field is populated in the selected time range."
/>
</p>
}
data-test-subj="aiopsNoWindowParametersEmptyPrompt"
/>
) : null}
</>
);
};

View file

@ -40,6 +40,7 @@ import { useCategorizeRequest } from './use_categorize_request';
import type { EventRate, Category, SparkLinesPerCategory } from './use_categorize_request';
import { CategoryTable } from './category_table';
import { DocumentCountChart } from './document_count_chart';
import { InformationText } from './information_text';
export interface LogCategorizationPageProps {
dataView: DataView;
@ -160,6 +161,7 @@ export const LogCategorizationPage: FC<LogCategorizationPageProps> = ({
docCount,
}))
);
setCategories(null);
setTotalCount(documentStats.totalCount);
}
}, [documentStats, earliest, latest, searchQueryLanguage, searchString, searchQuery]);
@ -210,6 +212,7 @@ export const LogCategorizationPage: FC<LogCategorizationPageProps> = ({
]);
const onFieldChange = (value: EuiComboBoxOptionOption[] | undefined) => {
setCategories(null);
setSelectedField(value && value.length ? value[0].label : undefined);
};
@ -313,8 +316,17 @@ export const LogCategorizationPage: FC<LogCategorizationPageProps> = ({
<EuiSpacer />
</>
) : null}
{loading === true ? <EuiLoadingContent lines={10} /> : null}
{categories !== null ? (
<InformationText
loading={loading}
categoriesLength={categories?.length ?? null}
eventRateLength={eventRate.length}
fieldSelected={selectedField !== null}
/>
{selectedField !== undefined && categories !== null && categories.length > 0 ? (
<CategoryTable
categories={categories}
aiopsListState={aiopsListState}