From 3bd3eb14c79c85991bba040f421810a90be39dbd Mon Sep 17 00:00:00 2001 From: Rickyanto Ang Date: Tue, 29 Mar 2022 08:42:03 -0700 Subject: [PATCH] UI Polish for Session viewer frame + buttons (#128188) * UI Polish for Session viewer frame + buttons * UI Update for Session Viewer + Toolbar * added Left Borders on Details panel + Fix Details panel button behaviour * Details Panel UI Polish + PR Comments * Find results interaction UI Polish, Def/Min/Max width for details panel, Timestamp bug fix * more conflict fixes * removed unused variable * fix for failed checks on buildkite #1 * Addressing PR comments * PR Comments + Search bar UI bug fix * pr comments Co-authored-by: Karl Godard --- .../detail_panel_accordion/styles.ts | 3 + .../detail_panel_description_list/styles.ts | 4 +- .../detail_panel_list_item/styles.ts | 9 +- .../public/components/process_tree/styles.ts | 2 + .../components/process_tree_node/index.tsx | 16 +- .../components/process_tree_node/styles.ts | 33 ++- .../process_tree_node/use_button_styles.ts | 20 +- .../public/components/session_view/index.tsx | 245 +++++++++--------- .../public/components/session_view/styles.ts | 19 +- .../session_view_detail_panel/index.tsx | 7 +- .../session_view_detail_panel/styles.ts | 25 ++ .../session_view_search_bar/index.tsx | 17 +- .../session_view_search_bar/styles.ts | 16 +- 13 files changed, 255 insertions(+), 161 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..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 @@ -20,11 +20,13 @@ export const useStyles = ({ display }: StylesDeps) => { const item: CSSObject = { display, alignItems: 'center', - padding: euiTheme.size.s, + padding: `0px ${euiTheme.size.s} `, width: '100%', - fontSize: 'inherit', fontWeight: 'inherit', - minHeight: '36px', + height: euiTheme.size.xl, + lineHeight: euiTheme.size.l, + letterSpacing: '0px', + textAlign: 'left', }; const copiableItem: CSSObject = { @@ -34,6 +36,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/styles.ts b/x-pack/plugins/session_view/public/components/process_tree/styles.ts index 207cc55e49582..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 @@ -22,6 +22,8 @@ export const useStyles = () => { overflow: 'auto', height: '100%', backgroundColor: colors.lightestShade, + paddingTop: size.base, + paddingLeft: size.s, }; const selectionArea: CSSObject = { 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 d2e5b1b899553..9d5a3b1c953cf 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 @@ -86,7 +86,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({ @@ -249,15 +250,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 55afe5c28071a..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(() => { @@ -25,14 +26,11 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps const darkText: CSSObject = { color: colors.text, + fontFamily: font.familyCode, + paddingLeft: size.xxs, + paddingRight: size.xs, }; - const searchHighlight = ` - background-color: ${colors.highlight}; - color: ${colors.fullShade}; - border-radius: ${border.radius.medium}; - `; - const children: CSSObject = { position: 'relative', color: colors.ghost, @@ -48,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; @@ -57,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', @@ -84,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', @@ -96,6 +105,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 = { @@ -124,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/process_tree_node/use_button_styles.ts b/x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts index 529a0ce5819f9..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 @@ -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,21 @@ 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}`, + span: { + padding: `0px ${size.xxs} !important`, + }, }; const buttonArrow: CSSObject = { - marginLeft: size.s, + marginLeft: size.xs, }; const alertButton: CSSObject = { @@ -72,6 +79,10 @@ export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => { textTransform: 'capitalize', }; + const buttonSize: CSSObject = { + padding: `0px ${euiTheme.size.xs}`, + }; + const expandedIcon = isExpanded ? 'arrowUp' : 'arrowDown'; return { @@ -81,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 1ec9441a2b1d1..2e1a598faedaa 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'; @@ -132,133 +133,137 @@ export const SessionView = ({ return ( <> - - - - - - - - - - - - + + + - - - - - - - {(EuiResizablePanel, EuiResizableButton) => ( - <> - - {renderIsLoading && ( - - - - )} + - {hasError && ( - - - - } - 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 edfe2356d5aa2..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 @@ -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; @@ -17,9 +18,7 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { const { euiTheme } = useEuiTheme(); const cached = useMemo(() => { - const { border, colors } = euiTheme; - - const thinBorder = `${border.width.thin} solid ${colors.lightShade}!important`; + const { border } = euiTheme; const processTree: CSSObject = { height: `${height}px`, @@ -28,8 +27,7 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { const detailPanel: CSSObject = { height: `${height}px`, - borderLeft: thinBorder, - borderRight: thinBorder, + borderRightWidth: '0px', }; const resizeHandle: CSSObject = { @@ -45,12 +43,23 @@ export const useStyles = ({ height = 500 }: StylesDeps) => { margin: `${euiTheme.size.m} ${euiTheme.size.xs} !important`, }; + const sessionViewerComponent: CSSObject = { + border: border.thin, + borderRadius: border.radius.medium, + }; + + const toolBar: CSSObject = { + backgroundColor: `${theme.euiFormBackgroundDisabledColor} !important`, + }; + return { processTree, detailPanel, resizeHandle, searchBar, buttonsEyeDetail, + sessionViewerComponent, + toolBar, }; }, [height, euiTheme]); 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 51eb65a38f835..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 @@ -12,6 +12,7 @@ import { Process, ProcessEvent } 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'; import { DetailPanelAlertTab } from '../detail_panel_alert_tab'; import { ALERT_COUNT_THRESHOLD } from '../../../common/constants'; @@ -101,8 +102,10 @@ export const SessionViewDetailPanel = ({ [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 f4e4dac7a94c7..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 @@ -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'; @@ -17,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. */ @@ -26,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); @@ -50,11 +59,9 @@ 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' : euiTheme.size.xxl, + }, + }; + return { pagination, + searchBarWithResult, }; - }, [euiTheme]); + }, [euiTheme, hasSearchResults]); return cached; };