[8.18] [Security Solution] [EUI Refresh] [Explore page] Migrate styled-components (#207318) (#209852)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[Security Solution] [EUI Refresh] [Explore page] Migrate
styled-components
(#207318)](https://github.com/elastic/kibana/pull/207318)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Agustina Nahir
Ruidiaz","email":"61565784+agusruidiazgd@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-01-30T12:24:05Z","message":"[Security
Solution] [EUI Refresh] [Explore page] Migrate styled-components
(#207318)\n\n## Summary\r\nAddresses
[#206437](https://github.com/elastic/kibana/issues/206437)\r\nThis PR
migrates `explore page` from `styled-components`
to\r\n`@emotion/styled`.\r\nIn the process I also convert the
kbn/ui-theme json tokens to
euiTheme\r\ncounterparts.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/f1702c0d-78f7-4e17-a8d6-c7c9ae19d3b7\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"1e63b5ae999eb5022f9f02626db9f70e17d28a92","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport
missing","Team:Threat
Hunting:Explore","ci:cloud-deploy","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0"],"title":"[Security Solution] [EUI Refresh]
[Explore page] Migrate
styled-components","number":207318,"url":"https://github.com/elastic/kibana/pull/207318","mergeCommit":{"message":"[Security
Solution] [EUI Refresh] [Explore page] Migrate styled-components
(#207318)\n\n## Summary\r\nAddresses
[#206437](https://github.com/elastic/kibana/issues/206437)\r\nThis PR
migrates `explore page` from `styled-components`
to\r\n`@emotion/styled`.\r\nIn the process I also convert the
kbn/ui-theme json tokens to
euiTheme\r\ncounterparts.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/f1702c0d-78f7-4e17-a8d6-c7c9ae19d3b7\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"1e63b5ae999eb5022f9f02626db9f70e17d28a92"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/208928","number":208928,"state":"OPEN"},{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Agustina Nahir Ruidiaz <61565784+agusruidiazgd@users.noreply.github.com>
This commit is contained in:
Karen Grigoryan 2025-02-12 09:06:13 +01:00 committed by GitHub
parent 73f095f86a
commit 40be9df6e9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 1235 additions and 274 deletions

View file

@ -405,26 +405,6 @@ module.exports = {
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]pages[\/\\]shared_lists[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]components[\/\\]paginated_table[\/\\]index.test.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]components[\/\\]paginated_table[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]components[\/\\]stat_items[\/\\]utils.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]hosts[\/\\]pages[\/\\]display.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]hosts[\/\\]pages[\/\\]hosts.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]arrows[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]embeddables[\/\\]embeddable.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]embeddables[\/\\]embedded_map.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]embeddables[\/\\]map_tool_tip[\/\\]line_tool_tip_content.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]embeddables[\/\\]map_tool_tip[\/\\]tooltip_footer.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]flow_target_select_connected[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]country_flag.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]geo_fields.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]ip_with_port.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]label.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]network.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]source_destination_arrows.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]pages[\/\\]navigation[\/\\]conditional_flex_group.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]pages[\/\\]navigation[\/\\]network_routes_loading.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]pages[\/\\]network.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]users[\/\\]pages[\/\\]users.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]document_details[\/\\]left[\/\\]components[\/\\]investigation_guide_view.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]document_details[\/\\]left[\/\\]components[\/\\]response_details.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]document_details[\/\\]left[\/\\]components[\/\\]threat_details_view_enrichment_button_content.tsx/,

View file

@ -0,0 +1,14 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import '@emotion/react';
import type { UseEuiTheme } from '@elastic/eui';
declare module '@emotion/react' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface Theme extends UseEuiTheme {}
}

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import styled from 'styled-components';
import styled from '@emotion/styled';
import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';

View file

@ -5,10 +5,10 @@
* 2.0.
*/
import styled from 'styled-components';
import styled from '@emotion/styled';
export const Display = styled.div<{ show: boolean }>`
${({ show }) => (show ? '' : 'display: none;')};
`;
export const Display = styled.div<{ show: boolean }>(({ show }) => ({
display: show ? undefined : 'none',
}));
Display.displayName = 'Display';

View file

@ -6,7 +6,7 @@
*/
import { EuiSpacer, EuiWindowEvent } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { noop } from 'lodash/fp';
import React, { useCallback, useMemo, useRef } from 'react';
import { useParams } from 'react-router-dom';

