Migrate Session View to Borealis (elastic#207710)

## Summary Migrating Session View to Borealis: - adjust button colors to the new color palette after feedback from @codearos - get rid of the use of `euiVars` in favor of color tokens from `euiTheme` - replace custom color `buttonsBackgroundNormalDefaultPrimary` with eui token - get rid of `EuiTextColor` wrapping for Details panel values, after feedback from @codearos , the different color usage there has unclear purpose and doesn't work well with the new theme Follow up after: - elastic#205136 Overall migration guide from EUI: - elastic#199715 Amsterdam vs Borealis comparison screenshots for CSP and Session View: https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0 ### How to test Upload data ``` node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/process_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/alerts --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/io_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn ``` navigate to Alerts and choose the last 3 years in the date picker. There should be alerts with the Session View button available ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
JoseLuisGJ · Jan 27, 2025 · 94eb4c5 · 94eb4c5
1 parent 7422284
commit 94eb4c5
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 190 deletions.
diff --git a/...ions/security/plugins/session_view/public/components/back_to_investigated_alert/styles.ts b/...ions/security/plugins/session_view/public/components/back_to_investigated_alert/styles.ts
@@ -15,7 +15,7 @@ interface StylesDeps {
 }
 
 export const useStyles = ({ isDisplayedAbove }: StylesDeps) => {
-  const { euiTheme, euiVars } = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { size, font } = euiTheme;
@@ -44,18 +44,18 @@ export const useStyles = ({ isDisplayedAbove }: StylesDeps) => {
 
     if (isDisplayedAbove) {
       container.top = 0;
-      container.background = `linear-gradient(180deg, ${euiVars.euiColorLightestShade} 0%, transparent 100%)`;
+      container.background = `linear-gradient(180deg, ${euiTheme.colors.lightestShade} 0%, transparent 100%)`;
     } else {
       container.bottom = 0;
-      container.background = `linear-gradient(360deg, ${euiVars.euiColorLightestShade} 0%, transparent 100%)`;
+      container.background = `linear-gradient(360deg, ${euiTheme.colors.lightestShade} 0%, transparent 100%)`;
     }
 
     return {
       container,
       jumpBackBadge,
       buttonStyle,
     };
-  }, [isDisplayedAbove, euiTheme, euiVars]);
+  }, [isDisplayedAbove, euiTheme]);
 
   return cached;
 };
diff --git a/...tions/security/plugins/session_view/public/components/detail_panel_metadata_tab/index.tsx b/...tions/security/plugins/session_view/public/components/detail_panel_metadata_tab/index.tsx
diff --git a/...utions/security/plugins/session_view/public/components/detail_panel_process_tab/index.tsx b/...utions/security/plugins/session_view/public/components/detail_panel_process_tab/index.tsx
@@ -84,11 +84,11 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
         const [exec, eventAction] = execTuple;
         return (
           <div key={`executable-${idx}`} css={styles.ellipsis}>
-            <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
+            <EuiTextColor color="default" css={styles.descriptionSemibold}>
               {exec}
             </EuiTextColor>
             {eventAction && (
-              <EuiTextColor color="subdued" css={styles.executableAction}>
+              <EuiTextColor color="default" css={styles.executableAction}>
                 {eventAction}
               </EuiTextColor>
             )}
@@ -131,9 +131,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
             textToCopy={`${LEADER_FIELD_PREFIX[idx]}.entity_id: "${id}"`}
             tooltipContent={id}
           >
-            <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-              {id}
-            </EuiTextColor>
+            {id}
           </DetailPanelCopy>
         ),
       },
@@ -166,9 +164,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
             textToCopy={`${LEADER_FIELD_PREFIX[idx]}.interactive: "${interactive}"`}
             tooltipContent={interactive}
           >
-            <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-              {interactive}
-            </EuiTextColor>
+            {interactive}
           </DetailPanelCopy>
         ),
       },
@@ -179,9 +175,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
             textToCopy={`${LEADER_FIELD_PREFIX[idx]}.working_directory: "${workingDirectory}"`}
             tooltipContent={workingDirectory}
           >
-            <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-              {workingDirectory}
-            </EuiTextColor>
+            {workingDirectory}
           </DetailPanelCopy>
         ),
       },
@@ -192,9 +186,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
             textToCopy={`${LEADER_FIELD_PREFIX[idx]}.pid: "${pid}"`}
             tooltipContent={pid}
           >
-            <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-              {pid}
-            </EuiTextColor>
+            {pid}
           </DetailPanelCopy>
         ),
       },
@@ -227,9 +219,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
             textToCopy={`${LEADER_FIELD_PREFIX[idx]}.exit_code: "${exitCode}"`}
             tooltipContent={exitCode}
           >
-            <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-              {exitCode}
-            </EuiTextColor>
+            {exitCode}
           </DetailPanelCopy>
         ),
       },
