[POR-1673] Implement Job History in New View

api/server/handlers/porter_app/job_status.go

@@ -0,0 +1,116 @@
+package porter_app
+
+import (
+	"net/http"
+
+	"connectrpc.com/connect"
+	porterv1 "github.com/porter-dev/api-contracts/generated/go/porter/v1"
+	"github.com/porter-dev/porter/api/server/authz"
+	"github.com/porter-dev/porter/api/server/handlers"
+	"github.com/porter-dev/porter/api/server/shared"
+	"github.com/porter-dev/porter/api/server/shared/apierrors"
+	"github.com/porter-dev/porter/api/server/shared/config"
+	"github.com/porter-dev/porter/api/types"
+	"github.com/porter-dev/porter/internal/kubernetes"
+	"github.com/porter-dev/porter/internal/models"
+	"github.com/porter-dev/porter/internal/telemetry"
+)
+
+// JobStatusHandler is the handler for GET /apps/jobs
+type JobStatusHandler struct {
+	handlers.PorterHandlerReadWriter
+	authz.KubernetesAgentGetter
+}
+
+// NewJobStatusHandler returns a new JobStatusHandler
+func NewJobStatusHandler(
+	config *config.Config,
+	decoderValidator shared.RequestDecoderValidator,
+	writer shared.ResultWriter,
+) *JobStatusHandler {
+	return &JobStatusHandler{
+		PorterHandlerReadWriter: handlers.NewDefaultPorterHandler(config, decoderValidator, writer),
+		KubernetesAgentGetter:   authz.NewOutOfClusterAgentGetter(config),
+	}
+}
+
+// JobStatusRequest is the expected format for a request body on GET /apps/jobs
+type JobStatusRequest struct {
+	DeploymentTargetID string `schema:"deployment_target_id"`
+	JobName            string `schema:"job_name"`
+}
+
+func (c *JobStatusHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	ctx, span := telemetry.NewSpan(r.Context(), "serve-job-status")
+	defer span.End()
+
+	request := &JobStatusRequest{}
+	if ok := c.DecodeAndValidate(w, r, request); !ok {
+		err := telemetry.Error(ctx, span, nil, "invalid request")
+		c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusBadRequest))
+		return
+	}
+
+	cluster, _ := ctx.Value(types.ClusterScope).(*models.Cluster)
+	project, _ := ctx.Value(types.ProjectScope).(*models.Project)
+
+	if request.DeploymentTargetID == "" {
+		err := telemetry.Error(ctx, span, nil, "must provide deployment target id")
+		c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusBadRequest))
+		return
+	}
+	telemetry.WithAttributes(span, telemetry.AttributeKV{Key: "deployment-target-id", Value: request.DeploymentTargetID})
+
+	deploymentTargetDetailsReq := connect.NewRequest(&porterv1.DeploymentTargetDetailsRequest{
+		ProjectId:          int64(project.ID),
+		DeploymentTargetId: request.DeploymentTargetID,
+	})
+
+	deploymentTargetDetailsResp, err := c.Config().ClusterControlPlaneClient.DeploymentTargetDetails(ctx, deploymentTargetDetailsReq)
+	if err != nil {
+		err := telemetry.Error(ctx, span, err, "error getting deployment target details from cluster control plane client")
+		c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusBadRequest))
+		return
+	}
+
+	if deploymentTargetDetailsResp == nil || deploymentTargetDetailsResp.Msg == nil {
+		err := telemetry.Error(ctx, span, err, "deployment target details resp is nil")
+		c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusInternalServerError))
+		return
+	}
+
+	if deploymentTargetDetailsResp.Msg.ClusterId != int64(cluster.ID) {
+		err := telemetry.Error(ctx, span, err, "deployment target details resp cluster id does not match cluster id")
+		c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusInternalServerError))
+		return
+	}
+
+	namespace := deploymentTargetDetailsResp.Msg.Namespace
+	telemetry.WithAttributes(span, telemetry.AttributeKV{Key: "namespace", Value: namespace})
+
+	agent, err := c.GetAgent(r, cluster, "")
+	if err != nil {
+		err = telemetry.Error(ctx, span, err, "unable to get agent")
+		c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusInternalServerError))
+		return
+	}
+
+	labels := []kubernetes.Label{{
+		Key: "porter.run/deployment-target-id",
+		Val: request.DeploymentTargetID,
+	}}
+	if request.JobName != "" {
+		labels = append(labels, kubernetes.Label{
+			Key: "porter.run/service-name",
+			Val: request.JobName,
+		})
+	}
+	jobs, err := agent.ListJobsByLabel(namespace, labels...)
+	if err != nil {
+		err = telemetry.Error(ctx, span, err, "error listing jobs")
+		c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusInternalServerError))
+		return
+	}
+
+	c.WriteResult(w, r, jobs)
+}

