feat: add windows for metrics and selector (#794)

* feat: add windows for metrics and selector * better placeholder
hatchet-dev · Aug 20, 2024 · 84f7334 · 84f7334
1 parent 562aec3
commit 84f7334
Show file tree

Hide file tree

Showing 12 changed files with 529 additions and 198 deletions.
diff --git a/api-contracts/openapi/paths/workflow/workflow.yaml b/api-contracts/openapi/paths/workflow/workflow.yaml
@@ -419,6 +419,22 @@ workflowRuns:
           type: array
           items:
             type: string
+      - description: The time after the workflow run was created
+        in: query
+        name: createdAfter
+        example: "2021-01-01T00:00:00Z"
+        required: false
+        schema:
+          type: string
+          format: date-time
+      - description: The time before the workflow run was created
+        in: query
+        name: createdBefore
+        example: "2021-01-01T00:00:00Z"
+        required: false
+        schema:
+          type: string
+          format: date-time
       - description: The order by field
         in: query
         name: orderByField
@@ -513,6 +529,22 @@ workflowRunsMetrics:
           type: array
           items:
             type: string
+      - description: The time after the workflow run was created
+        in: query
+        name: createdAfter
+        example: "2021-01-01T00:00:00Z"
+        required: false
+        schema:
+          type: string
+          format: date-time
+      - description: The time before the workflow run was created
+        in: query
+        name: createdBefore
+        example: "2021-01-01T00:00:00Z"
+        required: false
+        schema:
+          type: string
+          format: date-time
     responses:
       "200":
         content:

diff --git a/api/v1/server/handlers/workflows/list_runs.go b/api/v1/server/handlers/workflows/list_runs.go
@@ -41,6 +41,14 @@ func (t *WorkflowService) WorkflowRunList(ctx echo.Context, request gen.Workflow
 		listOpts.OrderDirection = &orderDirection
 	}
 
+	if request.Params.CreatedAfter != nil {
+		listOpts.CreatedAfter = request.Params.CreatedAfter
+	}
+
+	if request.Params.CreatedBefore != nil {
+		listOpts.CreatedBefore = request.Params.CreatedBefore
+	}
+
 	if request.Params.Limit != nil {
 		limit = int(*request.Params.Limit)
 		listOpts.Limit = &limit

diff --git a/api/v1/server/handlers/workflows/metrics_runs.go b/api/v1/server/handlers/workflows/metrics_runs.go
@@ -24,6 +24,14 @@ func (t *WorkflowService) WorkflowRunGetMetrics(ctx echo.Context, request gen.Wo
 		listOpts.WorkflowId = &workflowIdStr
 	}
 
+	if request.Params.CreatedAfter != nil {
+		listOpts.CreatedAfter = request.Params.CreatedAfter
+	}
+
+	if request.Params.CreatedBefore != nil {
+		listOpts.CreatedBefore = request.Params.CreatedBefore
+	}
+
 	if request.Params.EventId != nil {
 		eventIdStr := request.Params.EventId.String()
 		listOpts.EventId = &eventIdStr

diff --git a/api/v1/server/oas/gen/openapi.gen.go b/api/v1/server/oas/gen/openapi.gen.go
diff --git a/frontend/app/src/lib/api/generated/Api.ts b/frontend/app/src/lib/api/generated/Api.ts
@@ -1330,6 +1330,18 @@ export class Api<SecurityDataType = unknown> extends HttpClient<SecurityDataType
        * @example ["key1:value1","key2:value2"]
        */
       additionalMetadata?: string[];
+      /**
+       * The time after the workflow run was created
+       * @format date-time
+       * @example "2021-01-01T00:00:00Z"
+       */
+      createdAfter?: string;
+      /**
+       * The time before the workflow run was created
+       * @format date-time
+       * @example "2021-01-01T00:00:00Z"
+       */
+      createdBefore?: string;
       /** The order by field */
       orderByField?: WorkflowRunOrderByField;
       /** The order by direction */
@@ -1409,6 +1421,18 @@ export class Api<SecurityDataType = unknown> extends HttpClient<SecurityDataType
        * @example ["key1:value1","key2:value2"]
        */
       additionalMetadata?: string[];
+      /**
+       * The time after the workflow run was created
+       * @format date-time
+       * @example "2021-01-01T00:00:00Z"
+       */
+      createdAfter?: string;
+      /**
+       * The time before the workflow run was created
+       * @format date-time
+       * @example "2021-01-01T00:00:00Z"
+       */
+      createdBefore?: string;
     },
     params: RequestParams = {},
   ) =>

diff --git a/frontend/app/src/lib/atoms.ts b/frontend/app/src/lib/atoms.ts
@@ -4,13 +4,17 @@ import { useSearchParams } from 'react-router-dom';
 import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
-const getInitialValue = <T>(key: string): T | undefined => {
+const getInitialValue = <T>(key: string, defaultValue?: T): T | undefined => {
   const item = localStorage.getItem(key);
 
   if (item !== null) {
     return JSON.parse(item) as T;
   }
 
+  if (defaultValue !== undefined) {
+    return defaultValue;
+  }
+
   return;
 };
 
@@ -121,3 +125,17 @@ export function useTenantContext(): [
 
   return [currTenant || computedCurrTenant, setTenant];
 }
+
+const lastTimeRange = 'lastTimeRange';
+
+const lastTimeRangeAtomInit = atom(
+  getInitialValue<string>(lastTimeRange, '1d'),
+);
+
+export const lastTimeRangeAtom = atom(
+  (get) => get(lastTimeRangeAtomInit),
+  (_get, set, newVal: string) => {
+    set(lastTimeRangeAtomInit, newVal);
+    localStorage.setItem(lastTimeRange, JSON.stringify(newVal));
+  },
+);
diff --git a/frontend/app/src/pages/main/workflow-runs/components/workflow-runs-table.tsx b/frontend/app/src/pages/main/workflow-runs/components/workflow-runs-table.tsx
@@ -34,8 +34,20 @@ import {
 import { WorkflowRunsMetricsView } from './workflow-runs-metrics';
 import queryClient from '@/query-client';
 import { useApiError } from '@/lib/hooks';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useAtom } from 'jotai';
+import { lastTimeRangeAtom } from '@/lib/atoms';
+import { Skeleton } from '@/components/ui/skeleton';
 
 export interface WorkflowRunsTableProps {
+  createdAfter?: string;
+  createdBefore?: string;
   workflowId?: string;
   parentWorkflowRunId?: string;
   parentStepRunId?: string;
@@ -56,6 +68,11 @@ export function WorkflowRunsTable({
   const { tenant } = useOutletContext<TenantContextType>();
   invariant(tenant);
 
+  const [timeRange, setTimeRange] = useAtom(lastTimeRangeAtom);
+  const [createdAfter, setCreatedAfter] = useState<string | undefined>(
+    new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+  );
+
   const [sorting, setSorting] = useState<SortingState>(() => {
     const sortParam = searchParams.get('sort');
     if (sortParam) {
@@ -193,6 +210,7 @@ export function WorkflowRunsTable({
       orderByDirection,
       orderByField,
       additionalMetadata: AdditionalMetadataFilter,
+      createdAfter,
     }),
     refetchInterval,
   });
@@ -203,6 +221,7 @@ export function WorkflowRunsTable({
       parentWorkflowRunId,
       parentStepRunId,
       additionalMetadata: AdditionalMetadataFilter,
+      createdAfter,
     }),
     refetchInterval,
   });
@@ -378,8 +397,8 @@ export function WorkflowRunsTable({
 
   return (
     <>
-      {metricsQuery.data && (
-        <div className="mb-4">
+      <div className="flex flex-row justify-between items-center my-4">
+        {metricsQuery.data ? (
           <WorkflowRunsMetricsView
             metrics={metricsQuery.data}
             onClick={(status) => {
@@ -408,9 +427,51 @@ export function WorkflowRunsTable({
               });
             }}
           />
-        </div>
-      )}
+        ) : (
+          <Skeleton className="max-w-[800px] w-[40vw] h-8" />
+        )}
+        <Select
+          value={timeRange}
+          onValueChange={(value) => {
+            setTimeRange(value);
+
+            switch (value) {
+              case '1h':
+                setCreatedAfter(
+                  new Date(Date.now() - 60 * 60 * 1000).toISOString(),
+                );
+                break;
+              case '6h':
+                setCreatedAfter(
+                  new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(),
+                );
+                break;
+              case '1d':
+                setCreatedAfter(
+                  new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+                );
+                break;
+              case '7d':
+                setCreatedAfter(
+                  new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+                );
+                break;
+            }
+          }}
+        >
+          <SelectTrigger className="w-fit">
+            <SelectValue id="timerange" placeholder="Choose time range" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="1h">1 hour</SelectItem>
+            <SelectItem value="6h">6 hours</SelectItem>
+            <SelectItem value="1d">1 day</SelectItem>
+            <SelectItem value="7d">7 days</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
       <DataTable
+        emptyState={<>No workflow runs found with the given filters.</>}
         error={workflowKeysError}
         isLoading={workflowKeysIsLoading}
         columns={columns}

diff --git a/pkg/client/rest/gen.go b/pkg/client/rest/gen.go