-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Dataset quality] Enable page for metrics and traces (#190043)
Closes elastic/observability-dev#3454. This PR enables Dataset quality for being used for `traces` and `metrics`. ### Changes - Added `KNOWN_TYPES` array containing the types that we allow in dataset quality page. - `datasets`, `degradedDocs` and `nonAggregatableDatasets` are now wrapped in an state. This allow us to retrigger the calls whenever we need to do it (e.g. when changing timeframe), more importantly now whenever we select a new type of dataset. - The `invoke` `degradedDocs` is created dynamically depending on the types present in `KNOWN_TYPES`. - `GET /internal/dataset_quality/data_streams/stats` and `GET /internal/dataset_quality/data_streams/non_aggregatable` now accept an array of `DataStreamType`. This allow us to query the information for multiple types of dataStreams at the same time. - degradedDocs are stored now locally as a nested structure. This nested structure allow us to update just the needed portion instead of updating all datasets whenever a change occurs (e.g. a type is deselected). - redirectLink now takes into account the datastream type, it only redirects to logs explorer if it's enabled and the type of the datastream is logs. ### 🎥 Demo https://github.com/user-attachments/assets/082bd4e9-a8f8-4af9-a425-267adc3b30df --------- Co-authored-by: kibanamachine <[email protected]>
- Loading branch information
1 parent
8e9b827
commit 2441e9a
Showing
39 changed files
with
610 additions
and
313 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 102 additions & 0 deletions
102
...rvability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| /* | ||
| * 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 { EuiFilterButton, EuiPopover, EuiPopoverTitle, EuiSelectable, EuiText } from '@elastic/eui'; | ||
| import React, { useState } from 'react'; | ||
| import type { EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option'; | ||
| import { i18n } from '@kbn/i18n'; | ||
|
|
||
| const selectorLoading = i18n.translate('xpack.datasetQuality.selector.loading', { | ||
| defaultMessage: 'Loading', | ||
| }); | ||
|
|
||
| interface SelectorProps { | ||
| isLoading?: boolean; | ||
| options: Item[]; | ||
| loadingMessage?: string; | ||
| label: string; | ||
| searchPlaceholder: string; | ||
| noneAvailableMessage: string; | ||
| noneMatchingMessage: string; | ||
| onOptionsChange: (options: Item[]) => void; | ||
| } | ||
|
|
||
| export interface Item { | ||
| label: string; | ||
| checked?: EuiSelectableOptionCheckedType; | ||
| } | ||
|
|
||
| export function Selector({ | ||
| isLoading, | ||
| options, | ||
| loadingMessage, | ||
| label, | ||
| searchPlaceholder, | ||
| noneAvailableMessage, | ||
| noneMatchingMessage, | ||
| onOptionsChange, | ||
| }: SelectorProps) { | ||
| const [isPopoverOpen, setIsPopoverOpen] = useState(false); | ||
|
|
||
| const onButtonClick = () => { | ||
| setIsPopoverOpen(!isPopoverOpen); | ||
| }; | ||
|
|
||
| const closePopover = () => { | ||
| setIsPopoverOpen(false); | ||
| }; | ||
|
|
||
| const renderOption = (option: Item) => <EuiText size="s">{option.label}</EuiText>; | ||
|
|
||
| const button = ( | ||
| <EuiFilterButton | ||
| data-test-subj="datasetQualitySelectableButton" | ||
| iconType="arrowDown" | ||
| badgeColor="success" | ||
| onClick={onButtonClick} | ||
| isSelected={isPopoverOpen} | ||
| numFilters={options.length} | ||
| hasActiveFilters={!!options.find((item) => item.checked === 'on')} | ||
| numActiveFilters={options.filter((item) => item.checked === 'on').length} | ||
| > | ||
| {label} | ||
| </EuiFilterButton> | ||
| ); | ||
|
|
||
| return ( | ||
| <EuiPopover | ||
| button={button} | ||
| isOpen={isPopoverOpen} | ||
| closePopover={closePopover} | ||
| panelPaddingSize="none" | ||
| > | ||
| <EuiSelectable | ||
| data-test-subj="datasetQualitySelectableOptions" | ||
| searchable | ||
| searchProps={{ | ||
| placeholder: searchPlaceholder, | ||
| compressed: true, | ||
| }} | ||
| aria-label={label} | ||
| options={options} | ||
| onChange={onOptionsChange} | ||
| isLoading={isLoading} | ||
| loadingMessage={loadingMessage ?? selectorLoading} | ||
| emptyMessage={noneAvailableMessage} | ||
| noMatchesMessage={noneMatchingMessage} | ||
| renderOption={(option) => renderOption(option)} | ||
| > | ||
| {(list, search) => ( | ||
| <div style={{ width: 300 }}> | ||
| <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle> | ||
| {list} | ||
| </div> | ||
| )} | ||
| </EuiSelectable> | ||
| </EuiPopover> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.