Show additional info on DevTools unprocessed entities table

* Location path (so that it's easier to search the failed entity from the YAML URL)
* Time info of last discovery and next refresh time so that users can be aware of it and can sort the errors based on the time.

Signed-off-by: Himanshu Mishra <himanshu@orkohunter.net>

plugins/catalog-unprocessed-entities/package.json

@@ -45,6 +45,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "luxon": "^3.5.0",
     "react-use": "^17.2.4"
   },
   "devDependencies": {

plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { useState } from 'react';
-
+import { DateTime } from 'luxon';
 import {
   ErrorPanel,
   MarkdownContent,
@@ -88,6 +88,24 @@ const RenderErrorContext = ({
   return null;
 };
 
+/**
+ * Converts input datetime which lacks timezone info into user's local time so that they can
+ * easily understand the times.
+ */
+const convertTimeToLocalTimezone = (strDateTime: string | Date) => {
+  const dateTime = DateTime.fromFormat(
+    strDateTime.toLocaleString(),
+    'yyyy-MM-dd hh:mm:ss',
+    {
+      zone: 'UTC',
+    },
+  );
+
+  const dateTimeLocalTz = dateTime.setZone(DateTime.local().zoneName);
+
+  return dateTimeLocalTz.toFormat('yyyy-MM-dd hh:mm:ss ZZZZ');
+};
+
 export const FailedEntities = () => {
   const classes = useStyles();
   const unprocessedApi = useApi(catalogUnprocessedEntitiesApiRef);
@@ -140,6 +158,13 @@ export const FailedEntities = () => {
       render: (rowData: UnprocessedEntity | {}) =>
         (rowData as UnprocessedEntity).entity_ref,
     },
+    {
+      title: <Typography>Location Path</Typography>,
+      sorting: true,
+      field: 'location_key',
+      render: (rowData: UnprocessedEntity | {}) =>
+        (rowData as UnprocessedEntity).location_key,
+    },
     {
       title: <Typography>Kind</Typography>,
       sorting: true,
@@ -156,7 +181,25 @@ export const FailedEntities = () => {
         'unknown',
     },
     {
-      title: <Typography>Raw</Typography>,
+      title: <Typography>Last Discovery At</Typography>,
+      sorting: true,
+      field: 'last_discovery_at',
+      render: (rowData: UnprocessedEntity | {}) =>
+        convertTimeToLocalTimezone(
+          (rowData as UnprocessedEntity).last_discovery_at,
+        ) || 'unknown',
+    },
+    {
+      title: <Typography>Next Refresh At</Typography>,
+      sorting: true,
+      field: 'next_update_at',
+      render: (rowData: UnprocessedEntity | {}) =>
+        convertTimeToLocalTimezone(
+          (rowData as UnprocessedEntity).next_update_at,
+        ) || 'unknown',
+    },
+    {
+      title: <Typography>Raw Entity Definition</Typography>,
       sorting: false,
       render: (rowData: UnprocessedEntity | {}) => (
         <EntityDialog entity={rowData as UnprocessedEntity} />

yarn.lock

@@ -5953,6 +5953,7 @@ __metadata:
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^15.0.0
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
+    luxon: ^3.5.0
     react-use: ^17.2.4
   peerDependencies:
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
@@ -33393,7 +33394,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"luxon@npm:^3.0.0, luxon@npm:^3.2.1, luxon@npm:^3.4.3, luxon@npm:~3.4.0":
+"luxon@npm:^3.0.0, luxon@npm:^3.2.1, luxon@npm:^3.4.3, luxon@npm:^3.5.0":
+  version: 3.5.0
+  resolution: "luxon@npm:3.5.0"
+  checksum: f290fe5788c8e51e748744f05092160d4be12150dca70f9fadc0d233e53d60ce86acd82e7d909a114730a136a77e56f0d3ebac6141bbb82fd310969a4704825b
+  languageName: node
+  linkType: hard
+
+"luxon@npm:~3.4.0":
   version: 3.4.4
   resolution: "luxon@npm:3.4.4"
   checksum: 36c1f99c4796ee4bfddf7dc94fa87815add43ebc44c8934c924946260a58512f0fd2743a629302885df7f35ccbd2d13f178c15df046d0e3b6eb71db178f1c60c