[Security Solution] Responsive styling fixes #131951

stephmilovic · 2022-05-10T16:19:59Z

Summary

Various style fixes. See before screenshots here: #131405

More details in comments made in the Files section. Apologies that my "After" screenshots don't have data, oblt-edge is down

elasticmachine · 2022-05-10T16:20:02Z

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

elasticmachine · 2022-05-10T16:20:02Z

Pinging @elastic/security-solution (Team: SecuritySolution)

stephmilovic · 2022-05-10T16:22:40Z

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx

@@ -40,7 +40,7 @@ const DraggableLegendItemComponent: React.FC<{

  return (
    <EuiText size="xs">
-      <EuiFlexGroup alignItems="center" gutterSize="none">
+      <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>


Before:

After:

stephmilovic · 2022-05-10T16:23:53Z

x-pack/plugins/security_solution/public/common/components/header_section/index.tsx

-      `.header-section-titles {
-              margin-top:  ${theme.eui.paddingSizes.m};
-        }`}
+  .no-margin {


better alignment when toggle closed

stephmilovic · 2022-05-10T16:25:28Z

x-pack/plugins/security_solution/public/common/components/header_section/index.tsx

-            {children}
+        {!hideSubtitle && toggleStatus && (
+          <EuiFlexItem>
+            <Subtitle data-test-subj="header-section-subtitle" items={subtitle} />


All of the jsx changes here are in service of this fix:
Before:

After:

stephmilovic · 2022-05-10T16:26:50Z

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx

@@ -36,7 +36,7 @@ interface StackedBySelectProps {
 }

 export const StackByComboBoxWrapper = styled.div`
-  width: 400px;
+  max-width: 400px;


this was causing the entire overview page to overflow at certain screen sizes.
Before:

After:

stephmilovic · 2022-05-10T16:28:10Z

x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.tsx

@@ -37,7 +37,10 @@ const ID = 'alertsByCategoryOverview';
 const DEFAULT_STACK_BY = 'event.module';

 const StyledLinkButton = styled(EuiButton)`
-  margin-left: ${({ theme }) => theme.eui.paddingSizes.l};
+  margin-left: 0;
+  @media only screen and (min-width: ${(props) => props.theme.eui.euiBreakpoints.m}) {


no button margin on smaller sizes.
Before:

After:

stephmilovic · 2022-05-10T16:28:53Z

x-pack/plugins/security_solution/public/overview/components/overview_host/index.tsx

@@ -135,7 +135,6 @@ const OverviewHostComponent: React.FC<OverviewHostProps> = ({
        <EuiPanel hasBorder>
          <HeaderSection
            id={OverviewHostQueryId}
-            height={!toggleStatus ? 30 : undefined}


fixed by the .no-margin class in header_section/index.tsx

stephmilovic · 2022-05-10T16:32:28Z

x-pack/plugins/security_solution/public/overview/components/overview_host_stats/index.tsx

-                        isLoading={loading}
-                        max={statsForGroupCount}
-                      />
+                      <MoveItLeft>


better alignment on sub stats.

Before:

After:

stephmilovic · 2022-05-10T16:34:17Z

x-pack/plugins/security_solution/public/overview/components/stat_value.tsx

@@ -40,7 +40,7 @@ const StatValueComponent: React.FC<{
  }, [isLoading, isInitialLoading, setIsInitialLoading]);

  return (
-    <EuiFlexGroup alignItems="center" gutterSize="none">
+    <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>


Puts the number and bar on same line on small screens.
Before:

After:

stephmilovic · 2022-05-10T16:35:10Z

x-pack/plugins/security_solution/public/common/components/stat_items/index.tsx

@@ -258,7 +258,7 @@ export const StatItemsComponent = React.memo<StatItemsProps>(
        <EuiPanel hasBorder>
          <EuiFlexGroup gutterSize={'none'}>
            <EuiFlexItem>
-              <EuiFlexGroup gutterSize={'none'}>
+              <EuiFlexGroup gutterSize={'none'} responsive={false}>


fixes stat item query toggle.
Before:

After:

stephmilovic · 2022-05-10T16:44:26Z

x-pack/plugins/security_solution/public/common/components/stat_items/index.tsx

@@ -39,7 +39,12 @@ import { HoverVisibilityContainer } from '../hover_visibility_container';
 import { LensAttributes } from '../visualization_actions/types';
 import * as i18n from '../../containers/query_toggle/translations';
 import { UserskKpiStrategyResponse } from '../../../../common/search_strategy/security_solution/users';
-
+const FlexGroup = styled(EuiFlexGroup)`
+  .no-margin {


Fixes closed alignment on stat items.
Before:

After:

machadoum

Hey Steph! It looks way better! 👏 👏
Thanks for the screenshots. They are very helpful.

We need some changes here to group the lines visually. For example, if you look at "Package" it is visually closer to the number 108. That gives the wrong impression that there are 108 packages instead of 948.

This might be unrelated, but the network map collapse button is the only one on the right side.

This is unrelated: The alert table grid selector breaks on mobile.
@elastic/security-detections-response-alerts team, are you aware of it? Let me know if I should create a bug for it.

stephmilovic · 2022-05-16T13:30:22Z

@elasticmachine merge upstream

kibana-ci · 2022-05-16T14:39:15Z

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	5.0MB	5.0MB	+1.1KB

History

💛 Build #44140 was flaky 3bf710a
💔 Build #44112 failed e98312b
💔 Build #43841 failed 25b49f0
💔 Build #43790 failed 1ed87ac

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

michaelolo24 · 2022-05-17T12:03:52Z

x-pack/plugins/security_solution/public/overview/components/overview_host_stats/index.tsx

+
+const NoMarginTopFlexItem = styled(EuiFlexItem)`
+  @media only screen and (max-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
+    margin-top: -10px !important;


just wondering if there's a conflict somewhere that !important overrides, or is this just ot make sure it doesn't get overridden in the future?

yes there is an important we're overwriting

michaelolo24

Thanks, pulled down and tested the overview, alerts, hosts, and network views LGTM! Also, do you know if there was ever conversation about making the alert table collapsible?

stephmilovic · 2022-05-17T13:41:10Z

Thanks, pulled down and tested the overview, alerts, hosts, and network views LGTM! Also, do you know if there was ever conversation about making the alert table collapsible?

Nope, I think because it was outside of Explore.

kibanamachine · 2022-05-17T13:43:28Z

💔 All backports failed

Status	Branch	Result
❌	8.2	Backport failed because of merge conflicts You might need to backport the following PRs to 8.2: - Add host risk tab to Hosts page (#122980)

Manual backport

To create the backport manually run:

node scripts/backport --pr 131951

Questions ?

Please refer to the Backport tool documentation

* wip I * add alert table state in case * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * add new API to get FeatureID form registrationContext and update UI to use this new API * rm dead code * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * remove unnecessary memo * adds tests for case view helpers * Move http call to API and add tests for getFeatureIds * fix type + unit test * add unit tests + cleanup * add new api integration test for _feature_ids * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Fix small type creating typescript slowness * remove console log * use import type for validfeatureId * force any to improve typescript performance * Update APM (#132270) Co-authored-by: Renovate Bot <[email protected]> * [ResponseOps][Docs] Updating ServiceNow docs with OAuth setup instructions (#131344) * Updating ServiceNow docs. Need screenshots * Adding screenshots * Fix nested screenshots and lists * Tweaks and screenshots * Updates * blergh * Apply suggestions from code review Co-authored-by: Lisa Cawley <[email protected]> * Apply suggestions from code review Co-authored-by: Mike Côté <[email protected]> Co-authored-by: lcawl <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Mike Côté <[email protected]> * Show polling options when 'Data streams' option is selected in the Console Settings modal. (#132277) * [Osquery] Make Osquery All with All base privillege (#130523) * [XY] Add normalizeTable function to correct works with esdocs (#131917) * Add normalizeTable function to correct works with esdocs * Fix types * Fix types * Fix CI * Fix CI * Some fixes * Remove fallback with min/max value for domain * Added tests * Some refactoring Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Yaroslav Kuznietsov <[email protected]> * [Osquery] Add default osquery_saved_query objects (#129461) * [Unified Search] Show error message for invalid date filter value (#131290) * feat: added show error message for invalid date * refact: move logic in HOC * feat: refactoring code and added translation * refact show error * refact: show error message * refact: remove translation * refactor: changed menu for show FilterEdit * fix: open/close popover * feat: field.type => KBN_FIELD_TYPES * feat: remove extra code with with input check and refactored filter item * feat: added tests and refactoring code * refact: getFieldValidityAndErrorMessage * feat: return isInvalid checking in valur input type for string, ip * Update navigation landing pages to use appLinks config (#132027) * Update navigation landing pages to use appLinks config * Please code review * align app links changes * Update links descriptions * Rollback title changes * Fix wrong links descriptions * Fix unit tests * Fix description Co-authored-by: semd <[email protected]> * [Cloud Posture] add resource findings page flyout (#132243) * [Discover] Add a tour for Document Explorer (#131125) * [Discover] Add "Take a tour" button to the Document Explorer callout * [Discover] Tmp * [Discover] Add a first Document Explorer tour step * [Discover] Add other Document Explorer tour steps * [Discover] Update tour steps positioning * [Discover] Add gifs to tour steps * [Discover] Refactor how tour steps are registered * [Discover] Add new step to the tour. Update tour steps text. * [Discover] Improve steps positioning * [Discover] Fix positioning for Add field step * [Discover] Add icons to tour steps * [Discover] Reorganize components * [Discover] Skip Columns step when it's not available * [Discover] Rename components * [Discover] Add some tests * [Discover] Fix positioning * [Discover] Fix props * [Discover] Render steps only if the tour is active * [Discover] Update gifs * [Discover] Add image alt text for gifs * [Discover] Tag the Take tour button * [Discover] Update text and tests * [Discover] Add more tests * [Discover] Rename assets directory * [Discover] Fix tour in mobile view. Improve steps positioning and animation. * [Discover] Update text in tour steps * [Discover] Update sort.gif * [Discover] Update image width * Update src/plugins/discover/public/components/discover_tour/discover_tour_provider.tsx Co-authored-by: gchaps <[email protected]> * Update src/plugins/discover/public/components/discover_tour/discover_tour_provider.tsx Co-authored-by: gchaps <[email protected]> * [Discover] Update sort.gif * [Discover] Fix code style Co-authored-by: gchaps <[email protected]> Co-authored-by: Kibana Machine <[email protected]> * [XY] Add `minTimeBarInterval` arg (#128726) * Added `xAxisInterval` arg * Add validation * Add tests * Rename xAxisInterval to minTimeBarInterval and add validation * Fix imports * Add tests to validation * Fix conflicts * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Fix tests Co-authored-by: Kibana Machine <[email protected]> * do not use barrel imports * do not use barrel import * do not use barrel import * do not use barrel imports * do not use barrel import * import types * Add tests * Fix cases bundle size * Add more tests * [Fleet] Add new API to get current upgrades (#132276) * Add support of Data View switching for Agg-Based visualizations (#132184) * Add support of Data View switching for Agg-Based visualizations * fix CI * add use_date_view_updates * implement sync with state * cleanup * cleanup * cleanup * Update index.ts * fix PR comments * Update use_data_view_updates.ts * Update use_data_view_updates.ts Co-authored-by: Kibana Machine <[email protected]> * [Security Solution] Responsive styling fixes (#131951) * [Discover] Add Analytics No Data Page (#131965) * [Discover] Add Analytics No Data Page * Make showEmptyPrompt parameter optional * Remove unused import * Remove unnecessary test * Fix test * Update failing test? * Update failing test * Changing the order of functional tests * Fix error handling * Addressing PR comments Co-authored-by: Kibana Machine <[email protected]> * Remove barrel export from public index file * remove barrel export * Re-export missing exports * Turn off feature flag Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Esteban Beltran <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <[email protected]> Co-authored-by: Ying Mao <[email protected]> Co-authored-by: lcawl <[email protected]> Co-authored-by: Mike Côté <[email protected]> Co-authored-by: CJ Cenizal <[email protected]> Co-authored-by: Tomasz Ciecierski <[email protected]> Co-authored-by: Uladzislau Lasitsa <[email protected]> Co-authored-by: Yaroslav Kuznietsov <[email protected]> Co-authored-by: Nodir Latipov <[email protected]> Co-authored-by: Pablo Machado <[email protected]> Co-authored-by: semd <[email protected]> Co-authored-by: Or Ouziel <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: gchaps <[email protected]> Co-authored-by: Christos Nasikas <[email protected]> Co-authored-by: Nicolas Chaulet <[email protected]> Co-authored-by: Alexey Antonov <[email protected]> Co-authored-by: Steph Milovic <[email protected]> Co-authored-by: Maja Grubic <[email protected]>

* resolve merge conflicts * resolve merge conflicts * fix snapshot

css fixes

1199de7

stephmilovic requested review from a team as code owners May 10, 2022 16:19

stephmilovic commented May 10, 2022

View reviewed changes

fix stat items

8d7e350

stephmilovic commented May 10, 2022

View reviewed changes

get rid of unnecessary height defs

8c605c5

stephmilovic requested a review from a team as a code owner May 10, 2022 16:39

fix closed alignment on stats

1ed87ac

stephmilovic commented May 10, 2022

View reviewed changes

fix snapshots

25b49f0

machadoum approved these changes May 11, 2022

View reviewed changes

stephmilovic added 2 commits May 11, 2022 08:14

Merge branch 'main' into css_fixes

76392af

more css fixes

e98312b

fix snapshots

3bf710a

Merge branch 'main' into css_fixes

907dc7b

michaelolo24 reviewed May 17, 2022

View reviewed changes

michaelolo24 approved these changes May 17, 2022

View reviewed changes

stephmilovic merged commit a8e8d35 into elastic:main May 17, 2022

stephmilovic mentioned this pull request May 17, 2022

[8.2] [Security Solution] Responsive styling fixes (#131951) #132331

Merged

academo pushed a commit to XavierM/kibana that referenced this pull request May 17, 2022

[Security Solution] Responsive styling fixes (elastic#131951)

6bf622a

stephmilovic added a commit that referenced this pull request May 17, 2022

[8.2] [Security Solution] Responsive styling fixes (#131951) (#132331)

471c2ac

* resolve merge conflicts * resolve merge conflicts * fix snapshot

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] Responsive styling fixes #131951

[Security Solution] Responsive styling fixes #131951

stephmilovic commented May 10, 2022 •

edited

Loading

elasticmachine commented May 10, 2022

elasticmachine commented May 10, 2022

stephmilovic May 10, 2022

stephmilovic May 10, 2022

stephmilovic May 10, 2022

stephmilovic May 10, 2022

stephmilovic May 10, 2022

stephmilovic May 10, 2022

stephmilovic May 10, 2022 •

edited

Loading

stephmilovic May 10, 2022

stephmilovic May 10, 2022

stephmilovic May 10, 2022

machadoum left a comment •

edited

Loading

stephmilovic commented May 16, 2022

kibana-ci commented May 16, 2022

michaelolo24 May 17, 2022

stephmilovic May 17, 2022

michaelolo24 left a comment

stephmilovic commented May 17, 2022

kibanamachine commented May 17, 2022

[Security Solution] Responsive styling fixes #131951

[Security Solution] Responsive styling fixes #131951

Conversation

stephmilovic commented May 10, 2022 • edited Loading

Summary

elasticmachine commented May 10, 2022

elasticmachine commented May 10, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephmilovic May 10, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

machadoum left a comment • edited Loading

Choose a reason for hiding this comment

stephmilovic commented May 16, 2022

kibana-ci commented May 16, 2022

💚 Build Succeeded

Metrics [docs]

Async chunks

History

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaelolo24 left a comment

Choose a reason for hiding this comment

stephmilovic commented May 17, 2022

kibanamachine commented May 17, 2022

💔 All backports failed

Manual backport

Questions ?

stephmilovic commented May 10, 2022 •

edited

Loading

stephmilovic May 10, 2022 •

edited

Loading

machadoum left a comment •

edited

Loading