Merge pull request #6021 from vcapretz/chore/sentry-plugin-replace-timeago-for-luxon

Chore/sentry plugin replace timeago for luxon

plugins/sentry/package.json

@@ -38,12 +38,12 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
+    "luxon": "^1.27.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "6.0.0-beta.0",
     "react-sparklines": "^1.7.0",
-    "react-use": "^17.2.4",
-    "timeago.js": "^4.0.2"
+    "react-use": "^17.2.4"
   },
   "devDependencies": {
     "@backstage/cli": "^0.7.0",
@@ -53,6 +53,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",
     "@types/jest": "^26.0.7",
+    "@types/luxon": "^1.27.0",
     "@types/node": "^14.14.32",
     "@types/react": "^16.9",
     "cross-fetch": "^3.0.6",

plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Table, TableColumn } from '@backstage/core';
 import { SentryIssue } from '../../api';
-import { format } from 'timeago.js';
+import { DateTime } from 'luxon';
 import { ErrorCell } from '../ErrorCell/ErrorCell';
 import { ErrorGraph } from '../ErrorGraph/ErrorGraph';
 
@@ -35,7 +35,8 @@ const columns: TableColumn[] = [
     field: 'firstSeen',
     render: data => {
       const { firstSeen } = data as SentryIssue;
-      return format(firstSeen);
+
+      return DateTime.fromISO(firstSeen).toRelative({ locale: 'en' });
     },
   },
   {
@@ -43,7 +44,7 @@ const columns: TableColumn[] = [
     field: 'lastSeen',
     render: data => {
       const { lastSeen } = data as SentryIssue;
-      return format(lastSeen);
+      return DateTime.fromISO(lastSeen).toRelative({ locale: 'en' });
     },
   },
   {