Add run details pop out page (#1335)

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/runs/[runID]/page.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { RunDetails } from '@inngest/components/RunDetailsV2';
+
+import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
+import { getFragmentData, graphql } from '@/gql';
+import LoadingIcon from '@/icons/LoadingIcon';
+import { useGraphQLQuery } from '@/utils/useGraphQLQuery';
+
+const TraceDetailsFragment = graphql(`
+  fragment TraceDetails on RunTraceSpan {
+    name
+    status
+    attempts
+    queuedAt
+    startedAt
+    endedAt
+    isRoot
+    outputID
+    spanID
+    stepOp
+    stepInfo {
+      __typename
+      ... on InvokeStepInfo {
+        triggeringEventID
+        functionID
+        timeout
+        returnEventID
+        runID
+        timedOut
+      }
+      ... on SleepStepInfo {
+        sleepUntil
+      }
+      ... on WaitForEventStepInfo {
+        eventName
+        expression
+        timeout
+        foundEventID
+        timedOut
+      }
+    }
+  }
+`);
+
+const QueryDocument = graphql(`
+  query GetRunTrace($envID: ID!, $runID: String!) {
+    workspace(id: $envID) {
+      run(runID: $runID) {
+        function {
+          app {
+            name
+          }
+          name
+        }
+        trace {
+          ...TraceDetails
+          childrenSpans {
+            ...TraceDetails
+            childrenSpans {
+              ...TraceDetails
+            }
+          }
+        }
+      }
+    }
+  }
+`);
+
+type Props = {
+  params: {
+    runID: string;
+  };
+};
+
+export default function Page({ params }: Props) {
+  const env = useEnvironment();
+
+  const res = useGraphQLQuery({
+    //   const [res] = useQuery({
+    query: QueryDocument,
+    variables: {
+      envID: env.id,
+      runID: params.runID,
+    },
+  });
+  if (res.error) {
+    throw res.error;
+  }
+  if (res.isLoading && !res.data) {
+    return <Loading />;
+  }
+  const { run } = res.data.workspace;
+  if (!run) {
+    throw new Error('missing run');
+  }
+  const { function: fn } = run;
+  if (!fn) {
+    throw new Error('missing function');
+  }
+  const { trace } = run;
+  if (!trace) {
+    throw new Error('missing trace');
+  }
+
+  async function getOutput() {
+    return null;
+  }
+
+  return (
+    <RunDetails
+      app={fn.app}
+      fn={fn}
+      getOutput={getOutput}
+      run={{
+        id: params.runID,
+        output: null,
+        trace: getFragmentData(TraceDetailsFragment, trace),
+      }}
+    />
+  );
+}
+
+function Loading() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="flex flex-col items-center justify-center gap-2">
+        <LoadingIcon />
+        <div>Loading</div>
+      </div>
+    </div>
+  );
+}

ui/apps/dashboard/src/gql/gql.ts

