Skip to content

Commit

Permalink
UI Polish for Session viewer frame + buttons (elastic#128188)
Browse files Browse the repository at this point in the history
* 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 <karl.godard@elastic.co>
  • Loading branch information
animehart and mitodrummer authored Mar 29, 2022
1 parent 5fda6d5 commit 3bd3eb1
Show file tree
Hide file tree
Showing 13 changed files with 255 additions and 161 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ export const useStyles = () => {
'&:last-child': {
borderBottom: euiTheme.border.thin,
},
dl: {
paddingTop: '0px',
},
};

const accordionButton: CSSObject = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -34,6 +36,7 @@ export const useStyles = ({ display }: StylesDeps) => {
'&:hover': {
background: transparentize(euiTheme.colors.primary, 0.1),
},
height: '100%',
};

return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export const useStyles = () => {
overflow: 'auto',
height: '100%',
backgroundColor: colors.lightestShade,
paddingTop: size.base,
paddingLeft: size.s,
};

const selectionArea: CSSObject = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -249,15 +250,12 @@ export function ProcessTreeNode({
[exit_code: {exitCode}]
</small>
)}
{timeStampOn && (
<span
data-test-subj="sessionView:processTreeNodeTimestamp"
css={styles.timeStamp}
>
{timeStampsNormal}
</span>
)}
</span>
{timeStampOn && (
<span data-test-subj="sessionView:processTreeNodeTimestamp" css={styles.timeStamp}>
{timeStampsNormal}
</span>
)}
</span>
)}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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 = {
Expand Down Expand Up @@ -124,7 +137,7 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert }: StylesDeps
timeStamp,
alertDetails,
};
}, [depth, euiTheme, hasAlerts, hasInvestigatedAlert]);
}, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected]);

return cached;
};
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,29 @@ 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),
border: `${border.width.thin} solid ${transparentize(theme.euiColorVis6, 0.48)}`,
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 = {
Expand Down Expand Up @@ -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 {
Expand All @@ -81,6 +92,7 @@ export const useButtonStyles = ({ isExpanded }: ButtonStylesDeps) => {
alertsCountNumber,
userChangedButton,
userChangedButtonUsername,
buttonSize,
expandedIcon,
};
}, [euiTheme, isExpanded]);
Expand Down
Loading

0 comments on commit 3bd3eb1

Please sign in to comment.