diff --git a/src/components/SshKeys/StyledKeys.tsx b/src/components/SshKeys/StyledKeys.tsx
index 689807be..204dac24 100644
--- a/src/components/SshKeys/StyledKeys.tsx
+++ b/src/components/SshKeys/StyledKeys.tsx
@@ -7,6 +7,11 @@ export const StyledKeys = styled.div`
flex: 4;
align-self: center;
}
+ label.fingerprint {
+ @media ${bp.wide_ultraWide} {
+ flex-grow: 3;
+ }
+ }
label.type,
div.type {
flex: 2;
@@ -16,11 +21,23 @@ export const StyledKeys = styled.div`
div.name {
flex: 1.8;
}
-
label.created,
div.created {
flex: 2;
}
+ label.last-used,
+ div.last-used {
+ flex: 2;
+ }
+ label.last-used {
+ @media ${bp.wide_ultraWide} {
+ flex-grow: 3;
+ padding-left: 0px !important;
+ }
+ @media screen and (min-width: 1400px) and (max-width: 1600px) {
+ flex-grow: 3.5;
+ }
+ }
.header {
padding-right: calc(15% + 8px);
@@ -93,6 +110,9 @@ export const StyledKeys = styled.div`
&.created {
align-self: center;
}
+ &.last-used {
+ align-self: center;
+ }
&.name {
overflow-wrap: break-word;
}
@@ -120,6 +140,18 @@ export const StyledKeys = styled.div`
width: 50%;
}
}
+
+ &.last-used {
+ word-break: break-word;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ @media ${bp.wideUp} {
+ width: 45%;
+ }
+ @media ${bp.extraWideUp} {
+ width: 50%;
+ }
+ }
}
&:hover {
@@ -135,6 +167,11 @@ export const StyledKeys = styled.div`
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
+
+ .anticon.anticon-info-circle {
+ vertical-align: top;
+ margin-left: 4px;
+ }
}
}
`;
diff --git a/src/components/SshKeys/index.js b/src/components/SshKeys/index.js
index 196581a5..5e30c965 100644
--- a/src/components/SshKeys/index.js
+++ b/src/components/SshKeys/index.js
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react';
import { Mutation } from 'react-apollo';
import Skeleton from 'react-loading-skeleton';
-import { Col, Modal, Row, Space, notification } from 'antd';
+import InfoCircleTwoTone from '@ant-design/icons/InfoCircleTwoTone';
+import { Col, Modal, Row, Space, Tooltip, notification } from 'antd';
import Button from 'components/Button';
import DeleteConfirm from 'components/DeleteConfirm';
import DeleteUserSSHPublicKey from 'lib/mutation/DeleteUserSSHPublicKey';
@@ -49,6 +50,51 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
});
};
+ const tooltipDateTime = (created, lastUsed) => {
+ return (
+ <>
+
+ Created: {moment.utc(created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
+
+
+
+ Last Used: {moment.utc(lastUsed).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
+
+ >
+ );
+ };
+
+ const lastUsedTimeframe = dateTime => {
+ if (!dateTime) {
+ return 'Never';
+ }
+
+ const lastUsed = moment.utc(dateTime).local().format('DD MMM YYYY, HH:mm:ss (Z)');
+ const now = moment();
+ const dayDiff = now.diff(lastUsed, 'days');
+
+ if (dayDiff === 0) {
+ return 'Today';
+ } else if (dayDiff === 1) {
+ return 'Yesterday';
+ } else if (dayDiff < 7) {
+ return `${dayDiff} days ago`;
+ }
+
+ const weekDiff = now.diff(lastUsed, 'weeks');
+ if (weekDiff < 4) {
+ return `${weekDiff} week${weekDiff > 1 ? 's' : ''} ago`;
+ }
+
+ const monthDiff = now.diff(lastUsed, 'months');
+ if (monthDiff < 12) {
+ return `${monthDiff} month${monthDiff > 1 ? 's' : ''} ago`;
+ }
+
+ const yearDiff = now.diff(lastUsed, 'years');
+ return `${yearDiff} year${yearDiff > 1 ? 's' : ''} ago`;
+ };
+
useEffect(() => {
setIsLoading(loading);
}, [loading]);
@@ -59,14 +105,14 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
-
+ {/**/}
+
{isLoading ? (