feat: show credit owner for runs (#1561)

instill-ai · Oct 23, 2024 · 93a275a · 93a275a
1 parent f683265
commit 93a275a
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 14 deletions.
diff --git a/packages/sdk/src/model/types.ts b/packages/sdk/src/model/types.ts
@@ -204,6 +204,7 @@ export type ModelRun = {
   taskInputs: GeneralRecord[];
   taskOutputs: GeneralRecord[];
   creditAmount: Nullable<number>;
+  requesterId: string;
 };
 
 export type ListModelRunsResponse = {

diff --git a/packages/sdk/src/vdp/pipeline/types.ts b/packages/sdk/src/vdp/pipeline/types.ts
@@ -274,6 +274,7 @@ export type PipelineRun = {
   creditAmount: Nullable<number>;
   error: Nullable<string>;
   dataSpecification: DataSpecification;
+  requesterId: string;
 };
 
 export type ListPaginatedNamespacePipelineRunComponentsRequest = {

diff --git a/packages/toolkit/src/view/model/view-model/ModelRunViews/List.tsx b/packages/toolkit/src/view/model/view-model/ModelRunViews/List.tsx
@@ -117,7 +117,7 @@ export const ModelRunList = ({ model }: ModelRunListProps) => {
         header: () => <div className="text-left">Run ID</div>,
         cell: ({ row }) => {
           return (
-            <div className="font-normal text-semantic-bg-secondary-secondary break-all">
+            <div className="font-normal text-semantic-bg-secondary-secondary whitespace-nowrap overflow-hidden text-ellipsis">
               <Link
                 href={`/${owner.id}/models/${model?.id}/runs/${row.getValue("uid")}`}
                 className="text-semantic-accent-default hover:underline"
@@ -225,6 +225,23 @@ export const ModelRunList = ({ model }: ModelRunListProps) => {
           );
         },
       },
+      {
+        accessorKey: "requesterId",
+        header: () => <div className="text-left">Credit Owner</div>,
+        cell: ({ row }) => {
+          return (
+            <div className="font-normal text-semantic-bg-secondary-secondary break-all">
+              <Link
+                target="_blank"
+                className="text-semantic-accent-default hover:underline"
+                href={`/${row.getValue("requesterId")}`}
+              >
+                {row.getValue("requesterId")}
+              </Link>
+            </div>
+          );
+        },
+      },
     ];
 
     if (env("NEXT_PUBLIC_APP_ENV") === "CLOUD") {
@@ -264,7 +281,7 @@ export const ModelRunList = ({ model }: ModelRunListProps) => {
   }
 
   return (
-    <div className="[&_table]:table-fixed [&_table_td]:align-top [&_table_th]:w-40 [&_table_th:nth-child(1)]:w-auto [&_table_th:nth-child(7)]:w-52 [&_table_th:nth-child(8)]:w-28">
+    <div className="[&_table]:table-fixed [&_table_td]:align-top [&_table_th]:w-40 [&_table_th:nth-child(1)]:w-auto [&_table_th:nth-child(1)]:min-w-24 [&_table_th:nth-child(7)]:w-52 [&_table_th:nth-child(8)]:w-52 [&_table_th:nth-child(9)]:w-28">
       <DataTable
         columns={columns}
         data={modelRuns.isSuccess ? modelRuns.data.runs : []}

diff --git a/packages/toolkit/src/view/model/view-model/ModelRunViews/Run.tsx b/packages/toolkit/src/view/model/view-model/ModelRunViews/Run.tsx
@@ -145,6 +145,21 @@ export const ModelRun = ({ id, model }: ModelRunProps) => {
                 : null}
             </b>
           </div>
+          {env("NEXT_PUBLIC_APP_ENV") === "CLOUD" ? (
+            <div>
+              Credits <b>{modelRun?.creditAmount}</b>
+            </div>
+          ) : null}
+          <div>
+            Credit Owner{" "}
+            <Link
+              target="_blank"
+              className="text-semantic-accent-default hover:underline"
+              href={`/${modelRun?.requesterId}`}
+            >
+              <b>{modelRun?.requesterId}</b>
+            </Link>
+          </div>
           <div>
             Runner{" "}
             <Link
@@ -155,11 +170,6 @@ export const ModelRun = ({ id, model }: ModelRunProps) => {
               <b>{modelRun?.runnerId}</b>
             </Link>
           </div>
-          {env("NEXT_PUBLIC_APP_ENV") === "CLOUD" ? (
-            <div>
-              Credits <b>{modelRun?.creditAmount}</b>
-            </div>
-          ) : null}
         </div>
       </div>
       <div className="flex flex-row">

diff --git a/packages/toolkit/src/view/pipeline/view-pipeline/PipelineRunViews/List.tsx b/packages/toolkit/src/view/pipeline/view-pipeline/PipelineRunViews/List.tsx
@@ -103,7 +103,7 @@ export const PipelineRunList = ({ pipeline }: PipelineRunListProps) => {
         header: () => <div className="text-left">Run ID</div>,
         cell: ({ row }) => {
           return (
-            <div className="font-normal text-semantic-bg-secondary-secondary break-all">
+            <div className="font-normal text-semantic-bg-secondary-secondary whitespace-nowrap overflow-hidden text-ellipsis">
               <Link
                 href={`/${ownerId}/pipelines/${pipeline?.id}/runs/${row.getValue("pipelineRunUid")}`}
                 className="text-semantic-accent-default hover:underline"
@@ -220,6 +220,23 @@ export const PipelineRunList = ({ pipeline }: PipelineRunListProps) => {
           );
         },
       },
+      {
+        accessorKey: "requesterId",
+        header: () => <div className="text-left">Credit Owner</div>,
+        cell: ({ row }) => {
+          return (
+            <div className="font-normal text-semantic-bg-secondary-secondary break-all">
+              <Link
+                target="_blank"
+                className="text-semantic-accent-default hover:underline"
+                href={`/${row.getValue("requesterId")}`}
+              >
+                {row.getValue("requesterId")}
+              </Link>
+            </div>
+          );
+        },
+      },
     ];
 
     if (env("NEXT_PUBLIC_APP_ENV") === "CLOUD") {
@@ -274,7 +291,7 @@ export const PipelineRunList = ({ pipeline }: PipelineRunListProps) => {
   }
 
   return (
-    <div className="[&_table]:table-fixed [&_table_td]:align-top [&_table_th]:w-40 [&_table_th:nth-child(1)]:w-auto [&_table_th:nth-child(7)]:w-52 [&_table_th:nth-child(8)]:w-28">
+    <div className="[&_table]:table-fixed [&_table_td]:align-top [&_table_th]:w-40 [&_table_th:nth-child(1)]:w-auto [&_table_th:nth-child(7)]:w-52 [&_table_th:nth-child(8)]:w-52 [&_table_th:nth-child(9)]:w-28">
       <DataTable
         columns={columns}
         data={pipelineRuns.isSuccess ? pipelineRuns.data.pipelineRuns : []}

diff --git a/packages/toolkit/src/view/pipeline/view-pipeline/PipelineRunViews/Run.tsx b/packages/toolkit/src/view/pipeline/view-pipeline/PipelineRunViews/Run.tsx
@@ -177,6 +177,21 @@ export const PipelineRunView = ({ id, pipeline }: PipelineRunProps) => {
                   : null}
               </b>
             </div>
+            {env("NEXT_PUBLIC_APP_ENV") === "CLOUD" ? (
+              <div>
+                Credits <b>{pipelineRun?.creditAmount}</b>
+              </div>
+            ) : null}
+            <div>
+              Credit Owner{" "}
+              <Link
+                target="_blank"
+                className="text-semantic-accent-default hover:underline"
+                href={`/${pipelineRun?.requesterId}`}
+              >
+                <b>{pipelineRun?.requesterId}</b>
+              </Link>
+            </div>
             <div>
               Runner{" "}
               <Link
@@ -187,11 +202,6 @@ export const PipelineRunView = ({ id, pipeline }: PipelineRunProps) => {
                 <b>{pipelineRun?.runnerId}</b>
               </Link>
             </div>
-            {env("NEXT_PUBLIC_APP_ENV") === "CLOUD" ? (
-              <div>
-                Credits <b>{pipelineRun?.creditAmount}</b>
-              </div>
-            ) : null}
           </div>
         </div>
         <div>