center align status badge

elastic · Nov 18, 2020 · b6b1f20 · b6b1f20
1 parent 539b280
commit b6b1f20
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 25 deletions.
diff --git a/...ublic/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/...ublic/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
diff --git a/...overview/monitor_list/columns/__tests__/__snapshots__/monitor_status_column.test.tsx.snap b/...overview/monitor_list/columns/__tests__/__snapshots__/monitor_status_column.test.tsx.snap
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/cert_status_column.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/cert_status_column.tsx
@@ -11,7 +11,13 @@ import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
 import { X509Expiry } from '../../../../../common/runtime_types';
 import { useCertStatus } from '../../../../hooks';
 import { EXPIRED, EXPIRES, EXPIRES_SOON } from '../../../certificates/translations';
-import { CERT_STATUS } from '../../../../../common/constants';
+import {
+  CERT_STATUS,
+  SHORT_TIMESPAN_LOCALE,
+  SHORT_TS_LOCALE,
+} from '../../../../../common/constants';
+import { parseTimestamp } from '../parse_timestamp';
+import { getShortTimeStamp } from './monitor_status_column';
 
 interface Props {
   expiry: X509Expiry;
@@ -35,7 +41,7 @@ export const CertStatusColumn: React.FC<Props> = ({ expiry, boldStyle = false })
   const notAfter = expiry?.not_after;
   const certStatus = useCertStatus(notAfter);
 
-  const relativeDate = moment(notAfter).fromNow();
+  const relativeDate = getShortTimeStamp(moment(notAfter), true);
 
   const CertStatus = ({ color, text }: { color: string; text: string }) => {
     return (

diff --git a/.../plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx b/.../plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx
@@ -44,7 +44,7 @@ export const getHealthMessage = (status: string): string | null => {
   }
 };
 
-const getShortTimeStamp = (timeStamp: moment.Moment, relative = false) => {
+export const getShortTimeStamp = (timeStamp: moment.Moment, relative = false) => {
   if (relative) {
     const prevLocale: string = moment.locale() ?? 'en';
 
@@ -153,8 +153,8 @@ export const MonitorListStatusColumn = ({
       <StatusColumnFlexG alignItems="center" gutterSize="none" wrap={false} responsive={false}>
         <EuiFlexItem grow={false} style={{ flexBasis: 40 }}>
           <EuiBadge
+            className="eui-textCenter"
             color={status === STATUS.UP ? 'secondary' : dangerBehindText}
-            style={{ display: 'block' }}
           >
             {getHealthMessage(status)}
           </EuiBadge>