Skip to content

Commit

Permalink
timeline ui all changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@logeekal
logeekal committed Oct 30, 2023
1 parent b5c17d7 commit ef13b22
Show file tree
Hide file tree
Showing 28 changed files with 517 additions and 563 deletions.
8 changes: 7 additions & 1 deletion ...ns/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,12 @@ export const DragDropContextWrapperComponent: React.FC<Props> = ({ browserFields
[activeTimelineDataProviders, browserFields, dataProviders, dispatch, onAddedToTimeline]
);
return (
<DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture} sensors={sensors}>
<DragDropContext
onBeforeDragStart={onBeforeCapture}
onDragEnd={onDragEnd}
// onBeforeCapture={onBeforeCapture}
sensors={sensors}
>
{children}
</DragDropContext>
);
Expand All @@ -169,6 +174,7 @@ export const DragDropContextWrapper = React.memo(
DragDropContextWrapper.displayName = 'DragDropContextWrapper';

const onBeforeCapture = (before: BeforeCapture) => {
document.body.classList.add(IS_DRAGGING_CLASS_NAME);
if (!draggableIsField(before)) {
document.body.classList.add(IS_DRAGGING_CLASS_NAME);
}
Expand Down
49 changes: 32 additions & 17 deletions ...ck/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { useDispatch } from 'react-redux';
import styled from 'styled-components';

import { TableId } from '@kbn/securitysolution-data-table';
import { createPortal } from 'react-dom';
import { dragAndDropActions } from '../../store/drag_and_drop';
import type { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
import { ROW_RENDERER_BROWSER_EXAMPLE_TIMELINE_ID } from '../../../timelines/components/row_renderers_browser/constants';
Expand All @@ -37,6 +38,11 @@ import { useDraggableKeyboardWrapper } from './draggable_keyboard_wrapper_hook';
export const DragEffects = styled.div``;

DragEffects.displayName = 'DragEffects';
const portal: HTMLElement = document.createElement('div');
portal.classList.add('my-super-cool-portal');
portal.style.position = 'absolute';
portal.style.top = 'auto';
portal.style.left = 'auto';

/**
* Wraps the `@hello-pangea/dnd` error boundary. See also:
Expand Down Expand Up @@ -180,6 +186,10 @@ const DraggableOnWrapperComponent: React.FC<Props> = ({
[providerRegistered, dispatch, dataProvider.id]
);

useEffect(() => {
document.body.append(portal);
}, []);

useEffect(
() => () => {
unRegisterProvider();
Expand All @@ -188,24 +198,29 @@ const DraggableOnWrapperComponent: React.FC<Props> = ({
);

const RenderClone = useCallback(
(provided, snapshot) => (
<ConditionalPortal registerProvider={registerProvider}>
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getStyle(provided.draggableProps.style, snapshot)}
ref={provided.innerRef}
data-test-subj="providerContainer"
tabIndex={-1}
>
<ProviderContentWrapper
data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
(provided, snapshot) => {
const output = (
<ConditionalPortal registerProvider={registerProvider}>
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getStyle(provided.draggableProps.style, snapshot)}
ref={provided.innerRef}
data-test-subj="providerContainer"
tabIndex={-1}
>
{render(dataProvider, provided, snapshot)}
</ProviderContentWrapper>
</div>
</ConditionalPortal>
),
<ProviderContentWrapper
data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
>
{render(dataProvider, provided, snapshot)}
</ProviderContentWrapper>
</div>
</ConditionalPortal>
);

if (snapshot.isDragging) return createPortal(output, portal);
return output;
},
[dataProvider, registerProvider, render]
);

Expand Down
86 changes: 58 additions & 28 deletions x-pack/plugins/security_solution/public/common/components/query_bar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,13 @@ import type { FilterManager, SavedQuery, SavedQueryTimeFilter } from '@kbn/data-
import { TimeHistory } from '@kbn/data-plugin/public';
import type { DataView } from '@kbn/data-views-plugin/public';
import type { SearchBarProps } from '@kbn/unified-search-plugin/public';
import { SearchBar } from '@kbn/unified-search-plugin/public';
import { FilterItems, SearchBar } from '@kbn/unified-search-plugin/public';
import { Storage } from '@kbn/kibana-utils-plugin/public';
import type { HtmlPortalNode } from 'react-reverse-portal';
import { InPortal } from 'react-reverse-portal';
import styled from '@emotion/styled';
import { euiThemeVars } from '@kbn/ui-theme';
import { EuiFlexGroup } from '@elastic/eui';
import { useKibana } from '../../lib/kibana';
import { convertToQueryType } from './convert_to_query_type';

Expand All @@ -36,8 +41,18 @@ export interface QueryBarComponentProps {
onSavedQuery: (savedQuery: SavedQuery | undefined) => void;
displayStyle?: SearchBarProps['displayStyle'];
isDisabled?: boolean;
/*
* If filtersPortalNode provided, filters will rendered in that portal instead
* of in place.
*
* */
filtersPortalNode?: HtmlPortalNode;
}

const FilterItemsContainer = styled(EuiFlexGroup)`
margin-top: ${euiThemeVars.euiSizeXS};
`;

export const isDataView = (obj: unknown): obj is DataView =>
obj != null && typeof obj === 'object' && Object.hasOwn(obj, 'getName');

Expand All @@ -60,6 +75,7 @@ export const QueryBar = memo<QueryBarComponentProps>(
dataTestSubj,
displayStyle,
isDisabled,
filtersPortalNode,
}) => {
const { data } = useKibana().services;
const [dataView, setDataView] = useState<DataView>();
Expand Down Expand Up @@ -141,33 +157,47 @@ export const QueryBar = memo<QueryBarComponentProps>(
const timeHistory = useMemo(() => new TimeHistory(new Storage(localStorage)), []);
const arrDataView = useMemo(() => (dataView != null ? [dataView] : []), [dataView]);
return (
<SearchBar
showSubmitButton={false}
dateRangeFrom={dateRangeFrom}
dateRangeTo={dateRangeTo}
filters={filters}
indexPatterns={arrDataView}
isLoading={isLoading}
isRefreshPaused={isRefreshPaused}
query={query}
onClearSavedQuery={onClearSavedQuery}
onFiltersUpdated={onFiltersUpdated}
onQueryChange={onQueryChange}
onQuerySubmit={onQuerySubmit}
onSaved={onSavedQuery}
onSavedQueryUpdated={onSavedQueryUpdated}
refreshInterval={refreshInterval}
showAutoRefreshOnly={false}
showFilterBar={false}
showDatePicker={false}
showQueryInput={true}
showSaveQuery={true}
timeHistory={timeHistory}
dataTestSubj={dataTestSubj}
savedQuery={savedQuery}
displayStyle={displayStyle}
isDisabled={isDisabled}
/>
<>
<SearchBar
showSubmitButton={false}
dateRangeFrom={dateRangeFrom}
dateRangeTo={dateRangeTo}
filters={filters}
indexPatterns={arrDataView}
isLoading={isLoading}
isRefreshPaused={isRefreshPaused}
query={query}
onClearSavedQuery={onClearSavedQuery}
onFiltersUpdated={onFiltersUpdated}
onQueryChange={onQueryChange}
onQuerySubmit={onQuerySubmit}
onSaved={onSavedQuery}
onSavedQueryUpdated={onSavedQueryUpdated}
refreshInterval={refreshInterval}
showAutoRefreshOnly={false}
showFilterBar={true}
showDatePicker={false}
showQueryInput={true}
showSaveQuery={true}
timeHistory={timeHistory}
dataTestSubj={dataTestSubj}
savedQuery={savedQuery}
displayStyle={displayStyle}
isDisabled={isDisabled}
/>

{filtersPortalNode ? (
<InPortal node={filtersPortalNode}>
<FilterItemsContainer direction="row" gutterSize="xs" wrap={true} responsive={false}>
<FilterItems
filters={filters}
onFiltersUpdated={onFiltersUpdated}
indexPatterns={arrDataView}
/>
</FilterItemsContainer>
</InPortal>
) : null}
</>
);
}
);
Expand Down
9 changes: 5 additions & 4 deletions x-pack/plugins/security_solution/public/common/components/sourcerer/helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@

import React from 'react';
import type { EuiSuperSelectOption, EuiFormRowProps } from '@elastic/eui';
import { EuiIcon, EuiBadge, EuiButtonEmpty, EuiFormRow, EuiButton } from '@elastic/eui';
import { EuiIcon, EuiBadge, EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
import styled, { css } from 'styled-components';

import { euiThemeVars } from '@kbn/ui-theme';
import type { sourcererModel } from '../../store/sourcerer';

import * as i18n from './translations';
Expand All @@ -23,10 +24,10 @@ export const StyledFormRow = styled(EuiFormRow)`
max-width: none;
`;

export const StyledButton = styled(EuiButton)`
export const StyledButtonEmpty = styled(EuiButtonEmpty)`
&:enabled:focus,
&:focus {
/* background-color: transparent; */
background-color: transparent;
}
`;

Expand All @@ -43,7 +44,7 @@ export const PopoverContent = styled.div`
`;

export const StyledBadge = styled(EuiBadge)`
margin-left: 8px;
margin-left: ${euiThemeVars.euiSizeXS};
&,
.euiBadge__text {
cursor: pointer;
Expand Down
6 changes: 3 additions & 3 deletions x-pack/plugins/security_solution/public/common/components/sourcerer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { useDeepEqualSelector } from '../../hooks/use_selector';
import type { SourcererUrlState } from '../../store/sourcerer/model';
import { SourcererScopeName } from '../../store/sourcerer/model';
import { usePickIndexPatterns } from './use_pick_index_patterns';
import { FormRow, PopoverContent, StyledButton, StyledFormRow } from './helpers';
import { FormRow, PopoverContent, StyledButtonEmpty, StyledFormRow } from './helpers';
import { TemporarySourcerer } from './temporary';
import { useSourcererDataView } from '../../containers/sourcerer';
import { useUpdateDataView } from './use_update_data_view';
Expand Down Expand Up @@ -338,14 +338,14 @@ export const Sourcerer = React.memo<SourcererComponentProps>(({ scope: scopeId }
)}

<EuiSpacer size="m" />
<StyledButton
<StyledButtonEmpty
color="text"
data-test-subj="sourcerer-advanced-options-toggle"
iconType={expandAdvancedOptions ? 'arrowDown' : 'arrowRight'}
onClick={onExpandAdvancedOptionsClicked}
>
{i18n.INDEX_PATTERNS_ADVANCED_OPTIONS_TITLE}
</StyledButton>
</StyledButtonEmpty>
{expandAdvancedOptions && <EuiSpacer size="m" />}
<FormRow
isDisabled={loadingIndexPatterns}
Expand Down
16 changes: 10 additions & 6 deletions x-pack/plugins/security_solution/public/common/components/sourcerer/trigger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

import type { FC } from 'react';
import React, { memo, useMemo } from 'react';
import { EuiToolTip } from '@elastic/eui';
import { EuiToolTip, EuiButton } from '@elastic/eui';
import * as i18n from './translations';
import { getTooltipContent, StyledBadge, StyledButton } from './helpers';
import { getTooltipContent, StyledBadge, StyledButtonEmpty } from './helpers';
import type { ModifiedTypes } from './use_pick_index_patterns';

interface Props {
Expand Down Expand Up @@ -68,12 +68,16 @@ export const TriggerComponent: FC<Props> = ({
}
}, [isModified]);

const Button = useMemo(
() => (isTimelineSourcerer ? EuiButton : StyledButtonEmpty),
[isTimelineSourcerer]
);

const trigger = useMemo(
() => (
<StyledButton
<Button
aria-label={i18n.DATA_VIEW}
data-test-subj={isTimelineSourcerer ? 'timeline-sourcerer-trigger' : 'sourcerer-trigger'}
flush="left"
color="primary"
iconSide="right"
iconType="arrowDown"
Expand All @@ -84,9 +88,9 @@ export const TriggerComponent: FC<Props> = ({
>
{i18n.DATA_VIEW}
{!disabled && badge}
</StyledButton>
</Button>
),
[disabled, badge, isTimelineSourcerer, loading, onClick]
[disabled, badge, isTimelineSourcerer, loading, onClick, Button]
);

const tooltipContent = useMemo(
Expand Down
Loading

0 comments on commit ef13b22

Please sign in to comment.