feat: granular date filtering in insights and explorer

graphql-hive · Mar 1, 2024 · d788baa · d788baa
1 parent f194cb1
commit d788baa
Show file tree

Hide file tree

Showing 19 changed files with 1,052 additions and 429 deletions.
diff --git a/packages/web/app/package.json b/packages/web/app/package.json
@@ -78,6 +78,7 @@
     "pino": "8.19.0",
     "pino-http": "9.0.0",
     "react": "18.2.0",
+    "react-day-picker": "8.10.0",
     "react-dom": "18.2.0",
     "react-highlight-words": "0.20.0",
     "react-hook-form": "7.50.1",

diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, useEffect } from 'react';
+import { ReactElement, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { AlertCircleIcon } from 'lucide-react';
 import { useQuery } from 'urql';
@@ -140,14 +140,15 @@ const TargetExplorerPageQuery = graphql(`
 
 function ExplorerPageContent() {
   const router = useRouteSelector();
-  const { period, dataRetentionInDays, setDataRetentionInDays } = useSchemaExplorerContext();
+  const { resolvedPeriod, dataRetentionInDays, setDataRetentionInDays } =
+    useSchemaExplorerContext();
   const [query] = useQuery({
     query: TargetExplorerPageQuery,
     variables: {
       organizationId: router.organizationId,
       projectId: router.projectId,
       targetId: router.targetId,
-      period,
+      period: resolvedPeriod,
     },
   });
 
@@ -172,6 +173,13 @@ function ExplorerPageContent() {
   const latestSchemaVersion = currentTarget?.latestSchemaVersion;
   const latestValidSchemaVersion = currentTarget?.latestValidSchemaVersion;
 
+  /* to avoid janky behaviour we keep track if the version has a successful explorer once, and in that case always show the filter bar. */
+  const isFilterVisible = useRef(false);
+
+  if (latestValidSchemaVersion?.explorer) {
+    isFilterVisible.current = true;
+  }
+
   return (
     <TargetLayout
       page={Page.Explorer}
@@ -186,12 +194,12 @@ function ExplorerPageContent() {
           <Title>Explore</Title>
           <Subtitle>Insights from the latest version.</Subtitle>
         </div>
-        {!query.fetching && latestValidSchemaVersion?.explorer && (
+        {isFilterVisible.current && (
           <SchemaExplorerFilter
             organization={{ cleanId: router.organizationId }}
             project={{ cleanId: router.projectId }}
             target={{ cleanId: router.targetId }}
-            period={period}
+            period={resolvedPeriod}
           >
             <Button variant="outline" asChild>
               <Link

diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/[typename].tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/[typename].tsx
@@ -164,14 +164,15 @@ const TargetExplorerTypenamePageQuery = graphql(`
 
 function TypeExplorerPageContent({ typename }: { typename: string }) {
   const router = useRouteSelector();
-  const { period, dataRetentionInDays, setDataRetentionInDays } = useSchemaExplorerContext();
+  const { resolvedPeriod, dataRetentionInDays, setDataRetentionInDays } =
+    useSchemaExplorerContext();
   const [query] = useQuery({
     query: TargetExplorerTypenamePageQuery,
     variables: {
       organizationId: router.organizationId,
       projectId: router.projectId,
       targetId: router.targetId,
-      period,
+      period: resolvedPeriod,
       typename,
     },
   });
@@ -216,7 +217,7 @@ function TypeExplorerPageContent({ typename }: { typename: string }) {
             organization={{ cleanId: router.organizationId }}
             project={{ cleanId: router.projectId }}
             target={{ cleanId: router.targetId }}
-            period={period}
+            period={resolvedPeriod}
           />
         ) : null}
       </div>

diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/unused.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/unused.tsx
@@ -1,19 +1,13 @@
 import { memo, ReactElement, useEffect, useMemo, useState } from 'react';
-import { AlertCircleIcon } from 'lucide-react';
+import { AlertCircleIcon, RefreshCw } from 'lucide-react';
 import { useQuery } from 'urql';
 import { authenticated } from '@/components/authenticated-container';
 import { Page, TargetLayout } from '@/components/layouts/target';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import { DateRangePicker, presetLast7Days } from '@/components/ui/date-range-picker';
 import { Subtitle, Title } from '@/components/ui/page';
 import { QueryError } from '@/components/ui/query-error';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Link, MetaTitle } from '@/components/v2';
 import { EmptyList, noSchemaVersion } from '@/components/v2/empty-list';
@@ -185,15 +179,9 @@ function UnusedSchemaExplorer(props: {
   projectCleanId: string;
   targetCleanId: string;
 }) {
-  const {
-    updateDateRangeByKey,
-    dateRangeKey,
-    displayDateRangeLabel,
-    availableDateRangeOptions,
-    dateRange,
-  } = useDateRangeController({
+  const dateRangeController = useDateRangeController({
     dataRetentionInDays: props.dataRetentionInDays,
-    minKey: '7d',
+    defaultPreset: presetLast7Days,
   });
 
   const [query] = useQuery({
@@ -202,7 +190,7 @@ function UnusedSchemaExplorer(props: {
       organizationId: props.organizationCleanId,
       projectId: props.projectCleanId,
       targetId: props.targetCleanId,
-      period: dateRange,
+      period: dateRangeController.resolvedRange,
     },
   });
 
@@ -223,22 +211,16 @@ function UnusedSchemaExplorer(props: {
           </Subtitle>
         </div>
         <div className="flex justify-end gap-x-2">
-          <Select
-            onValueChange={updateDateRangeByKey}
-            defaultValue={dateRangeKey}
-            disabled={query.fetching}
-          >
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder={displayDateRangeLabel(dateRangeKey)} />
-            </SelectTrigger>
-            <SelectContent>
-              {availableDateRangeOptions.map(key => (
-                <SelectItem key={key} value={key}>
-                  {displayDateRangeLabel(key)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <DateRangePicker
+            validUnits={['y', 'M', 'w', 'd']}
+            selectedRange={dateRangeController.selectedPreset.range}
+            startDate={dateRangeController.startDate}
+            align="end"
+            onUpdate={args => dateRangeController.setSelectedPreset(args.preset)}
+          />
+          <Button variant="outline" onClick={() => dateRangeController.refreshResolvedRange()}>
+            <RefreshCw className="size-4" />
+          </Button>
           <Button variant="outline" asChild>
             <Link
               href={{

diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights.tsx
@@ -1,4 +1,5 @@
 import { ReactElement, useState } from 'react';
+import { RefreshCw } from 'lucide-react';
 import { useQuery } from 'urql';
 import { authenticated } from '@/components/authenticated-container';
 import { Page, TargetLayout } from '@/components/layouts/target';
@@ -8,15 +9,10 @@ import {
 } from '@/components/target/insights/Filters';
 import { OperationsList } from '@/components/target/insights/List';
 import { OperationsStats } from '@/components/target/insights/Stats';
+import { Button } from '@/components/ui/button';
+import { DateRangePicker, presetLast7Days } from '@/components/ui/date-range-picker';
 import { Subtitle, Title } from '@/components/ui/page';
 import { QueryError } from '@/components/ui/query-error';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { EmptyList, MetaTitle } from '@/components/v2';
 import { graphql } from '@/gql';
 import { useRouteSelector } from '@/lib/hooks';
@@ -36,15 +32,9 @@ function OperationsView({
 }): ReactElement {
   const [selectedOperations, setSelectedOperations] = useState<string[]>([]);
   const [selectedClients, setSelectedClients] = useState<string[]>([]);
-  const {
-    updateDateRangeByKey,
-    dateRangeKey,
-    displayDateRangeLabel,
-    availableDateRangeOptions,
-    dateRange,
-    resolution,
-  } = useDateRangeController({
+  const dateRangeController = useDateRangeController({
     dataRetentionInDays,
+    defaultPreset: presetLast7Days,
   });
 
   return (
@@ -56,49 +46,47 @@ function OperationsView({
         </div>
         <div className="flex justify-end gap-x-4">
           <OperationsFilterTrigger
-            period={dateRange}
+            period={dateRangeController.resolvedRange}
             selected={selectedOperations}
             onFilter={setSelectedOperations}
           />
           <ClientsFilterTrigger
-            period={dateRange}
+            period={dateRangeController.resolvedRange}
             selected={selectedClients}
             onFilter={setSelectedClients}
           />
-          <Select onValueChange={updateDateRangeByKey} defaultValue={dateRangeKey}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder={displayDateRangeLabel(dateRangeKey)} />
-            </SelectTrigger>
-            <SelectContent>
-              {availableDateRangeOptions.map(key => (
-                <SelectItem key={key} value={key}>
-                  {displayDateRangeLabel(key)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <DateRangePicker
+            validUnits={['y', 'M', 'w', 'd', 'h']}
+            selectedRange={dateRangeController.selectedPreset.range}
+            startDate={dateRangeController.startDate}
+            align="end"
+            onUpdate={args => dateRangeController.setSelectedPreset(args.preset)}
+          />
+          <Button variant="outline" onClick={() => dateRangeController.refreshResolvedRange()}>
+            <RefreshCw className="size-4" />
+          </Button>
         </div>
       </div>
       <OperationsStats
         organization={organizationCleanId}
         project={projectCleanId}
         target={targetCleanId}
-        period={dateRange}
+        period={dateRangeController.resolvedRange}
         operationsFilter={selectedOperations}
         clientNamesFilter={selectedClients}
-        resolution={resolution}
-        dateRangeText={displayDateRangeLabel(dateRangeKey)}
+        dateRangeText={dateRangeController.selectedPreset.label}
         mode="operation-list"
+        resolution={30}
       />
       <OperationsList
         className="mt-12"
-        period={dateRange}
+        period={dateRangeController.resolvedRange}
         organization={organizationCleanId}
         project={projectCleanId}
         target={targetCleanId}
         operationsFilter={selectedOperations}
         clientNamesFilter={selectedClients}
-        selectedPeriod={dateRangeKey}
+        selectedPeriod={dateRangeController.selectedPreset.range}
       />
     </>
   );

diff --git a/...ages/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash].tsx b/...ages/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash].tsx
@@ -1,21 +1,17 @@
 import { ReactElement, useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
+import { RefreshCw } from 'lucide-react';
 import { useQuery } from 'urql';
 import { authenticated } from '@/components/authenticated-container';
 import { Section } from '@/components/common';
 import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
 import { Page, TargetLayout } from '@/components/layouts/target';
 import { ClientsFilterTrigger } from '@/components/target/insights/Filters';
 import { OperationsStats } from '@/components/target/insights/Stats';
+import { Button } from '@/components/ui/button';
+import { DateRangePicker, presetLast1Day } from '@/components/ui/date-range-picker';
 import { Subtitle, Title } from '@/components/ui/page';
 import { QueryError } from '@/components/ui/query-error';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { EmptyList, MetaTitle } from '@/components/v2';
 import { graphql } from '@/gql';
 import { useRouteSelector } from '@/lib/hooks';
@@ -76,15 +72,9 @@ function OperationView({
   operationHash: string;
   operationName: string;
 }): ReactElement {
-  const {
-    updateDateRangeByKey,
-    dateRangeKey,
-    displayDateRangeLabel,
-    availableDateRangeOptions,
-    dateRange,
-    resolution,
-  } = useDateRangeController({
+  const dateRangeController = useDateRangeController({
     dataRetentionInDays,
+    defaultPreset: presetLast1Day,
   });
   const [selectedClients, setSelectedClients] = useState<string[]>([]);
   const operationsList = useMemo(() => [operationHash], [operationHash]);
@@ -98,34 +88,32 @@ function OperationView({
         </div>
         <div className="flex justify-end gap-x-2">
           <ClientsFilterTrigger
-            period={dateRange}
+            period={dateRangeController.resolvedRange}
             selected={selectedClients}
             onFilter={setSelectedClients}
           />
-          <Select onValueChange={updateDateRangeByKey} defaultValue={dateRangeKey}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder={displayDateRangeLabel(dateRangeKey)} />
-            </SelectTrigger>
-            <SelectContent>
-              {availableDateRangeOptions.map(key => (
-                <SelectItem key={key} value={key}>
-                  {displayDateRangeLabel(key)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <DateRangePicker
+            validUnits={['y', 'M', 'w', 'd', 'h']}
+            selectedRange={dateRangeController.selectedPreset.range}
+            startDate={dateRangeController.startDate}
+            align="end"
+            onUpdate={args => dateRangeController.setSelectedPreset(args.preset)}
+          />
+          <Button variant="outline" onClick={() => dateRangeController.refreshResolvedRange()}>
+            <RefreshCw className="size-4" />
+          </Button>
         </div>
       </div>
       <OperationsStats
         organization={organizationCleanId}
         project={projectCleanId}
         target={targetCleanId}
-        period={dateRange}
-        dateRangeText={displayDateRangeLabel(dateRangeKey)}
+        period={dateRangeController.resolvedRange}
+        dateRangeText={dateRangeController.selectedPreset.label}
         operationsFilter={operationsList}
         clientNamesFilter={selectedClients}
-        resolution={resolution}
         mode="operation-page"
+        resolution={30}
       />
       <div className="mt-12 w-full rounded-md border border-gray-800 bg-gray-900/50 p-5">
         <Section.Title>Operation body</Section.Title>