api/server/router/porter_app.go

@@ -1009,6 +1009,35 @@ func getPorterAppRoutes(
 		Router:   r,
 	})
 
+	// GET /api/projects/{project_id}/clusters/{cluster_id}/apps/jobs -> cluster.NewJobStatusHandler
+	appJobStatusEndpoint := factory.NewAPIEndpoint(
+		&types.APIRequestMetadata{
+			Verb:   types.APIVerbGet,
+			Method: types.HTTPVerbGet,
+			Path: &types.Path{
+				Parent:       basePath,
+				RelativePath: fmt.Sprintf("%s/jobs", relPathV2),
+			},
+			Scopes: []types.PermissionScope{
+				types.UserScope,
+				types.ProjectScope,
+				types.ClusterScope,
+			},
+		},
+	)
+
+	appJobStatusHandler := porter_app.NewJobStatusHandler(
+		config,
+		factory.GetDecoderValidator(),
+		factory.GetResultWriter(),
+	)
+
+	routes = append(routes, &router.Route{
+		Endpoint: appJobStatusEndpoint,
+		Handler:  appJobStatusHandler,
+		Router:   r,
+	})
+
 	// POST /api/projects/{project_id}/clusters/{cluster_id}/apps/{porter_app_name}/revisions/{app_revision_id} -> porter_app.NewUpdateAppRevisionStatusHandler
 	updateAppRevisionStatusEndpoint := factory.NewAPIEndpoint(
 		&types.APIRequestMetadata{

dashboard/src/components/OldTable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import {
   Column,
@@ -10,6 +10,7 @@ import {
 import Loading from "components/Loading";
 import Selector from "./Selector";
 import loading from "assets/loading.gif";
+import Button from "./porter/Button";
 
 const GlobalFilter: React.FunctionComponent<any> = ({
   setGlobalFilter,
@@ -78,6 +79,7 @@ const Table: React.FC<TableProps> = ({
   onRefresh,
   isRefreshing = false,
 }) => {
+  const [currentPageIndex, setCurrentPageIndex] = useState<number>(0);
   const {
     getTableProps,
     getTableBodyProps,
@@ -101,6 +103,10 @@ const Table: React.FC<TableProps> = ({
     {
       columns: columnsData,
       data,
+      initialState: {
+        pageIndex: currentPageIndex,
+      },
+      autoResetPage: false,
     },
     useGlobalFilter,
     usePagination
@@ -232,14 +238,21 @@ const Table: React.FC<TableProps> = ({
           <PaginationActionsWrapper>
             <PaginationAction
               disabled={!canPreviousPage}
-              onClick={previousPage}
+              onClick={() => {
+                previousPage();
+                setCurrentPageIndex(currentPageIndex - 1);
+              }}
+              type={"button"}
             >
               {"<"}
             </PaginationAction>
             <PageCounter>
-              {pageIndex + 1} of {pageCount}
+              {currentPageIndex + 1} of {pageCount}
             </PageCounter>
-            <PaginationAction disabled={!canNextPage} onClick={nextPage}>
+            <PaginationAction disabled={!canNextPage} onClick={() => {
+              nextPage();
+              setCurrentPageIndex(currentPageIndex + 1);
+            }} type={"button"}>
               {">"}
             </PaginationAction>
           </PaginationActionsWrapper>
@@ -307,7 +320,7 @@ export const StyledTr = styled.tr`
   background: ${(props: StyledTrProps) => (props.selected ? "#ffffff11" : "")};
   :hover {
     background: ${(props: StyledTrProps) =>
-      props.disableHover ? "" : "#ffffff22"};
+    props.disableHover ? "" : "#ffffff22"};
   }
   cursor: ${(props: StyledTrProps) =>
     props.enablePointer ? "pointer" : "unset"};

dashboard/src/components/form-components/SelectRow.tsx

@@ -78,6 +78,4 @@ const Label = styled.div<{ displayFlex?: boolean }>`
 
 const StyledSelectRow = styled.div<{ displayFlex?: boolean }>`
   display: ${props => props.displayFlex ? "flex" : "block"};
-  margin-bottom: 15px;
-  margin-top: 20px;
 `;

dashboard/src/lib/hooks/useJobs.ts

@@ -0,0 +1,93 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import api from "shared/api";
+import { useRevisionIdToNumber } from "./useRevisionList";
+import { z } from "zod";
+import { useQuery } from "@tanstack/react-query";
+
+const jobRunValidator = z.object({
+    metadata: z.object({
+        labels: z.object({
+            "porter.run/app-revision-id": z.string(),
+            "porter.run/service-name": z.string(),
+        }),
+        creationTimestamp: z.string(),
+        uid: z.string(),
+    }),
+    status: z.object({
+        startTime: z.string().optional(),
+        completionTime: z.string().optional(),
+        conditions: z.array(z.object({
+            lastTransitionTime: z.string(),
+        })).default([]),
+        succeeded: z.number().optional(),
+        failed: z.number().optional(),
+    }),
+    revisionNumber: z.number().optional(),
+    jobName: z.string().optional(),
+});
+
+export type JobRun = z.infer<typeof jobRunValidator>;
+
+export const useJobs = (
+    {
+        appName,
+        projectId,
+        clusterId,
+        deploymentTargetId,
+        selectedJobName,
+    }: {
+        appName: string,
+        projectId: number,
+        clusterId: number,
+        deploymentTargetId: string,
+        selectedJobName: string,
+    }
+) => {
+    const [jobRuns, setJobRuns] = useState<JobRun[]>([]);
+
+    const revisionIdToNumber = useRevisionIdToNumber(appName, deploymentTargetId);
+
+    const { data } = useQuery(
+        ["jobRuns", appName, deploymentTargetId, revisionIdToNumber, selectedJobName],
+        async () => {
+            let jobName = selectedJobName === "all" ? "" : selectedJobName;
+            const res = await api.appJobs(
+                "<token>",
+                {
+                    deployment_target_id: deploymentTargetId,
+                    job_name: jobName,
+                },
+                {
+                    project_id: projectId,
+                    cluster_id: clusterId,
+                });
+            const parsed = await z.array(jobRunValidator).parseAsync(res.data);
+            const parsedWithRevision = parsed.map((jobRun) => {
+                const revisionId = jobRun.metadata.labels["porter.run/app-revision-id"];
+                const revisionNumber = revisionIdToNumber[revisionId];
+                return {
+                    ...jobRun,
+                    revisionNumber,
+                    jobName: jobRun.metadata.labels["porter.run/service-name"],
+                };
+            });
+            return parsedWithRevision;
+        },
+        {
+            enabled: revisionIdToNumber != null,
+            refetchInterval: 5000,
+            refetchOnWindowFocus: false,
+        },
+    );
+
+    useEffect(() => {
+        if (data != null) {
+            setJobRuns(data);
+        }
+    }, [data]);
+
+    return {
+        jobRuns,
+    };
+};

dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx

@@ -31,6 +31,7 @@ import Activity from "./tabs/Activity";
 import EventFocusView from "./tabs/activity-feed/events/focus-views/EventFocusView";
 import { z } from "zod";
 import { PorterApp } from "@porter-dev/api-contracts";
+import JobsTab from "./tabs/JobsTab";
 
 // commented out tabs are not yet implemented
 // will be included as support is available based on data from app revisions rather than helm releases
@@ -45,7 +46,7 @@ const validTabs = [
   "build-settings",
   "settings",
   // "helm-values",
-  // "job-history",
+  "job-history",
 ] as const;
 const DEFAULT_TAB = "activity";
 type ValidTab = typeof validTabs[number];
@@ -249,7 +250,7 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
 
       // redirect to the default tab after save
       history.push(`/apps/${porterApp.name}/${DEFAULT_TAB}`);
-    } catch (err) {}
+    } catch (err) { }
   });
 
   useEffect(() => {
@@ -319,11 +320,11 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
             { label: "Environment", value: "environment" },
             ...(latestProto.build
               ? [
-                  {
-                    label: "Build Settings",
-                    value: "build-settings",
-                  },
-                ]
+                {
+                  label: "Build Settings",
+                  value: "build-settings",
+                },
+              ]
               : []),
             { label: "Settings", value: "settings" },
           ]}
@@ -347,6 +348,7 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
           .with("logs", () => <LogsTab />)
           .with("metrics", () => <MetricsTab />)
           .with("events", () => <EventFocusView />)
+          .with("job-history", () => <JobsTab />)
           .otherwise(() => null)}
         <Spacer y={2} />
       </form>

dashboard/src/main/home/app-dashboard/app-view/tabs/JobsTab.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useLatestRevision } from "../LatestRevisionContext";
+import JobsSection from "../../validate-apply/jobs/JobsSection";
+
+const JobsTab: React.FC = () => {
+    const { projectId, clusterId, latestProto, deploymentTargetId } = useLatestRevision();
+
+    const appName = latestProto.name
+
+    return (
+        <>
+            <JobsSection
+                projectId={projectId}
+                clusterId={clusterId}
+                deploymentTargetId={deploymentTargetId}
+                appName={appName}
+                jobNames={Object.keys(latestProto.services).filter(name => latestProto.services[name].config.case === "jobConfig")}
+            />
+        </>
+    );
+};
+
+export default JobsTab;