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 c44e069c05c0..96eddb2b2bf9 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 d815cb2a4828..d1f3198a10c8 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 c370bd8adb6e..22f5e6782288 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 207cc55e4958..ed868b7203cc 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 d2e5b1b89955..9d5a3b1c953c 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 55afe5c28071..c3122294e44f 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 529a0ce5819f..4c713b42a2d7 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 1ec9441a2b1d..2e1a598faeda 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 (
<>
-
-
+