webui: add history pagination (#4559)

### History pagination ![image](https://github.com/user-attachments/assets/94bfd95c-c52b-443f-8ba2-3fb9c21781cb) ### Node Count ![image](https://github.com/user-attachments/assets/c98cd920-8cc0-4a49-9121-88ab1fa2a0fc) ### Execution Count ![image](https://github.com/user-attachments/assets/3554147b-7458-4d69-afd8-012f1da9e61d) closes #4544 closes #4511
bacalhau-project · Sep 30, 2024 · e5ad51a · e5ad51a
1 parent 569579d
commit e5ad51a
Show file tree

Hide file tree

Showing 13 changed files with 281 additions and 40 deletions.
diff --git a/docs/swagger.json b/docs/swagger.json
@@ -586,7 +586,7 @@
                     "Orchestrator"
                 ],
                 "summary": "Returns the history of a job.",
-                "operationId": "orchestrator/jobHistory",
+                "operationId": "orchestrator/listHistory",
                 "parameters": [
                     {
                         "type": "string",
@@ -615,7 +615,7 @@
                     },
                     {
                         "type": "string",
-                        "description": "Token to get the next page of the jobs",
+                        "description": "Token to get the next page of the history events",
                         "name": "next_token",
                         "in": "query"
                     }
@@ -1944,6 +1944,13 @@
         "models.State-models_ExecutionDesiredStateType": {
             "type": "object",
             "properties": {
+                "Details": {
+                    "description": "Details is a map of additional details about the state.",
+                    "type": "object",
+                    "additionalProperties": {
+                        "type": "string"
+                    }
+                },
                 "Message": {
                     "description": "Message is a human readable message describing the state.",
                     "type": "string"
@@ -1961,6 +1968,13 @@
         "models.State-models_ExecutionStateType": {
             "type": "object",
             "properties": {
+                "Details": {
+                    "description": "Details is a map of additional details about the state.",
+                    "type": "object",
+                    "additionalProperties": {
+                        "type": "string"
+                    }
+                },
                 "Message": {
                     "description": "Message is a human readable message describing the state.",
                     "type": "string"
@@ -1978,6 +1992,13 @@
         "models.State-models_JobStateType": {
             "type": "object",
             "properties": {
+                "Details": {
+                    "description": "Details is a map of additional details about the state.",
+                    "type": "object",
+                    "additionalProperties": {
+                        "type": "string"
+                    }
+                },
                 "Message": {
                     "description": "Message is a human readable message describing the state.",
                     "type": "string"

diff --git a/pkg/publicapi/endpoint/orchestrator/endpoint.go b/pkg/publicapi/endpoint/orchestrator/endpoint.go
@@ -39,7 +39,7 @@ func NewEndpoint(params EndpointParams) *Endpoint {
 	g.GET("/jobs", e.listJobs)
 	g.GET("/jobs/:id", e.getJob)
 	g.DELETE("/jobs/:id", e.stopJob)
-	g.GET("/jobs/:id/history", e.jobHistory)
+	g.GET("/jobs/:id/history", e.listHistory)
 	g.GET("/jobs/:id/executions", e.jobExecutions)
 	g.GET("/jobs/:id/results", e.jobResults)
 	g.GET("/jobs/:id/logs", e.logs)

diff --git a/pkg/publicapi/endpoint/orchestrator/job.go b/pkg/publicapi/endpoint/orchestrator/job.go
@@ -265,9 +265,9 @@ func (e *Endpoint) stopJob(c echo.Context) error {
 	})
 }
 
-// godoc for Orchestrator JobHistory
+// godoc for Orchestrator ListHistory
 //
-//	@ID				orchestrator/jobHistory
+//	@ID				orchestrator/listHistory
 //	@Summary		Returns the history of a job.
 //	@Description	Returns the history of a job.
 //	@Tags			Orchestrator
@@ -277,12 +277,12 @@ func (e *Endpoint) stopJob(c echo.Context) error {
 //	@Param			since			query		string	false	"Only return history since this time"
 //	@Param			event_type		query		string	false	"Only return history of this event type"
 //	@Param			execution_id	query		string	false	"Only return history of this execution ID"
-//	@Param			next_token		query		string	false	"Token to get the next page of the jobs"
+//	@Param			next_token		query		string	false	"Token to get the next page of the history events"
 //	@Success		200				{object}	apimodels.ListJobHistoryResponse
 //	@Failure		400				{object}	string
 //	@Failure		500				{object}	string
 //	@Router			/api/v1/orchestrator/jobs/{id}/history [get]
-func (e *Endpoint) jobHistory(c echo.Context) error {
+func (e *Endpoint) listHistory(c echo.Context) error {
 	ctx := c.Request().Context()
 	jobID := c.Param("id")
 	var args apimodels.ListJobHistoryRequest

diff --git a/pkg/swagger/docs.go b/pkg/swagger/docs.go
diff --git a/pkg/swagger/swagger.json b/pkg/swagger/swagger.json
@@ -586,7 +586,7 @@
                     "Orchestrator"
                 ],
                 "summary": "Returns the history of a job.",
-                "operationId": "orchestrator/jobHistory",
+                "operationId": "orchestrator/listHistory",
                 "parameters": [
                     {
                         "type": "string",
@@ -615,7 +615,7 @@
                     },
                     {
                         "type": "string",
-                        "description": "Token to get the next page of the jobs",
+                        "description": "Token to get the next page of the history events",
                         "name": "next_token",
                         "in": "query"
                     }
@@ -1944,6 +1944,13 @@
         "models.State-models_ExecutionDesiredStateType": {
             "type": "object",
             "properties": {
+                "Details": {
+                    "description": "Details is a map of additional details about the state.",
+                    "type": "object",
+                    "additionalProperties": {
+                        "type": "string"
+                    }
+                },
                 "Message": {
                     "description": "Message is a human readable message describing the state.",
                     "type": "string"
@@ -1961,6 +1968,13 @@
         "models.State-models_ExecutionStateType": {
             "type": "object",
             "properties": {
+                "Details": {
+                    "description": "Details is a map of additional details about the state.",
+                    "type": "object",
+                    "additionalProperties": {
+                        "type": "string"
+                    }
+                },
                 "Message": {
                     "description": "Message is a human readable message describing the state.",
                     "type": "string"
@@ -1978,6 +1992,13 @@
         "models.State-models_JobStateType": {
             "type": "object",
             "properties": {
+                "Details": {
+                    "description": "Details is a map of additional details about the state.",
+                    "type": "object",
+                    "additionalProperties": {
+                        "type": "string"
+                    }
+                },
                 "Message": {
                     "description": "Message is a human readable message describing the state.",
                     "type": "string"

diff --git a/webui/components/jobs/details/JobDetails.tsx b/webui/components/jobs/details/JobDetails.tsx
@@ -21,7 +21,7 @@ const JobDetails = ({ jobId }: { jobId: string }) => {
       Orchestrator.getJob({
         path: { id: jobId },
         query: {
-          include: 'history,executions',
+          include: 'executions',
         },
         throwOnError: true,
       }).then((response) => response.data)
@@ -36,7 +36,7 @@ const JobDetails = ({ jobId }: { jobId: string }) => {
   if (error) return <ErrorDisplay error={error} />
   if (!jobData || !jobData.Job) return
 
-  const { Job, History, Executions } = jobData
+  const { Job, Executions } = jobData
 
   return (
     <div className="container mx-auto p-4">
@@ -45,7 +45,7 @@ const JobDetails = ({ jobId }: { jobId: string }) => {
         <JobActions job={Job} onJobUpdated={fetchJobData} />
       </div>
       <JobInformation job={Job} />
-      <JobTabs job={Job} history={History} executions={Executions} />
+      <JobTabs job={Job} executions={Executions} />
     </div>
   )
 }

diff --git a/webui/components/jobs/details/JobHistory.tsx b/webui/components/jobs/details/JobHistory.tsx
@@ -12,6 +12,7 @@ import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
 import { Button } from '@/components/ui/button'
 import { Filter, X } from 'lucide-react'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { apimodels_ListJobHistoryResponse } from '@/lib/api/generated'
 import { shortID } from '@/lib/api/utils'
 import { formatTime } from '@/lib/time'
@@ -42,17 +43,31 @@ const getColorForExecutionID = (
   }
 }
 
-const JobHistory = ({
-  history,
-}: {
+interface JobHistoryProps {
   history?: apimodels_ListJobHistoryResponse
+  isLoading: boolean
+  pageSize: number
+  pageIndex: number
+  onPreviousPage: () => void
+  onNextPage: () => void
+  onPageSizeChange: (newSize: number) => void
+  hasNextPage: boolean
+}
+
+const JobHistory: React.FC<JobHistoryProps> = ({
+  history,
+  isLoading,
+  pageSize,
+  pageIndex,
+  onPreviousPage,
+  onNextPage,
+  onPageSizeChange,
+  hasNextPage,
 }) => {
   const [colorMap, setColorMap] = useState<Record<string, string>>({})
   const [searchTerm, setSearchTerm] = useState('')
   const [showJobOnly, setShowJobOnly] = useState(false)
-  const [filterExecutionID, setFilterExecutionID] = useState<string | null>(
-    null
-  )
+  const [filterExecutionID, setFilterExecutionID] = useState<string | null>(null)
 
   const filteredHistory = useMemo(() => {
     return history?.Items?.filter((item) => {
@@ -151,6 +166,44 @@ const JobHistory = ({
             })}
           </TableBody>
         </Table>
+        <div className="flex items-center justify-between space-x-2 py-4">
+          <div className="flex items-center space-x-2">
+            <p className="text-sm font-medium">Events per page</p>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => onPageSizeChange(Number(value))}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue placeholder={pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[100, 200, 500, 1000].map((size) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onPreviousPage}
+              disabled={pageIndex === 0 || isLoading}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onNextPage}
+              disabled={!hasNextPage || isLoading}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
       </CardContent>
     </Card>
   )