-
Notifications
You must be signed in to change notification settings - Fork 917
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Vis Builder] Add field summary popovers (#2682)
* [Vis Builder] Add field summary popovers Much of the functionality was ported from `Discover`, but largely refactored. * Add utilities to get sampled hit summaries by field * Add popover summaries * Slight refactor of special `Count` pseudofield * Use observable subscription to update sampled hits Fixes #950 Signed-off-by: Josh Romero <rmerqg@amazon.com> * [Vis Builder] Add additional unit tests Signed-off-by: Josh Romero <rmerqg@amazon.com> * [VisBuilder] Update naming of summary field components Signed-off-by: Josh Romero <rmerqg@amazon.com> * [VisBuilder] Avoid prop passing by extracting custom hooks - refactor meta field identification Signed-off-by: Josh Romero <rmerqg@amazon.com> * [VisBuilder] Add TODOs with issue links, fix test ID Restores previous test ID for count field button Signed-off-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: Josh Romero <rmerqg@amazon.com> (cherry picked from commit 2e16de1) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
1 parent
1596e4a
commit 808fcd8
Showing
20 changed files
with
1,275 additions
and
146 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
46 changes: 46 additions & 0 deletions
46
src/plugins/vis_builder/public/application/components/data_tab/field.test.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,46 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import React from 'react'; | ||
import { render, screen } from '@testing-library/react'; | ||
|
||
import { IndexPatternField } from '../../../../../data/public'; | ||
|
||
import { DraggableFieldButton } from './field'; | ||
|
||
describe('visBuilder field', function () { | ||
describe('DraggableFieldButton', () => { | ||
it('should render normal fields without a dragValue specified', async () => { | ||
const props = { | ||
field: new IndexPatternField( | ||
{ | ||
name: 'bytes', | ||
type: 'number', | ||
esTypes: ['long'], | ||
count: 10, | ||
scripted: false, | ||
searchable: true, | ||
aggregatable: true, | ||
readFromDocValues: true, | ||
}, | ||
'bytes' | ||
), | ||
}; | ||
render(<DraggableFieldButton {...props} />); | ||
|
||
const button = screen.getByTestId('field-bytes-showDetails'); | ||
|
||
expect(button).toBeDefined(); | ||
}); | ||
|
||
// TODO: it('should allow specified dragValue to override the field name'); | ||
|
||
// TODO: it('should make dots wrappable'); | ||
|
||
// TODO: it('should use a non-scripted FieldIcon by default'); | ||
}); | ||
|
||
// TODO: describe('Field', function () { }); | ||
}); |
113 changes: 113 additions & 0 deletions
113
src/plugins/vis_builder/public/application/components/data_tab/field.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,113 @@ | ||
/* | ||
* SPDX-License-Identifier: Apache-2.0 | ||
* | ||
* The OpenSearch Contributors require contributions made to | ||
* this file be licensed under the Apache-2.0 license or a | ||
* compatible open source license. | ||
* | ||
* Any modifications Copyright OpenSearch Contributors. See | ||
* GitHub history for details. | ||
*/ | ||
|
||
/* | ||
* Licensed to Elasticsearch B.V. under one or more contributor | ||
* license agreements. See the NOTICE file distributed with | ||
* this work for additional information regarding copyright | ||
* ownership. Elasticsearch B.V. licenses this file to you under | ||
* the Apache License, Version 2.0 (the "License"); you may | ||
* not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
|
||
import React, { useState } from 'react'; | ||
import { EuiPopover } from '@elastic/eui'; | ||
|
||
import { IndexPatternField } from '../../../../../data/public'; | ||
import { | ||
FieldButton, | ||
FieldButtonProps, | ||
FieldIcon, | ||
} from '../../../../../opensearch_dashboards_react/public'; | ||
|
||
import { COUNT_FIELD, useDrag } from '../../utils/drag_drop'; | ||
import { FieldDetailsView } from './field_details'; | ||
import { FieldDetails } from './types'; | ||
import './field.scss'; | ||
|
||
export interface FieldProps { | ||
field: IndexPatternField; | ||
getDetails: (field) => FieldDetails; | ||
} | ||
|
||
// TODO: Add field sections (Available fields, popular fields from src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx) | ||
export const Field = ({ field, getDetails }: FieldProps) => { | ||
const [infoIsOpen, setOpen] = useState(false); | ||
|
||
function togglePopover() { | ||
setOpen(!infoIsOpen); | ||
} | ||
|
||
return ( | ||
<EuiPopover | ||
ownFocus | ||
display="block" | ||
button={<DraggableFieldButton isActive={infoIsOpen} onClick={togglePopover} field={field} />} | ||
isOpen={infoIsOpen} | ||
closePopover={() => setOpen(false)} | ||
anchorPosition="rightUp" | ||
panelClassName="vbItem__fieldPopoverPanel" | ||
// TODO: make reposition on scroll actually work: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2782 | ||
repositionOnScroll | ||
data-test-subj="field-popover" | ||
> | ||
{infoIsOpen && <FieldDetailsView field={field} details={getDetails(field)} />} | ||
</EuiPopover> | ||
); | ||
}; | ||
|
||
export interface DraggableFieldButtonProps extends Partial<FieldButtonProps> { | ||
dragValue?: IndexPatternField['name'] | null | typeof COUNT_FIELD; | ||
field: Partial<IndexPatternField> & Pick<IndexPatternField, 'displayName' | 'name' | 'type'>; | ||
} | ||
|
||
export const DraggableFieldButton = ({ dragValue, field, ...rest }: DraggableFieldButtonProps) => { | ||
const { name, displayName, type, scripted = false } = field; | ||
const [dragProps] = useDrag({ | ||
namespace: 'field-data', | ||
value: dragValue ?? name, | ||
}); | ||
|
||
function wrapOnDot(str: string) { | ||
// u200B is a non-width white-space character, which allows | ||
// the browser to efficiently word-wrap right after the dot | ||
// without us having to draw a lot of extra DOM elements, etc | ||
return str.replace(/\./g, '.\u200B'); | ||
} | ||
|
||
const defaultIcon = <FieldIcon type={type} scripted={scripted} size="l" />; | ||
|
||
const defaultFieldName = ( | ||
<span data-test-subj={`field-${name}`} title={name} className="vbFieldButton__name"> | ||
{wrapOnDot(displayName)} | ||
</span> | ||
); | ||
|
||
const defaultProps = { | ||
className: 'vbFieldButton', | ||
dataTestSubj: `field-${name}-showDetails`, | ||
fieldIcon: defaultIcon, | ||
fieldName: defaultFieldName, | ||
onClick: () => {}, | ||
}; | ||
|
||
return <FieldButton {...defaultProps} {...rest} {...dragProps} />; | ||
}; |
4 changes: 4 additions & 0 deletions
4
src/plugins/vis_builder/public/application/components/data_tab/field_bucket.scss
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,4 @@ | ||
.vbFieldDetails__barContainer { | ||
// Constrains value to the flex item, and allows for truncation when necessary | ||
min-width: 0; | ||
} |
110 changes: 110 additions & 0 deletions
110
src/plugins/vis_builder/public/application/components/data_tab/field_bucket.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,110 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import React from 'react'; | ||
import { | ||
EuiText, | ||
EuiButtonIcon, | ||
EuiFlexGroup, | ||
EuiFlexItem, | ||
EuiSpacer, | ||
EuiProgress, | ||
} from '@elastic/eui'; | ||
import { i18n } from '@osd/i18n'; | ||
|
||
import { IndexPatternField } from '../../../../../data/public'; | ||
|
||
import { Bucket } from './types'; | ||
import './field_bucket.scss'; | ||
import { useOnAddFilter } from '../../utils/use'; | ||
|
||
interface FieldBucketProps { | ||
bucket: Bucket; | ||
field: IndexPatternField; | ||
} | ||
|
||
export function FieldBucket({ bucket, field }: FieldBucketProps) { | ||
const { count, display, percent, value } = bucket; | ||
const { filterable: isFilterableField, name: fieldName } = field; | ||
|
||
const onAddFilter = useOnAddFilter(); | ||
|
||
const emptyText = i18n.translate('visBuilder.fieldSelector.detailsView.emptyStringText', { | ||
// We need this to communicate to users when a top value is actually an empty string | ||
defaultMessage: 'Empty string', | ||
}); | ||
const addLabel = i18n.translate( | ||
'visBuilder.fieldSelector.detailsView.filterValueButtonAriaLabel', | ||
{ | ||
defaultMessage: 'Filter for {fieldName}: "{value}"', | ||
values: { fieldName, value }, | ||
} | ||
); | ||
const removeLabel = i18n.translate( | ||
'visBuilder.fieldSelector.detailsView.filterOutValueButtonAriaLabel', | ||
{ | ||
defaultMessage: 'Filter out {fieldName}: "{value}"', | ||
values: { fieldName, value }, | ||
} | ||
); | ||
|
||
const displayValue = display || emptyText; | ||
|
||
return ( | ||
<> | ||
<EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s"> | ||
<EuiFlexItem className="vbFieldDetails__barContainer" grow={1}> | ||
<EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}> | ||
<EuiFlexItem grow={1} className="eui-textTruncate"> | ||
<EuiText | ||
title={`${displayValue}: ${count} (${percent.toFixed(1)}%)`} | ||
size="xs" | ||
className="eui-textTruncate" | ||
> | ||
{displayValue} | ||
</EuiText> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false} className="eui-textTruncate"> | ||
<EuiText color="secondary" size="xs" className="eui-textTruncate"> | ||
{percent.toFixed(1)}% | ||
</EuiText> | ||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
<EuiProgress | ||
value={percent} | ||
max={100} | ||
color="secondary" | ||
aria-label={`${value}: ${count} (${percent}%)`} | ||
size="s" | ||
/> | ||
</EuiFlexItem> | ||
{/* TODO: Should we have any explanation for non-filterable fields? */} | ||
{isFilterableField && ( | ||
<EuiFlexItem grow={false}> | ||
<div> | ||
<EuiButtonIcon | ||
className="vbFieldDetails__filterButton" | ||
iconSize="s" | ||
iconType="plusInCircle" | ||
onClick={() => onAddFilter(field, value, '+')} | ||
aria-label={addLabel} | ||
data-test-subj={`plus-${fieldName}-${value}`} | ||
/> | ||
<EuiButtonIcon | ||
className="vbFieldDetails__filterButton" | ||
iconSize="s" | ||
iconType="minusInCircle" | ||
onClick={() => onAddFilter(field, value, '-')} | ||
aria-label={removeLabel} | ||
data-test-subj={`minus-${fieldName}-${value}`} | ||
/> | ||
</div> | ||
</EuiFlexItem> | ||
)} | ||
</EuiFlexGroup> | ||
<EuiSpacer size="s" /> | ||
</> | ||
); | ||
} |
Oops, something went wrong.