pass selected operations filter to query for pagination; add operation counts by selected client (#7030)

Author: jdolle

.changeset/full-moments-sleep.md

@@ -0,0 +1,5 @@
+---
+'hive': minor
+---
+
+add operation counts by selected client to insights filter

.changeset/moody-radios-switch.md

@@ -0,0 +1,6 @@
+---
+'hive': patch
+---
+
+Fix paginated operations list filtering if there are many operations by passing a list of operation
+IDs to filter on

packages/web/app/src/components/target/insights/Filters.tsx

@@ -31,20 +31,31 @@ function OperationsFilter({
   onFilter,
   operationStatsConnection,
   selected,
+  clientOperationStatsConnection,
 }: {
   onClose(): void;
   onFilter(keys: string[]): void;
   isOpen: boolean;
   operationStatsConnection: FragmentType<
     typeof OperationsFilter_OperationStatsValuesConnectionFragment
   >;
+  clientOperationStatsConnection?:
+    | FragmentType<typeof OperationsFilter_OperationStatsValuesConnectionFragment>
+    | undefined;
   selected?: string[];
 }): ReactElement {
   const operations = useFragment(
     OperationsFilter_OperationStatsValuesConnectionFragment,
     operationStatsConnection,
   );
 
+  const clientFilteredOperations = clientOperationStatsConnection
+    ? useFragment(
+        OperationsFilter_OperationStatsValuesConnectionFragment,
+        clientOperationStatsConnection,
+      )
+    : null;
+
   function getOperationHashes() {
     const items: string[] = [];
     for (const { node: op } of operations.edges) {
@@ -103,12 +114,16 @@ function OperationsFilter({
   const renderRow = useCallback<ComponentType<ListChildComponentProps>>(
     ({ index, style }) => {
       const operation = visibleOperations[index].node;
+      const clientOpStats = clientFilteredOperations?.edges.find(
+        e => e.node.operationHash === operation.operationHash,
+      )?.node;
 
       return (
         <OperationRow
           style={style}
           key={operation.id}
           operationStats={operation}
+          clientOperationStats={clientFilteredOperations === null ? false : clientOpStats}
           selected={selectedItems.includes(operation.operationHash || '')}
           onSelect={onSelect}
         />
@@ -157,6 +172,11 @@ function OperationsFilter({
             </Button>
           </div>
           <div className="grow pl-1">
+            {clientFilteredOperations && (
+              <div className="text-right text-xs text-gray-600">
+                <span className="text-gray-500">selected</span> / all clients
+              </div>
+            )}
             <AutoSizer>
               {({ height, width }) =>
                 !height || !width ? (
@@ -185,6 +205,8 @@ const OperationsFilterContainer_OperationStatsQuery = graphql(`
   query OperationsFilterContainer_OperationStatsQuery(
     $targetSelector: TargetSelectorInput!
     $period: DateRangeInput!
+    $filter: OperationStatsFilterInput
+    $hasFilter: Boolean!
   ) {
     target(reference: { bySelector: $targetSelector }) {
       id
@@ -196,6 +218,15 @@ const OperationsFilterContainer_OperationStatsQuery = graphql(`
           ...OperationsFilter_OperationStatsValuesConnectionFragment
         }
       }
+      clientOperationStats: operationsStats(period: $period, filter: $filter)
+        @include(if: $hasFilter) {
+        operations {
+          edges {
+            __typename
+          }
+          ...OperationsFilter_OperationStatsValuesConnectionFragment
+        }
+      }
     }
   }
 `);
@@ -209,6 +240,7 @@ function OperationsFilterContainer({
   organizationSlug,
   projectSlug,
   targetSlug,
+  clientNames,
 }: {
   onFilter(keys: string[]): void;
   onClose(): void;
@@ -218,6 +250,7 @@ function OperationsFilterContainer({
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
+  clientNames?: string[];
 }): ReactElement | null {
   const [query, refresh] = useQuery({
     query: OperationsFilterContainer_OperationStatsQuery,
@@ -228,6 +261,8 @@ function OperationsFilterContainer({
         targetSlug,
       },
       period,
+      filter: clientNames ? { clientNames } : undefined,
+      hasFilter: !!clientNames?.length,
     },
   });
 
@@ -250,6 +285,7 @@ function OperationsFilterContainer({
   return (
     <OperationsFilter
       operationStatsConnection={target.operationsStats.operations}
+      clientOperationStatsConnection={target.clientOperationStats?.operations}
       selected={selected}
       isOpen={isOpen}
       onClose={onClose}
@@ -271,24 +307,47 @@ const OperationRow_OperationStatsValuesFragment = graphql(`
 
 function OperationRow({
   operationStats,
+  clientOperationStats,
   selected,
   onSelect,
   style,
 }: {
   operationStats: FragmentType<typeof OperationRow_OperationStatsValuesFragment>;
+  /** Stats for the operation filtered by the selected clients */
+  clientOperationStats?:
+    | FragmentType<typeof OperationRow_OperationStatsValuesFragment>
+    | null
+    | false;
   selected: boolean;
   onSelect(id: string, selected: boolean): void;
   style: any;
 }): ReactElement {
   const operation = useFragment(OperationRow_OperationStatsValuesFragment, operationStats);
   const requests = useFormattedNumber(operation.count);
+  const clientsOperation = clientOperationStats
+    ? useFragment(OperationRow_OperationStatsValuesFragment, clientOperationStats)
+    : undefined;
+  const hasClientOperation = clientOperationStats !== false;
+  const clientsRequests = clientsOperation ? useFormattedNumber(clientsOperation.count) : null;
   const hash = operation.operationHash || '';
   const change = useCallback(() => {
     if (hash) {
       onSelect(hash, !selected);
     }
   }, [onSelect, hash, selected]);
 
+  const Totals = () => {
+    if (hasClientOperation) {
+      return (
+        <div className="flex shrink-0 text-right text-gray-500">
+          <span>{clientsRequests ?? 0}</span>
+          <span className="ml-1 truncate text-gray-600">/ {requests}</span>
+        </div>
+      );
+    }
+    return <div className="shrink-0 text-right text-gray-600">{requests}</div>;
+  };
+
   return (
     <div style={style} className="flex items-center gap-4 truncate">
       <Checkbox checked={selected} onCheckedChange={change} id={hash} />
@@ -297,7 +356,7 @@ function OperationRow({
         className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden"
       >
         <span className="grow overflow-hidden text-ellipsis">{operation.name}</span>
-        <div className="shrink-0 text-right text-gray-500">{requests}</div>
+        <Totals />
       </label>
     </div>
   );
@@ -310,13 +369,15 @@ export function OperationsFilterTrigger({
   organizationSlug,
   projectSlug,
   targetSlug,
+  clientNames,
 }: {
   period: DateRangeInput;
   onFilter(keys: string[]): void;
   selected?: string[];
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
+  clientNames?: string[];
 }): ReactElement {
   const [isOpen, toggle] = useToggle();
 
@@ -335,6 +396,7 @@ export function OperationsFilterTrigger({
         period={period}
         selected={selected}
         onFilter={onFilter}
+        clientNames={clientNames}
       />
     </>
   );

packages/web/app/src/components/target/insights/List.tsx

@@ -241,7 +241,9 @@ function OperationsTable({
       )}
     >
       <Section.Title>Operations</Section.Title>
-      <Section.Subtitle>List of all operations with their statistics</Section.Subtitle>
+      <Section.Subtitle>
+        List of all operations with their statistics, filtered by selected clients.
+      </Section.Subtitle>
 
       <Table>
         <THead>
@@ -382,7 +384,6 @@ const OperationsTableContainer_OperationsStatsFragment = graphql(`
 `);
 
 function OperationsTableContainer({
-  operationsFilter,
   organizationSlug,
   projectSlug,
   targetSlug,
@@ -393,7 +394,6 @@ function OperationsTableContainer({
   ...props
 }: {
   operationStats: FragmentType<typeof OperationsTableContainer_OperationsStatsFragment> | null;
-  operationsFilter: readonly string[];
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
@@ -410,13 +410,6 @@ function OperationsTableContainer({
     const records: Operation[] = [];
     if (operationStats) {
       for (const { node: op } of operationStats.operations.edges) {
-        if (
-          operationsFilter.length > 0 &&
-          op.operationHash &&
-          !operationsFilter.includes(op.operationHash)
-        ) {
-          continue;
-        }
         records.push({
           id: op.id,
           name: op.name,
@@ -434,7 +427,7 @@ function OperationsTableContainer({
     }
 
     return records;
-  }, [operationStats?.operations.edges, operationsFilter]);
+  }, [operationStats?.operations.edges]);
 
   const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
 
@@ -517,7 +510,8 @@ export function OperationsList({
   projectSlug: string;
   targetSlug: string;
   period: DateRangeInput;
-  operationsFilter: readonly string[];
+  /** Operation IDs to filter on */
+  operationsFilter: string[];
   clientNamesFilter: string[];
   selectedPeriod: null | { to: string; from: string };
 }): ReactElement {
@@ -532,6 +526,7 @@ export function OperationsList({
       },
       period,
       filter: {
+        operationIds: operationsFilter,
         clientNames: clientNamesFilter,
       },
     },
@@ -552,7 +547,6 @@ export function OperationsList({
     >
       <OperationsTableContainer
         operationStats={query.data?.target?.operationsStats ?? null}
-        operationsFilter={operationsFilter}
         className={className}
         setClientFilter={setClientFilter}
         clientFilter={clientFilter}

packages/web/app/src/lib/urql.ts

@@ -51,6 +51,7 @@ export const urqlClient = createClient({
         ClientStats: noKey,
         ClientStatsValues: noKey,
         OperationsStats: noKey,
+        OperationStatsValues: noKey,
         DurationValues: noKey,
         OrganizationPayload: noKey,
         SchemaChange: noKey,

packages/web/app/src/pages/target-insights.tsx

@@ -54,6 +54,7 @@ function OperationsView({
             period={dateRangeController.resolvedRange}
             selected={selectedOperations}
             onFilter={setSelectedOperations}
+            clientNames={selectedClients}
           />
           <ClientsFilterTrigger
             organizationSlug={organizationSlug}

scripts/seed-local-env.ts

@@ -20,6 +20,7 @@ const usageReportingEndpoint =
     : envName === 'dev'
       ? 'https://app.dev.graphql-hive.com/usage'
       : 'http://localhost:4001';
+const target = process.env.TARGET;
 
 console.log(`
   Environment:                ${envName}
@@ -55,6 +56,7 @@ const createInstance = (
       : false,
     usage: isUsageReportingEnabled
       ? {
+          target: target || undefined,
           clientInfo: () => ({
             name: 'Fake Hive Client',
             version: '1.1.1',
@@ -348,6 +350,7 @@ async function federation() {
           sdl: schemaInventory,
           service: 'Inventory',
           url: 'https://inventory.localhost/graphql',
+          target: target ? { byId: target } : null,
         },
       },
     }),
@@ -369,6 +372,7 @@ async function federation() {
           sdl: schemaPandas,
           service: 'Panda',
           url: 'https://panda.localhost/graphql',
+          target: target ? { byId: target } : null,
         },
       },
     }),
@@ -391,6 +395,7 @@ async function federation() {
           sdl: schemaProducts,
           service: 'Products',
           url: 'https://products.localhost/graphql',
+          target: target ? { byId: target } : null,
         },
       },
     }),
@@ -413,6 +418,7 @@ async function federation() {
           sdl: schemaReviews,
           service: 'Reviews',
           url: 'https://reviews.localhost/graphql',
+          target: target ? { byId: target } : null,
         },
       },
     }),
@@ -435,6 +441,7 @@ async function federation() {
           sdl: schemaUsers,
           service: 'Users',
           url: 'https://users.localhost/graphql',
+          target: target ? { byId: target } : null,
         },
       },
     }),