Merge pull request #10 from riverqueue/bg-dont-link-to-empty-queue-de…

…tail-page remove links to empty placeholder queue detail page
riverqueue · May 23, 2024 · 29d44fe · 29d44fe
2 parents 634160d + 2737d26
commit 29d44fe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 25 deletions.
diff --git a/ui/src/components/JobDetail.tsx b/ui/src/components/JobDetail.tsx
@@ -10,7 +10,6 @@ import { capitalize } from "@utils/string";
 import clsx from "clsx";
 import JobTimeline from "./JobTimeline";
 import { FormEvent, useMemo, useState } from "react";
-import { Link } from "@tanstack/react-router";
 import TopNavTitleOnly from "./TopNavTitleOnly";
 import RelativeTimeFormatter from "./RelativeTimeFormatter";
 import JobAttemptErrors from "./JobAttemptErrors";
@@ -118,7 +117,6 @@ export default function JobDetail({ cancel, job, retry }: JobDetailProps) {
               </h1>
               <p className="mt-2 text-base leading-6 text-slate-600 dark:text-slate-400">
                 ID: <span className="font-mono">{job.id.toString()}</span>
-                {/* {capitalize(job.state)} */}
               </p>
             </div>
             <div className="order-none flex w-full justify-around sm:block sm:w-auto sm:flex-none">
@@ -159,14 +157,8 @@ export default function JobDetail({ cancel, job, retry }: JobDetailProps) {
                 <dt className="text-sm font-medium leading-6 text-slate-900 dark:text-slate-100">
                   Queue
                 </dt>
-                <dd className="mt-1 flex overflow-hidden text-sm leading-6 text-slate-700 dark:text-slate-300 sm:mt-2">
-                  <Link
-                    to="/queues/$name"
-                    className="font-mono text-sm font-semibold leading-6 text-slate-900"
-                    params={{ name: job.queue }}
-                  >
-                    {job.queue}
-                  </Link>
+                <dd className="mt-1 flex overflow-hidden font-mono text-sm leading-6 text-slate-700 dark:text-slate-300 sm:mt-2">
+                  {job.queue}
                 </dd>
               </div>
               <div className="col-span-6 border-t border-slate-100 px-4 py-6 dark:border-slate-800 sm:px-0">

diff --git a/ui/src/components/QueueList.tsx b/ui/src/components/QueueList.tsx
@@ -1,6 +1,5 @@
 import { Queue } from "@services/queues";
 import { PauseCircleIcon, PlayCircleIcon } from "@heroicons/react/24/outline";
-import { Link } from "@tanstack/react-router";
 import TopNavTitleOnly from "@components/TopNavTitleOnly";
 import RelativeTimeFormatter from "@components/RelativeTimeFormatter";
 
@@ -69,22 +68,10 @@ const QueueList = ({
               {queues.map((queue) => (
                 <tr key={queue.name}>
                   <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-slate-900 dark:text-slate-100 sm:w-auto sm:max-w-none sm:pl-0">
-                    <Link
-                      className="font-mono"
-                      to="/queues/$name"
-                      params={{ name: queue.name }}
-                    >
+                    <span className="font-mono font-semibold text-slate-700 dark:text-slate-300">
                       {queue.name}
-                    </Link>
+                    </span>
                     <dl className="font-normal md:hidden">
-                      <dt className="sr-only">Created</dt>
-                      <dd className="mt-1 truncate text-slate-700 dark:text-slate-300">
-                        <RelativeTimeFormatter
-                          time={queue.createdAt}
-                          addSuffix
-                          includeSeconds
-                        />
-                      </dd>
                       <dt className="sr-only sm:hidden">Available</dt>
                       <dd className="mt-1 truncate text-slate-700 dark:text-slate-300 sm:hidden">
                         {queue.countAvailable} available
@@ -93,6 +80,14 @@ const QueueList = ({
                       <dd className="mt-1 truncate text-slate-700 dark:text-slate-300 sm:hidden">
                         {queue.countRunning} running
                       </dd>
+                      <dt className="sr-only">Created</dt>
+                      <dd className="mt-1 truncate text-slate-700 dark:text-slate-300">
+                        <RelativeTimeFormatter
+                          time={queue.createdAt}
+                          addSuffix
+                          includeSeconds
+                        />
+                      </dd>
                     </dl>
                   </td>
                   <td className="hidden px-3 py-4 text-right text-sm text-slate-500 dark:text-slate-400 md:table-cell">