move PD api endpoints to hooks

ui-cra/src/components/Applications/__tests__/__snapshots__/index.test.tsx.snap

@@ -74,9 +74,10 @@ exports[`Applications index test snapshots loading 1`] = `
 
 .c11 {
   padding: 12px 24px;
-  margin: 0 12px;
+  margin: 12px;
   background-color: #fff;
   color: #1a1a1a;
+  border-radius: 8px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -720,9 +721,10 @@ exports[`Applications index test snapshots success 1`] = `
 
 .c38 {
   padding: 12px 24px;
-  margin: 0 12px;
+  margin: 12px;
   background-color: #fff;
   color: #1a1a1a;
+  border-radius: 8px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

ui-cra/src/components/ProgressiveDelivery/CanaryDetails/index.tsx

@@ -5,39 +5,34 @@ import { ContentWrapper } from '../../Layout/ContentWrapper';
 import { PageTemplate } from '../../Layout/PageTemplate';
 import { SectionHeader } from '../../Layout/SectionHeader';
 
-import {
-  GetCanaryResponse,
-  ProgressiveDeliveryService,
-} from '@weaveworks/progressive-delivery';
-import { useQuery } from 'react-query';
 import { LoadingPage } from '@weaveworks/weave-gitops';
 import { Alert } from '@material-ui/lab';
 import CanaryDetailsSection from './CanaryDetailsSection';
-interface CanaryParams {
-  name: string;
-  namespace: string;
-  clusterName: string;
-}
+import { useApplicationsCount } from '../../Applications/utils';
+import {
+  CanaryParams,
+  useCanaryDetails,
+} from '../../../hooks/progressiveDelivery';
 
 function CanaryDetails({ name, namespace, clusterName }: CanaryParams) {
-  const { error, data, isLoading } = useQuery<GetCanaryResponse, Error>(
-    'canaryDetails',
-    () =>
-      ProgressiveDeliveryService.GetCanary({
-        name,
-        namespace,
-        clusterName,
-      }),
-    {},
-  );
+  const applicationsCount = useApplicationsCount();
+  const { error, data, isLoading } = useCanaryDetails({
+    name,
+    namespace,
+    clusterName,
+  });
 
   return (
     <ThemeProvider theme={localEEMuiTheme}>
       <PageTemplate documentTitle="WeGo · Policies">
         <SectionHeader
           className="count-header"
           path={[
-            { label: 'Applications', url: '/applications' },
+            {
+              label: 'Applications',
+              url: '/applications',
+              count: applicationsCount,
+            },
             { label: 'Delivery', url: '/applications/delivery' },
             { label: name },
           ]}
@@ -57,4 +52,4 @@ function CanaryDetails({ name, namespace, clusterName }: CanaryParams) {
   );
 }
 
-export default CanaryDetails;
+export default CanaryDetails;

ui-cra/src/components/ProgressiveDelivery/Events/ListEvents.tsx

@@ -1,19 +1,11 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import {
-  ClustersService,
-  ListEventsRequest,
-  ListEventsResponse,
-} from '../../../cluster-services/cluster_services.pb';
+import { ListEventsRequest } from '../../../cluster-services/cluster_services.pb';
 import { LoadingPage } from '@weaveworks/weave-gitops';
 import { Alert } from '@material-ui/lab';
 import { EventsTable } from './EventsTable';
+import { useListEvents } from '../../../hooks/progressiveDelivery';
 
 const ListEvents = (listEventsPayload: ListEventsRequest) => {
-  const { error, data, isLoading } = useQuery<ListEventsResponse, Error>(
-    'events',
-    () => ClustersService.ListEvents(listEventsPayload),
-  );
+  const { error, data, isLoading } = useListEvents(listEventsPayload);
   return (
     <>
       {isLoading && <LoadingPage />}

ui-cra/src/components/ProgressiveDelivery/ListCanaries/CanariesList.tsx

@@ -1,40 +1,25 @@
 import { CanaryTable } from './Table';
-import {
-  ListCanariesResponse,
-  ProgressiveDeliveryService,
-} from '@weaveworks/progressive-delivery';
-import { useQuery } from 'react-query';
 import { LoadingPage } from '@weaveworks/weave-gitops';
 import { Alert } from '@material-ui/lab';
 import { Canary } from '@weaveworks/progressive-delivery/api/prog/types.pb';
+import { useListCanaries } from '../../../hooks/progressiveDelivery';
 
-const CANARIES_POLL_INTERVAL = 60000;
 
 const ProgressiveDelivery = ({
   onCountChange,
 }: {
   onCountChange: (count: number) => void;
 }) => {
-  const { error, data, isLoading } = useQuery<ListCanariesResponse, Error>(
-    'canaries',
-    () =>
-      ProgressiveDeliveryService.ListCanaries({}).then(res => {
-        onCountChange(res.canaries?.length || 0);
-        return res;
-      }),
-    {
-      refetchInterval: CANARIES_POLL_INTERVAL,
-    },
+  const { error, data, isLoading } = useListCanaries(res =>
+    onCountChange(res.canaries?.length || 0),
   );
   return (
     <>
       {isLoading && <LoadingPage />}
       {error && <Alert severity="error">{error.message}</Alert>}
-      {data?.canaries && (
-        <CanaryTable canaries={data.canaries as Canary[]} />
-      )}
+      {data?.canaries && <CanaryTable canaries={data.canaries as Canary[]} />}
     </>
   );
 };
 
-export default ProgressiveDelivery;
+export default ProgressiveDelivery;

ui-cra/src/components/ProgressiveDelivery/index.tsx

@@ -7,35 +7,21 @@ import OnboardingMessage from './Onboarding/OnboardingMessage';
 
 import { SectionHeader } from '../Layout/SectionHeader';
 import { ContentWrapper } from '../Layout/ContentWrapper';
-import { useQuery } from 'react-query';
 import { LoadingPage } from '@weaveworks/weave-gitops';
 import { Alert } from '@material-ui/lab';
-import {
-  IsFlaggerAvailableResponse,
-  ProgressiveDeliveryService,
-} from '@weaveworks/progressive-delivery';
 
-interface FlaggerStatus {
-  isFlaggerAvailable: boolean;
-}
+import { useApplicationsCount } from '../Applications/utils';
+import { useIsFlaggerAvailable } from '../../hooks/progressiveDelivery';
+
+
 
 const ProgressiveDelivery = () => {
+  // To be discussed as we don't need to show counts for prev tabs in breadcrumb as it's not needed
+  const applicationsCount = useApplicationsCount();
+
   const [count, setCount] = useState<number | undefined>();
-  const { error, data, isLoading } = useQuery<FlaggerStatus, Error>(
-    'flagger',
-    () =>
-      ProgressiveDeliveryService.IsFlaggerAvailable({}).then(
-        ({ clusters }: IsFlaggerAvailableResponse) => {
-          return clusters === undefined || Object.keys(clusters).length === 0
-            ? { isFlaggerAvailable: false }
-            : {
-                isFlaggerAvailable: Object.values(clusters).some(
-                  (value: boolean) => value === true,
-                ),
-              };
-        },
-      ),
-  );
+  const { error, data, isLoading } = useIsFlaggerAvailable();
+
   const onCountChange = useCallback((count: number) => {
     setCount(count);
   }, []);
@@ -46,7 +32,11 @@ const ProgressiveDelivery = () => {
         <SectionHeader
           className="count-header"
           path={[
-            { label: 'Applications', url: '/applications' },
+            {
+              label: 'Applications',
+              url: '/applications',
+              count: applicationsCount,
+            },
             { label: 'Delivery', count },
           ]}
         />

ui-cra/src/hooks/progressiveDelivery.ts

@@ -0,0 +1,73 @@
+import {
+  GetCanaryResponse,
+  IsFlaggerAvailableResponse,
+  ListCanariesResponse,
+  ProgressiveDeliveryService,
+} from '@weaveworks/progressive-delivery';
+import { useQuery } from 'react-query';
+import {
+  ClustersService,
+  ListEventsRequest,
+  ListEventsResponse,
+} from '../cluster-services/cluster_services.pb';
+
+interface FlaggerStatus {
+  isFlaggerAvailable: boolean;
+}
+
+export function useIsFlaggerAvailable() {
+  return useQuery<FlaggerStatus, Error>('flagger', () =>
+    ProgressiveDeliveryService.IsFlaggerAvailable({}).then(
+      ({ clusters }: IsFlaggerAvailableResponse) => {
+        return clusters === undefined || Object.keys(clusters).length === 0
+          ? { isFlaggerAvailable: false }
+          : {
+              isFlaggerAvailable: Object.values(clusters).some(
+                (value: boolean) => value === true,
+              ),
+            };
+      },
+    ),
+  );
+}
+const CANARIES_POLL_INTERVAL = 60000;
+export function useListCanaries(clb: (res: ListCanariesResponse) => void) {
+  return useQuery<ListCanariesResponse, Error>(
+    'canaries',
+    () =>
+      ProgressiveDeliveryService.ListCanaries({}).then(res => {
+        clb(res);
+        return res;
+      }),
+    {
+      refetchInterval: CANARIES_POLL_INTERVAL,
+    },
+  );
+}
+
+export function useListEvents(listEventsPayload: ListEventsRequest) {
+  return useQuery<ListEventsResponse, Error>('events', () =>
+    ClustersService.ListEvents(listEventsPayload),
+  );
+}
+export interface CanaryParams {
+  name: string;
+  namespace: string;
+  clusterName: string;
+}
+export function useCanaryDetails({
+  name,
+  namespace,
+  clusterName,
+}: CanaryParams) {
+  return useQuery<GetCanaryResponse, Error>(
+    'canaryDetails',
+    () =>
+      ProgressiveDeliveryService.GetCanary({
+        name,
+        namespace,
+        clusterName,
+      }),
+    {},
+  );
+}