Skip to content

Commit 3c73b60

Browse files
formgeistkibanamachineestermv
authored
[Unified Observability] Overview style updates (#124702)
* Big chunk of style updates * New layout and position for news and resources * Alerts updated * Rename headings and links * Removed unncessary prop * More fixes * Remove active status * Fixing tests * fix tests * fix checks Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Ester Marti <[email protected]>
1 parent 8092467 commit 3c73b60

File tree

14 files changed

+164
-144
lines changed

14 files changed

+164
-144
lines changed

‎x-pack/plugins/observability/public/components/app/chart_container/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ interface Props {
1818
children: React.ReactNode;
1919
}
2020

21-
const CHART_HEIGHT = 170;
21+
const CHART_HEIGHT = 120;
2222

2323
export function ChartContainer({
2424
isInitialLoad,
2525
children,
26-
iconSize = 'xl',
26+
iconSize = 'l',
2727
height = CHART_HEIGHT,
2828
}: Props) {
2929
if (isInitialLoad) {

‎x-pack/plugins/observability/public/components/app/news_feed/index.tsx

+43-42
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
EuiErrorBoundary,
1010
EuiFlexGroup,
1111
EuiFlexItem,
12-
EuiHorizontalRule,
12+
EuiPanel,
1313
EuiLink,
1414
EuiText,
1515
EuiTitle,
@@ -56,48 +56,49 @@ function NewsItem({ item }: { item: INewsItem }) {
5656
const theme = useContext(ThemeContext);
5757

5858
return (
59-
<EuiFlexGroup direction="column" gutterSize="s">
60-
<EuiFlexItem grow={false}>
61-
<EuiTitle size="xxxs">
62-
<h4>{item.title.en}</h4>
63-
</EuiTitle>
64-
</EuiFlexItem>
65-
<EuiFlexItem grow={false}>
66-
<EuiFlexGroup gutterSize="s">
67-
<EuiFlexItem>
68-
<EuiFlexGroup direction="column" gutterSize="s" alignItems="baseline">
69-
<EuiFlexItem>
70-
<EuiText grow={false} size="xs" color="subdued">
71-
{limitString(item.description.en, 128)}
72-
</EuiText>
73-
</EuiFlexItem>
59+
<EuiPanel hasBorder={true}>
60+
<EuiFlexGroup direction="column" gutterSize="s">
61+
<EuiFlexItem grow={false}>
62+
<EuiTitle size="xxs">
63+
<h4>{item.title.en}</h4>
64+
</EuiTitle>
65+
</EuiFlexItem>
66+
<EuiFlexItem grow={false}>
67+
<EuiFlexGroup gutterSize="s">
68+
<EuiFlexItem>
69+
<EuiFlexGroup direction="column" gutterSize="s" alignItems="baseline">
70+
<EuiFlexItem>
71+
<EuiText grow={false} size="s" color="subdued">
72+
{limitString(item.description.en, 128)}
73+
</EuiText>
74+
</EuiFlexItem>
75+
<EuiFlexItem grow={false}>
76+
<EuiText size="s">
77+
<EuiLink href={item.link_url.en} target="_blank" external>
78+
{i18n.translate('xpack.observability.news.readFullStory', {
79+
defaultMessage: 'Read full story',
80+
})}
81+
</EuiLink>
82+
</EuiText>
83+
</EuiFlexItem>
84+
</EuiFlexGroup>
85+
</EuiFlexItem>
86+
{item.image_url?.en && (
7487
<EuiFlexItem grow={false}>
75-
<EuiText size="xs">
76-
<EuiLink href={item.link_url.en} target="_blank" external>
77-
{i18n.translate('xpack.observability.news.readFullStory', {
78-
defaultMessage: 'Read full story',
79-
})}
80-
</EuiLink>
81-
</EuiText>
88+
<img
89+
data-test-subj="newsImage"
90+
style={{ border: theme.eui.euiBorderThin }}
91+
width={48}
92+
height={48}
93+
alt={item.title.en}
94+
src={item.image_url.en}
95+
className="obsNewsFeed__itemImg"
96+
/>
8297
</EuiFlexItem>
83-
</EuiFlexGroup>
84-
</EuiFlexItem>
85-
{item.image_url?.en && (
86-
<EuiFlexItem grow={false}>
87-
<img
88-
data-test-subj="newsImage"
89-
style={{ border: theme.eui.euiBorderThin }}
90-
width={48}
91-
height={48}
92-
alt={item.title.en}
93-
src={item.image_url.en}
94-
className="obsNewsFeed__itemImg"
95-
/>
96-
</EuiFlexItem>
97-
)}
98-
</EuiFlexGroup>
99-
</EuiFlexItem>
100-
<EuiHorizontalRule margin="s" />
101-
</EuiFlexGroup>
98+
)}
99+
</EuiFlexGroup>
100+
</EuiFlexItem>
101+
</EuiFlexGroup>
102+
</EuiPanel>
102103
);
103104
}

‎x-pack/plugins/observability/public/components/app/resources/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const resources = [
4242

4343
export function Resources() {
4444
return (
45-
<EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="xs">
45+
<EuiFlexGroup direction="column" alignItems="flexStart">
4646
<EuiFlexItem grow={false}>
4747
<EuiTitle size="xs">
4848
<h4>

‎x-pack/plugins/observability/public/components/app/section/alerts/index.tsx

+58-50
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ import {
99
EuiBadge,
1010
EuiFlexGroup,
1111
EuiFlexItem,
12-
EuiHorizontalRule,
13-
EuiIconTip,
1412
EuiLink,
1513
EuiText,
1614
EuiSpacer,
1715
EuiTitle,
18-
EuiButton,
16+
EuiButtonEmpty,
1917
EuiLoadingSpinner,
2018
EuiCallOut,
19+
EuiPanel,
2120
} from '@elastic/eui';
2221
import { i18n } from '@kbn/i18n';
2322
import { FormattedMessage } from '@kbn/i18n-react';
@@ -68,7 +67,7 @@ export function AlertsSection() {
6867
return (
6968
<EuiFlexGroup alignItems="center" justifyContent="center" responsive={false}>
7069
<EuiFlexItem grow={false}>
71-
<EuiLoadingSpinner size="xl" />
70+
<EuiLoadingSpinner size="l" />
7271
</EuiFlexItem>
7372
</EuiFlexGroup>
7473
);
@@ -99,7 +98,12 @@ export function AlertsSection() {
9998

10099
return (
101100
<div>
102-
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" responsive={false}>
101+
<EuiFlexGroup
102+
alignItems="center"
103+
justifyContent="spaceBetween"
104+
responsive={false}
105+
gutterSize="s"
106+
>
103107
<EuiFlexItem grow={false}>
104108
<EuiTitle size="xs">
105109
<h4>
@@ -110,73 +114,77 @@ export function AlertsSection() {
110114
</EuiTitle>
111115
</EuiFlexItem>
112116
<EuiFlexItem grow={false}>
113-
<EuiButton size="s" href={manageLink}>
117+
<EuiButtonEmpty iconType="sortRight" color="text" size="xs" href={manageLink}>
114118
{i18n.translate('xpack.observability.overview.alert.appLink', {
115-
defaultMessage: 'Manage alerts',
119+
defaultMessage: 'Show all alerts',
116120
})}
117-
</EuiButton>
121+
</EuiButtonEmpty>
118122
</EuiFlexItem>
119123
</EuiFlexGroup>
120124
<>
121125
<EuiFlexItem grow={false}>
122-
<EuiSpacer />
126+
<EuiSpacer size="s" />
123127
<EuiSelect
124128
compressed
125-
fullWidth={true}
126129
id="filterAlerts"
127130
options={[allTypes, ...filterOptions]}
128131
value={filter}
129132
onChange={(e) => setFilter(e.target.value)}
133+
prepend="Show"
130134
/>
131-
<EuiSpacer />
135+
<EuiSpacer size="s" />
132136
</EuiFlexItem>
133137
{alerts
134138
.filter((alert) => filter === ALL_TYPES || alert.consumer === filter)
135139
.map((alert, index) => {
136-
const isLastElement = index === alerts.length - 1;
137140
return (
138-
<EuiFlexGroup direction="column" gutterSize="s" key={alert.id}>
139-
<EuiFlexItem grow={false}>
140-
<EuiLink
141-
href={core.http.basePath.prepend(paths.management.alertDetails(alert.id))}
142-
>
143-
<EuiText size="s">{alert.name}</EuiText>
144-
</EuiLink>
145-
</EuiFlexItem>
146-
<EuiFlexItem grow={false}>
147-
<EuiFlexGroup gutterSize="xs">
148-
<EuiFlexItem grow={false}>
149-
<EuiBadge color="hollow">{alert.alertTypeId}</EuiBadge>
150-
</EuiFlexItem>
151-
{alert.tags.map((tag, idx) => {
152-
return (
153-
<EuiFlexItem key={idx} grow={false}>
154-
<EuiBadge color="default">{tag}</EuiBadge>
155-
</EuiFlexItem>
156-
);
157-
})}
158-
</EuiFlexGroup>
159-
</EuiFlexItem>
160-
<EuiFlexItem grow={false}>
161-
<EuiFlexGroup gutterSize="s">
162-
<EuiFlexItem grow={false}>
163-
<EuiText color="subdued" size="xs">
164-
Updated {moment.duration(moment().diff(alert.updatedAt)).humanize()} ago
165-
</EuiText>
166-
</EuiFlexItem>
167-
{alert.muteAll && (
141+
<EuiFlexGroup>
142+
<EuiFlexItem>
143+
<EuiPanel>
144+
<EuiFlexGroup direction="column" gutterSize="s" key={alert.id}>
168145
<EuiFlexItem grow={false}>
169-
<EuiIconTip
170-
type="minusInCircle"
171-
content={i18n.translate('xpack.observability.overview.alerts.muted', {
172-
defaultMessage: 'Muted',
146+
<EuiLink
147+
href={core.http.basePath.prepend(paths.management.alertDetails(alert.id))}
148+
>
149+
<EuiText size="s">{alert.name}</EuiText>
150+
</EuiLink>
151+
</EuiFlexItem>
152+
<EuiFlexItem grow={false}>
153+
<EuiFlexGroup gutterSize="xs">
154+
<EuiFlexItem grow={false}>
155+
<EuiBadge color="hollow">{alert.alertTypeId}</EuiBadge>
156+
</EuiFlexItem>
157+
{alert.tags.map((tag, idx) => {
158+
return (
159+
<EuiFlexItem key={idx} grow={false}>
160+
<EuiBadge color="default">{tag}</EuiBadge>
161+
</EuiFlexItem>
162+
);
173163
})}
174-
/>
164+
</EuiFlexGroup>
165+
</EuiFlexItem>
166+
<EuiFlexItem grow={false}>
167+
<EuiFlexGroup gutterSize="s" alignItems="center">
168+
{alert.muteAll && (
169+
<EuiFlexItem grow={false}>
170+
<EuiBadge color="hollow">
171+
{i18n.translate('xpack.observability.overview.alerts.muted', {
172+
defaultMessage: 'Muted',
173+
})}
174+
</EuiBadge>
175+
</EuiFlexItem>
176+
)}
177+
<EuiFlexItem grow={false}>
178+
<EuiText color="subdued" size="xs">
179+
Last updated{' '}
180+
{moment.duration(moment().diff(alert.updatedAt)).humanize()} ago
181+
</EuiText>
182+
</EuiFlexItem>
183+
</EuiFlexGroup>
175184
</EuiFlexItem>
176-
)}
177-
</EuiFlexGroup>
185+
</EuiFlexGroup>
186+
</EuiPanel>
178187
</EuiFlexItem>
179-
{!isLastElement && <EuiHorizontalRule margin="xs" />}
180188
</EuiFlexGroup>
181189
);
182190
})}

‎x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -84,12 +84,12 @@ describe('APMSection', () => {
8484
status: fetcherHook.FETCH_STATUS.SUCCESS,
8585
refetch: jest.fn(),
8686
});
87-
const { getByText, queryAllByTestId } = render(
87+
const { getByRole, getByText, queryAllByTestId } = render(
8888
<APMSection bucketSize={{ intervalString: '60s', bucketSize: 60 }} />
8989
);
9090

91-
expect(getByText('APM')).toBeInTheDocument();
92-
expect(getByText('View in app')).toBeInTheDocument();
91+
expect(getByRole('heading')).toHaveTextContent('Services');
92+
expect(getByText('Show service inventory')).toBeInTheDocument();
9393
expect(getByText('Services 11')).toBeInTheDocument();
9494
expect(getByText('Throughput 900.0 tpm')).toBeInTheDocument();
9595
expect(queryAllByTestId('loading')).toEqual([]);
@@ -101,12 +101,12 @@ describe('APMSection', () => {
101101
status: fetcherHook.FETCH_STATUS.SUCCESS,
102102
refetch: jest.fn(),
103103
});
104-
const { getByText, queryAllByTestId } = render(
104+
const { getByRole, getByText, queryAllByTestId } = render(
105105
<APMSection bucketSize={{ intervalString: '60s', bucketSize: 60 }} />
106106
);
107107

108-
expect(getByText('APM')).toBeInTheDocument();
109-
expect(getByText('View in app')).toBeInTheDocument();
108+
expect(getByRole('heading')).toHaveTextContent('Services');
109+
expect(getByText('Show service inventory')).toBeInTheDocument();
110110
expect(getByText('Services 11')).toBeInTheDocument();
111111
expect(getByText('Throughput 312.00k tpm')).toBeInTheDocument();
112112
expect(queryAllByTestId('loading')).toEqual([]);
@@ -117,13 +117,13 @@ describe('APMSection', () => {
117117
status: fetcherHook.FETCH_STATUS.LOADING,
118118
refetch: jest.fn(),
119119
});
120-
const { getByText, queryAllByText, getByTestId } = render(
120+
const { getByRole, queryAllByText, getByTestId } = render(
121121
<APMSection bucketSize={{ intervalString: '60s', bucketSize: 60 }} />
122122
);
123123

124-
expect(getByText('APM')).toBeInTheDocument();
124+
expect(getByRole('heading')).toHaveTextContent('Services');
125125
expect(getByTestId('loading')).toBeInTheDocument();
126-
expect(queryAllByText('View in app')).toEqual([]);
126+
expect(queryAllByText('Show service inventory')).toEqual([]);
127127
expect(queryAllByText('Services 11')).toEqual([]);
128128
expect(queryAllByText('Throughput 312.00k tpm')).toEqual([]);
129129
});

‎x-pack/plugins/observability/public/components/app/section/apm/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,12 @@ export function APMSection({ bucketSize }: Props) {
9393
return (
9494
<SectionContainer
9595
title={i18n.translate('xpack.observability.overview.apm.title', {
96-
defaultMessage: 'APM',
96+
defaultMessage: 'Services',
9797
})}
9898
appLink={{
9999
href: appLink,
100100
label: i18n.translate('xpack.observability.overview.apm.appLink', {
101-
defaultMessage: 'View in app',
101+
defaultMessage: 'Show service inventory',
102102
}),
103103
}}
104104
hasError={status === FETCH_STATUS.FAILURE}

0 commit comments

Comments
 (0)