github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Exploratory View] Audit new EUI Borealis theme (#205212)

Browse source 
## Summary

It fixes #205051 

<del>
Files are excluded because of `euiScrollBar` and `euiScrollBarCorner`
replacement (TBD)
-
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series_editor.tsx

-
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/filter_values_list.tsx
</del>
✅  DONE
This commit is contained in:
Faisal Kanout 2025-01-15 17:53:49 +03:00 • committed by GitHub
parent dcc09d40ad
commit b0973cf26c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 141 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/kbn-babel-preset/styled_components_files.js
View file

@ -101,17 +101,6 @@ module.exports = {
/x-pack[\/\\]platform[\/\\]plugins[\/\\]shared[\/\\]fleet[\/\\]public[\/\\]components[\/\\]package_icon.tsx/,
/x-pack[\/\\]platform[\/\\]plugins[\/\\]shared[\/\\]fleet[\/\\]public[\/\\]layouts[\/\\]without_header.tsx/,
/x-pack[\/\\]platform[\/\\]plugins[\/\\]shared[\/\\]triggers_actions_ui[\/\\]public[\/\\]application[\/\\]sections[\/\\]actions_connectors_list[\/\\]components[\/\\]actions_connectors_list.test.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]components[\/\\]empty_view.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]embeddable[\/\\]embeddable.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]embeddable[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]exploratory_view.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]header[\/\\]last_updated.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]lens_embeddable.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]breakdown[\/\\]breakdowns.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]columns[\/\\]date_picker_col.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]columns[\/\\]series_name.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]components[\/\\]filter_values_list.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]series.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability[\/\\]public[\/\\]pages[\/\\]overview[\/\\]components[\/\\]news_feed[\/\\]news_feed.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability[\/\\]public[\/\\]pages[\/\\]overview[\/\\]components[\/\\]sections[\/\\]apm[\/\\]apm_section.tsx/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability[\/\\]public[\/\\]pages[\/\\]overview[\/\\]components[\/\\]sections[\/\\]empty[\/\\]empty_sections.tsx/,

13
x-pack/solutions/observability/plugins/exploratory_view/e2e/journeys/step_duration.journey.ts
View file

