Depreciate data-plane gateway authorization for shard and journal information

.env

@@ -9,6 +9,9 @@ VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFz
 
 VITE_GATEWAY_AUTH_TOKEN_URL=https://eyrcnmuzzyriypdajwdk.supabase.co/rest/v1/rpc/gateway_auth_token
 
+VITE_TASK_AUTHORIZATION_URL=https://agent-api-1084703453822.us-central1.run.app/authorize/user/task
+VITE_COLLECTION_AUTHORIZATION_URL=https://agent-api-1084703453822.us-central1.run.app/authorize/user/collection
+
 VITE_MARKETPLACE_VERIFY_URL=https://gcp-marketplace-verify-mo7rswd2xq-uc.a.run.app
 
 # These settings require an application restart to enable right now

.env.development.local

@@ -10,6 +10,9 @@ VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFz
 
 VITE_GATEWAY_AUTH_TOKEN_URL=http://localhost:5431/rest/v1/rpc/gateway_auth_token
 
+VITE_TASK_AUTHORIZATION_URL=http://localhost:8675/authorize/user/task
+VITE_COLLECTION_AUTHORIZATION_URL=http://localhost:8675/authorize/user/collection
+
 VITE_MARKETPLACE_VERIFY_URL=http://example.com
 
 VITE_SHOW_EMAIL_LOGIN=true

src/api/liveSpecsExt.ts

