From 67932961a38750020ea026350524df70ddf5a8bd Mon Sep 17 00:00:00 2001 From: Ricky Ang Date: Mon, 21 Mar 2022 10:15:33 -0700 Subject: [PATCH 01/11] UI Polish for Session viewer frame + buttons --- .../public/components/process_tree/styles.ts | 2 ++ .../public/components/process_tree_node/styles.ts | 7 +++++++ .../process_tree_node/use_button_styles.ts | 12 ++++++++---- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/process_tree/styles.ts b/x-pack/plugins/session_view/public/components/process_tree/styles.ts index 207cc55e49582..e4a43553f6b25 100644 --- a/x-pack/plugins/session_view/public/components/process_tree/styles.ts +++ b/x-pack/plugins/session_view/public/components/process_tree/styles.ts @@ -22,6 +22,8 @@ export const useStyles = () => { overflow: 'auto', height: '100%', backgroundColor: colors.lightestShade, + paddingTop: size.base, + paddingLeft: size.base }; const selectionArea: CSSObject = { diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts index 55afe5c28071a..69ce56450aa67 100644 --- a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts +++ b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts @@ -25,6 +25,9 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps const darkText: CSSObject = { color: colors.text, + fontFamily: font.familyCode, + paddingLeft: size.xxs, + paddingRight: size.xs, }; const searchHighlight = ` @@ -96,6 +99,10 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps const workingDir: CSSObject = { color: colors.successText, + fontFamily: font.familyCode, + fontWeight: font.weight.medium, + paddingLeft: size.s, + paddingRight: size.xxs, }; const timeStamp: CSSObject = { diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts b/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts index 529a0ce5819f9..b91ab5417dec1 100644 --- a/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts +++ b/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts @@ -18,7 +18,7 @@ export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => { const { euiTheme } = useEuiTheme(); const cached = useMemo(() => { - const { colors, border, size } = euiTheme; + const { colors, border, size, font } = euiTheme; const button: CSSObject = { background: transparentize(theme.euiColorVis6, 0.04), @@ -26,14 +26,18 @@ export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => { lineHeight: '18px', height: '20px', fontSize: size.m, - borderRadius: border.radius.medium, + fontFamily: font.family, + fontWeight: font.weight.medium, + borderRadius: border.radius.small, color: shade(theme.euiColorVis6, 0.25), - marginLeft: size.s, + marginLeft: size.xs, + marginRight: size.xs, minWidth: 0, + padding: `${size.s} ${size.xxs}`, }; const buttonArrow: CSSObject = { - marginLeft: size.s, + marginLeft: size.xs, }; const alertButton: CSSObject = { From 2369576732d9f479a9e345de186b610010346fe2 Mon Sep 17 00:00:00 2001 From: Ricky Ang Date: Mon, 21 Mar 2022 16:04:55 -0700 Subject: [PATCH 02/11] UI Update for Session Viewer + Toolbar --- .../public/components/process_tree/styles.ts | 2 +- .../process_tree_node/use_button_styles.ts | 8 + .../public/components/session_view/index.tsx | 232 +++++++++--------- .../public/components/session_view/styles.ts | 11 + .../session_view_search_bar/index.tsx | 2 +- 5 files changed, 139 insertions(+), 116 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/process_tree/styles.ts b/x-pack/plugins/session_view/public/components/process_tree/styles.ts index e4a43553f6b25..ed868b7203ccd 100644 --- a/x-pack/plugins/session_view/public/components/process_tree/styles.ts +++ b/x-pack/plugins/session_view/public/components/process_tree/styles.ts @@ -23,7 +23,7 @@ export const useStyles = () => { height: '100%', backgroundColor: colors.lightestShade, paddingTop: size.base, - paddingLeft: size.base + paddingLeft: size.s, }; const selectionArea: CSSObject = { diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts b/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts index b91ab5417dec1..4c713b42a2d7b 100644 --- a/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts +++ b/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts @@ -34,6 +34,9 @@ export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => { marginRight: size.xs, minWidth: 0, padding: `${size.s} ${size.xxs}`, + span: { + padding: `0px ${size.xxs} !important`, + }, }; const buttonArrow: CSSObject = { @@ -76,6 +79,10 @@ export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => { textTransform: 'capitalize', }; + const buttonSize: CSSObject = { + padding: `0px ${euiTheme.size.xs}`, + }; + const expandedIcon = isExpanded ? 'arrowUp' : 'arrowDown'; return { @@ -85,6 +92,7 @@ export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => { alertsCountNumber, userChangedButton, userChangedButtonUsername, + buttonSize, expandedIcon, }; }, [euiTheme, isExpanded]); diff --git a/x-pack/plugins/session_view/public/components/session_view/index.tsx b/x-pack/plugins/session_view/public/components/session_view/index.tsx index 4b8881a88d7b0..64379d75180c4 100644 --- a/x-pack/plugins/session_view/public/components/session_view/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view/index.tsx @@ -12,6 +12,7 @@ import { EuiFlexItem, EuiResizableContainer, EuiPanel, + EuiHorizontalRule, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { SectionLoading } from '../../shared_imports'; @@ -92,127 +93,130 @@ export const SessionView = ({ sessionEntityId, height, jumpToEvent }: SessionVie return ( <> - - - - - - - - - - - - + + + - - - - - - - {(EuiResizablePanel, EuiResizableButton) => ( - <> - - {renderIsLoading && ( - - - - )} + - {error && ( - - - - } - body={ -

- -

- } + + + + + + + - )} + + + + + + + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + {renderIsLoading && ( + + + + )} - {hasData && ( -
- + + + } + body={ +

+ +

+ } /> -
- )} - + )} - {renderDetails ? ( - <> - - - - - - ) : ( - <> - {/* Returning an empty element here (instead of false) to avoid a bug in EuiResizableContainer */} - - )} - - )} - + {hasData && ( +
+ +
+ )} + + + {renderDetails ? ( + <> + + + + + + ) : ( + <> + {/* Returning an empty element here (instead of false) to avoid a bug in EuiResizableContainer */} + + )} + + )} + + ); }; diff --git a/x-pack/plugins/session_view/public/components/session_view/styles.ts b/x-pack/plugins/session_view/public/components/session_view/styles.ts index d2c87130bfa4b..3f4bc6535de8d 100644 --- a/x-pack/plugins/session_view/public/components/session_view/styles.ts +++ b/x-pack/plugins/session_view/public/components/session_view/styles.ts @@ -35,11 +35,22 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { margin: `${euiTheme.size.m} ${euiTheme.size.xs} !important`, }; + const sessionViewerComponent: CSSObject = { + border: euiTheme.border.thin, + borderRadius: euiTheme.border.radius.medium, + }; + + const toolBar: CSSObject = { + backgroundColor: `#EEF2F7 !important`, + }; + return { processTree, detailPanel, searchBar, buttonsEyeDetail, + sessionViewerComponent, + toolBar, }; }, [height, euiTheme]); diff --git a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx index f4e4dac7a94c7..833bc1e282712 100644 --- a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx @@ -54,7 +54,7 @@ export const SessionViewSearchBar = ({ return (
- + {showPagination && ( Date: Mon, 21 Mar 2022 20:08:26 -0700 Subject: [PATCH 03/11] added Left Borders on Details panel + Fix Details panel button behaviour --- .../session_view/public/components/session_view/index.tsx | 3 ++- .../session_view/public/components/session_view/styles.ts | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/session_view/public/components/session_view/index.tsx b/x-pack/plugins/session_view/public/components/session_view/index.tsx index 64379d75180c4..674d9de7b96ee 100644 --- a/x-pack/plugins/session_view/public/components/session_view/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view/index.tsx @@ -94,7 +94,7 @@ export const SessionView = ({ sessionEntityId, height, jumpToEvent }: SessionVie return ( <>
- + { const detailPanel: CSSObject = { height: `${height}px`, + borderLeft: `${euiTheme.border.thin} !important`, + boxShadow: '0px 0px 0px #D3DAE6 inset !important', }; const searchBar: CSSObject = { From 7adad7aec0330934f9a4e95307506f272c5d8e92 Mon Sep 17 00:00:00 2001 From: Ricky Ang Date: Tue, 22 Mar 2022 16:14:15 -0700 Subject: [PATCH 04/11] Details Panel UI Polish + PR Comments --- .../detail_panel_accordion/styles.ts | 3 +++ .../detail_panel_description_list/styles.ts | 4 ++- .../detail_panel_list_item/styles.ts | 10 +++++--- .../components/process_tree_node/index.tsx | 1 - .../components/process_tree_node/styles.ts | 4 +-- .../public/components/session_view/index.tsx | 4 +-- .../public/components/session_view/styles.ts | 6 ++--- .../session_view_detail_panel/index.tsx | 7 ++++-- .../session_view_detail_panel/styles.ts | 25 +++++++++++++++++++ .../session_view_search_bar/index.tsx | 14 ++++++++++- 10 files changed, 63 insertions(+), 15 deletions(-) create mode 100644 x-pack/plugins/session_view/public/components/session_view_detail_panel/styles.ts diff --git a/x-pack/plugins/session_view/public/components/detail_panel_accordion/styles.ts b/x-pack/plugins/session_view/public/components/detail_panel_accordion/styles.ts index c44e069c05c00..96eddb2b2bf98 100644 --- a/x-pack/plugins/session_view/public/components/detail_panel_accordion/styles.ts +++ b/x-pack/plugins/session_view/public/components/detail_panel_accordion/styles.ts @@ -22,6 +22,9 @@ export const useStyles = () => { '&:last-child': { borderBottom: euiTheme.border.thin, }, + dl: { + paddingTop: '0px', + }, }; const accordionButton: CSSObject = { diff --git a/x-pack/plugins/session_view/public/components/detail_panel_description_list/styles.ts b/x-pack/plugins/session_view/public/components/detail_panel_description_list/styles.ts index d815cb2a48283..d1f3198a10c85 100644 --- a/x-pack/plugins/session_view/public/components/detail_panel_description_list/styles.ts +++ b/x-pack/plugins/session_view/public/components/detail_panel_description_list/styles.ts @@ -14,19 +14,21 @@ export const useStyles = () => { const cached = useMemo(() => { const descriptionList: CSSObject = { - padding: euiTheme.size.s, + padding: `${euiTheme.size.base} ${euiTheme.size.s} `, }; const tabListTitle = { width: '40%', display: 'flex', alignItems: 'center', + marginTop: '0px', }; const tabListDescription = { width: '60%', display: 'flex', alignItems: 'center', + marginTop: '0px', }; return { diff --git a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts index c370bd8adb6e2..3fb83579901c2 100644 --- a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts +++ b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts @@ -20,11 +20,14 @@ export const useStyles = ({ display }: StylesDeps) => { const item: CSSObject = { display, alignItems: 'center', - padding: euiTheme.size.s, + padding: `0px ${euiTheme.size.s} `, width: '100%', - fontSize: 'inherit', + fontSize: '14px', fontWeight: 'inherit', - minHeight: '36px', + height: '32px', + lineHeight: euiTheme.size.l, + letterSpacing: '0px', + textAlign: 'left', }; const copiableItem: CSSObject = { @@ -34,6 +37,7 @@ export const useStyles = ({ display }: StylesDeps) => { '&:hover': { background: transparentize(euiTheme.colors.primary, 0.1), }, + height: '100%', }; return { diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx b/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx index bc2eb4706c73d..eae70695e807a 100644 --- a/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx +++ b/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx @@ -212,7 +212,6 @@ export function ProcessTreeNode({ {timeStampsNormal} )} - ; )} diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts index 69ce56450aa67..7f88a5c89cac2 100644 --- a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts +++ b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts @@ -31,9 +31,9 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps }; const searchHighlight = ` - background-color: ${colors.highlight}; + background-color: ${transparentize(colors.warning, 0.32)}; color: ${colors.fullShade}; - border-radius: ${border.radius.medium}; + border-radius: '0px'; `; const children: CSSObject = { diff --git a/x-pack/plugins/session_view/public/components/session_view/index.tsx b/x-pack/plugins/session_view/public/components/session_view/index.tsx index 674d9de7b96ee..868faaf802f82 100644 --- a/x-pack/plugins/session_view/public/components/session_view/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view/index.tsx @@ -94,7 +94,7 @@ export const SessionView = ({ sessionEntityId, height, jumpToEvent }: SessionVie return ( <>
- + diff --git a/x-pack/plugins/session_view/public/components/session_view/styles.ts b/x-pack/plugins/session_view/public/components/session_view/styles.ts index 35455efd0d118..6b2364f6ab4bb 100644 --- a/x-pack/plugins/session_view/public/components/session_view/styles.ts +++ b/x-pack/plugins/session_view/public/components/session_view/styles.ts @@ -8,6 +8,7 @@ import { useMemo } from 'react'; import { useEuiTheme } from '@elastic/eui'; import { CSSObject } from '@emotion/react'; +import { euiLightVars as theme } from '@kbn/ui-theme'; interface StylesDeps { height: number | undefined; @@ -24,8 +25,7 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { const detailPanel: CSSObject = { height: `${height}px`, - borderLeft: `${euiTheme.border.thin} !important`, - boxShadow: '0px 0px 0px #D3DAE6 inset !important', + borderRightWidth: '0px', }; const searchBar: CSSObject = { @@ -43,7 +43,7 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { }; const toolBar: CSSObject = { - backgroundColor: `#EEF2F7 !important`, + backgroundColor: `${theme.euiFormBackgroundDisabledColor} !important`, }; return { diff --git a/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx b/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx index a47ce1d91ac97..7872e7a0aec3b 100644 --- a/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx @@ -11,6 +11,7 @@ import { Process } from '../../../common/types/process_tree'; import { getDetailPanelProcess, getSelectedTabContent } from './helpers'; import { DetailPanelProcessTab } from '../detail_panel_process_tab'; import { DetailPanelHostTab } from '../detail_panel_host_tab'; +import { useStyles } from './styles'; interface SessionViewDetailPanelDeps { selectedProcess: Process; @@ -60,8 +61,10 @@ export const SessionViewDetailPanel = ({ selectedProcess }: SessionViewDetailPan [tabs, selectedTabId] ); + const styles = useStyles(); + return ( - <> +
{tabs.map((tab, index) => ( {tabContent} - +
); }; diff --git a/x-pack/plugins/session_view/public/components/session_view_detail_panel/styles.ts b/x-pack/plugins/session_view/public/components/session_view_detail_panel/styles.ts new file mode 100644 index 0000000000000..fbb196da3fa80 --- /dev/null +++ b/x-pack/plugins/session_view/public/components/session_view_detail_panel/styles.ts @@ -0,0 +1,25 @@ +/* + * 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 { useMemo } from 'react'; +import { useEuiTheme } from '@elastic/eui'; +import { CSSObject } from '@emotion/react'; + +export const useStyles = () => { + const { euiTheme } = useEuiTheme(); + const cached = useMemo(() => { + const detailsPanelLeftBorder: CSSObject = { + borderLeft: euiTheme.border.thin, + }; + + return { + detailsPanelLeftBorder, + }; + }, [euiTheme]); + + return cached; +}; diff --git a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx index 833bc1e282712..83cf291f8a1ad 100644 --- a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx @@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react'; import { EuiSearchBar, EuiPagination } from '@elastic/eui'; import { EuiSearchBarOnChangeArgs } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { Process } from '../../../common/types/process_tree'; import { useStyles } from './styles'; @@ -52,9 +53,20 @@ export const SessionViewSearchBar = ({ const showPagination = !!searchResults?.length; + const translatePlaceholder = i18n.translate( + 'xpack.sessionView.searchBar.searchBarKeyPlaceholder', + { + defaultMessage: 'Find...', + } + ); + return (
- + {showPagination && ( Date: Wed, 23 Mar 2022 12:58:56 -0700 Subject: [PATCH 05/11] Find results interaction UI Polish, Def/Min/Max width for details panel, Timestamp bug fix --- .../components/process_tree_node/index.tsx | 16 +++++------- .../components/process_tree_node/styles.ts | 26 ++++++++++++------- .../public/components/session_view/index.tsx | 6 ++--- 3 files changed, 26 insertions(+), 22 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx b/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx index eae70695e807a..a97357042ef15 100644 --- a/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx +++ b/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx @@ -81,7 +81,8 @@ export function ProcessTreeNode({ ), [hasAlerts, alerts, jumpToAlertID] ); - const styles = useStyles({ depth, hasAlerts, hasInvestigatedAlert }); + const isSelected = selectedProcessId === process.id; + const styles = useStyles({ depth, hasAlerts, hasInvestigatedAlert, isSelected }); const buttonStyles = useButtonStyles({}); const nodeRef = useVisible({ @@ -204,15 +205,12 @@ export function ProcessTreeNode({ [exit_code: {exitCode}] )} - {timeStampOn && ( - - {timeStampsNormal} - - )} + {timeStampOn && ( + + {timeStampsNormal} + + )} )} diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts index 7f88a5c89cac2..c3122294e44fd 100644 --- a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts +++ b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts @@ -13,9 +13,10 @@ interface StylesDeps { depth: number; hasAlerts: boolean; hasInvestigatedAlert: boolean; + isSelected: boolean; } -export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps) => { +export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }: StylesDeps) => { const { euiTheme } = useEuiTheme(); const cached = useMemo(() => { @@ -30,12 +31,6 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps paddingRight: size.xs, }; - const searchHighlight = ` - background-color: ${transparentize(colors.warning, 0.32)}; - color: ${colors.fullShade}; - border-radius: '0px'; - `; - const children: CSSObject = { position: 'relative', color: colors.ghost, @@ -51,6 +46,7 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps let bgColor = 'none'; const hoverColor = transparentize(colors.primary, 0.04); let borderColor = 'transparent'; + let searchResColor = transparentize(colors.warning, 0.32); if (hasAlerts) { borderColor = colors.danger; @@ -60,10 +56,14 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps bgColor = transparentize(colors.danger, 0.04); } - return { bgColor, borderColor, hoverColor }; + if (isSelected) { + searchResColor = colors.warning; + } + + return { bgColor, borderColor, hoverColor, searchResColor }; }; - const { bgColor, borderColor, hoverColor } = getHighlightColors(); + const { bgColor, borderColor, hoverColor, searchResColor } = getHighlightColors(); const processNode: CSSObject = { display: 'block', @@ -87,6 +87,12 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps }, }; + const searchHighlight = ` + color: ${colors.fullShade}; + border-radius: '0px'; + background-color: ${searchResColor}; + `; + const wrapper: CSSObject = { paddingLeft: size.s, position: 'relative', @@ -131,7 +137,7 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps timeStamp, alertDetails, }; - }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert]); + }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected]); return cached; }; diff --git a/x-pack/plugins/session_view/public/components/session_view/index.tsx b/x-pack/plugins/session_view/public/components/session_view/index.tsx index 868faaf802f82..1ee08fc5a55c5 100644 --- a/x-pack/plugins/session_view/public/components/session_view/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view/index.tsx @@ -135,8 +135,8 @@ export const SessionView = ({ sessionEntityId, height, jumpToEvent }: SessionVie {(EuiResizablePanel, EuiResizableButton) => ( <> {renderIsLoading && ( @@ -198,7 +198,7 @@ export const SessionView = ({ sessionEntityId, height, jumpToEvent }: SessionVie Date: Wed, 23 Mar 2022 18:25:52 -0700 Subject: [PATCH 06/11] more conflict fixes --- .../public/components/session_view/index.tsx | 47 ++++++++++--------- .../public/components/session_view/styles.ts | 2 - .../session_view_detail_panel/index.tsx | 1 - 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/session_view/index.tsx b/x-pack/plugins/session_view/public/components/session_view/index.tsx index 338634e31c271..f5ca2199ec0d6 100644 --- a/x-pack/plugins/session_view/public/components/session_view/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view/index.tsx @@ -186,26 +186,26 @@ export const SessionView = ({ )} - {hasError && ( - - - - } - body={ -

- -

- } + {hasError && ( + + + + } + body={ +

+ +

+ } /> )} @@ -214,6 +214,7 @@ export const SessionView = ({ @@ -236,8 +239,8 @@ export const SessionView = ({ diff --git a/x-pack/plugins/session_view/public/components/session_view/styles.ts b/x-pack/plugins/session_view/public/components/session_view/styles.ts index e7743bfe0a762..57fbeee4832b6 100644 --- a/x-pack/plugins/session_view/public/components/session_view/styles.ts +++ b/x-pack/plugins/session_view/public/components/session_view/styles.ts @@ -30,8 +30,6 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { const detailPanel: CSSObject = { height: `${height}px`, borderRightWidth: '0px', - borderLeft: thinBorder, - borderRight: thinBorder, }; const resizeHandle: CSSObject = { diff --git a/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx b/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx index fb5f0181568df..e24409a98f8fd 100644 --- a/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx @@ -16,7 +16,6 @@ import { useStyles } from './styles'; import { DetailPanelAlertTab } from '../detail_panel_alert_tab'; import { ALERT_COUNT_THRESHOLD } from '../../../common/constants'; - interface SessionViewDetailPanelDeps { selectedProcess: Process; alerts?: ProcessEvent[]; From 07b442287f1643ef6d97f3112d6a09ba44252bb7 Mon Sep 17 00:00:00 2001 From: Ricky Ang Date: Wed, 23 Mar 2022 23:21:23 -0700 Subject: [PATCH 07/11] removed unused variable --- .../session_view/public/components/session_view/styles.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/session_view/styles.ts b/x-pack/plugins/session_view/public/components/session_view/styles.ts index 57fbeee4832b6..0b7b8fd66d46d 100644 --- a/x-pack/plugins/session_view/public/components/session_view/styles.ts +++ b/x-pack/plugins/session_view/public/components/session_view/styles.ts @@ -20,8 +20,6 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { const cached = useMemo(() => { const { border, colors } = euiTheme; - const thinBorder = `${border.width.thin} solid ${colors.lightShade}!important`; - const processTree: CSSObject = { height: `${height}px`, position: 'relative', From 5532ea87c4b801498f550c5eab6c91d68a07ea03 Mon Sep 17 00:00:00 2001 From: Ricky Ang Date: Thu, 24 Mar 2022 00:00:27 -0700 Subject: [PATCH 08/11] fix for failed checks on buildkite #1 --- .../session_view/public/components/session_view/styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/session_view/styles.ts b/x-pack/plugins/session_view/public/components/session_view/styles.ts index 0b7b8fd66d46d..3ca0594f57574 100644 --- a/x-pack/plugins/session_view/public/components/session_view/styles.ts +++ b/x-pack/plugins/session_view/public/components/session_view/styles.ts @@ -18,7 +18,7 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { const { euiTheme } = useEuiTheme(); const cached = useMemo(() => { - const { border, colors } = euiTheme; + const { border } = euiTheme; const processTree: CSSObject = { height: `${height}px`, @@ -44,8 +44,8 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { }; const sessionViewerComponent: CSSObject = { - border: euiTheme.border.thin, - borderRadius: euiTheme.border.radius.medium, + border: border.thin, + borderRadius: border.radius.medium, }; const toolBar: CSSObject = { From 2085602e63488c27fae7d460c2dd819366d3d842 Mon Sep 17 00:00:00 2001 From: Ricky Ang Date: Sun, 27 Mar 2022 19:49:32 -0700 Subject: [PATCH 09/11] Addressing PR comments --- .../session_view_search_bar/index.tsx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx index 83cf291f8a1ad..0c40659f56c72 100644 --- a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx @@ -18,6 +18,12 @@ interface SessionViewSearchBarDeps { onProcessSelected(process: Process): void; } +const translatePlaceholder = { + placeholder: i18n.translate('xpack.sessionView.searchBar.searchBarKeyPlaceholder', { + defaultMessage: 'Find...', + }), +}; + /** * The main wrapper component for the session view. */ @@ -53,20 +59,9 @@ export const SessionViewSearchBar = ({ const showPagination = !!searchResults?.length; - const translatePlaceholder = i18n.translate( - 'xpack.sessionView.searchBar.searchBarKeyPlaceholder', - { - defaultMessage: 'Find...', - } - ); - return (
- + {showPagination && ( Date: Mon, 28 Mar 2022 14:03:35 -0700 Subject: [PATCH 10/11] PR Comments + Search bar UI bug fix --- .../components/detail_panel_list_item/styles.ts | 1 - .../components/session_view_search_bar/index.tsx | 8 ++++---- .../components/session_view_search_bar/styles.ts | 16 ++++++++++++++-- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts index 3fb83579901c2..e2ee0fbe4b416 100644 --- a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts +++ b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts @@ -22,7 +22,6 @@ export const useStyles = ({ display }: StylesDeps) => { alignItems: 'center', padding: `0px ${euiTheme.size.s} `, width: '100%', - fontSize: '14px', fontWeight: 'inherit', height: '32px', lineHeight: euiTheme.size.l, diff --git a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx index 0c40659f56c72..05154fca40769 100644 --- a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx +++ b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx @@ -33,7 +33,9 @@ export const SessionViewSearchBar = ({ onProcessSelected, searchResults, }: SessionViewSearchBarDeps) => { - const styles = useStyles(); + const showPagination = !!searchResults?.length; + + const styles = useStyles({ hasSearchResults: showPagination }); const [selectedResult, setSelectedResult] = useState(0); @@ -57,10 +59,8 @@ export const SessionViewSearchBar = ({ } }, [searchResults, onProcessSelected, selectedResult]); - const showPagination = !!searchResults?.length; - return ( -
+
{showPagination && ( { +interface StylesDeps { + hasSearchResults: boolean; +} + +export const useStyles = ({ hasSearchResults }: StylesDeps) => { const { euiTheme } = useEuiTheme(); const cached = useMemo(() => { @@ -19,10 +23,18 @@ export const useStyles = () => { right: euiTheme.size.xxl, }; + const searchBarWithResult: CSSObject = { + position: 'relative', + 'input.euiFieldSearch.euiFieldSearch-isClearable': { + paddingRight: hasSearchResults ? '200px' : '40px', + }, + }; + return { pagination, + searchBarWithResult, }; - }, [euiTheme]); + }, [euiTheme, hasSearchResults]); return cached; }; From a0766b7e8fa3900b6a693b13de03bfdad31fd51a Mon Sep 17 00:00:00 2001 From: Ricky Ang Date: Tue, 29 Mar 2022 06:38:07 -0700 Subject: [PATCH 11/11] pr comments --- .../public/components/detail_panel_list_item/styles.ts | 2 +- .../public/components/session_view_search_bar/styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts index e2ee0fbe4b416..22f5e6782288f 100644 --- a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts +++ b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts @@ -23,7 +23,7 @@ export const useStyles = ({ display }: StylesDeps) => { padding: `0px ${euiTheme.size.s} `, width: '100%', fontWeight: 'inherit', - height: '32px', + height: euiTheme.size.xl, lineHeight: euiTheme.size.l, letterSpacing: '0px', textAlign: 'left', diff --git a/x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts b/x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts index 1c4d1b8312b1a..43131a1f5e1cf 100644 --- a/x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts +++ b/x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts @@ -26,7 +26,7 @@ export const useStyles = ({ hasSearchResults }: StylesDeps) => { const searchBarWithResult: CSSObject = { position: 'relative', 'input.euiFieldSearch.euiFieldSearch-isClearable': { - paddingRight: hasSearchResults ? '200px' : '40px', + paddingRight: hasSearchResults ? '200px' : euiTheme.size.xxl, }, };