Add filepath to Unrecognized and timestamp to queue tasks. (#844)

src/components/Utilities/UtilitiesTable.tsx

@@ -109,7 +109,7 @@ const Row = (
         ? <Icon path={mdiLoading} size={1} spin className="m-auto text-panel-text-primary" />
         : (
           <>
-            <div className="flex">
+            <div className="flex items-center">
               {columns.map(column => (
                 <div className={cx(column.className, 'px-2')} key={`${column.id}-${selectRowId(row)}`}>
                   {column.item(row)}

src/components/Utilities/constants.tsx

@@ -29,7 +29,15 @@ export const staticColumns: UtilityHeaderType<FileType>[] = [
     name: 'Filename',
     className: 'line-clamp-2 grow basis-0 overflow-hidden',
     item: file => (
-      <div title={file.Locations[0]?.RelativePath}>{file.Locations[0]?.RelativePath.split(/[/\\]/g).pop()}</div>
+      <div className="flex flex-col" title={file.Locations[0]?.RelativePath.match(/[^\\]*$/)?.[0]}>
+        <span className="line-clamp-1 text-sm font-semibold opacity-65">
+          {file.Locations[0]?.RelativePath.match(/^(.*)\\/)?.[1] ?? 'Root Level'}
+        </span>
+        <span className="line-clamp-1">
+          {file.Locations[0]?.RelativePath?.split(/[/\\]/g)
+            .pop()}
+        </span>
+      </div>
     ),
   },
   {

src/pages/dashboard/panels/QueueProcessor.tsx

@@ -12,6 +12,7 @@ import {
   useQueueResumeMutation,
 } from '@/core/react-query/queue/mutations';
 import { useQueueItemsQuery } from '@/core/react-query/queue/queries';
+import { dayjs } from '@/core/util';
 import useEventCallback from '@/hooks/useEventCallback';
 
 import type { RootState } from '@/core/store';
@@ -78,7 +79,9 @@ const Title = () => {
 const QueueItem = ({ item }: { item: QueueItemType }) => (
   <div className="mr-3 flex items-center justify-between gap-x-2 rounded-md p-3 even:bg-panel-background-alt">
     <div className="flex flex-col gap-y-1 break-all">
-      <span className="text-sm opacity-65">{item.Title}</span>
+      <span className="text-sm opacity-65">
+        {`${item.Title} | ${dayjs(item.StartTime).format('MMMM DD YYYY, HH:mm')}`}
+      </span>
       {map(item.Details, (value, key) => `${key}: ${value}`).join(', ')}
     </div>
     {item.IsRunning && <Icon path={mdiLoading} size={1} spin className="shrink-0 text-panel-text-primary" />}