From b3284c912d63716160ae4d74694e381c47a729c5 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Thu, 28 May 2020 13:11:44 +0200
Subject: [PATCH 1/3] added relatinve

---
 .../__snapshots__/cert_status.test.tsx.snap   | 16 +++++++-
 .../components/certificates/cert_status.tsx   | 38 +++++++++++++++++--
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_status.test.tsx.snap b/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_status.test.tsx.snap
index 089d272a075c68..0cb77e1019357b 100644
--- a/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_status.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_status.test.tsx.snap
@@ -1,6 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CertStatus renders expected elements for valid props 1`] = `
+.c0 {
+  display: inline-block;
+  margin-left: 5px;
+}
+
 <div
   class="euiHealth"
 >
@@ -19,7 +24,16 @@ exports[`CertStatus renders expected elements for valid props 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <span>
-        OK
+        OK  
+        <div
+          class="euiText euiText--extraSmall c0"
+        >
+          <div
+            class="euiTextColor euiTextColor--subdued"
+          >
+            for 4 months
+          </div>
+        </div>
       </span>
     </div>
   </div>
diff --git a/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx b/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
index e7a86ce98fa3c1..4031ce5782a891 100644
--- a/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
+++ b/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
@@ -5,7 +5,9 @@
  */
 
 import React from 'react';
-import { EuiHealth } from '@elastic/eui';
+import moment from 'moment';
+import styled from 'styled-components';
+import { EuiHealth, EuiText } from '@elastic/eui';
 import { Cert } from '../../../common/runtime_types';
 import { useCertStatus } from '../../hooks';
 import * as labels from './translations';
@@ -15,20 +17,39 @@ interface Props {
   cert: Cert;
 }
 
+const DateText = styled(EuiText)`
+  display: inline-block;
+  margin-left: 5px;
+`;
+
 export const CertStatus: React.FC<Props> = ({ cert }) => {
   const certStatus = useCertStatus(cert?.not_after, cert?.not_before);
 
+  const relativeDate = moment(cert?.not_after).fromNow();
+
   if (certStatus === CERT_STATUS.EXPIRING_SOON) {
     return (
       <EuiHealth color="warning">
-        <span>{labels.EXPIRES_SOON}</span>
+        <span>
+          {labels.EXPIRES_SOON}
+          {'  '}
+          <DateText color="subdued" size="xs">
+            {relativeDate}
+          </DateText>
+        </span>
       </EuiHealth>
     );
   }
   if (certStatus === CERT_STATUS.EXPIRED) {
     return (
       <EuiHealth color="danger">
-        <span>{labels.EXPIRED}</span>
+        <span>
+          {labels.EXPIRED}
+          {'  '}
+          <DateText color="subdued" size="xs">
+            {relativeDate}
+          </DateText>
+        </span>
       </EuiHealth>
     );
   }
@@ -41,9 +62,18 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
     );
   }
 
+  const okRelativeDate = moment(cert?.not_after).fromNow(true);
+
   return (
     <EuiHealth color="success">
-      <span>{labels.OK}</span>
+      <span>
+        {labels.OK}
+        {'  '}
+        <DateText color="subdued" size="xs">
+          {'for '}
+          {okRelativeDate}
+        </DateText>
+      </span>
     </EuiHealth>
   );
 };

From df670ce4a1ecdb18ec8481d31a5bda2ada4cefdd Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Wed, 3 Jun 2020 23:26:41 +0200
Subject: [PATCH 2/3] update

---
 .../__snapshots__/cert_status.test.tsx.snap   |  2 +-
 .../components/certificates/cert_status.tsx   | 28 +++++++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_status.test.tsx.snap b/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_status.test.tsx.snap
index 0cb77e1019357b..f6a4b4598fe63d 100644
--- a/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_status.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_status.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`CertStatus renders expected elements for valid props 1`] = `
           <div
             class="euiTextColor euiTextColor--subdued"
           >
-            for 4 months
+             for 4 months
           </div>
         </div>
       </span>
diff --git a/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx b/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
index 4031ce5782a891..8a22a46ef409e0 100644
--- a/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
+++ b/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
@@ -8,10 +8,13 @@ import React from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
 import { EuiHealth, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useSelector } from 'react-redux';
 import { Cert } from '../../../common/runtime_types';
 import { useCertStatus } from '../../hooks';
 import * as labels from './translations';
 import { CERT_STATUS } from '../../../common/constants';
+import { selectDynamicSettings } from '../../state/selectors';
 
 interface Props {
   cert: Cert;
@@ -25,6 +28,8 @@ const DateText = styled(EuiText)`
 export const CertStatus: React.FC<Props> = ({ cert }) => {
   const certStatus = useCertStatus(cert?.not_after, cert?.not_before);
 
+  const dss = useSelector(selectDynamicSettings);
+
   const relativeDate = moment(cert?.not_after).fromNow();
 
   if (certStatus === CERT_STATUS.EXPIRING_SOON) {
@@ -55,9 +60,18 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
   }
 
   if (certStatus === CERT_STATUS.TOO_OLD) {
+    const ageThreshold = dss.settings?.certAgeThreshold;
+
+    const oldRelativeDate = moment(cert?.not_before).add(ageThreshold, 'days').fromNow();
+
     return (
       <EuiHealth color="danger">
-        <span>{labels.TOO_OLD}</span>
+        <span>
+          {labels.TOO_OLD}
+          <DateText color="subdued" size="xs">
+            {oldRelativeDate}
+          </DateText>
+        </span>
       </EuiHealth>
     );
   }
@@ -70,8 +84,16 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
         {labels.OK}
         {'  '}
         <DateText color="subdued" size="xs">
-          {'for '}
-          {okRelativeDate}
+          <FormattedMessage
+            id="xpack.uptime.certs.status.ok,label"
+            defaultMessage=" for {okRelativeDate}"
+            description={
+              'Denotes an amount of time for which a cert is valid. Example: "OK for 2 days"'
+            }
+            values={{
+              okRelativeDate,
+            }}
+          />
         </DateText>
       </span>
     </EuiHealth>

From 2fa26b1c2746f0cb3cc7b946cbbfa5ab34c8ed70 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Thu, 4 Jun 2020 22:59:34 +0200
Subject: [PATCH 3/3] update

---
 .../uptime/public/components/certificates/cert_status.tsx   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx b/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
index 8a22a46ef409e0..ea0a49a4a6c5b7 100644
--- a/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
+++ b/x-pack/plugins/uptime/public/components/certificates/cert_status.tsx
@@ -85,11 +85,9 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
         {'  '}
         <DateText color="subdued" size="xs">
           <FormattedMessage
-            id="xpack.uptime.certs.status.ok,label"
+            id="xpack.uptime.certs.status.ok.label"
             defaultMessage=" for {okRelativeDate}"
-            description={
-              'Denotes an amount of time for which a cert is valid. Example: "OK for 2 days"'
-            }
+            description='Denotes an amount of time for which a cert is valid. Example: "OK for 2 days"'
             values={{
               okRelativeDate,
             }}