@@ -73,6 +73,8 @@ const documents = {
     "\n  mutation RotateSigningKey($envID: UUID!) {\n    rotateSigningKey(envID: $envID) {\n      createdAt\n    }\n  }\n": types.RotateSigningKeyDocument,
     "\n  query GetSigningKey($environmentID: ID!) {\n    environment: workspace(id: $environmentID) {\n      webhookSigningKey\n    }\n  }\n": types.GetSigningKeyDocument,
     "\n  query GetSigningKeys($envID: ID!) {\n    environment: workspace(id: $envID) {\n      signingKeys {\n        createdAt\n        decryptedValue\n        id\n        isActive\n        user {\n          email\n          name\n        }\n      }\n    }\n  }\n": types.GetSigningKeysDocument,
+    "\n  fragment TraceDetails on RunTraceSpan {\n    name\n    status\n    attempts\n    queuedAt\n    startedAt\n    endedAt\n    isRoot\n    outputID\n    spanID\n    stepOp\n    stepInfo {\n      __typename\n      ... on InvokeStepInfo {\n        triggeringEventID\n        functionID\n        timeout\n        returnEventID\n        runID\n        timedOut\n      }\n      ... on SleepStepInfo {\n        sleepUntil\n      }\n      ... on WaitForEventStepInfo {\n        eventName\n        expression\n        timeout\n        foundEventID\n        timedOut\n      }\n    }\n  }\n": types.TraceDetailsFragmentDoc,
+    "\n  query GetRunTrace($envID: ID!, $runID: String!) {\n    workspace(id: $envID) {\n      run(runID: $runID) {\n        function {\n          app {\n            name\n          }\n          name\n        }\n        trace {\n          ...TraceDetails\n          childrenSpans {\n            ...TraceDetails\n            childrenSpans {\n              ...TraceDetails\n            }\n          }\n        }\n      }\n    }\n  }\n": types.GetRunTraceDocument,
     "\n  query UnattachedSync($syncID: ID!) {\n    sync: deploy(id: $syncID) {\n      commitAuthor\n      commitHash\n      commitMessage\n      commitRef\n      error\n      framework\n      id\n      lastSyncedAt\n      platform\n      repoURL\n      sdkLanguage\n      sdkVersion\n      status\n      removedFunctions: removedFunctions {\n        id\n        name\n        slug\n      }\n      syncedFunctions: deployedFunctions {\n        id\n        name\n        slug\n      }\n      url\n      vercelDeploymentID\n      vercelDeploymentURL\n      vercelProjectID\n      vercelProjectURL\n    }\n  }\n": types.UnattachedSyncDocument,
     "\n  query UnattachedSyncs($envID: ID!) {\n    environment: workspace(id: $envID) {\n      syncs: unattachedSyncs(first: 40) {\n        commitAuthor\n        commitHash\n        commitMessage\n        commitRef\n        framework\n        id\n        lastSyncedAt\n        platform\n        repoURL\n        sdkLanguage\n        sdkVersion\n        status\n        url\n        vercelDeploymentID\n        vercelDeploymentURL\n        vercelProjectID\n        vercelProjectURL\n      }\n    }\n  }\n": types.UnattachedSyncsDocument,
     "\n  query GetBillableSteps($month: Int!, $year: Int!) {\n    billableStepTimeSeries(timeOptions: { month: $month, year: $year }) {\n      data {\n        time\n        value\n      }\n    }\n  }\n": types.GetBillableStepsDocument,
@@ -356,6 +358,14 @@ export function graphql(source: "\n  query GetSigningKey($environmentID: ID!) {\
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query GetSigningKeys($envID: ID!) {\n    environment: workspace(id: $envID) {\n      signingKeys {\n        createdAt\n        decryptedValue\n        id\n        isActive\n        user {\n          email\n          name\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetSigningKeys($envID: ID!) {\n    environment: workspace(id: $envID) {\n      signingKeys {\n        createdAt\n        decryptedValue\n        id\n        isActive\n        user {\n          email\n          name\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment TraceDetails on RunTraceSpan {\n    name\n    status\n    attempts\n    queuedAt\n    startedAt\n    endedAt\n    isRoot\n    outputID\n    spanID\n    stepOp\n    stepInfo {\n      __typename\n      ... on InvokeStepInfo {\n        triggeringEventID\n        functionID\n        timeout\n        returnEventID\n        runID\n        timedOut\n      }\n      ... on SleepStepInfo {\n        sleepUntil\n      }\n      ... on WaitForEventStepInfo {\n        eventName\n        expression\n        timeout\n        foundEventID\n        timedOut\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment TraceDetails on RunTraceSpan {\n    name\n    status\n    attempts\n    queuedAt\n    startedAt\n    endedAt\n    isRoot\n    outputID\n    spanID\n    stepOp\n    stepInfo {\n      __typename\n      ... on InvokeStepInfo {\n        triggeringEventID\n        functionID\n        timeout\n        returnEventID\n        runID\n        timedOut\n      }\n      ... on SleepStepInfo {\n        sleepUntil\n      }\n      ... on WaitForEventStepInfo {\n        eventName\n        expression\n        timeout\n        foundEventID\n        timedOut\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query GetRunTrace($envID: ID!, $runID: String!) {\n    workspace(id: $envID) {\n      run(runID: $runID) {\n        function {\n          app {\n            name\n          }\n          name\n        }\n        trace {\n          ...TraceDetails\n          childrenSpans {\n            ...TraceDetails\n            childrenSpans {\n              ...TraceDetails\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetRunTrace($envID: ID!, $runID: String!) {\n    workspace(id: $envID) {\n      run(runID: $runID) {\n        function {\n          app {\n            name\n          }\n          name\n        }\n        trace {\n          ...TraceDetails\n          childrenSpans {\n            ...TraceDetails\n            childrenSpans {\n              ...TraceDetails\n            }\n          }\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */