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.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Data panel styling and optimizations #40787

Merged
merged 103 commits into from
Jul 17, 2019
Merged
Changes from 1 commit
Commits
Show all changes
103 commits
Select commit Hold shift + click to select a range
f46855e
[lens] Dimension panel lets users select operations and fields indivi…
wylieconlon May 30, 2019
dcde41d
Merge remote-tracking branch 'origin/feature/lens' into lens/aggregat…
wylieconlon May 31, 2019
4a3ea3f
Merge remote-tracking branch 'origin/master' into lens/aggregations
wylieconlon Jun 3, 2019
30f69e3
Split files and add tests
wylieconlon Jun 3, 2019
82e2865
Merge remote-tracking branch 'origin/feature/lens' into lens/aggregat…
wylieconlon Jun 3, 2019
fe4238a
Fix dimension labeling and add clear button
wylieconlon Jun 4, 2019
4d09416
Support more aggregations, aggregation nesting, rollups, and clearing
wylieconlon Jun 5, 2019
6f81ded
Merge remote-tracking branch 'origin/feature/lens' into lens/aggregat…
wylieconlon Jun 5, 2019
3bf54d4
Fix esaggs expression
wylieconlon Jun 5, 2019
241187b
Merge remote-tracking branch 'origin/feature/lens' into lens/aggregat…
wylieconlon Jun 6, 2019
8c50598
Increase top-level test coverage of dimension panel
wylieconlon Jun 6, 2019
063715c
Merge branch 'feature/lens' into lens/aggregations
flash1293 Jun 7, 2019
8359b28
start work on param editors for operations
flash1293 Jun 7, 2019
6a3e6f8
add params for terms
flash1293 Jun 7, 2019
9cb80a8
remove unused variable
flash1293 Jun 7, 2019
4718369
Merge branch 'feature/lens' into lens/agg-configs
flash1293 Jun 11, 2019
5510db0
refactor operations
flash1293 Jun 11, 2019
404944f
move esaggs configurations to individual operation files
flash1293 Jun 11, 2019
8e0dc86
implement new edit flow
flash1293 Jun 12, 2019
520f0e7
split up dimension panel code
flash1293 Jun 12, 2019
7d6f3c9
Merge branch 'feature/lens' into lens/agg-configs
flash1293 Jun 12, 2019
cdcc822
fix some tests
flash1293 Jun 13, 2019
3e7c3b4
Merge branch 'feature/lens' into lens/agg-configs
flash1293 Jun 13, 2019
b72998d
moved stuff around and started cleaning up and adding tests
flash1293 Jun 13, 2019
41eb4d4
fix tests for dimension panel
flash1293 Jun 13, 2019
0674c2c
fix tests
flash1293 Jun 13, 2019
6d420e6
add tests and i18n
flash1293 Jun 13, 2019
2f54558
added a few more tests
flash1293 Jun 13, 2019
d3e356c
add test subj
flash1293 Jun 13, 2019
a1f55cf
remove unused import
flash1293 Jun 13, 2019
60c0239
start work on operation switching
flash1293 Jun 14, 2019
4511c81
highlight currently active operation
flash1293 Jun 14, 2019
5183115
Merge branch 'feature/lens' into lens/popover-configs
flash1293 Jun 19, 2019
6d91f2e
Auto format
flash1293 Jun 19, 2019
2cdc322
adjust user flow as discussed
flash1293 Jun 19, 2019
aa3c8fd
Merge branch 'feature/lens' into lens/popover-configs
flash1293 Jun 24, 2019
1ae848f
resolve merge conflicts
flash1293 Jun 24, 2019
09328ad
fix styling and add label behavior
flash1293 Jun 24, 2019
82b7ce4
start fixing tests and things
flash1293 Jun 24, 2019
df18560
fix css issues
flash1293 Jun 25, 2019
78f45c5
fix existing dimension panel test
flash1293 Jun 25, 2019
f82a200
add tests
flash1293 Jun 25, 2019
2798552
condense tests
flash1293 Jun 25, 2019
486bae9
rename stuff and carry over params when switching columns if possible
flash1293 Jun 25, 2019
c2b00cf
add basic layout
flash1293 Jun 25, 2019
754b29f
fix basic styling issues
flash1293 Jun 25, 2019
b87f18e
fix tests
flash1293 Jun 25, 2019
3be4f8e
starting to implement data panel
flash1293 Jun 25, 2019
ed3cf75
remove unused import
flash1293 Jun 25, 2019
6c6d037
Merge branch 'lens/styling' into lens/data-panel-styling
flash1293 Jun 25, 2019
46f594a
Merge branch 'feature/lens' into lens/popover-configs
flash1293 Jun 26, 2019
2690790
PR review fixes
flash1293 Jun 26, 2019
bbf573b
Merge branch 'feature/lens' into lens/popover-configs
flash1293 Jun 26, 2019
2634b9d
Merge branch 'feature/lens' into lens/styling
flash1293 Jun 26, 2019
0dcc1f4
PR review fixes
flash1293 Jun 26, 2019
baba0ef
Merge branch 'lens/styling' into lens/data-panel-styling
flash1293 Jun 26, 2019
e10488d
remove important marker
flash1293 Jun 26, 2019
68d50ca
size right side bar correctly
flash1293 Jun 26, 2019
6137613
Merge branch 'lens/styling' into lens/data-panel-styling
flash1293 Jun 26, 2019
1536038
multi line labels and type filter
flash1293 Jun 26, 2019
c4947bc
review fixes
flash1293 Jun 27, 2019
084cd26
Merge branch 'feature/lens' into lens/popover-configs
flash1293 Jun 27, 2019
d89743b
Merge branch 'feature/lens' into lens/styling
flash1293 Jun 27, 2019
de52e8b
Merge branch 'lens/styling' into lens/data-panel-styling
flash1293 Jun 27, 2019
34fe345
Merge branch 'lens/popover-configs' into lens/data-panel-styling
flash1293 Jun 27, 2019
08afe00
add tests
flash1293 Jun 27, 2019
094fa73
Merge branch 'feature/lens' into lens/styling
flash1293 Jun 27, 2019
6c7ab30
Merge branch 'lens/styling' into lens/data-panel-styling
flash1293 Jun 27, 2019
0c54840
fix small stuff
flash1293 Jun 27, 2019
fcd2ff4
solve i18n bug
flash1293 Jun 27, 2019
6449718
Merge branch 'feature/lens' into lens/data-panel-styling
flash1293 Jun 28, 2019
4561870
fix test
flash1293 Jun 28, 2019
38c1ce5
Merge branch 'feature/lens' into lens/data-panel-styling
flash1293 Jul 1, 2019
aced115
Merge branch 'lens/data-panel-styling' of https://github.com/flash129…
chrisdavies Jul 1, 2019
38cd6b2
Optimizations for larger index patterns
chrisdavies Jul 8, 2019
2140f2e
Merge upstream
chrisdavies Jul 8, 2019
0b82a6c
Fix TypeScript and linter errors
chrisdavies Jul 8, 2019
2425799
Fix I18n import
chrisdavies Jul 8, 2019
da9ea15
Fix dynamic scrolling in Firefox
chrisdavies Jul 8, 2019
26e5a0e
Merge branch 'feature/lens' of github.com:elastic/kibana into lens/da…
chrisdavies Jul 10, 2019
d0824f6
Make component debouncing general purpose
chrisdavies Jul 10, 2019
35a644b
Make horizontal bar charts render properly
chrisdavies Jul 10, 2019
6aa0f03
Merge branch 'feature/lens' of github.com:elastic/kibana into lens/da…
chrisdavies Jul 10, 2019
c10378e
Fix broken tests
chrisdavies Jul 10, 2019
b1792a4
Add basic tests for debounced component
chrisdavies Jul 10, 2019
2008051
Fix Firefox scroll issue
chrisdavies Jul 10, 2019
cd105d9
Merge upstream
chrisdavies Jul 11, 2019
57b0ff2
Fix typescript errors
chrisdavies Jul 11, 2019
f936629
Fix merge issue
chrisdavies Jul 11, 2019
eec45aa
Tweaks based on PR feedback
chrisdavies Jul 11, 2019
a4b5325
Fix styling in Safari
chrisdavies Jul 11, 2019
dddf92f
Tweak debounced component variable names, comments
chrisdavies Jul 11, 2019
6aa2e0e
Add localization to data panel wrapper
chrisdavies Jul 11, 2019
6366cf4
Add rudimentary smokescreen test for FieldIcon
chrisdavies Jul 11, 2019
e9ad95f
Merge upstream
chrisdavies Jul 15, 2019
80afe61
Clear data panel filters on index pattern change
chrisdavies Jul 15, 2019
fd9a0a5
Add test of drag drop provider memoization
chrisdavies Jul 16, 2019
df1cab5
Merge branch 'feature/lens' of github.com:elastic/kibana into lens/da…
chrisdavies Jul 16, 2019
770e2a7
Merge branch 'feature/lens' of github.com:elastic/kibana into lens/da…
chrisdavies Jul 16, 2019
b130c56
Merge branch 'lens/data-panel-styling' of github.com:chrisdavies/kiba…
chrisdavies Jul 16, 2019
bdbff66
Merge branch 'feature/lens' of github.com:elastic/kibana into lens/da…
chrisdavies Jul 16, 2019
5fd04d0
Tweak RootDragDropProvider test
chrisdavies Jul 16, 2019
41a6ebc
Fix indexpattern.scss
chrisdavies Jul 17, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
implement new edit flow
flash1293 committed Jun 12, 2019