View file

@ -7,11 +7,11 @@
import { EuiIcon } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
/** Renders the body (non-pointy part) of an arrow */
export const ArrowBody = styled.span<{ height: number }>`
background-color: ${(props) => props.theme.eui.euiColorLightShade};
background-color: ${(props) => props.theme.euiTheme.colors.lightShade};
height: ${({ height }) => `${height}px`};
width: 25px;
`;

View file

@ -8,7 +8,7 @@
import { EuiPanel } from '@elastic/eui';
import type { PropsWithChildren } from 'react';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
const Panel = styled(EuiPanel)`
overflow: hidden;

View file

@ -11,7 +11,8 @@ import { EuiAccordion, EuiLink, EuiText } from '@elastic/eui';
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { useSelector } from 'react-redux';
import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
import styled, { css } from 'styled-components';
import styled from '@emotion/styled';
import { css } from '@emotion/react';
import type { Filter, Query } from '@kbn/es-query';
import { isEqual } from 'lodash/fp';
import type { MapApi, RenderTooltipContentParams } from '@kbn/maps-plugin/public';
@ -37,23 +38,19 @@ interface EmbeddableMapProps {
maintainRatio?: boolean;
}
const EmbeddableMapRatioHolder = styled.div.attrs(() => ({
className: 'siemEmbeddable__map',
}))<EmbeddableMapProps>`
const EmbeddableMapRatioHolder = styled.div<EmbeddableMapProps>`
.mapToolbarOverlay__button {
display: none;
}
${({ maintainRatio }) =>
${({ maintainRatio, theme: { euiTheme } }) =>
maintainRatio &&
css`
padding-top: calc(3 / 4 * 100%); /* 4:3 (standard) ratio */
position: relative;
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
@media only screen and (min-width: ${euiTheme.breakpoint.m}) {
padding-top: calc(9 / 32 * 100%); /* 32:9 (ultra widescreen) ratio */
}
@media only screen and (min-width: 1441px) and (min-height: 901px) {
padding-top: calc(9 / 21 * 100%); /* 21:9 (ultrawide) ratio */
}
@ -188,7 +185,7 @@ export const EmbeddedMapComponent = ({
<MapToolTip />
</InPortal>
<EmbeddableMapWrapper>
<EmbeddableMapRatioHolder maintainRatio={!isIndexError} />
<EmbeddableMapRatioHolder className="siemEmbeddable__map" maintainRatio={!isIndexError} />
{isIndexError ? (
<IndexPatternsMissingPrompt data-test-subj="missing-prompt" />
) : (

View file

@ -7,7 +7,7 @@
import React from 'react';
import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import type { ITooltipProperty } from '@kbn/maps-plugin/public/classes/tooltips/tooltip_property';
import { SourceDestinationArrows } from '../../source_destination/source_destination_arrows';
import {

View file

@ -15,7 +15,7 @@ import {
EuiText,
} from '@elastic/eui';
import { euiLightVars as theme } from '@kbn/ui-theme';
import styled from 'styled-components';
import styled from '@emotion/styled';
import * as i18n from '../translations';
export const Icon = styled(EuiIcon)`

View file

@ -9,7 +9,7 @@ import type { Location } from 'history';
import { EuiFlexItem } from '@elastic/eui';
import React, { useCallback } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import styled from '@emotion/styled';
import * as i18nIp from '../details/translations';

View file

@ -10,7 +10,7 @@ import { isEmpty } from 'lodash/fp';
import { EuiToolTip } from '@elastic/eui';
import countries from 'i18n-iso-countries';
import countryJson from 'i18n-iso-countries/langs/en.json';
import styled from 'styled-components';
import styled from '@emotion/styled';
// Fixes vertical alignment of the flag
const FlagWrapper = styled.span`

View file

@ -8,7 +8,7 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { get, uniq } from 'lodash/fp';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { DefaultDraggable } from '../../../../common/components/draggables';

View file

@ -7,7 +7,7 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { Network } from './network';
import { SourceDestinationWithArrows } from './source_destination_with_arrows';

View file

@ -7,7 +7,7 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { Ip } from '../ip';
import { Port } from '../port';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import styled from 'styled-components';
import styled from '@emotion/styled';
export const Label = styled.div`
font-weight: bold;

View file

@ -8,7 +8,7 @@
import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import { uniq } from 'lodash/fp';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { DirectionBadge } from '../direction';
import { DefaultDraggable, DraggableBadge } from '../../../../common/components/draggables';

View file

@ -8,7 +8,7 @@
import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import numeral from '@elastic/numeral';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { ArrowBody, ArrowHead } from '../arrows';
import {

View file

@ -6,7 +6,7 @@
*/
import { EuiFlexGroup } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
export const ConditionalFlexGroup = styled(EuiFlexGroup)`
@media only screen and (min-width: 1441px) {

View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { EuiFlexItem, EuiLoadingSpinner, EuiFlexGroup } from '@elastic/eui';

View file

@ -9,7 +9,7 @@ import { EuiPanel, EuiSpacer, EuiWindowEvent } from '@elastic/eui';
import { noop } from 'lodash/fp';
import React, { useCallback, useMemo, useRef } from 'react';
import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { isTab } from '@kbn/timelines-plugin/public';
import { getEsQueryConfig } from '@kbn/data-plugin/common';

View file

@ -6,7 +6,7 @@
*/
import { EuiSpacer, EuiWindowEvent } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { noop } from 'lodash/fp';
import React, { useCallback, useMemo, useRef } from 'react';
import { useParams } from 'react-router-dom';

View file

@ -2,8 +2,8 @@
exports[`Netflow renders correctly against snapshot 1`] = `
<DocumentFragment>
.c11,
.c11 * {
.c7,
.c7 * {
display: inline-block;
max-width: 100%;
overflow: hidden;
@ -106,75 +106,17 @@ tr:hover .c3:focus::before {
vertical-align: top;
}
.c13 svg {
.c8 svg {
position: relative;
top: -1px;
}
.c22 {
margin-right: 5px;
}
.c21 {
margin-right: 5px;
}
.c15 {
position: relative;
top: 1px;
}
.c14 {
margin-right: 5px;
}
.c17 {
background-color: #343741;
height: 2.8px;
width: 25px;
}
.c20 {
background-color: #343741;
height: 2.2px;
width: 25px;
}
.c19 {
margin-right: 5px;
}
.c16 {
margin: 0 2px;
}
.c16 .euiToolTipAnchor {
white-space: nowrap;
}
.c18 {
margin: 0 5px;
}
.c7 {
margin-right: 3px;
}
.c8 {
margin: 0 5px;
}
.c12 {
margin: 0 3px;
}
.c10 {
font-weight: bold;
margin-top: 2px;
margin-right: 5px;
}
.c9 {
margin-top: 3px;
margin-right: 5px;
}
.c6 {
@ -537,7 +479,7 @@ tr:hover .c3:focus::before {
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-center-row"
>
<div
class="euiFlexItem c7 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c1"
@ -599,7 +541,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c7 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c1"
@ -656,7 +598,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c7 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c1"
@ -692,7 +634,7 @@ tr:hover .c3:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c8 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span>
100B
@ -706,7 +648,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c7 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c1"
@ -742,7 +684,7 @@ tr:hover .c3:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c8 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span>
3 pkts
@ -756,7 +698,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c7 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c1"
@ -872,7 +814,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c9 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-stretch-row"
@ -899,7 +841,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c10"
class="css-fbtzpm"
>
Source
</div>
@ -954,7 +896,7 @@ tr:hover .c3:focus::before {
tabindex="-1"
>
<span
class="c11"
class="c7"
data-test-subj="draggable-truncatable-content"
>
<a
@ -985,7 +927,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c12"
class="css-7g9jn5"
data-test-subj="ip-port-separator"
>
:
@ -995,7 +937,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c13"
class="c8"
>
<a
class="euiLink emotion-euiLink-primary"
@ -1031,7 +973,7 @@ tr:hover .c3:focus::before {
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1083,7 +1025,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1135,7 +1077,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1144,7 +1086,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c15"
class="css-19nn5cj"
data-test-subj="country-flag"
>
🇺🇸
@ -1197,7 +1139,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1249,7 +1191,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1308,7 +1250,7 @@ tr:hover .c3:focus::before {
</span>
</div>
<div
class="euiFlexGroup c16 emotion-euiFlexGroup-none-center-center-column"
class="euiFlexGroup emotion-euiFlexGroup-none-center-center-column"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -1320,7 +1262,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c17"
class="css-1io4upz"
height="2.8"
/>
</div>
@ -1361,10 +1303,10 @@ tr:hover .c3:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c18 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span
class="c19"
class="css-2dse8b"
>
(60.00%)
</span>
@ -1383,7 +1325,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c17"
class="css-1io4upz"
height="2.8"
/>
</div>
@ -1424,7 +1366,7 @@ tr:hover .c3:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c18 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span>
2 pkts
@ -1441,7 +1383,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c17"
class="css-1io4upz"
height="2.8"
/>
</div>
@ -1475,7 +1417,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c20"
class="css-1almmfe"
height="2.2"
/>
</div>
@ -1524,10 +1466,10 @@ tr:hover .c3:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c18 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span
class="c19"
class="css-2dse8b"
>
(40.00%)
</span>
@ -1550,7 +1492,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c20"
class="css-1almmfe"
height="2.2"
/>
</div>
@ -1591,7 +1533,7 @@ tr:hover .c3:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c18 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span>
1 pkts
@ -1608,7 +1550,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c20"
class="css-1almmfe"
height="2.2"
/>
</div>
@ -1637,7 +1579,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c10"
class="css-fbtzpm"
>
Destination
</div>
@ -1692,7 +1634,7 @@ tr:hover .c3:focus::before {
tabindex="-1"
>
<span
class="c11"
class="c7"
data-test-subj="draggable-truncatable-content"
>
<a
@ -1723,7 +1665,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c12"
class="css-7g9jn5"
data-test-subj="ip-port-separator"
>
:
@ -1733,7 +1675,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c13"
class="c8"
>
<a
class="euiLink emotion-euiLink-primary"
@ -1769,7 +1711,7 @@ tr:hover .c3:focus::before {
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1821,7 +1763,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1873,7 +1815,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1882,7 +1824,7 @@ tr:hover .c3:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c15"
class="css-19nn5cj"
data-test-subj="country-flag"
>
🇺🇸
@ -1935,7 +1877,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1987,7 +1929,7 @@ tr:hover .c3:focus::before {
</div>
</div>
<div
class="euiFlexItem c14 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -2110,7 +2052,7 @@ tr:hover .c3:focus::before {
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c21"
class="c9"
>
ja3
</span>
@ -2195,7 +2137,7 @@ tr:hover .c3:focus::before {
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c22"
class="c10"
>
client cert
</span>
@ -2280,7 +2222,7 @@ tr:hover .c3:focus::before {
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c22"
class="c10"
>
server cert
</span>

View file

@ -16,8 +16,8 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
border-radius: 4px;
}
.c13,
.c13 * {
.c9,
.c9 * {
display: inline-block;
max-width: 100%;
overflow: hidden;
@ -120,75 +120,17 @@ tr:hover .c5:focus::before {
vertical-align: top;
}
.c15 svg {
.c10 svg {
position: relative;
top: -1px;
}
.c24 {
margin-right: 5px;
}
.c23 {
margin-right: 5px;
}
.c9 {
margin-right: 3px;
}
.c10 {
margin: 0 5px;
}
.c19 {
background-color: #343741;
height: 2.8px;
width: 25px;
}
.c22 {
background-color: #343741;
height: 2.2px;
width: 25px;
}
.c21 {
margin-right: 5px;
}
.c18 {
margin: 0 2px;
}
.c18 .euiToolTipAnchor {
white-space: nowrap;
}
.c20 {
margin: 0 5px;
}
.c17 {
position: relative;
top: 1px;
}
.c16 {
margin-right: 5px;
}
.c14 {
margin: 0 3px;
}
.c12 {
font-weight: bold;
margin-top: 2px;
margin-right: 5px;
}
.c11 {
margin-top: 3px;
margin-right: 5px;
}
.c8 {
@ -611,7 +553,7 @@ tr:hover .c5:focus::before {
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-center-row"
>
<div
class="euiFlexItem c9 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c3"
@ -683,7 +625,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c9 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c3"
@ -750,7 +692,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c9 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c3"
@ -791,7 +733,7 @@ tr:hover .c5:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c10 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span>
100B
@ -810,7 +752,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c9 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c3"
@ -851,7 +793,7 @@ tr:hover .c5:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c10 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span>
3 pkts
@ -870,7 +812,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c9 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c3"
@ -1006,7 +948,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c11 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-stretch-row"
@ -1033,7 +975,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c12"
class="css-fbtzpm"
>
Source
</div>
@ -1093,7 +1035,7 @@ tr:hover .c5:focus::before {
source.ip
</p>
<span
class="c13"
class="c9"
data-test-subj="draggable-truncatable-content"
>
<a
@ -1129,7 +1071,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c14"
class="css-7g9jn5"
data-test-subj="ip-port-separator"
>
:
@ -1185,7 +1127,7 @@ tr:hover .c5:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="c15"
class="c10"
>
<a
class="euiLink emotion-euiLink-primary"
@ -1236,7 +1178,7 @@ tr:hover .c5:focus::before {
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1298,7 +1240,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1360,7 +1302,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1369,7 +1311,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c17"
class="css-19nn5cj"
data-test-subj="country-flag"
>
🇺🇸
@ -1432,7 +1374,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1494,7 +1436,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -1563,7 +1505,7 @@ tr:hover .c5:focus::before {
</span>
</div>
<div
class="euiFlexGroup c18 emotion-euiFlexGroup-none-center-center-column"
class="euiFlexGroup emotion-euiFlexGroup-none-center-center-column"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -1575,7 +1517,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c19"
class="css-1io4upz"
height="2.8"
/>
</div>
@ -1621,10 +1563,10 @@ tr:hover .c5:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c20 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span
class="c21"
class="css-2dse8b"
>
(60.00%)
</span>
@ -1648,7 +1590,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c19"
class="css-1io4upz"
height="2.8"
/>
</div>
@ -1694,7 +1636,7 @@ tr:hover .c5:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c20 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span>
2 pkts
@ -1716,7 +1658,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c19"
class="css-1io4upz"
height="2.8"
/>
</div>
@ -1750,7 +1692,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c22"
class="css-1almmfe"
height="2.2"
/>
</div>
@ -1804,10 +1746,10 @@ tr:hover .c5:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c20 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span
class="c21"
class="css-2dse8b"
>
(40.00%)
</span>
@ -1835,7 +1777,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c22"
class="css-1almmfe"
height="2.2"
/>
</div>
@ -1881,7 +1823,7 @@ tr:hover .c5:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="euiText c20 emotion-euiText-xs"
class="euiText emotion-euiText-xs"
>
<span>
1 pkts
@ -1903,7 +1845,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c22"
class="css-1almmfe"
height="2.2"
/>
</div>
@ -1932,7 +1874,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c12"
class="css-fbtzpm"
>
Destination
</div>
@ -1992,7 +1934,7 @@ tr:hover .c5:focus::before {
destination.ip
</p>
<span
class="c13"
class="c9"
data-test-subj="draggable-truncatable-content"
>
<a
@ -2028,7 +1970,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c14"
class="css-7g9jn5"
data-test-subj="ip-port-separator"
>
:
@ -2084,7 +2026,7 @@ tr:hover .c5:focus::before {
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<div
class="c15"
class="c10"
>
<a
class="euiLink emotion-euiLink-primary"
@ -2135,7 +2077,7 @@ tr:hover .c5:focus::before {
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -2197,7 +2139,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -2259,7 +2201,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -2268,7 +2210,7 @@ tr:hover .c5:focus::before {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="c17"
class="css-19nn5cj"
data-test-subj="country-flag"
>
🇺🇸
@ -2331,7 +2273,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -2393,7 +2335,7 @@ tr:hover .c5:focus::before {
</div>
</div>
<div
class="euiFlexItem c16 emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@ -2531,7 +2473,7 @@ tr:hover .c5:focus::before {
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c23"
class="c11"
>
ja3
</span>
@ -2626,7 +2568,7 @@ tr:hover .c5:focus::before {
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c24"
class="c12"
>
client cert
</span>
@ -2721,7 +2663,7 @@ tr:hover .c5:focus::before {
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c24"
class="c12"
>
server cert
</span>

View file

@ -13,7 +13,8 @@
"server/**/*.json",
"scripts/**/*.json",
"public/**/*.json",
"../../../../../typings/**/*"
"../../../../../typings/**/*",
"emotion.d.ts"
],
"exclude": ["target/**/*", "**/cypress/**", "public/management/cypress.config.ts"],
"kbn_references": [