@@ -288,9 +278,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
               textToCopy={`${LEADER_FIELD_PREFIX[idx]}.entry_meta.type: "${entryMetaType}"`}
               tooltipContent={entryMetaType}
             >
-              <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-                {entryMetaType}
-              </EuiTextColor>
+              {entryMetaType}
             </DetailPanelCopy>
           ),
         },
@@ -343,9 +331,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
                 textToCopy={`${PROCESS_FIELD_PREFIX}.entity_id: "${id}"`}
                 tooltipContent={id}
               >
-                <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-                  {id}
-                </EuiTextColor>
+                {id}
               </DetailPanelCopy>
             ),
           },
@@ -379,9 +365,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
                 textToCopy={`${PROCESS_FIELD_PREFIX}.interactive: "${interactive}"`}
                 tooltipContent={interactive}
               >
-                <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-                  {interactive}
-                </EuiTextColor>
+                {interactive}
               </DetailPanelCopy>
             ),
           },
@@ -392,9 +376,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
                 textToCopy={`${PROCESS_FIELD_PREFIX}.working_directory: "${workingDirectory}"`}
                 tooltipContent={workingDirectory}
               >
-                <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-                  {workingDirectory}
-                </EuiTextColor>
+                {workingDirectory}
               </DetailPanelCopy>
             ),
           },
@@ -405,9 +387,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
                 textToCopy={`${PROCESS_FIELD_PREFIX}.pid: "${pid}"`}
                 tooltipContent={pid}
               >
-                <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-                  {pid}
-                </EuiTextColor>
+                {pid}
               </DetailPanelCopy>
             ),
           },
@@ -440,9 +420,7 @@ export const DetailPanelProcessTab = ({ selectedProcess, index }: DetailPanelPro
                 textToCopy={`${PROCESS_FIELD_PREFIX}.exit_code: "${exitCode}"`}
                 tooltipContent={exitCode}
               >
-                <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
-                  {exitCode}
-                </EuiTextColor>
+                {exitCode}
               </DetailPanelCopy>
             ),
           },

diff --git a/...utions/security/plugins/session_view/public/components/detail_panel_process_tab/styles.ts b/...utions/security/plugins/session_view/public/components/detail_panel_process_tab/styles.ts
@@ -18,7 +18,7 @@ export const useStyles = () => {
     };
 
     const executableAction: CSSObject = {
-      fontWeight: euiTheme.font.weight.semiBold,
+      fontWeight: euiTheme.font.weight.bold,
       paddingLeft: euiTheme.size.xs,
     };
 

diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts
@@ -10,7 +10,7 @@ import { CSSObject } from '@emotion/react';
 import { useEuiTheme } from '../../hooks';
 
 export const useStyles = () => {
-  const { euiTheme, euiVars } = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { font } = euiTheme;
@@ -20,13 +20,13 @@ export const useStyles = () => {
       fontFamily: font.familyCode,
       overflow: 'auto',
       height: '100%',
-      backgroundColor: euiVars.euiColorLightestShade,
+      backgroundColor: euiTheme.colors.lightestShade,
     };
 
     return {
       sessionViewProcessTree,
     };
-  }, [euiTheme, euiVars]);
+  }, [euiTheme]);
 
   return cached;
 };
diff --git a/...ck/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts b/...ck/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts
@@ -16,7 +16,7 @@ interface StylesDeps {
 }
 
 export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
-  const { euiTheme, euiVars } = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { size, colors, font, border } = euiTheme;
@@ -56,7 +56,7 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
         flexShrink: 0,
         marginRight: size.xs,
         '&:hover, &:focus, &:focus-within': {
-          backgroundColor: transparentize(euiVars.buttonsBackgroundNormalDefaultPrimary, 0.2), // TODO: Borealis migration - replace transparentize with color token
+          backgroundColor: transparentize(euiTheme.colors.backgroundFilledPrimary, 0.2), // TODO: Borealis migration - replace transparentize with color token
         },
       },
       '&& .euiFlexItem': {
@@ -100,7 +100,7 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
       processPanel,
       processAlertDisplayContainer,
     };
