[Uptime] Ping list, margin before expand arrow (#54905)
* added margin * Update x-pack/legacy/plugins/uptime/public/components/functional/ping_list/ping_list.tsx Co-Authored-By: Katrin Freihofner <katrin.freihofner@elastic.co> Co-authored-by: Katrin Freihofner <katrin.freihofner@elastic.co>
This commit is contained in:
parent
dd16aaf5a8
commit
f2695c4d25
|
@ -139,7 +139,9 @@ exports[`PingList component renders sorted list without errors 1`] = `
|
|||
Object {
|
||||
"align": "right",
|
||||
"field": "http.response.status_code",
|
||||
"name": "Response code",
|
||||
"name": <ForwardRef(styled.span)>
|
||||
Response code
|
||||
</ForwardRef(styled.span)>,
|
||||
"render": [Function],
|
||||
},
|
||||
Object {
|
||||
|
|
|
@ -23,6 +23,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
|
|||
import { get } from 'lodash';
|
||||
import moment from 'moment';
|
||||
import React, { Fragment, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
|
||||
import { Ping, PingResults } from '../../../../common/graphql/types';
|
||||
import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
|
||||
|
@ -69,6 +70,10 @@ export const toggleDetails = (
|
|||
setItemIdToExpandedRowMap(newItemIdToExpandedRowMap);
|
||||
};
|
||||
|
||||
const SpanWithMargin = styled.span`
|
||||
margin-right: 16px;
|
||||
`;
|
||||
|
||||
export const PingListComponent = ({
|
||||
data,
|
||||
loading,
|
||||
|
@ -185,10 +190,18 @@ export const PingListComponent = ({
|
|||
columns.push({
|
||||
field: 'http.response.status_code',
|
||||
align: 'right',
|
||||
name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', {
|
||||
defaultMessage: 'Response code',
|
||||
}),
|
||||
render: (statusCode: string) => <EuiBadge>{statusCode}</EuiBadge>,
|
||||
name: (
|
||||
<SpanWithMargin>
|
||||
{i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', {
|
||||
defaultMessage: 'Response code',
|
||||
})}
|
||||
</SpanWithMargin>
|
||||
),
|
||||
render: (statusCode: string) => (
|
||||
<SpanWithMargin>
|
||||
<EuiBadge>{statusCode}</EuiBadge>{' '}
|
||||
</SpanWithMargin>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue