From aaa683e48ac2e4644cc4cb21badf58bda0e1c6ee Mon Sep 17 00:00:00 2001
From: Nikhil Shahi <nshahi1998@gmail.com>
Date: Sun, 7 Aug 2022 20:04:34 -0500
Subject: [PATCH] add date time

---
 frontend/package.json                         |  2 ++
 frontend/src/components/Endpoint/Overview.tsx |  7 ++++---
 frontend/src/components/EndpointList/List.tsx |  5 +++--
 frontend/src/utils.ts                         |  8 ++++++++
 frontend/yarn.lock                            | 10 ++++++++++
 5 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/utils.ts

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<EndpointOverviewProps> = React.memo(
             </GridItem>
             <GridItem>
               <DataHeading>First Detected</DataHeading>
-              <DataAttribute>{endpoint.firstDetected?.toString()}</DataAttribute>
+              <DataAttribute>{getDateTimeString(endpoint.firstDetected) || "N/A"}</DataAttribute>
             </GridItem>
             <GridItem>
               <DataHeading>Last Active</DataHeading>
-              <DataAttribute>{endpoint.lastActive?.toString()}</DataAttribute>
+              <DataAttribute>{getDateTimeString(endpoint.lastActive) || "N/A"}</DataAttribute>
             </GridItem>
             <GridItem w="100%" colSpan={2}>
               <DataHeading>Usage</DataHeading>
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<EndpointTablesProps> = 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"