-  }, [euiTheme, isInvestigated, isSelected, euiVars]);
+  }, [euiTheme, isInvestigated, isSelected]);
 
   return cached;
 };
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts
@@ -25,7 +25,7 @@ export const useStyles = ({
   isSelected,
   isSessionLeader,
 }: StylesDeps) => {
-  const { euiTheme, euiVars } = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { colors, border, size, font } = euiTheme;
@@ -50,7 +50,7 @@ export const useStyles = ({
     };
 
     const icon: CSSObject = {
-      color: euiVars.euiColorDarkShade,
+      color: euiTheme.colors.darkShade,
     };
 
     /**
@@ -142,7 +142,7 @@ export const useStyles = ({
       processNode.top = '-' + size.base;
       processNode.zIndex = 1;
       processNode.borderTop = `${size.base} solid transparent`;
-      processNode.backgroundColor = euiVars.euiColorLightestShade;
+      processNode.backgroundColor = euiTheme.colors.lightestShade;
       processNode.borderBottom = border.editable;
     }
 
@@ -156,7 +156,7 @@ export const useStyles = ({
       paddingLeft: size.s,
       position: 'relative',
       verticalAlign: 'middle',
-      color: euiVars.euiTextSubduedColor,
+      color: euiTheme.colors.textSubdued,
       wordBreak: 'break-all',
       padding: `${size.xs} 0px`,
       button: {
@@ -203,7 +203,7 @@ export const useStyles = ({
       sessionLeader,
       jumpToTop,
     };
-  }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected, euiVars, isSessionLeader]);
+  }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected, isSessionLeader]);
 
   return cached;
 };
diff --git a/...ns/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts b/...ns/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts
@@ -43,10 +43,12 @@ export const useButtonStyles = () => {
         transform: `rotate(180deg)`,
       },
       '&.isExpanded': {
-        color: colors.ghost,
+        color: colors.textInverse,
         background: colors.backgroundFilledPrimary,
+        borderColor: colors.borderStrongPrimary,
         '&:hover, &:focus': {
           background: colors.backgroundFilledPrimary,
+          borderColor: colors.borderStrongPrimary,
         },
       },
     };
@@ -64,10 +66,12 @@ export const useButtonStyles = () => {
         textDecoration: 'none',
       },
       '&.isExpanded': {
-        color: colors.ghost,
+        color: colors.textInverse,
         background: colors.backgroundFilledDanger,
+        borderColor: colors.borderStrongDanger,
         '&:hover, &:focus': {
           background: `${colors.backgroundFilledDanger}`,
+          borderColor: colors.borderStrongDanger,
         },
       },
 
@@ -82,31 +86,31 @@ export const useButtonStyles = () => {
 
     const outputButton: CSSObject = {
       ...button,
-      color: colors.textAccent,
-      background: colors.backgroundBaseAccent,
-      border: `${border.width.thin} solid ${colors.borderBaseAccent}`,
+      color: colors.textAccentSecondary,
+      background: colors.backgroundBaseAccentSecondary,
+      border: `${border.width.thin} solid ${colors.borderBaseAccentSecondary}`,
       '&&:hover, &&:focus': {
-        background: colors.backgroundLightAccent,
+        background: colors.backgroundLightAccentSecondary,
         textDecoration: 'none',
       },
       '&.isExpanded': {
         color: colors.ghost,
-        background: colors.backgroundFilledAccent,
+        background: colors.backgroundFilledAccentSecondary,
         '&:hover, &:focus': {
-          background: `${colors.backgroundFilledAccent}`,
+          background: `${colors.backgroundFilledAccentSecondary}`,
         },
       },
     };
 
     const userChangedButton: CSSObject = {
       ...button,
       cursor: 'default',
-      color: colors.textAccentSecondary,
-      background: colors.backgroundBaseAccentSecondary,
-      border: `${border.width.thin} solid ${colors.borderBaseAccentSecondary}`,
+      color: colors.textAccent,
+      background: colors.backgroundBaseAccent,
+      border: `${border.width.thin} solid ${colors.borderBaseAccent}`,
       '&&:hover, &&:focus': {
-        color: colors.textAccentSecondary,
-        background: colors.backgroundBaseAccentSecondary,
+        color: colors.textAccent,
+        background: colors.backgroundBaseAccent,
         textDecoration: 'none',
         transform: 'none',
         animation: 'none',

diff --git a/x-pack/solutions/security/plugins/session_view/public/components/session_view/styles.ts b/x-pack/solutions/security/plugins/session_view/public/components/session_view/styles.ts
@@ -15,7 +15,7 @@ interface StylesDeps {
 }
 
 export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
-  const { euiTheme, euiVars } = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { border, size } = euiTheme;
@@ -50,13 +50,13 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
       border: border.thin,
       borderRadius: border.radius.medium,
       '> .sessionViewerToolbar': {
-        backgroundColor: `${euiVars.euiFormBackgroundDisabledColor}`,
+        backgroundColor: `${euiTheme.components.forms.backgroundDisabled}`,
         padding: `${size.m} ${size.base}`,
       },
     };
 
     const fakeDisabled: CSSObject = {
-      color: euiVars.euiButtonColorDisabledText,
+      color: euiTheme.colors.disabled,
     };
 
     return {
@@ -67,7 +67,7 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
       fakeDisabled,
       sessionViewerComponent,
     };
-  }, [euiTheme, isFullScreen, height, euiVars]);
+  }, [euiTheme, isFullScreen, height]);
 
   return cached;
 };