Render RunDetails inside row (#1349)

inngest · May 13, 2024 · 2f4146d · 2f4146d
1 parent 16c29e9
commit 2f4146d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/...rganization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/RunsTable.tsx b/...rganization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/RunsTable.tsx
@@ -110,16 +110,16 @@ export default function RunsTable({
         {isEmpty && (
           <tr>
             {/* TODO: when we introduce column visibility options, this colSpan has to be dinamically calculated depending on # visible columns */}
-            <td className="pt-28 text-center align-top	font-medium text-slate-600" colSpan={5}>
+            <td className="pt-28 text-center align-top font-medium text-slate-600" colSpan={5}>
               No results were found.
             </td>
           </tr>
         )}
         {!isEmpty &&
           table.getRowModel().rows.map((row) => (
-            <Fragment key={row.id}>
+            <Fragment key={row.original.id}>
               <tr
-                key={row.id}
+                key={row.original.id}
                 className="h-12 cursor-pointer hover:bg-sky-50"
                 onClick={row.getToggleExpandedHandler()}
               >
@@ -130,9 +130,10 @@ export default function RunsTable({
                 ))}
               </tr>
               {row.getIsExpanded() && (
-                <tr>
+                // Overrides tableStyles divider color
+                <tr className="!border-transparent">
                   <td colSpan={row.getVisibleCells().length}>
-                    {renderSubComponent({ id: row.id })}
+                    {renderSubComponent({ id: row.original.id })}
                   </td>
                 </tr>
               )}

diff --git a/...pp/(organization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/page.tsx b/...pp/(organization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/page.tsx
@@ -17,6 +17,7 @@ import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[env
 import { graphql } from '@/gql';
 import { FunctionRunTimeFieldV2 } from '@/gql/graphql';
 import { useSearchParam, useStringArraySearchParam } from '@/utils/useSearchParam';
+import Page from '../../../runs/[runID]/page';
 import RunsTable from './RunsTable';
 import TimeFilter from './TimeFilter';
 import { toRunStatuses, toTimeField } from './utils';
@@ -48,8 +49,11 @@ const GetRunsDocument = graphql(`
 `);
 
 const renderSubComponent = ({ id }: { id: string }) => {
-  /* TODO: Render the timeline instead */
-  return <p>Subrow {id}</p>;
+  return (
+    <div className="mx-5">
+      <Page params={{ runID: id }} />
+    </div>
+  );
 };
 
 export default function RunsPage() {