UI Polish for Session viewer frame + buttons (elastic#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 <[email protected]>
andreadelrio · Mar 29, 2022 · 3bd3eb1 · 3bd3eb1
1 parent 5fda6d5
commit 3bd3eb1
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 161 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}]
                   </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>
           )}
 

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
@@ -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
@@ -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 = {
@@ -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]);