[Uptime] Cert page responsiveness (#67269)

This commit is contained in:
Shahzad 2020-05-26 22:47:42 +02:00 committed by GitHub
parent 8ad9f442b7
commit 09e36b6498
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 15 deletions

View file

@ -938,7 +938,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<span>
-
--
</span>
</div>
</td>
@ -1115,7 +1115,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<span>
-
--
</span>
</div>
</td>

View file

@ -47,5 +47,5 @@ export const CertStatusColumn: React.FC<Props> = ({ cert }) => {
return <CertStatus color="danger" text={EXPIRED} />;
}
return certStatus ? <CertStatus color="success" text={'Expires'} /> : <span>-</span>;
return certStatus ? <CertStatus color="success" text={'Expires'} /> : <span>--</span>;
};

View file

@ -13,6 +13,8 @@ import {
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiHideFor,
EuiShowFor,
} from '@elastic/eui';
import React, { useContext, useEffect, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
@ -73,7 +75,7 @@ export const CertificatesPage: React.FC = () => {
return (
<>
<EuiFlexGroup>
<EuiFlexGroup responsive={false} gutterSize="s">
<EuiFlexItem grow={false} style={{ marginRight: 'auto', alignSelf: 'center' }}>
<Link to={OVERVIEW_ROUTE} data-test-subj="uptimeCertificatesToOverviewLink">
<EuiButtonEmpty size="s" color="primary" iconType="arrowLeft">
@ -87,21 +89,32 @@ export const CertificatesPage: React.FC = () => {
<EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
<Link to={SETTINGS_ROUTE} data-test-subj="uptimeCertificatesToOverviewLink">
<EuiButtonEmpty size="s" color="primary" iconType="gear">
{labels.SETTINGS_ON_CERT}
<EuiHideFor sizes={['xs']}> {labels.SETTINGS_ON_CERT}</EuiHideFor>
</EuiButtonEmpty>
</Link>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill
iconType="refresh"
onClick={() => {
refreshApp();
}}
data-test-subj="superDatePickerApplyTimeButton"
>
{labels.REFRESH_CERT}
</EuiButton>
<EuiHideFor sizes={['xs']}>
<EuiButton
fill
iconType="refresh"
onClick={() => {
refreshApp();
}}
data-test-subj="superDatePickerApplyTimeButton"
>
{labels.REFRESH_CERT}
</EuiButton>
</EuiHideFor>
<EuiShowFor sizes={['xs']}>
<EuiButtonEmpty
iconType="refresh"
onClick={() => {
refreshApp();
}}
data-test-subj="superDatePickerApplyTimeButton"
/>
</EuiShowFor>
</EuiFlexItem>
</EuiFlexGroup>