Skip to content

Commit a615544

Browse files
committed
Add job status callouts
1 parent 60993fc commit a615544

5 files changed

Lines changed: 60 additions & 35 deletions

File tree

x-pack/legacy/plugins/infra/public/components/logging/log_analysis_job_status/log_analysis_job_problem_indicator.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,22 @@ export const LogAnalysisJobProblemIndicator: React.FC<{
1717
onRecreateMlJobForReconfiguration: () => void;
1818
onRecreateMlJobForUpdate: () => void;
1919
}> = ({ jobStatus, setupStatus, onRecreateMlJobForReconfiguration, onRecreateMlJobForUpdate }) => {
20-
if (jobStatus === 'stopped') {
20+
if (isStopped(jobStatus)) {
2121
return <JobStoppedCallout />;
22-
} else if (setupStatus === 'skippedButUpdatable') {
22+
} else if (isUpdatable(setupStatus)) {
2323
return <JobDefinitionOutdatedCallout onRecreateMlJob={onRecreateMlJobForUpdate} />;
24-
} else if (setupStatus === 'skippedButReconfigurable') {
24+
} else if (isReconfigurable(setupStatus)) {
2525
return <JobConfigurationOutdatedCallout onRecreateMlJob={onRecreateMlJobForReconfiguration} />;
2626
}
2727

2828
return null; // no problem to indicate
2929
};
30+
31+
const isStopped = (jobStatus: JobStatus) => jobStatus === 'stopped';
32+
33+
const isUpdatable = (setupStatus: SetupStatus) => setupStatus === 'skippedButUpdatable';
34+
35+
const isReconfigurable = (setupStatus: SetupStatus) => setupStatus === 'skippedButReconfigurable';
36+
37+
export const jobHasProblem = (jobStatus: JobStatus, setupStatus: SetupStatus) =>
38+
isStopped(jobStatus) || isUpdatable(setupStatus) || isReconfigurable(setupStatus);

x-pack/legacy/plugins/infra/public/components/logging/log_analysis_results/first_use_callout.tsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,24 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import { EuiCallOut, EuiSpacer } from '@elastic/eui';
7+
import { EuiCallOut } from '@elastic/eui';
88
import { i18n } from '@kbn/i18n';
99
import React from 'react';
1010

1111
export const FirstUseCallout = () => {
1212
return (
13-
<>
14-
<EuiCallOut
15-
color="success"
16-
title={i18n.translate('xpack.infra.logs.analysis.onboardingSuccessTitle', {
17-
defaultMessage: 'Success!',
13+
<EuiCallOut
14+
color="success"
15+
title={i18n.translate('xpack.infra.logs.analysis.onboardingSuccessTitle', {
16+
defaultMessage: 'Success!',
17+
})}
18+
>
19+
<p>
20+
{i18n.translate('xpack.infra.logs.analysis.onboardingSuccessContent', {
21+
defaultMessage:
22+
'Please allow a few minutes for our machine learning robots to begin collecting data.',
1823
})}
19-
>
20-
<p>
21-
{i18n.translate('xpack.infra.logs.analysis.onboardingSuccessContent', {
22-
defaultMessage:
23-
'Please allow a few minutes for our machine learning robots to begin collecting data.',
24-
})}
25-
</p>
26-
</EuiCallOut>
27-
<EuiSpacer />
28-
</>
24+
</p>
25+
</EuiCallOut>
2926
);
3027
};

x-pack/legacy/plugins/infra/public/pages/logs/log_entry_categories/page_results_content.tsx

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import datemath from '@elastic/datemath';
88
import {
9-
// EuiBadge,
109
EuiFlexGroup,
1110
EuiFlexItem,
1211
EuiPage,
@@ -21,9 +20,13 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
2120
import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
2221
import euiStyled from '../../../../../../common/eui_styled_components';
2322
import { TimeRange } from '../../../../common/http_api/shared/time_range';
23+
import {
24+
LogAnalysisJobProblemIndicator,
25+
jobHasProblem,
26+
} from '../../../components/logging/log_analysis_job_status';
27+
import { FirstUseCallout } from '../../../components/logging/log_analysis_results';
2428
import { useInterval } from '../../../hooks/use_interval';
2529
import { useTrackPageview } from '../../../hooks/use_track_metric';
26-
// import { FirstUseCallout } from './first_use';
2730
import { TopCategoriesSection } from './sections/top_categories';
2831
import { useLogEntryCategoriesModuleContext } from './use_log_entry_categories_module';
2932
import { useLogEntryCategoriesResults } from './use_log_entry_categories_results';
@@ -40,10 +43,10 @@ export const LogEntryCategoriesResultsContent: React.FunctionComponent = () => {
4043

4144
const {
4245
fetchJobStatus,
43-
// jobStatus,
46+
jobStatus,
4447
setupStatus,
4548
viewSetupForReconfiguration,
46-
// viewSetupForUpdate,
49+
viewSetupForUpdate,
4750
jobIds,
4851
sourceConfiguration: { sourceId },
4952
} = useLogEntryCategoriesModuleContext();
@@ -130,6 +133,10 @@ export const LogEntryCategoriesResultsContent: React.FunctionComponent = () => {
130133

131134
const isFirstUse = useMemo(() => setupStatus === 'hiddenAfterSuccess', [setupStatus]);
132135

136+
const hasResults = useMemo(() => topLogEntryCategories.length > 0, [
137+
topLogEntryCategories.length,
138+
]);
139+
133140
useEffect(() => {
134141
getTopLogEntryCategories();
135142
}, [getTopLogEntryCategories, categoryQueryDatasets, categoryQueryTimeRange.lastChangedTime]);
@@ -173,11 +180,25 @@ export const LogEntryCategoriesResultsContent: React.FunctionComponent = () => {
173180
</EuiFlexGroup>
174181
</EuiPanel>
175182
</EuiFlexItem>
183+
{jobHasProblem(jobStatus['log-entry-categories-count'], setupStatus) ? (
184+
<EuiFlexItem grow={false}>
185+
<LogAnalysisJobProblemIndicator
186+
jobStatus={jobStatus['log-entry-categories-count']}
187+
onRecreateMlJobForReconfiguration={viewSetupForReconfiguration}
188+
onRecreateMlJobForUpdate={viewSetupForUpdate}
189+
setupStatus={setupStatus}
190+
/>
191+
</EuiFlexItem>
192+
) : null}
193+
{isFirstUse && !hasResults ? (
194+
<EuiFlexItem grow={false}>
195+
<FirstUseCallout />
196+
</EuiFlexItem>
197+
) : null}
176198
<EuiFlexItem grow={false}>
177199
<EuiPanel paddingSize="l">
178200
<TopCategoriesSection
179201
availableDatasets={logEntryCategoryDatasets}
180-
isFirstUse={isFirstUse}
181202
isLoadingDatasets={isLoadingLogEntryCategoryDatasets}
182203
isLoadingTopCategories={isLoadingTopLogEntryCategories}
183204
jobId={jobIds['log-entry-categories-count']}

x-pack/legacy/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_section.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,20 @@
66

77
import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiSpacer, EuiTitle } from '@elastic/eui';
88
import { i18n } from '@kbn/i18n';
9-
import React, { useMemo } from 'react';
9+
import React from 'react';
1010

1111
import { LogEntryCategory } from '../../../../../../common/http_api/log_analysis';
1212
import { TimeRange } from '../../../../../../common/http_api/shared';
1313
import { LoadingOverlayWrapper } from '../../../../../components/loading_overlay_wrapper';
1414
import { RecreateJobButton } from '../../../../../components/logging/log_analysis_job_status';
15-
import {
16-
AnalyzeInMlButton,
17-
FirstUseCallout,
18-
} from '../../../../../components/logging/log_analysis_results';
15+
import { AnalyzeInMlButton } from '../../../../../components/logging/log_analysis_results';
1916
import { DatasetsSelector } from './datasets_selector';
2017
import { TopCategoriesTable } from './top_categories_table';
2118

2219
export const TopCategoriesSection: React.FunctionComponent<{
2320
availableDatasets: string[];
2421
isLoadingDatasets?: boolean;
2522
isLoadingTopCategories?: boolean;
26-
isFirstUse?: boolean;
2723
jobId: string;
2824
onChangeDatasetSelection: (datasets: string[]) => void;
2925
onRequestRecreateMlJob: () => void;
@@ -32,7 +28,6 @@ export const TopCategoriesSection: React.FunctionComponent<{
3228
topCategories: LogEntryCategory[];
3329
}> = ({
3430
availableDatasets,
35-
isFirstUse = false,
3631
isLoadingDatasets = false,
3732
isLoadingTopCategories = false,
3833
jobId,
@@ -42,8 +37,6 @@ export const TopCategoriesSection: React.FunctionComponent<{
4237
timeRange,
4338
topCategories,
4439
}) => {
45-
const hasResults = useMemo(() => topCategories.length > 0, [topCategories.length]);
46-
4740
return (
4841
<>
4942
<EuiFlexGroup alignItems="center">
@@ -60,7 +53,6 @@ export const TopCategoriesSection: React.FunctionComponent<{
6053
</EuiFlexItem>
6154
</EuiFlexGroup>
6255
<EuiSpacer size="m" />
63-
{isFirstUse && !hasResults ? <FirstUseCallout /> : null}
6456
<DatasetsSelector
6557
availableDatasets={availableDatasets}
6658
isLoading={isLoadingDatasets}

x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
EuiFlexItem,
1212
EuiPage,
1313
EuiPanel,
14+
EuiSpacer,
1415
EuiSuperDatePicker,
1516
EuiText,
1617
} from '@elastic/eui';
@@ -196,7 +197,12 @@ export const LogEntryRateResultsContent: React.FunctionComponent = () => {
196197
</EuiFlexItem>
197198
<EuiFlexItem grow={false}>
198199
<EuiPanel paddingSize="l">
199-
{isFirstUse && !hasResults ? <FirstUseCallout /> : null}
200+
{isFirstUse && !hasResults ? (
201+
<>
202+
<FirstUseCallout />
203+
<EuiSpacer />
204+
</>
205+
) : null}
200206
<LogRateResults
201207
isLoading={isLoading}
202208
results={logEntryRate}

0 commit comments

Comments
 (0)