[Uptime] Certificates page

x-pack/legacy/plugins/uptime/common/constants/ui.ts

@@ -10,6 +10,8 @@ export const OVERVIEW_ROUTE = '/';
 
 export const SETTINGS_ROUTE = '/settings';
 
+export const CERTIFICATES_ROUTE = '/certificates';
+
 export enum STATUS {
   UP = 'up',
   DOWN = 'down',

x-pack/legacy/plugins/uptime/common/runtime_types/certs.ts

@@ -8,26 +8,28 @@ import * as t from 'io-ts';
 
 export const GetCertsParamsType = t.intersection([
   t.type({
-    from: t.string,
-    to: t.string,
     index: t.number,
     size: t.number,
+    sortBy: t.string,
+    direction: t.string,
   }),
   t.partial({
     search: t.string,
+    from: t.string,
+    to: t.string,
   }),
 ]);
 
 export type GetCertsParams = t.TypeOf<typeof GetCertsParamsType>;
 
+export const CertMonitorType = t.partial({
+  name: t.string,
+  id: t.string,
+});
+
 export const CertType = t.intersection([
   t.type({
-    monitors: t.array(
-      t.partial({
-        name: t.string,
-        id: t.string,
-      })
-    ),
+    monitors: t.array(CertMonitorType),
     sha256: t.string,
   }),
   t.partial({
@@ -39,4 +41,11 @@ export const CertType = t.intersection([
   }),
 ]);
 
+export const CertResultType = t.type({
+  certs: t.array(CertType),
+  total: t.number,
+});
+
 export type Cert = t.TypeOf<typeof CertType>;
+export type CertMonitor = t.TypeOf<typeof CertMonitorType>;
+export type CertResult = t.TypeOf<typeof CertResultType>;

x-pack/legacy/plugins/uptime/common/runtime_types/dynamic_settings.ts

@@ -11,14 +11,10 @@ export const CertificatesStatesThresholdType = t.interface({
   errorState: t.number,
 });
 
-export const DynamicSettingsType = t.intersection([
-  t.type({
-    heartbeatIndices: t.string,
-  }),
-  t.partial({
-    certificatesThresholds: CertificatesStatesThresholdType,
-  }),
-]);
+export const DynamicSettingsType = t.type({
+  heartbeatIndices: t.string,
+  certificatesThresholds: CertificatesStatesThresholdType,
+});
 
 export const DynamicSettingsSaveType = t.intersection([
   t.type({

x-pack/legacy/plugins/uptime/public/components/certificates/cert_monitors.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { CertMonitor } from '../../../common/runtime_types';
+import { MonitorPageLink } from '../common/monitor_page_link';
+
+interface Props {
+  monitors: CertMonitor[];
+}
+
+export const CertMonitors: React.FC<Props> = ({ monitors }) => {
+  return (
+    <span>
+      {monitors.map((mon: CertMonitor, ind: number) => (
+        <>
+          {ind > 0 && ', '}
+          <MonitorPageLink key={mon.id} monitorId={mon.id!} linkParameters={''}>
+            {mon.name || mon.id}
+          </MonitorPageLink>
+        </>
+      ))}
+    </span>
+  );
+};

x-pack/legacy/plugins/uptime/public/components/certificates/cert_status.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiHealth } from '@elastic/eui';
+import { Cert } from '../../../common/runtime_types';
+import { CERT_STATUS, useCertStatus } from '../../hooks';
+import * as labels from './translations';
+
+interface Props {
+  cert: Cert;
+}
+
+export const CertStatus: React.FC<Props> = ({ cert }) => {
+  const certStatus = useCertStatus(cert?.certificate_not_valid_after);
+
+  const isExpiringSoon = certStatus === CERT_STATUS.EXPIRING_SOON;
+
+  const isExpired = certStatus === CERT_STATUS.EXPIRED;
+
+  if (isExpiringSoon) {
+    return (
+      <EuiHealth color="#E9AA3C">
+        <span>{labels.EXPIRES_SOON}</span>
+      </EuiHealth>
+    );
+  }
+  if (isExpired) {
+    return (
+      <EuiHealth color="danger">
+        <span>{labels.EXPIRED}</span>
+      </EuiHealth>
+    );
+  }
+
+  return (
+    <EuiHealth color="success">
+      <span>{labels.OK}</span>
+    </EuiHealth>
+  );
+};

x-pack/legacy/plugins/uptime/public/components/certificates/certificate_search.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { ChangeEvent } from 'react';
+import { EuiFieldSearch } from '@elastic/eui';
+import styled from 'styled-components';
+import * as labels from './translations';
+
+const WrapFieldSearch = styled(EuiFieldSearch)`
+  min-width: 700px;
+`;
+interface Props {
+  setSearch: (val: string) => void;
+}
+
+export const CertificateSearch: React.FC<Props> = ({ setSearch }) => {
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  };
+
+  return (
+    <WrapFieldSearch
+      placeholder={labels.SEARCH_CERTS}
+      onChange={onChange}
+      isClearable={true}
+      aria-label={labels.SEARCH_CERTS}
+    />
+  );
+};

x-pack/legacy/plugins/uptime/public/components/certificates/certificates_list.tsx

@@ -0,0 +1,132 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import moment from 'moment';
+import { useSelector } from 'react-redux';
+import { Direction, EuiBasicTable, EuiCopy, EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui';
+import { certificatesSelector } from '../../state/certificates/certificates';
+import { CertStatus } from './cert_status';
+import { CertMonitors } from './cert_monitors';
+import * as labels from './translations';
+import { Cert, CertMonitor } from '../../../common/runtime_types';
+
+interface Page {
+  index: number;
+  size: number;
+}
+
+export type CertFields =
+  | 'sha256'
+  | 'sha1'
+  | 'issuer'
+  | 'common_name'
+  | 'monitors'
+  | 'certificate_not_valid_after'
+  | 'certificate_not_valid_before';
+
+export interface CertSort {
+  field: CertFields;
+  direction: Direction;
+}
+
+interface Props {
+  page: Page;
+  sort: CertSort;
+  onChange: (page: Page, sort: CertSort) => void;
+}
+
+const columns = [
+  {
+    field: 'tls.certificate_not_valid_after',
+    name: labels.STATUS_COL,
+    sortable: true,
+    render: (val: string, item: Cert) => {
+      return <CertStatus cert={item} />;
+    },
+  },
+  {
+    name: labels.COMMON_NAME_COL,
+    field: 'common_name',
+  },
+  {
+    name: labels.MONITORS_COL,
+    field: 'monitors',
+    render: (monitors: CertMonitor[]) => <CertMonitors monitors={monitors} />,
+  },
+  {
+    name: labels.ISSUED_BY_COL,
+    field: 'issuer',
+  },
+  {
+    name: labels.EXP_DATE_COL,
+    field: 'certificate_not_valid_after',
+    sortable: true,
+    render: (value: string) => {
+      return moment(value).format('L LT');
+    },
+  },
+  {
+    name: (
+      <EuiToolTip
+        content="Certificate fingerprint using the SHA256 digest of DER-encoded version
+      of certificate offered by the client."
+      >
+        <span>
+          SHA256
+          <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+        </span>
+      </EuiToolTip>
+    ),
+    width: '100px',
+    actions: [
+      {
+        render: (item: Cert) => {
+          return (
+            <EuiCopy textToCopy={item.sha256?.toUpperCase()}>
+              {copy => (
+                <EuiLink onClick={copy}>
+                  <EuiIcon type="copy" title="Click to Copy SHA 256 Value" />
+                </EuiLink>
+              )}
+            </EuiCopy>
+          );
+        },
+      },
+    ],
+  },
+];
+
+export const CertificateList: React.FC<Props> = ({ page, sort, onChange }) => {
+  const certificates = useSelector(certificatesSelector);
+
+  const onTableChange = (newVal: Partial<Props>) => {
+    onChange(newVal.page as Page, newVal.sort as CertSort);
+  };
+
+  const pagination = {
+    pageIndex: page.index,
+    pageSize: page.size,
+    totalItemCount: certificates?.total ?? 0,
+    pageSizeOptions: [5, 10, 15, 20],
+    hidePerPageOptions: false,
+  };
+
+  return (
+    <EuiBasicTable
+      columns={columns}
+      items={certificates?.certs ?? []}
+      pagination={pagination}
+      onChange={onTableChange}
+      sorting={{
+        sort: {
+          field: sort.field,
+          direction: sort.direction,
+        },
+      }}
+    />
+  );
+};

x-pack/legacy/plugins/uptime/public/components/certificates/translations.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const OK = i18n.translate('xpack.uptime.certs.ok', {
+  defaultMessage: 'OK',
+});
+
+export const EXPIRED = i18n.translate('xpack.uptime.certs.expired', {
+  defaultMessage: 'Expired',
+});
+
+export const EXPIRES_SOON = i18n.translate('xpack.uptime.certs.expireSoon', {
+  defaultMessage: 'Expires Soon',
+});
+
+export const SEARCH_CERTS = i18n.translate('xpack.uptime.certs.searchCerts', {
+  defaultMessage: 'Search certificates',
+});
+
+export const STATUS_COL = i18n.translate('xpack.uptime.certs.list.status', {
+  defaultMessage: 'Status',
+});
+
+export const COMMON_NAME_COL = i18n.translate('xpack.uptime.certs.list.commonName', {
+  defaultMessage: 'Common Name',
+});
+
+export const MONITORS_COL = i18n.translate('xpack.uptime.certs.list.monitors', {
+  defaultMessage: 'Monitors',
+});
+
+export const ISSUED_BY_COL = i18n.translate('xpack.uptime.certs.list.issuedBy', {
+  defaultMessage: 'Issued By',
+});
+
+export const EXP_DATE_COL = i18n.translate('xpack.uptime.certs.list.expirationDate', {
+  defaultMessage: 'Expiration Date',
+});

x-pack/legacy/plugins/uptime/public/components/monitor/monitor_status_details/__test__/monitor_ssl_certificate.test.tsx

@@ -11,6 +11,7 @@ import { EuiBadge } from '@elastic/eui';
 import { renderWithIntl } from 'test_utils/enzyme_helpers';
 import { Tls } from '../../../../../common/runtime_types';
 import { MonitorSSLCertificate } from '../monitor_status_bar';
+import * as redux from 'react-redux';
 
 describe('MonitorStatusBar component', () => {
   let monitorTls: Tls;
@@ -23,6 +24,12 @@ describe('MonitorStatusBar component', () => {
     monitorTls = {
       certificate_not_valid_after: dateInTwoMonths,
     };
+
+    const spy = jest.spyOn(redux, 'useDispatch');
+    spy.mockReturnValue(jest.fn());
+
+    const spy1 = jest.spyOn(redux, 'useSelector');
+    spy1.mockReturnValue(true);
   });
 
   it('renders', () => {