Verified

This commit was signed with the committer’s verified signature.
frostming Frost Ming
commit 8e0dc8686bb5fcccc14f1cc86ae88ffddb8e019f
Original file line number Diff line number Diff line change
@@ -18,9 +18,9 @@ export function FrameLayout(props: FrameLayoutProps) {
return (
<EuiFlexGroup>
{/* TODO style this and add workspace prop and loading flags */}
<EuiFlexItem>{props.dataPanel}</EuiFlexItem>
<EuiFlexItem>{props.workspacePanel}</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={null}>{props.dataPanel}</EuiFlexItem>
<EuiFlexItem grow={5}>{props.workspacePanel}</EuiFlexItem>
<EuiFlexItem grow={null}>
{props.configPanel}
{props.suggestionsPanel}
</EuiFlexItem>
323 changes: 182 additions & 141 deletions x-pack/plugins/lens/public/indexpattern_plugin/dimension_panel.tsx
Original file line number Diff line number Diff line change
@@ -8,12 +8,14 @@ import _ from 'lodash';
import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
import {
EuiButtonIcon,
EuiComboBox,
EuiPopover,
EuiButtonEmpty,
EuiButtonIcon,
EuiFlexItem,
EuiFlexGroup,
EuiContextMenuItem,
EuiContextMenuPanel,
} from '@elastic/eui';
import { DatasourceDimensionPanelProps } from '../types';
import {
@@ -37,7 +39,8 @@ export type IndexPatternDimensionPanelProps = DatasourceDimensionPanelProps & {
};

export function IndexPatternDimensionPanel(props: IndexPatternDimensionPanelProps) {
const [isOpen, setOpen] = useState(false);
const [isSettingsOpen, setSettingsOpen] = useState(false);
const [isFieldSelectOpen, setFieldSelectOpen] = useState(false);

const operations = getOperations();
const operationPanels = getOperationDisplay();
@@ -54,161 +57,199 @@ export function IndexPatternDimensionPanel(props: IndexPatternDimensionPanelProp
col => 'sourceField' in col
) as FieldBasedIndexPatternColumn[];

const uniqueColumnsByField = _.uniq(fieldColumns, col => col.sourceField);
const uniqueColumnsByField = _.uniq(
fieldColumns
.filter(col => selectedColumn && col.operationType === selectedColumn.operationType)
.concat(fieldColumns),
col => col.sourceField
);

const functionsFromField = selectedColumn
? filteredColumns.filter(col => {
return (
!('sourceField' in selectedColumn) ||
!('sourceField' in col) ||
col.sourceField === selectedColumn.sourceField
(!('sourceField' in selectedColumn) && !('sourceField' in col)) ||
('sourceField' in selectedColumn &&
'sourceField' in col &&
col.sourceField === selectedColumn.sourceField)
);
})
: filteredColumns;

const ParamEditor =
selectedColumn && operationDefinitionMap[selectedColumn.operationType].paramEditor;
selectedColumn && operationDefinitionMap[selectedColumn.operationType].inlineOptions;
const contextOptionBuilder =
selectedColumn && operationDefinitionMap[selectedColumn.operationType].contextMenu;

const contextOptions = contextOptionBuilder
? contextOptionBuilder({
state: props.state,
setState: props.setState,
columnId: props.columnId,
})
: [];

const operationMenuItems = operations
.filter(o => selectedColumn && functionsFromField.some(col => col.operationType === o))
.map(o => (
<EuiContextMenuItem
key={o}
icon={selectedColumn && selectedColumn.operationType === o ? 'check' : 'empty'}
onClick={() => {
const newColumn: IndexPatternColumn = filteredColumns.find(
col =>
col.operationType === o &&
(!('sourceField' in col) ||
!('sourceField' in selectedColumn) ||
col.sourceField === selectedColumn.sourceField)
)!;

const newColumns = {
...props.state.columns,
[props.columnId]: newColumn,
};

props.setState({
...props.state,
columnOrder: getColumnOrder(newColumns),
columns: newColumns,
});
}}
>
{operationPanels[o].displayName}
</EuiContextMenuItem>
));

return (
<EuiFlexGroup>
<EuiFlexItem grow={true}>
<EuiPopover
id={props.columnId}
panelClassName="lnsIndexPattern__dimensionPopover"
isOpen={isOpen}
closePopover={() => {
setOpen(false);
}}
ownFocus
anchorPosition="rightCenter"
button={
<EuiFlexItem data-test-subj="indexPattern-dimension" grow={true}>
<EuiButtonEmpty
data-test-subj="indexPattern-dimensionPopover-button"
onClick={() => {
setOpen(!isOpen);
}}
>
<span>
{selectedColumn
? selectedColumn.label
: i18n.translate('xpack.lens.indexPattern.configureDimensionLabel', {
defaultMessage: 'Configure dimension',
})}
</span>
</EuiButtonEmpty>
</EuiFlexItem>
}
>
<EuiFlexGroup wrap={true}>
<EuiFlexItem grow={2}>
{(!selectedColumn || 'sourceField' in selectedColumn) && (
<EuiComboBox
data-test-subj="indexPattern-dimension-field"
placeholder="Field"
options={uniqueColumnsByField.map(col => ({
label: col.sourceField,
value: col.operationId,
}))}
selectedOptions={
selectedColumn && 'sourceField' in selectedColumn
? [
{
label: selectedColumn.sourceField,
value: selectedColumn.operationId,
},
]
: []
}
singleSelection={{ asPlainText: true }}
isClearable={false}
onChange={choices => {
const column: IndexPatternColumn = columns.find(
({ operationId }) => operationId === choices[0].value
)!;
const newColumns: IndexPatternPrivateState['columns'] = {
...props.state.columns,
[props.columnId]: column,
};

props.setState({
...props.state,
columns: newColumns,
columnOrder: getColumnOrder(newColumns),
});
<EuiFlexGroup direction="column">
<EuiFlexItem grow={null}>
<EuiFlexGroup alignItems="center">
{!isFieldSelectOpen &&
selectedColumn &&
(operationMenuItems.length > 1 || contextOptions.length > 0) && (
<EuiFlexItem grow={null}>
<EuiPopover
id={props.columnId}
panelClassName="lnsIndexPattern__dimensionPopover"
isOpen={isSettingsOpen}
closePopover={() => {
setSettingsOpen(false);
}}
/>
)}
</EuiFlexItem>
{ParamEditor && (
<EuiFlexItem grow={2}>
<ParamEditor
state={props.state}
setState={props.setState}
columnId={props.columnId}
/>
ownFocus
anchorPosition="leftCenter"
panelPaddingSize="none"
button={
<EuiFlexItem data-test-subj="indexPattern-dimension" grow={true}>
<EuiButtonIcon
data-test-subj="indexPattern-dimensionPopover-button"
onClick={() => {
setSettingsOpen(!isSettingsOpen);
}}
iconType="gear"
aria-label="Settings"
/>
</EuiFlexItem>
}
>
<EuiContextMenuPanel>
{operationMenuItems.concat(contextOptions)}
</EuiContextMenuPanel>
</EuiPopover>
</EuiFlexItem>
)}
<EuiFlexItem grow={true}>
<div>
{operations.map(o => (
<EuiButtonEmpty
data-test-subj={`lns-indexPatternDimension-${o}`}
key={o}
color={
selectedColumn && selectedColumn.operationType === o ? 'primary' : 'text'
}
isDisabled={!functionsFromField.some(col => col.operationType === o)}
onClick={() => {
const newColumn: IndexPatternColumn = filteredColumns.find(
col =>
col.operationType === o &&
(!('sourceField' in col) ||
!('sourceField' in selectedColumn) ||
col.sourceField === selectedColumn.sourceField)
)!;

const newColumns = {
...props.state.columns,
[props.columnId]: newColumn,
};

props.setState({
...props.state,
columnOrder: getColumnOrder(newColumns),
columns: newColumns,
});
}}
>
<span>{operationPanels[o].displayName}</span>
</EuiButtonEmpty>
))}
</div>
<EuiFlexItem grow={true}>
{!isFieldSelectOpen ? (
<EuiButtonEmpty onClick={() => setFieldSelectOpen(true)}>
{selectedColumn
? selectedColumn.label
: i18n.translate('xpack.lens.indexPattern.configureDimensionLabel', {
defaultMessage: 'Configure dimension',
})}
</EuiButtonEmpty>
) : (
<EuiComboBox
fullWidth
inputRef={el => {
if (el) {
el.focus();
}
}}
onBlur={() => {
setFieldSelectOpen(false);
}}
data-test-subj="indexPattern-dimension-field"
placeholder="Field"
options={[
{
label: 'Document',
value: columns.find(column => !('sourceField' in column))!.operationId,
},
{
label: 'Individual fields',
options: uniqueColumnsByField.map(col => ({
label: col.sourceField,
value: col.operationId,
})),
},
]}
selectedOptions={
selectedColumn && 'sourceField' in selectedColumn
? [
{
label: selectedColumn.sourceField,
value: selectedColumn.operationId,
},
]
: []
}
singleSelection={{ asPlainText: true }}
isClearable={false}
onChange={choices => {
const column: IndexPatternColumn = columns.find(
({ operationId }) => operationId === choices[0].value
)!;
const newColumns: IndexPatternPrivateState['columns'] = {
...props.state.columns,
[props.columnId]: column,
};

setFieldSelectOpen(false);
props.setState({
...props.state,
columns: newColumns,
columnOrder: getColumnOrder(newColumns),
});
}}
/>
)}
</EuiFlexItem>
{selectedColumn && (
<EuiFlexItem>
<EuiButtonIcon
data-test-subj="indexPattern-dimensionPopover-remove"
iconType="cross"
iconSize="s"
color="danger"
aria-label="Remove"
onClick={() => {
const newColumns: IndexPatternPrivateState['columns'] = {
...props.state.columns,
};
delete newColumns[props.columnId];

props.setState({
...props.state,
columns: newColumns,
columnOrder: getColumnOrder(newColumns),
});
}}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPopover>
)}
</EuiFlexGroup>
</EuiFlexItem>
{selectedColumn && (
<EuiFlexItem>
<EuiButtonIcon
data-test-subj="indexPattern-dimensionPopover-remove"
iconType="cross"
iconSize="s"
color="danger"
aria-label="Remove"
onClick={() => {
const newColumns: IndexPatternPrivateState['columns'] = {
...props.state.columns,
};
delete newColumns[props.columnId];

props.setState({
...props.state,
columns: newColumns,
columnOrder: getColumnOrder(newColumns),
});
}}
/>
{ParamEditor && (
<EuiFlexItem grow={2}>
<ParamEditor state={props.state} setState={props.setState} columnId={props.columnId} />
</EuiFlexItem>
)}
</EuiFlexGroup>
Original file line number Diff line number Diff line change
@@ -31,7 +31,6 @@ export type IndexPatternColumn =
| AvgIndexPatternColumn
| MinIndexPatternColumn
| MaxIndexPatternColumn
| SumIndexPatternColumn
| CountIndexPatternColumn;

export interface BaseIndexPatternColumn {
Original file line number Diff line number Diff line change
@@ -78,7 +78,7 @@ export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatte
extended_bounds: {},
},
}),
paramEditor: ({ state, setState, columnId }) => {
inlineOptions: ({ state, setState, columnId }) => {
const column = state.columns[columnId] as DateHistogramIndexPatternColumn;
const intervals = ['M', 'w', 'd', 'h'];

Loading