diff --git a/frontend/package.json b/frontend/package.json index c324c69c..e27f9123 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,7 @@ "chart.js": "^3.8.2", "framer-motion": "^6.3.0", "js-yaml": "^4.1.0", + "luxon": "^3.0.1", "next": "latest", "prism-react-renderer": "^1.3.5", "react": "^18.2.0", @@ -28,6 +29,7 @@ }, "devDependencies": { "@types/js-yaml": "^4.0.5", + "@types/luxon": "^3.0.0", "@types/node": "^18.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", diff --git a/frontend/src/components/Endpoint/Overview.tsx b/frontend/src/components/Endpoint/Overview.tsx index 41aca261..53cbc485 100644 --- a/frontend/src/components/Endpoint/Overview.tsx +++ b/frontend/src/components/Endpoint/Overview.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ApiEndpointDetailed, Endpoint } from "@common/types"; +import { ApiEndpointDetailed } from "@common/types"; import { Box, Badge, @@ -16,6 +16,7 @@ import darkTheme from "prism-react-renderer/themes/duotoneDark"; import lightTheme from "prism-react-renderer/themes/github"; import { openAPISpec } from "testData"; import EndpointPIIChart from "./PIIChart"; +import { getDateTimeString } from "../../utils"; interface EndpointOverviewProps { endpoint: ApiEndpointDetailed; @@ -57,11 +58,11 @@ const EndpointOverview: React.FC = React.memo( First Detected - {endpoint.firstDetected?.toString()} + {getDateTimeString(endpoint.firstDetected) || "N/A"} Last Active - {endpoint.lastActive?.toString()} + {getDateTimeString(endpoint.lastActive) || "N/A"} Usage diff --git a/frontend/src/components/EndpointList/List.tsx b/frontend/src/components/EndpointList/List.tsx index 2934c0eb..9e0f731b 100644 --- a/frontend/src/components/EndpointList/List.tsx +++ b/frontend/src/components/EndpointList/List.tsx @@ -6,6 +6,7 @@ import DataTable, { SortOrder, TableColumn } from "react-data-table-component"; import { METHOD_TO_COLOR, RISK_TO_COLOR } from "../../constants"; import { getCustomStyles, rowStyles, SkeletonCell } from "../utils/TableUtils"; import { ApiEndpoint } from "@common/types"; +import { getDateTimeString } from "../../utils"; const PAGE_SIZE = 10; @@ -156,14 +157,14 @@ const List: React.FC = React.memo( { name: "First Detected", sortable: true, - selector: (row: ApiEndpoint) => row.firstDetected?.toString() || "", + selector: (row: ApiEndpoint) => getDateTimeString(row.firstDetected) || "N/A", id: "firstDetected", grow: 2, }, { name: "Last Active", sortable: true, - selector: (row: ApiEndpoint) => row.lastActive?.toString() || "", + selector: (row: ApiEndpoint) => getDateTimeString(row.lastActive) || "N/A", id: "lastActive", grow: 2, }, diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts new file mode 100644 index 00000000..9a90ba42 --- /dev/null +++ b/frontend/src/utils.ts @@ -0,0 +1,8 @@ +import { DateTime } from "luxon" + +export const getDateTimeString = (date: Date) => { + if (date) { + return DateTime.fromISO(date.toString()).toLocaleString(DateTime.DATETIME_MED); + } + return null; +} diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 42ae1f54..19d684d4 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1002,6 +1002,11 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2" integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q== +"@types/luxon@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.0.0.tgz#47fb7891e41875fce7018a8bd3d09b204c5621f5" + integrity sha512-Lx+EZoJxUKw4dp8uei9XiUVNlgkYmax5+ovqt6Xf3LzJOnWhlfJw/jLBmqfGVwOP/pDr4HT8bI1WtxK0IChMLw== + "@types/node@^18.0.0": version "18.6.1" resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.1.tgz#828e4785ccca13f44e2fb6852ae0ef11e3e20ba5" @@ -1441,6 +1446,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" +luxon@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.0.1.tgz#6901111d10ad06fd267ad4e4128a84bef8a77299" + integrity sha512-hF3kv0e5gwHQZKz4wtm4c+inDtyc7elkanAsBq+fundaCdUBNJB1dHEGUZIM6SfSBUlbVFduPwEtNjFK8wLtcw== + memoize-one@^5.0.0: version "5.2.1" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"