diff --git a/public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx b/public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx index c0e6c8ccd0b..064fa504946 100644 --- a/public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx +++ b/public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx @@ -1,7 +1,7 @@ import { css, cx } from '@emotion/css'; import type { JSX } from 'react'; -import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data'; +import { dateTimeFormat, GrafanaTheme2, TimeZone, dateTimeFormatTimeAgo } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; import { DeleteButton, Icon, Tooltip, useStyles2, useTheme2 } from '@grafana/ui'; import { ApiKey } from 'app/types/apiKeys'; @@ -84,9 +84,9 @@ function formatDate(timeZone: TimeZone, expiration?: string): string { } function formatSecondsLeftUntilExpiration(secondsUntilExpiration: number): string { - const days = Math.ceil(secondsUntilExpiration / (3600 * 24)); - const daysFormat = days > 1 ? `${days} days` : `${days} day`; - return `Expires in ${daysFormat}`; + const expirationTime = Date.now() + secondsUntilExpiration * 1000; + const daysFormat = dateTimeFormatTimeAgo(expirationTime, { timeZone: 'browser' }); + return `Expires ${daysFormat}`; } const TokenRevoked = () => { @@ -126,14 +126,14 @@ const TokenExpiration = ({ timeZone, token }: TokenExpirationProps) => { } if (token.secondsUntilExpiration) { return ( - + {formatSecondsLeftUntilExpiration(token.secondsUntilExpiration)} ); } if (token.hasExpired) { return ( - + Expired