[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:
Shahzad 2020-01-15 17:14:54 +01:00 committed by GitHub
parent dd16aaf5a8
commit f2695c4d25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 5 deletions

View file

@ -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 {

View file

@ -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>
),
});
}