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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dataset Quality] Reactive Quality and Activity Summary Panels #182657

Merged
merged 5 commits into from
May 7, 2024
Merged

[Dataset Quality] Reactive Quality and Activity Summary Panels #182657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7aa12af
[Dataset Quality] Reactive Summary Panel
mohamedhamed-ahmed May 6, 2024
35835b2
Fix Tooltip Text
mohamedhamed-ahmed May 6, 2024
1e2c5f7
Merge branch 'main' into 179172-reactive-summary-panel
mohamedhamed-ahmed May 6, 2024
c9aa254
Fix Translations
mohamedhamed-ahmed May 6, 2024
726e9f6
Fix UI wrapping issue
mohamedhamed-ahmed May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion x-pack/plugins/observability_solution/dataset_quality/common/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export const summaryPanelDatasetsActivityText = i18n.translate(
export const summaryPanelDatasetsActivityTooltipText = i18n.translate(
'xpack.datasetQuality.summaryPanelDatasetsActivityTooltipText',
{
defaultMessage: 'The number of datasets with activity in the last 24 hours.',
defaultMessage: 'The number of datasets with activity in the selected time range.',
}
);

Expand Down
18 changes: 9 additions & 9 deletions ...ervability_solution/dataset_quality/public/components/dataset_quality/dataset_quality.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,16 @@ export const createDatasetQuality = ({
);

return (
<SummaryPanelProvider
dataStreamStatsClient={dataStreamStatsClient}
toasts={core.notifications.toasts}
>
<DatasetQualityContext.Provider value={datasetQualityProviderValue}>
<DatasetQualityContext.Provider value={datasetQualityProviderValue}>
<SummaryPanelProvider
dataStreamStatsClient={dataStreamStatsClient}
toasts={core.notifications.toasts}
>
<KibanaContextProviderForPlugin>
<DatasetQuality />
</KibanaContextProviderForPlugin>
</DatasetQualityContext.Provider>
</SummaryPanelProvider>
</SummaryPanelProvider>
</DatasetQualityContext.Provider>
);
};
};
Expand All @@ -67,10 +67,10 @@ function DatasetQuality() {
<Header />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<SummaryPanel />
<Filters />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<Filters />
<SummaryPanel />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<Table />
Expand Down
2 changes: 1 addition & 1 deletion ...ervability_solution/dataset_quality/public/components/dataset_quality/filters/filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function Filters() {
);

return (
<EuiFlexGroup data-test-subj="datasetQualityFiltersContainer" gutterSize="s">
<EuiFlexGroup data-test-subj="datasetQualityFiltersContainer" gutterSize="s" wrap>
<EuiFlexItem>
<FilterBar query={selectedQuery} onQueryChange={onQueryChange} />
</EuiFlexItem>
Expand Down
17 changes: 5 additions & 12 deletions ...set_quality/public/components/dataset_quality/summary_panel/last_day_data_placeholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ import {
EuiIconTip,
EuiSkeletonTitle,
} from '@elastic/eui';
import { summaryPanelLast24hText } from '../../../../common/translations';

interface LastDayDataPlaceholderParams {
title: string;
tooltip: string;
Expand All @@ -34,16 +32,11 @@ export function LastDayDataPlaceholder({
return (
<EuiPanel hasBorder>
<EuiFlexGroup gutterSize="m" direction="column">
<EuiFlexGroup direction="column" gutterSize="xs">
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
<EuiText size="s">{title}</EuiText>
<EuiFlexItem grow={false}>
<EuiIconTip content={tooltip} />
</EuiFlexItem>
</EuiFlexGroup>
<EuiText color="subdued" size="xs">
{summaryPanelLast24hText}
</EuiText>
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
<EuiText size="s">{title}</EuiText>
<EuiFlexItem grow={false}>
<EuiIconTip content={tooltip} />
</EuiFlexItem>
</EuiFlexGroup>
{isLoading ? (
<EuiSkeletonTitle size="m" data-test-subj={`datasetQuality-${title}-loading`} />
Expand Down
1 change: 1 addition & 0 deletions ...plugins/observability_solution/dataset_quality/public/hooks/use_dataset_quality_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@ export const useDatasetQualityTable = () => {
sort: { sort },
onTableChange,
pagination,
filteredItems,
renderedItems,
columns,
loading,
Expand Down
43 changes: 25 additions & 18 deletions x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_summary_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,21 @@ import { useInterpret, useSelector } from '@xstate/react';
import { IToasts } from '@kbn/core-notifications-browser';
import { IDataStreamsStatsClient } from '../services/data_streams_stats';
import { createDatasetsSummaryPanelStateMachine } from '../state_machines/summary_panel';
import { useDatasetQualityTable } from '.';
import { useDatasetQualityContext } from '../components/dataset_quality/context';
import { filterInactiveDatasets } from '../utils';

interface SummaryPanelContextDeps {
dataStreamStatsClient: IDataStreamsStatsClient;
toasts: IToasts;
}

const useSummaryPanel = ({ dataStreamStatsClient, toasts }: SummaryPanelContextDeps) => {
const { service } = useDatasetQualityContext();
const { filteredItems } = useDatasetQualityTable();

const { timeRange } = useSelector(service, (state) => state.context.filters);

const summaryPanelStateService = useInterpret(() =>
createDatasetsSummaryPanelStateMachine({
dataStreamStatsClient,
Expand All @@ -27,29 +35,28 @@ const useSummaryPanel = ({ dataStreamStatsClient, toasts }: SummaryPanelContextD
/*
Datasets Quality
*/
const datasetsQuality = useSelector(
summaryPanelStateService,
(state) => state.context.datasetsQuality
);
const isDatasetsQualityLoading = useSelector(
summaryPanelStateService,
(state) =>
state.matches('datasetsQuality.fetching') ||
state.matches('datasetsQuality.retrying') ||
state.matches('datasetsActivity.fetching')

const datasetsQuality = {
percentages: filteredItems.map((item) => item.degradedDocs.percentage),
};

const isDatasetsQualityLoading = useSelector(service, (state) =>
state.matches('degradedDocs.fetching')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is retrying not important anymore here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we are no longer using the summary panel state machine, and it was the one that had the retries implemented.
We now rely on the dataset quality controller state machine.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will create a ticket for this to not forget about it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#182874

);

/*
Datasets Activity
*/
const datasetsActivity = useSelector(
summaryPanelStateService,
(state) => state.context.datasetsActivity
);
const isDatasetsActivityLoading = useSelector(
summaryPanelStateService,
(state) =>
state.matches('datasetsActivity.fetching') || state.matches('datasetsActivity.retrying')
const datasetsActivity = {
total: filteredItems.length,
active: filterInactiveDatasets({
datasets: filteredItems,
timeRange,
}).length,
};

const isDatasetsActivityLoading = useSelector(service, (state) =>
state.matches('datasets.fetching')
);

/*
Expand Down
9 changes: 0 additions & 9 deletions ...bservability_solution/dataset_quality/public/state_machines/summary_panel/src/defaults.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,10 @@ export const MAX_RETRIES = 1;
export const RETRY_DELAY_IN_MS = 5000;

export const defaultContext: DefaultDatasetsSummaryPanelContext = {
datasetsQuality: {
percentages: [],
},
datasetsActivity: {
total: 0,
active: 0,
},
estimatedData: {
estimatedDataInBytes: 0,
},
retries: {
datasetsQualityRetries: 0,
datasetsActivityRetries: 0,
estimatedDataRetries: 0,
},
};
19 changes: 0 additions & 19 deletions ...ability_solution/dataset_quality/public/state_machines/summary_panel/src/notifications.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,6 @@
import { IToasts } from '@kbn/core/public';
import { i18n } from '@kbn/i18n';

export const fetchDatasetsQualityFailedNotifier = (toasts: IToasts, error: Error) => {
toasts.addDanger({
title: i18n.translate('xpack.datasetQuality.fetchDatasetsQualityDetailsFailed', {
defaultMessage: "We couldn't get your datasets quality details. Default values are shown.",
}),
text: error.message,
});
};

export const fetchDatasetsActivityFailedNotifier = (toasts: IToasts, error: Error) => {
toasts.addDanger({
title: i18n.translate('xpack.datasetQuality.fetchDatasetsActivityFailed', {
defaultMessage:
"We couldn't get your active/inactive datasets details. Default values are shown.",
}),
text: error.message,
});
};

export const fetchDatasetsEstimatedDataFailedNotifier = (toasts: IToasts, error: Error) => {
toasts.addDanger({
title: i18n.translate('xpack.datasetQuality.fetchDatasetsEstimatedDataFailed', {
Expand Down
113 changes: 1 addition & 112 deletions ...ability_solution/dataset_quality/public/state_machines/summary_panel/src/state_machine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,11 @@
import { IToasts } from '@kbn/core/public';
import { getDateISORange } from '@kbn/timerange';
import { assign, createMachine, DoneInvokeEvent, InterpreterFrom } from 'xstate';
import { DataStreamStat } from '../../../../common/data_streams_stats/data_stream_stat';
import { DEFAULT_TIME_RANGE } from '../../../../common/constants';
import { IDataStreamsStatsClient } from '../../../services/data_streams_stats';
import { filterInactiveDatasets } from '../../../utils/filter_inactive_datasets';
import { defaultContext, MAX_RETRIES, RETRY_DELAY_IN_MS } from './defaults';
import { fetchDatasetsEstimatedDataFailedNotifier } from './notifications';
import {
fetchDatasetsActivityFailedNotifier,
fetchDatasetsEstimatedDataFailedNotifier,
fetchDatasetsQualityFailedNotifier,
} from './notifications';
import {
DatasetsActivityDetails,
DatasetsQuality,
DatasetsSummaryPanelContext,
DatasetsSummaryPanelState,
DatasetSummaryPanelEvent,
Expand All @@ -40,78 +32,6 @@ export const createPureDatasetsSummaryPanelStateMachine = (
id: 'DatasetsQualitySummaryPanel',
type: 'parallel',
states: {
datasetsQuality: {
initial: 'fetching',
states: {
fetching: {
invoke: {
src: 'loadDatasetsQuality',
onDone: {
target: 'loaded',
actions: ['storeDatasetsQuality'],
},
onError: [
{
target: 'retrying',
cond: {
type: 'canRetry',
counter: 'datasetsQualityRetries',
},
actions: ['incrementDatasetsQualityRetries'],
},
{
target: 'loaded',
actions: ['notifyFetchDatasetsQualityFailed'],
},
],
},
},
retrying: {
after: {
[RETRY_DELAY_IN_MS]: 'fetching',
},
},
loaded: {
type: 'final',
},
},
},
datasetsActivity: {
initial: 'fetching',
states: {
fetching: {
invoke: {
src: 'loadDatasetsActivity',
onDone: {
target: 'loaded',
actions: ['storeDatasetsActivity'],
},
onError: [
{
target: 'retrying',
cond: {
type: 'canRetry',
counter: 'datasetsActivityRetries',
},
actions: ['incrementDatasetsActivityRetries'],
},
{
target: 'loaded',
actions: ['notifyFetchDatasetsActivityFailed'],
},
],
},
},
retrying: {
after: {
[RETRY_DELAY_IN_MS]: 'fetching',
},
},
loaded: {
type: 'final',
},
},
},
estimatedData: {
initial: 'fetching',
states: {
Expand Down Expand Up @@ -163,25 +83,13 @@ export const createPureDatasetsSummaryPanelStateMachine = (
},
{
actions: {
storeDatasetsQuality: assign((_context, event) =>
'data' in event ? { datasetsQuality: event.data as DatasetsQuality } : {}
),
storeDatasetsActivity: assign((_context, event) =>
'data' in event ? { datasetsActivity: event.data as DatasetsActivityDetails } : {}
),
storeEstimatedData: assign((_context, event) =>
'data' in event
? {
estimatedData: event.data as EstimatedDataDetails,
}
: {}
),
incrementDatasetsQualityRetries: assign(({ retries }, _event) => ({
retries: { ...retries, datasetsQualityRetries: retries.datasetsQualityRetries + 1 },
})),
incrementDatasetsActivityRetries: assign(({ retries }, _event) => ({
retries: { ...retries, datasetsActivityRetries: retries.datasetsActivityRetries + 1 },
})),
incrementEstimatedDataRetries: assign(({ retries }, _event) => ({
retries: { ...retries, estimatedDataRetries: retries.estimatedDataRetries + 1 },
})),
Expand Down Expand Up @@ -214,29 +122,10 @@ export const createDatasetsSummaryPanelStateMachine = ({
}: DatasetsSummaryPanelStateMachineDependencies) =>
createPureDatasetsSummaryPanelStateMachine(initialContext).withConfig({
actions: {
notifyFetchDatasetsQualityFailed: (_context, event: DoneInvokeEvent<Error>) =>
fetchDatasetsQualityFailedNotifier(toasts, event.data),
notifyFetchDatasetsActivityFailed: (_context, event: DoneInvokeEvent<Error>) =>
fetchDatasetsActivityFailedNotifier(toasts, event.data),
notifyFetchEstimatedDataFailed: (_context, event: DoneInvokeEvent<Error>) =>
fetchDatasetsEstimatedDataFailedNotifier(toasts, event.data),
},
services: {
loadDatasetsQuality: async (_context) => {
const dataStreamsStats = await dataStreamStatsClient.getDataStreamsDegradedStats();
const percentages = dataStreamsStats.map((stat) => stat.percentage);
return { percentages };
},
loadDatasetsActivity: async (_context) => {
const dataStreamStats = await dataStreamStatsClient.getDataStreamsStats();
const activeDataStreams = filterInactiveDatasets({
datasets: dataStreamStats.map(DataStreamStat.create),
});
return {
total: dataStreamStats.length,
active: activeDataStreams.length,
};
},
loadEstimatedData: async (_context) => {
const { startDate, endDate } = getDateISORange(DEFAULT_TIME_RANGE);
return dataStreamStatsClient.getDataStreamsEstimatedDataInBytes({
Expand Down