From 788cb34265abd72de980ec79d3c98857b958af5e Mon Sep 17 00:00:00 2001 From: cgoodwin90 Date: Thu, 3 Oct 2024 16:30:30 +1000 Subject: [PATCH 1/3] Adds last used to the ssh keys table --- src/components/SshKeys/StyledKeys.tsx | 31 +++++++++++++++++++++++- src/components/SshKeys/index.js | 34 ++++++++++++++++++++++++++- src/lib/query/Me.js | 1 + src/lib/variables.js | 2 ++ 4 files changed, 66 insertions(+), 2 deletions(-) diff --git a/src/components/SshKeys/StyledKeys.tsx b/src/components/SshKeys/StyledKeys.tsx index 689807be..31737333 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,20 @@ 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; + } + } .header { padding-right: calc(15% + 8px); @@ -93,6 +107,9 @@ export const StyledKeys = styled.div` &.created { align-self: center; } + &.last-used { + align-self: center; + } &.name { overflow-wrap: break-word; } @@ -120,6 +137,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 { diff --git a/src/components/SshKeys/index.js b/src/components/SshKeys/index.js index 196581a5..27e6a63d 100644 --- a/src/components/SshKeys/index.js +++ b/src/components/SshKeys/index.js @@ -49,6 +49,37 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) = }); }; + 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]); @@ -60,13 +91,13 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) = + {isLoading ? ( ) : (
{!keys?.length &&
No SSH keys
} - {keys && keys.map(key => (
@@ -78,6 +109,7 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
{moment.utc(key.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
+
{lastUsedTimeframe(key.lastUsed)}
diff --git a/src/lib/query/Me.js b/src/lib/query/Me.js index ffca22c8..c5a6c10c 100644 --- a/src/lib/query/Me.js +++ b/src/lib/query/Me.js @@ -14,6 +14,7 @@ export default gql` keyValue created keyFingerprint + lastUsed } } } diff --git a/src/lib/variables.js b/src/lib/variables.js index 6eaa7a7a..1bbb1c5e 100644 --- a/src/lib/variables.js +++ b/src/lib/variables.js @@ -5,6 +5,7 @@ const BP_TABLET = 768; const BP_DESKTOP = 960; const BP_WIDE = 1200; const BP_EXTRAWIDE = 1400; +const BP_ULTRAWIDE = 1900; export const color = { black: '#1a1a1a', @@ -51,6 +52,7 @@ export const bp = { xs_small_extrawide: `all and (min-width: ${BP_XS / 16}em) and (max-width: ${(BP_EXTRAWIDE - 1) / 16}em)`, desktop_extrawide: `all and (min-width: ${BP_DESKTOP / 16}em) and (max-width: ${(BP_EXTRAWIDE - 1) / 16}em)`, wide_extraWide: `all and (min-width: ${BP_WIDE / 16}em) and (max-width: ${(BP_EXTRAWIDE - 1) / 16}em)`, + wide_ultraWide: `all and (min-width: ${BP_WIDE / 16}em) and (max-width: ${(BP_ULTRAWIDE - 1) / 16}em)`, }; export const pxToRem = pxValue => `${pxValue / 16}rem`; From 0fa3c9fa2da6778af3624e5dff730949d319d2e2 Mon Sep 17 00:00:00 2001 From: cgoodwin90 Date: Tue, 8 Oct 2024 11:31:00 +1100 Subject: [PATCH 2/3] Combined created & last used + adds tooltip --- src/components/SshKeys/StyledKeys.tsx | 13 +++++++++ src/components/SshKeys/index.js | 38 ++++++++++++++++++++++----- src/lib/variables.js | 2 +- src/static/images/information.svg | 1 + 4 files changed, 47 insertions(+), 7 deletions(-) create mode 100644 src/static/images/information.svg diff --git a/src/components/SshKeys/StyledKeys.tsx b/src/components/SshKeys/StyledKeys.tsx index 31737333..0002ce73 100644 --- a/src/components/SshKeys/StyledKeys.tsx +++ b/src/components/SshKeys/StyledKeys.tsx @@ -21,6 +21,11 @@ export const StyledKeys = styled.div` div.name { flex: 1.8; } + div.created-lastused { + @media ${bp.wideUp} { + text-align: center; + } + } label.created, div.created { flex: 2; @@ -34,6 +39,9 @@ export const StyledKeys = styled.div` flex-grow: 3; padding-left: 0px !important; } + @media screen and (min-width: 1400px) and (max-width: 1600px) { + flex-grow: 3.5; + } } .header { @@ -164,6 +172,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 27e6a63d..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,20 @@ 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'; @@ -90,8 +105,8 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) = - - + {/**/} +
{isLoading ? ( @@ -106,10 +121,21 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
{key.keyType}
{key.keyFingerprint}
-
- {moment.utc(key.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')} +
+
+ Created: {lastUsedTimeframe(key.created)} + + + +
+
+ Last used: {lastUsedTimeframe(key.lastUsed)} +
-
{lastUsedTimeframe(key.lastUsed)}
diff --git a/src/lib/variables.js b/src/lib/variables.js index 1bbb1c5e..8bb16c7b 100644 --- a/src/lib/variables.js +++ b/src/lib/variables.js @@ -5,7 +5,7 @@ const BP_TABLET = 768; const BP_DESKTOP = 960; const BP_WIDE = 1200; const BP_EXTRAWIDE = 1400; -const BP_ULTRAWIDE = 1900; +const BP_ULTRAWIDE = 1800; export const color = { black: '#1a1a1a', diff --git a/src/static/images/information.svg b/src/static/images/information.svg new file mode 100644 index 00000000..89f2bb37 --- /dev/null +++ b/src/static/images/information.svg @@ -0,0 +1 @@ + \ No newline at end of file From db019bf205c1622583a998dbc889c6c5c8a10546 Mon Sep 17 00:00:00 2001 From: cgoodwin90 Date: Tue, 8 Oct 2024 13:01:58 +1100 Subject: [PATCH 3/3] Removes center alignment --- src/components/SshKeys/StyledKeys.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/SshKeys/StyledKeys.tsx b/src/components/SshKeys/StyledKeys.tsx index 0002ce73..204dac24 100644 --- a/src/components/SshKeys/StyledKeys.tsx +++ b/src/components/SshKeys/StyledKeys.tsx @@ -21,11 +21,6 @@ export const StyledKeys = styled.div` div.name { flex: 1.8; } - div.created-lastused { - @media ${bp.wideUp} { - text-align: center; - } - } label.created, div.created { flex: 2;