@@ -29,6 +29,7 @@ const baseColumns = [
     'spec_type',
     'updated_at',
     'last_pub_id',
+    'shard_template_id',
 ];
 
 const commonColumns = baseColumns.concat([

src/components/collection/DataPreview/index.tsx

@@ -59,8 +59,8 @@ export function DataPreview({ collectionName }: Props) {
 
     // TODO (typing) we need to fix typing
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const journal = useMemo(() => journalsData?.journals?.[0], [journalsData]);
-    const journalData = useJournalData(journal?.name, collectionName, {
+    const journal = useMemo(() => journalsData?.journals[0], [journalsData]);
+    const journalData = useJournalData(journal?.spec?.name, {
         desiredCount: 20,
     });
 

src/components/shared/Entity/Details/Ops/index.tsx

@@ -1,26 +1,23 @@
 import { Box, Stack } from '@mui/material';
-import useJournalNameForLogs from 'hooks/journals/useJournalNameForLogs';
+import AlertBox from 'components/shared/AlertBox';
+import Message from 'components/shared/Error/Message';
+import LogsTable from 'components/tables/Logs';
 import useGlobalSearchParams, {
     GlobalSearchParams,
 } from 'hooks/searchParams/useGlobalSearchParams';
-import LogsTable from 'components/tables/Logs';
-import JournalDataLogsHydrator from 'stores/JournalData/Logs/Hydrator';
-import AlertBox from 'components/shared/AlertBox';
 import { FormattedMessage } from 'react-intl';
-import Message from 'components/shared/Error/Message';
 import { BASE_ERROR } from 'services/supabase';
+import JournalHydrator from 'stores/JournalData/Hydrator';
+import JournalDataLogsHydrator from 'stores/JournalData/Logs/Hydrator';
 import { useJournalDataLogsStore } from 'stores/JournalData/Logs/Store';
-import { isProduction } from 'utils/env-utils';
-import useEntityShouldShowLogs from '../useEntityShouldShowLogs';
 import useDetailsEntityTaskTypes from '../useDetailsEntityTaskTypes';
+import useEntityShouldShowLogs from '../useEntityShouldShowLogs';
 
+// TODO: Display the logs table in a loading state until the initial journal
+//   data can be fetched.
 function Ops() {
-    const taskTypes = useDetailsEntityTaskTypes();
     const catalogName = useGlobalSearchParams(GlobalSearchParams.CATALOG_NAME);
-    const [name, collectionName] = useJournalNameForLogs(
-        catalogName,
-        taskTypes
-    );
+    const taskTypes = useDetailsEntityTaskTypes();
 
     const hydrationError = useJournalDataLogsStore(
         (state) => state.hydrationError
@@ -37,18 +34,14 @@ function Ops() {
     }
 
     return (
-        <JournalDataLogsHydrator name={name} collectionName={collectionName}>
-            <Stack spacing={2}>
-                <Box>
-                    {hydrationError ? (
-                        <>
-                            {isProduction ? null : (
-                                <AlertBox severity="warning" short>
-                                    With V2 of Control Plane logs in the UI will
-                                    not work due to an issue with the selector.
-                                </AlertBox>
-                            )}
-
+        <JournalHydrator
+            catalogName={catalogName}
+            isCollection={taskTypes.length === 0}
+        >
+            <JournalDataLogsHydrator>
+                <Stack spacing={2}>
+                    <Box>
+                        {hydrationError ? (
                             <AlertBox
                                 severity="error"
                                 title={
@@ -63,13 +56,13 @@ function Ops() {
                                     }}
                                 />
                             </AlertBox>
-                        </>
-                    ) : (
-                        <LogsTable />
-                    )}
-                </Box>
-            </Stack>
-        </JournalDataLogsHydrator>
+                        ) : (
+                            <LogsTable />
+                        )}
+                    </Box>
+                </Stack>
+            </JournalDataLogsHydrator>
+        </JournalHydrator>
     );
 }
 

src/components/shared/Entity/Details/Overview/index.tsx

@@ -9,6 +9,7 @@ import useGlobalSearchParams, {
 } from 'hooks/searchParams/useGlobalSearchParams';
 import { LiveSpecsQuery_details } from 'hooks/useLiveSpecs';
 import { useMemo } from 'react';
+import JournalHydrator from 'stores/JournalData/Hydrator';
 import { hasLength } from 'utils/misc-utils';
 import ShardInformation from '../../Shard/Information';
 import Usage from '../Usage';
@@ -76,7 +77,12 @@ function Overview({ name }: Props) {
 
             {isCollection && entityName ? (
                 <Grid item xs={12}>
-                    <DataPreview collectionName={entityName} />
+                    <JournalHydrator
+                        catalogName={entityName}
+                        isCollection={isCollection}
+                    >
+                        <DataPreview collectionName={entityName} />
+                    </JournalHydrator>
                 </Grid>
             ) : null}
         </Grid>

src/components/shared/Entity/Details/index.tsx

@@ -15,6 +15,8 @@ import { useMemo } from 'react';
 import { EditorStoreNames } from 'stores/names';
 import ShardHydrator from '../Shard/Hydrator';
 
+// TODO: Hydrate the journal store in a single location that satisfies
+//   the needs of components dependent on its state.
 function EntityDetails() {
     useBrowserTitle('routeTitle.details');
 

src/components/shared/Entity/Shard/Hydrator.tsx

@@ -1,12 +1,15 @@
 import useShardHydration from 'hooks/shards/useShardHydration';
 import { BaseComponentProps } from 'types';
+import useDetailsEntityTaskTypes from '../Details/useDetailsEntityTaskTypes';
 
 interface Props extends BaseComponentProps {
     catalogName: string;
 }
 
 function ShardHydrator({ catalogName, children }: Props) {
-    useShardHydration([catalogName]);
+    const taskTypes = useDetailsEntityTaskTypes();
+
+    useShardHydration(taskTypes.length === 0 ? [] : [catalogName]);
 
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <>{children}</>;

src/components/tables/hooks/useRowsWithStatsState.ts

@@ -23,7 +23,10 @@ function useRowsWithStatsState(
     data: Data
 ) {
     const catalogNames = useMemo(
-        () => data.map((datum) => datum.catalog_name),
+        () =>
+            data
+                .filter((datum) => datum.shard_template_id)
+                .map((datum) => datum.catalog_name),
         [data]
     );
 

src/hooks/journals/useJournalData.ts

@@ -1,15 +1,17 @@
 import { singleCallSettings } from 'context/SWR';
+import { useUserStore } from 'context/User/useUserContextStore';
 import { JournalClient, JournalSelector } from 'data-plane-gateway';
-import useGatewayAuthToken from 'hooks/gatewayAuthToken/useGatewayAuthToken';
+import { isEmpty } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useCounter } from 'react-use';
+import useJournalStore from 'stores/JournalData/Store';
 import useSWR from 'swr';
 import {
-    dataPlaneFetcher_list,
+    getJournals,
     MAX_DOCUMENT_SIZE,
     shouldRefreshToken,
 } from 'utils/dataPlane-utils';
-import { useUserStore } from 'context/User/useUserContextStore';
+import { hasLength } from 'utils/misc-utils';
 import { loadDocuments } from './shared';
 import { LoadDocumentsOffsets } from './types';
 
@@ -21,54 +23,66 @@ const useJournalsForCollection = (collectionName: string | undefined) => {
     const [attempts, { inc: incAttempts, reset: resetAttempts }] =
         useCounter(0);
 
-    const { data: gatewayConfig, refresh: refreshAuthToken } =
-        useGatewayAuthToken(collectionName ? [collectionName] : []);
+    const refreshAuthToken = useJournalStore((state) => state.getAuthToken);
+    const brokerAddress = useJournalStore(
+        (state) => state.collectionBrokerAddress
+    );
+    const brokerToken = useJournalStore((state) => state.collectionBrokerToken);
 
     const journalClient = useMemo(() => {
-        if (gatewayConfig?.gateway_url && gatewayConfig.token) {
-            const authToken = gatewayConfig.token;
-            const baseUrl = new URL(gatewayConfig.gateway_url);
+        if (brokerAddress && brokerToken) {
+            const baseUrl = new URL(brokerAddress);
 
-            return new JournalClient(baseUrl, authToken);
+            return new JournalClient(baseUrl, brokerToken);
         } else {
             return null;
         }
-    }, [gatewayConfig]);
+    }, [brokerAddress, brokerToken]);
 
     const fetcher = useCallback(
         async (_url: string) => {
-            if (journalClient && collectionName) {
+            if (
+                journalClient &&
+                collectionName &&
+                brokerAddress &&
+                brokerToken
+            ) {
                 const journalSelector = new JournalSelector().collection(
                     collectionName
                 );
 
-                const dataPlaneListResponse = await dataPlaneFetcher_list(
-                    journalClient,
-                    journalSelector,
-                    'JournalData'
+                const dataPlaneListResponse = await getJournals(
+                    brokerAddress,
+                    brokerToken,
+                    {
+                        include: journalSelector.toLabelSet(),
+                    }
                 );
 
-                if (!Array.isArray(dataPlaneListResponse)) {
+                if (isEmpty(dataPlaneListResponse)) {
                     return Promise.reject(dataPlaneListResponse);
                 }
 
                 return {
                     journals:
-                        dataPlaneListResponse.length > 0
-                            ? dataPlaneListResponse
+                        dataPlaneListResponse.result.journals &&
+                        dataPlaneListResponse.result.journals.length > 0
+                            ? dataPlaneListResponse.result.journals
                             : [],
                 };
             } else {
                 return null;
             }
         },
-        [collectionName, journalClient]
+        [brokerAddress, brokerToken, collectionName, journalClient]
     );
 
     const response = useSWR(
-        collectionName
+        collectionName && brokerToken
             ? `journals-${collectionName}-${
-                  gatewayConfig?.gateway_url ?? '__missing_gateway_url__'
+                  hasLength(brokerAddress)
+                      ? brokerAddress
+                      : '__missing_broker_address__'
               }`
             : null,
         fetcher,
@@ -81,8 +95,16 @@ const useJournalsForCollection = (collectionName: string | undefined) => {
             onError: async (error) => {
                 incAttempts();
 
-                if (session && shouldRefreshToken(`${error}`)) {
-                    await refreshAuthToken();
+                if (
+                    session &&
+                    shouldRefreshToken(`${error}`) &&
+                    collectionName
+                ) {
+                    await refreshAuthToken(
+                        session.access_token,
+                        collectionName,
+                        true
+                    );
                     resetAttempts();
                 }
 
@@ -107,28 +129,34 @@ interface UseJournalDataSettings {
     desiredCount?: number;
     maxBytes?: number;
 }
+
 const useJournalData = (
     journalName?: string,
-    collectionName?: string,
-    settings?: UseJournalDataSettings
+    settings?: UseJournalDataSettings,
+    opsJournalTarget?: boolean
 ) => {
     const failures = useRef(0);
     const initialLoadComplete = useRef(false);
 
-    const { data: gatewayConfig } = useGatewayAuthToken(
-        collectionName ? [collectionName] : null
+    const brokerAddress = useJournalStore((state) =>
+        opsJournalTarget
+            ? state.taskBrokerAddress
+            : state.collectionBrokerAddress
+    );
+
+    const brokerToken = useJournalStore((state) =>
+        opsJournalTarget ? state.taskBrokerToken : state.collectionBrokerToken
     );
 
     const journalClient = useMemo(() => {
-        if (journalName && gatewayConfig?.gateway_url && gatewayConfig.token) {
-            const authToken = gatewayConfig.token;
-            const baseUrl = new URL(gatewayConfig.gateway_url);
+        if (brokerAddress && brokerToken) {
+            const baseUrl = new URL(brokerAddress);
 
-            return new JournalClient(baseUrl, authToken);
+            return new JournalClient(baseUrl, brokerToken);
         } else {
             return undefined;
         }
-    }, [gatewayConfig, journalName]);
+    }, [brokerAddress, brokerToken]);
 
     const [data, setData] =
         useState<Awaited<ReturnType<typeof loadDocuments>>>();