@ -67,13 +67,12 @@ journey('Step Duration series', async ({ page, params }) => {
step('Verify that changes are applied', async () => {
await waitForLoadingToFinish({ page });
await page.click('[aria-label="series color: #54b399"]');
await page.click('[aria-label="series color: #6092c0"]');
await page.click('[aria-label="series color: #d36086"] path');
await page.click('[aria-label="series color: #9170b8"]');
await page.click('[aria-label="series color: #ca8eae"]');
await page.click('[aria-label="series color: #d6bf57"]');
await page.click('svg[aria-label="series color: #16c5c0"]');
await page.click('svg[aria-label="series color: #a6edea"]');
await page.click('svg[aria-label="series color: #61a2ff"]');
await page.click('svg[aria-label="series color: #bfdbff"]');
await page.click('svg[aria-label="series color: #ee72a6"]');
await page.click('svg[aria-label="series color: #ffc7db"]');
await page.click('text=load homepage');
await page.click('text=load homepage');
await page.click('text=load github');

22
x-pack/solutions/observability/plugins/exploratory_view/public/application/index.tsx
View file

@ -10,7 +10,6 @@ import ReactDOM from 'react-dom';
import { i18n } from '@kbn/i18n';
import { Router, Routes, Route } from '@kbn/shared-ux-router';
import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '@kbn/core/public';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
@ -53,7 +52,6 @@ export const renderApp = ({
isDev?: boolean;
}) => {
const { element, history } = appMountParameters;
const isDarkMode = core.theme.getTheme().darkMode;
core.chrome.setHelpExtension({
appName: i18n.translate('xpack.exploratoryView.feedbackMenu.appName', {
@ -85,17 +83,15 @@ export const renderApp = ({
}}
>
<Router history={history}>
<EuiThemeProvider darkMode={isDarkMode}>
<div className={APP_WRAPPER_CLASS} data-test-subj="exploratoryViewMainContainer">
<RedirectAppLinks
coreStart={{
application: core.application,
}}
>
<App startServices={core} />
</RedirectAppLinks>
</div>
</EuiThemeProvider>
<div className={APP_WRAPPER_CLASS} data-test-subj="exploratoryViewMainContainer">
<RedirectAppLinks
coreStart={{
application: core.application,
}}
>
<App startServices={core} />
</RedirectAppLinks>
</div>
</Router>
</PluginContext.Provider>
</KibanaContextProvider>

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/empty_view.tsx
View file

@ -8,7 +8,7 @@
import React from 'react';
import { isEmpty } from 'lodash';
import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { i18n } from '@kbn/i18n';
import { LOADING_VIEW } from '../series_editor/series_editor';
import { ReportViewType, SeriesUrl } from '../types';

7
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/series_color_picker.tsx
View file

@ -15,12 +15,12 @@ import {
EuiButtonEmpty,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useTheme } from '@kbn/observability-shared-plugin/public';
import { useEuiTheme } from '@elastic/eui';
import { useSeriesStorage } from '../hooks/use_series_storage';
import { SeriesUrl } from '../types';
export function SeriesColorPicker({ seriesId, series }: { seriesId: number; series: SeriesUrl }) {
const theme = useTheme();
const { euiTheme } = useEuiTheme();
const { setSeries } = useSeriesStorage();
@ -31,7 +31,8 @@ export function SeriesColorPicker({ seriesId, series }: { seriesId: number; seri
};
const color =
series.color ?? (theme.eui as unknown as Record<string, string>)[`euiColorVis${seriesId}`];
series.color ??
(euiTheme.colors.vis as unknown as Record<string, string>)[`euiColorVis${seriesId}`];
const button = (
<EuiToolTip content={EDIT_SERIES_COLOR_LABEL}>

18
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/configurations/mobile/mobile_kpi_config.test.ts
View file

@ -13,6 +13,7 @@ import { testMobileKPIAttr } from '../test_data/mobile_test_attribute';
import { getLayerConfigs } from '../../hooks/use_lens_attributes';
import { DataViewState } from '../../hooks/use_app_data_view';
import { ReportTypes } from '../../../../..';
import { EuiThemeComputed } from '@elastic/eui';
describe('Mobile kpi config test', function () {
mockAppDataView();
@ -31,7 +32,22 @@ describe('Mobile kpi config test', function () {
},
],
ReportTypes.KPI,
{} as any,
{
colors: {
vis: {
euiColorVis0: '#54B399',
euiColorVis1: '#54B399',
euiColorVis2: '#54B399',
euiColorVis3: '#54B399',
euiColorVis4: '#54B399',
euiColorVis5: '#54B399',
euiColorVis6: '#54B399',
euiColorVis7: '#54B399',
euiColorVis8: '#54B399',
euiColorVis9: '#54B399',
},
},
} as unknown as EuiThemeComputed,
{ mobile: mockDataView } as DataViewState,
obsvReportConfigMap
);

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
View file

@ -17,7 +17,7 @@ import {
} from '@kbn/lens-plugin/public';
import { ViewMode } from '@kbn/embeddable-plugin/common';
import { observabilityFeatureId } from '@kbn/observability-shared-plugin/public';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { AnalyticsServiceSetup } from '@kbn/core-analytics-browser';
import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
import { useEBTTelemetry } from '../hooks/use_ebt_telemetry';

35
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx
View file

@ -7,11 +7,10 @@
import React, { useCallback, useMemo, useState, useEffect } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import type { AnalyticsServiceSetup, CoreStart } from '@kbn/core/public';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { EuiErrorBoundary } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { DataView } from '@kbn/data-views-plugin/common';
import { FormulaPublicApi } from '@kbn/lens-plugin/public';
import { i18n } from '@kbn/i18n';
@ -34,7 +33,7 @@ export function getExploratoryViewEmbeddable(
services: CoreStart & ExploratoryViewPublicPluginsStart,
analytics?: AnalyticsServiceSetup
) {
const { lens, dataViews: dataViewsService, theme } = services;
const { lens, dataViews: dataViewsService } = services;
const dataViewCache: Record<string, DataView> = {};
@ -71,8 +70,6 @@ export function getExploratoryViewEmbeddable(
const series = attributes[0];
const isDarkMode = theme?.getTheme().darkMode ?? false;
const { data: lensHelper, loading: lensLoading } = useFetcher(async () => {
if (lenStateHelperPromise) {
return lenStateHelperPromise;
@ -132,21 +129,19 @@ export function getExploratoryViewEmbeddable(
return (
<EuiErrorBoundary>
<EuiThemeProvider darkMode={isDarkMode}>
<KibanaContextProvider services={services}>
<Wrapper customHeight={props.customHeight} data-test-subj={props.dataTestSubj}>
<ExploratoryViewEmbeddable
{...embedProps}
dataViewState={dataViews}
lens={lens}
lensFormulaHelper={lensHelper?.formula}
searchSessionId={services.data.search.session.getSessionId()}
onLoad={onLensLoaded}
analytics={analytics}
/>
</Wrapper>
</KibanaContextProvider>
</EuiThemeProvider>
<KibanaContextProvider services={services}>
<Wrapper customHeight={props.customHeight} data-test-subj={props.dataTestSubj}>
<ExploratoryViewEmbeddable
{...embedProps}
dataViewState={dataViews}
lens={lens}
lensFormulaHelper={lensHelper?.formula}
searchSessionId={services.data.search.session.getSessionId()}
onLoad={onLensLoaded}
analytics={analytics}
/>
</Wrapper>
</KibanaContextProvider>
</EuiErrorBoundary>
);
};

10
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts
View file

@ -6,7 +6,8 @@
*/
import { useMemo } from 'react';
import { useKibanaSpace, useTheme } from '@kbn/observability-shared-plugin/public';
import { useKibanaSpace } from '@kbn/observability-shared-plugin/public';
import { useEuiTheme } from '@elastic/eui';
import { ExploratoryEmbeddableComponentProps } from './embeddable';
import { LayerConfig, LensAttributes } from '../configurations/lens_attributes';
import { getLayerConfigs } from '../hooks/use_lens_attributes';
@ -14,7 +15,6 @@ import { obsvReportConfigMap } from '../obsv_exploratory_view';
import { ReportTypes } from '../../../..';
import { SingleMetricLensAttributes } from '../configurations/lens_attributes/single_metric_attributes';
import { HeatMapLensAttributes } from '../configurations/lens_attributes/heatmap_attributes';
export const useEmbeddableAttributes = ({
attributes,
dataViewState,
@ -24,14 +24,14 @@ export const useEmbeddableAttributes = ({
dslFilters,
}: ExploratoryEmbeddableComponentProps) => {
const spaceId = useKibanaSpace();
const theme = useTheme();
const { euiTheme } = useEuiTheme();
return useMemo(() => {
try {
const layerConfigs: LayerConfig[] = getLayerConfigs(
attributes,
reportType,
theme,
euiTheme,
dataViewState,
{ ...reportConfigMap, ...obsvReportConfigMap },
spaceId.space?.id
@ -68,10 +68,10 @@ export const useEmbeddableAttributes = ({
attributes,
dataViewState,
dslFilters,
euiTheme,
lensFormulaHelper,
reportConfigMap,
reportType,
spaceId.space?.id,
theme,
]);
};

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/exploratory_view.tsx
View file

@ -7,7 +7,7 @@
import { i18n } from '@kbn/i18n';
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import {
EuiButtonEmpty,
EuiResizableContainer,

50
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/last_updated.tsx
View file

@ -7,9 +7,9 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import styled from 'styled-components';
import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { useSeriesStorage } from '../hooks/use_series_storage';
import { ChartCreationInfo } from './chart_creation_info';
export interface ChartTimeRange {
@ -18,12 +18,10 @@ export interface ChartTimeRange {
from?: number;
}
interface Props {
chartTimeRange?: ChartTimeRange;
}
export function LastUpdated() {
const { chartTimeRangeContext } = useSeriesStorage();
export function LastUpdated({ chartTimeRange }: Props) {
const { lastUpdated } = chartTimeRange || {};
const { lastUpdated } = chartTimeRangeContext || {};
const [refresh, setRefresh] = useState(() => Date.now());
useEffect(() => {
@ -48,25 +46,23 @@ export function LastUpdated({ chartTimeRange }: Props) {
const isDanger = moment().diff(moment(lastUpdated), 'minute') > 10;
return (
<EuiText color={isDanger ? 'danger' : isWarning ? 'warning' : 'subdued'} size="s">
<StyledToolTipWrapper
as={EuiToolTip}
position="top"
content={<ChartCreationInfo {...chartTimeRange} />}
>
<EuiIcon type="iInCircle" />
</StyledToolTipWrapper>{' '}
<FormattedMessage
id="xpack.exploratoryView.expView.lastUpdated.label"
defaultMessage="Last Updated: {updatedDate}"
values={{
updatedDate: moment(lastUpdated).from(refresh),
}}
/>
</EuiText>
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiToolTip position="top" content={<ChartCreationInfo {...chartTimeRangeContext} />}>
<EuiIcon type="iInCircle" />
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText color={isDanger ? 'danger' : isWarning ? 'warning' : 'subdued'} size="s">
<FormattedMessage
id="xpack.exploratoryView.expView.lastUpdated.label"
defaultMessage="Last Updated: {updatedDate}"
values={{
updatedDate: moment(lastUpdated).from(refresh),
}}
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
);
}
export const StyledToolTipWrapper = styled.div`
min-width: 30vw;
`;

26
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/refresh_button.tsx
View file

@ -7,28 +7,20 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { LastUpdated } from './last_updated';
import { EuiButton } from '@elastic/eui';
import { useSeriesStorage } from '../hooks/use_series_storage';
export function RefreshButton() {
const { setLastRefresh, chartTimeRangeContext } = useSeriesStorage();
const { setLastRefresh } = useSeriesStorage();
return (
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem style={{ textAlign: 'right', minWidth: 280 }}>
<LastUpdated chartTimeRange={chartTimeRangeContext} />
</EuiFlexItem>
<EuiFlexItem style={{ textAlign: 'right' }}>
<EuiButton
data-test-subj="o11yRefreshButtonButton"
iconType="refresh"
onClick={() => setLastRefresh(Date.now())}
>
{REFRESH_LABEL}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiButton
data-test-subj="o11yRefreshButtonButton"
iconType="refresh"
onClick={() => setLastRefresh(Date.now())}
>
{REFRESH_LABEL}
</EuiButton>
);
}

16
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.ts
View file

@ -8,8 +8,8 @@
import { useMemo } from 'react';
import { isEmpty } from 'lodash';
import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
import { EuiTheme } from '@kbn/kibana-react-plugin/common';
import { useTheme, useKibanaSpace } from '@kbn/observability-shared-plugin/public';
import { useKibanaSpace } from '@kbn/observability-shared-plugin/public';
import { EuiThemeComputed, useEuiTheme } from '@elastic/eui';
import { HeatMapLensAttributes } from '../configurations/lens_attributes/heatmap_attributes';
import { useLensFormulaHelper } from './use_lens_formula_helper';
import { ALL_VALUES_SELECTED } from '../configurations/constants/url_constants';
@ -44,7 +44,7 @@ export const getFiltersFromDefs = (
export function getLayerConfigs(
allSeries: AllSeries,
reportType: ReportViewType,
theme: EuiTheme,
euiTheme: EuiThemeComputed,
dataViews: DataViewState,
reportConfigMap: ReportConfigMap,
spaceId?: string
@ -73,7 +73,9 @@ export function getLayerConfigs(
getFiltersFromDefs(series.textReportDefinitions)
);
const color = (theme.eui as unknown as Record<string, string>)?.[`euiColorVis${seriesIndex}`];
const color = (euiTheme.colors.vis as unknown as Record<string, string>)?.[
`euiColorVis${seriesIndex}`
];
let seriesColor = series.color!;
if (reportType !== 'single-metric') {
seriesColor = series.color ?? color;
@ -108,7 +110,7 @@ export const useLensAttributes = (): TypedLensByValueInput['attributes'] | null
const { reportConfigMap } = useExploratoryView();
const theme = useTheme();
const { euiTheme } = useEuiTheme();
const lensFormulaHelper = useLensFormulaHelper();
@ -123,7 +125,7 @@ export const useLensAttributes = (): TypedLensByValueInput['attributes'] | null
const layerConfigs = getLayerConfigs(
allSeriesT,
reportTypeT,
theme,
euiTheme,
dataViews,
reportConfigMap,
spaceId.space?.id
@ -158,5 +160,5 @@ export const useLensAttributes = (): TypedLensByValueInput['attributes'] | null
return lensAttributes.getJSON('lnsXY', lastRefresh);
// we also want to check the state on allSeries changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dataViews, reportType, storage, theme, lastRefresh, allSeries, lensFormulaHelper]);
}, [dataViews, reportType, storage, euiTheme, lastRefresh, allSeries, lensFormulaHelper]);
};

3
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/index.tsx
View file

@ -16,6 +16,7 @@ import {
} from '@kbn/kibana-utils-plugin/public';
import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
import { useBreadcrumbs, useTrackPageview } from '@kbn/observability-shared-plugin/public';
import { LastUpdated } from './header/last_updated';
import { ExploratoryView } from './exploratory_view';
import { useKibana } from './hooks/use_kibana';
import { DataViewContextProvider } from './hooks/use_app_data_view';
@ -76,7 +77,7 @@ export function ExploratoryViewPage({
<ObservabilityPageTemplate
pageHeader={{
pageTitle: PAGE_TITLE,
rightSideItems: [<RefreshButton />],
rightSideItems: [<RefreshButton />, <LastUpdated />],
}}
>
<DataViewContextProvider>

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/lens_embeddable.tsx
View file

@ -7,7 +7,7 @@
import { i18n } from '@kbn/i18n';
import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { LensEmbeddableInput, TypedLensByValueInput } from '@kbn/lens-plugin/public';
import { useUiTracker } from '@kbn/observability-shared-plugin/public';
import { useSeriesStorage } from './hooks/use_series_storage';

4
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx
View file

@ -20,7 +20,7 @@ import { CoreStart } from '@kbn/core/public';
import { I18nProvider } from '@kbn/i18n-react';
import { coreMock, themeServiceMock } from '@kbn/core/public/mocks';
import { KibanaContextProvider, KibanaServices } from '@kbn/kibana-react-plugin/public';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import { EuiThemeProvider } from '@elastic/eui';
import { lensPluginMock } from '@kbn/lens-plugin/public/mocks';
import { setIndexPatterns } from '@kbn/unified-search-plugin/public/services';
import type { DataView, DataViewsContract } from '@kbn/data-views-plugin/public';
@ -159,7 +159,7 @@ export function MockKibanaProvider<ExtraCore extends Partial<CoreStart>>({
return (
<KibanaContextProvider services={{ ...core }} {...kibanaProps}>
<EuiThemeProvider darkMode={false}>
<EuiThemeProvider>
<I18nProvider>
<DataViewContextProvider>{children}</DataViewContextProvider>
</I18nProvider>

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useEffect } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { EuiSuperSelect, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useSeriesStorage } from '../../hooks/use_series_storage';

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { i18n } from '@kbn/i18n';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { useSeriesStorage } from '../../hooks/use_series_storage';

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.test.tsx
View file

@ -51,7 +51,7 @@ describe('FilterValueButton', function () {
expect(screen.getByText('Not Chrome')).toBeInTheDocument();
expect(screen.getByTitle('Not Chrome')).toBeInTheDocument();
const btn = screen.getByRole('button');
expect(btn.classList[4]).toContain('empty-danger');
expect(btn.classList[2]).toContain('empty-danger');
});
});

22
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.tsx
View file

@ -7,7 +7,7 @@
import { i18n } from '@kbn/i18n';
import React, { useMemo } from 'react';
import { EuiFilterButton, hexToRgb } from '@elastic/eui';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import styled from '@emotion/styled';
import { FieldValueSuggestions } from '@kbn/observability-shared-plugin/public';
import { useAppDataViewContext } from '../../hooks/use_app_data_view';
import { useSeriesFilters } from '../../hooks/use_series_filters';
@ -112,13 +112,15 @@ export function FilterValueButton({
);
}
const FilterButton = euiStyled(EuiFilterButton)`
background-color: rgba(${(props) => {
const color = props.hasActiveFilters
? props.color === 'danger'
? hexToRgb(props.theme.eui.euiColorDanger)
: hexToRgb(props.theme.eui.euiColorPrimary)
: 'initial';
return `${color[0]}, ${color[1]}, ${color[2]}, 0.1`;
}});
const FilterButton = styled(EuiFilterButton)`
background-color: rgba(
${(props) => {
const color = props.hasActiveFilters
? props.color === 'danger'
? hexToRgb(props.theme.euiTheme.colors.danger)
: hexToRgb(props.theme.euiTheme.colors.primary)
: 'initial';
return `${color[0]}, ${color[1]}, ${color[2]}, 0.1`;
}}
);
`;

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useState, ChangeEvent, useEffect, useRef, KeyboardEventHandler } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { i18n } from '@kbn/i18n';
import {
EuiFieldText,

13
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/filter_values_list.tsx
View file

@ -8,10 +8,9 @@
import { EuiFieldSearch, EuiFilterGroup, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
import React, { Fragment, useState } from 'react';
import { rgba } from 'polished';
import styled from 'styled-components';
import { map } from 'lodash';
import { i18n } from '@kbn/i18n';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import styled from '@emotion/styled';
import { FilterValueButton } from '../columns/filter_value_btn';
import { FilterProps, NestedFilterOpen } from '../columns/filter_expanded';
import { UrlFilter } from '../../types';
@ -123,17 +122,17 @@ const getSearchLabel = (label: string) =>
values: { label },
});
const ListWrapper = euiStyled.div`
const ListWrapper = styled.div`
height: 370px;
overflow-y: auto;
&::-webkit-scrollbar {
height: ${({ theme }) => theme.eui.euiScrollBar};
width: ${({ theme }) => theme.eui.euiScrollBar};
height: ${({ theme }) => theme.euiTheme.size.base};
width: ${({ theme }) => theme.euiTheme.size.base};
}
&::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)};
border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent;
background-color: ${({ theme }) => rgba(theme.euiTheme.colors.darkShade, 0.5)};
border: ${({ theme }) => theme.euiTheme.border.radius.small} solid transparent;
}
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar-track {

2
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { i18n } from '@kbn/i18n';
import { EuiFlexItem, EuiFlexGroup, EuiPanel, EuiAccordion, EuiSpacer } from '@elastic/eui';
import { BuilderItem } from '../types';

26
x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series_editor.tsx
View file

@ -9,7 +9,7 @@ import React, { useEffect, useState } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiSpacer, EuiFormRow, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import { rgba } from 'polished';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import styled from '@emotion/styled';
import { AppDataType, ReportViewType, BuilderItem } from '../types';
import { SeriesContextValue, useSeriesStorage } from '../hooks/use_series_storage';
import { DataViewState, useAppDataViewContext } from '../hooks/use_app_data_view';
@ -160,15 +160,15 @@ export const SeriesEditor = React.memo(function () {
);
});
const Wrapper = euiStyled.div`
const Wrapper = styled.div`
&::-webkit-scrollbar {
height: ${({ theme }) => theme.eui.euiScrollBar};
width: ${({ theme }) => theme.eui.euiScrollBar};
height: ${({ theme }) => theme.euiTheme.size.base};
width: ${({ theme }) => theme.euiTheme.size.base};
}
&::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)};
border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent;
background-color: ${({ theme }) => rgba(theme.euiTheme.colors.darkShade, 0.5)};
border: ${({ theme }) => theme.euiTheme.border.radius.small} solid transparent;
}
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar-track {
@ -178,7 +178,7 @@ const Wrapper = euiStyled.div`
&&& {
.euiTableRow-isExpandedRow .euiTableRowCell {
border-top: none;
background-color: #FFFFFF;
background-color: #ffffff;
border-bottom: 2px solid #d3dae6;
border-right: 2px solid rgb(211, 218, 230);
border-left: 2px solid rgb(211, 218, 230);
@ -197,26 +197,26 @@ const Wrapper = euiStyled.div`
}
`;
const SectionHeaderBackground = euiStyled.div`
const SectionHeaderBackground = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 56px;
background-color: ${({ theme }) => theme.eui.euiPageBackgroundColor};
border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
background-color: ${({ theme }) => theme.euiTheme.colors.body};
border-bottom: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade};
z-index: 90;
`;
const StickyFlexGroup = euiStyled(EuiFlexGroup)`
const StickyFlexGroup = styled(EuiFlexGroup)`
position: sticky;
top: 0;
z-index: 100;
padding: 0;
`;
const EditorRowsWrapper = euiStyled.div`
margin: ${({ theme }) => theme.eui.euiSizeM} 0;
const EditorRowsWrapper = styled.div`
margin: ${({ theme }) => theme.euiTheme.size.m} 0;
`;
export const LOADING_VIEW = i18n.translate(