+ css`
+ display: inline-block;
+ position: relative;
+ bottom: ${euiTheme.size.xxl};
+ left: ${euiTheme.size.m};
+ z-index: 1;
+ border-radius: ${euiTheme.border.radius.medium};
+ ${shadow}
+ `}
+ >
-
+
);
}
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx
index 5166baaf7d311..7f1888e182f38 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx
@@ -9,7 +9,7 @@ import { EuiFlexGroup } from '@elastic/eui';
import { SLOWithSummaryResponse } from '@kbn/slo-schema';
import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
import React, { useCallback } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
import { SloIndicatorTypeBadge } from '../badges/slo_indicator_type_badge';
import { SloActiveAlertsBadge } from '../../../../components/slo/slo_status_badge/slo_active_alerts_badge';
import { BurnRateRuleParams } from '../../../../typings';
@@ -29,11 +29,6 @@ interface Props {
handleCreateRule?: () => void;
}
-const Container = styled.div`
- display: inline-block;
- margin-top: 5px;
-`;
-
export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }: Props) {
const { onStateChange } = useUrlSearchState();
@@ -52,10 +47,15 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }
const numberOfTagsToDisplay = !isRemote || (rules ?? []).length > 0 ? 2 : 1;
return (
- css`
+ display: inline-block;
+ margin-top: ${euiTheme.size.xs};
+ `}
onClick={(evt) => {
evt.stopPropagation();
}}
+ aria-hidden="true"
>
{!slo.summary ? (
@@ -78,6 +78,6 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }
>
)}
-
+
);
}
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx
index ad350a3d17fbe..3924b55c0f096 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx
@@ -5,14 +5,14 @@
* 2.0.
*/
-import { i18n } from '@kbn/i18n';
-import { skip } from 'rxjs';
-import React, { useEffect, useState } from 'react';
+import { css } from '@emotion/react';
import { ControlGroupRenderer, ControlGroupRendererApi } from '@kbn/controls-plugin/public';
import { DataView } from '@kbn/data-views-plugin/common';
-import styled from 'styled-components';
import { Filter } from '@kbn/es-query';
+import { i18n } from '@kbn/i18n';
import { isEmpty } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { skip } from 'rxjs';
import { SearchState } from '../../hooks/use_url_search_state';
interface Props {
@@ -53,7 +53,17 @@ export function QuickFilters({
}
return (
-
+
{
@@ -94,7 +104,7 @@ export function QuickFilters({
timeRange={{ from: 'now-24h', to: 'now' }}
compressed={false}
/>
-
+
);
}
@@ -114,16 +124,6 @@ export const getSelectedOptions = (filter?: Filter) => {
return [];
};
-const Container = styled.div`
- .controlsWrapper {
- align-items: flex-start;
- min-height: initial;
- }
- .controlGroup {
- min-height: initial;
- }
-`;
-
const TAGS_LABEL = i18n.translate('xpack.slo.list.tags', {
defaultMessage: 'Tags',
});
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_item_actions.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_item_actions.tsx
index 1a99f8ff354d9..37c48b2bf8881 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_item_actions.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_item_actions.tsx
@@ -14,15 +14,15 @@ import {
EuiPopover,
useEuiShadow,
} from '@elastic/eui';
+import { css } from '@emotion/react';
import { i18n } from '@kbn/i18n';
import { SLOWithSummaryResponse } from '@kbn/slo-schema';
import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
import React from 'react';
-import styled from 'styled-components';
-import { usePermissions } from '../../../hooks/use_permissions';
import { useCloneSlo } from '../../../hooks/use_clone_slo';
-import { BurnRateRuleParams } from '../../../typings';
import { useKibana } from '../../../hooks/use_kibana';
+import { usePermissions } from '../../../hooks/use_permissions';
+import { BurnRateRuleParams } from '../../../typings';
import { useSloActions } from '../../slo_details/hooks/use_slo_actions';
interface Props {
@@ -37,24 +37,22 @@ interface Props {
btnProps?: Partial;
rules?: Array>;
}
-const CustomShadowPanel = styled(EuiPanel)<{ shadow: string }>`
- ${(props) => props.shadow}
-`;
-function IconPanel({ children, hasPanel }: { children: JSX.Element; hasPanel: boolean }) {
+function IconPanel({ children }: { children: JSX.Element }) {
const shadow = useEuiShadow('s');
- if (!hasPanel) return children;
return (
-
{children}
-
+
);
}
@@ -161,7 +159,7 @@ export function SloItemActions({
return (
{btn} : btn}
+ button={btnProps ? {btn} : btn}
panelPaddingSize="m"
closePopover={handleClickActions}
isOpen={isActionsPopoverOpen}
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_list_search_bar.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_list_search_bar.tsx
index 16c635a2da20c..d6d501494bc4f 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_list_search_bar.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_list_search_bar.tsx
@@ -5,11 +5,11 @@
* 2.0.
*/
+import { css } from '@emotion/react';
import { Query } from '@kbn/es-query';
import { i18n } from '@kbn/i18n';
import { observabilityAppId } from '@kbn/observability-plugin/public';
import React, { useEffect } from 'react';
-import styled from 'styled-components';
import { useKibana } from '../../../hooks/use_kibana';
import { useSloCrudLoading } from '../hooks/use_crud_loading';
import { useSloSummaryDataView } from '../hooks/use_summary_dataview';
@@ -42,7 +42,13 @@ export function SloListSearchBar() {
}, [onStateChange, query]);
return (
-
+
-
+
);
}
-const Container = styled.div`
- .uniSearchBar {
- padding: 0;
- }
-`;
-
const PLACEHOLDER = i18n.translate('xpack.slo.list.search', {
defaultMessage: 'Search your SLOs ...',
});
diff --git a/x-pack/plugins/observability_solution/slo/public/utils/test_helper.tsx b/x-pack/plugins/observability_solution/slo/public/utils/test_helper.tsx
index fd735d94c4a98..44cd0abceded4 100644
--- a/x-pack/plugins/observability_solution/slo/public/utils/test_helper.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/utils/test_helper.tsx
@@ -9,16 +9,15 @@ import { AppMountParameters } from '@kbn/core/public';
import { coreMock } from '@kbn/core/public/mocks';
import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { createObservabilityRuleTypeRegistryMock } from '@kbn/observability-plugin/public';
+import { DefaultClientOptions, createRepositoryClient } from '@kbn/server-route-repository-client';
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render as testLibRender } from '@testing-library/react';
import React from 'react';
-import { DefaultClientOptions, createRepositoryClient } from '@kbn/server-route-repository-client';
-import { PluginContext } from '../context/plugin_context';
import type { SLORouteRepository } from '../../server/routes/get_slo_server_route_repository';
+import { PluginContext } from '../context/plugin_context';
const appMountParameters = { setHeaderActionMenu: () => {} } as unknown as AppMountParameters;
const observabilityRuleTypeRegistry = createObservabilityRuleTypeRegistryMock();
@@ -67,9 +66,7 @@ export const render = (component: React.ReactNode) => {
sloClient,
}}
>
-
- {component}
-
+ {component}
diff --git a/x-pack/plugins/observability_solution/slo/tsconfig.json b/x-pack/plugins/observability_solution/slo/tsconfig.json
index 23efcc39698b1..be74e370a1fc1 100644
--- a/x-pack/plugins/observability_solution/slo/tsconfig.json
+++ b/x-pack/plugins/observability_solution/slo/tsconfig.json
@@ -7,7 +7,9 @@
"common/**/*",
"public/**/*",
"server/**/*",
- "../../../typings/**/*"
+ "../../../typings/**/*",
+ // Emotion theme typing
+ "./emotion.d.ts"
],
"exclude": [
"target/**/*"