Merge pull request #10151 from Brian-McM/bm-pick-ronans-stuff

[PICK release-v3.30] whisker calico-cloud link | runtime config

Author: Brian-McM

whisker/.env

@@ -1 +1,2 @@
-APP_API_URL="http://localhost:3002"
+APP_API_URL="http://localhost:3002"
+APP_CONFIG_PATH="/config.json"

whisker/.env.production

@@ -1 +1,2 @@
 APP_API_URL="/whisker-backend"
+APP_CONFIG_PATH="/config/config.json"

whisker/README.md

@@ -12,7 +12,7 @@ Run `yarn`
 
 Run `yarn start`
 
-Go to `http://localhost:3000`
+Go to `http://localhost:3000` using chrome with disabled web security
 
 ## Build
 

whisker/public/config.json

@@ -0,0 +1,8 @@
+{
+    "config": {
+        "cluster_id": "",
+        "cluster_type": "",
+        "calico_version": "",
+        "notifications": ""
+    }
+}

whisker/rsbuild.config.ts

@@ -1,28 +1,10 @@
-import { defineConfig, loadEnv, rspack } from '@rsbuild/core';
+import { defineConfig, loadEnv } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
 
 const { publicVars } = loadEnv({ prefixes: ['APP_'] });
 
 export default defineConfig({
-    tools: {
-        rspack: {
-            plugins: [
-                new rspack.CopyRspackPlugin({
-                    patterns: [
-                        {
-                            from: 'public/favicon.ico',
-                            to: 'public/favicon.ico',
-                        },
-                        {
-                            from: 'config/config.json',
-                            to: 'config/config.json',
-                        },
-                    ],
-                }),
-            ],
-        },
-    },
     plugins: [pluginReact(), pluginTypeCheck()],
     server: {
         port: 3000,
@@ -36,4 +18,12 @@ export default defineConfig({
         },
         define: publicVars,
     },
+    output: {
+        copy: [
+            {
+                from: 'public/favicon.ico',
+                to: 'public/favicon.ico',
+            },
+        ],
+    },
 });

whisker/src/App.tsx

@@ -1,4 +1,8 @@
 import { AppLayout, ChakraProvider } from '@/components';
+import {
+    AppErrorBoundary,
+    FlowLogsErrorBoundary,
+} from '@/components/core/ErrorBoundary';
 import { FlowLogsContainer } from '@/features/flowLogs/components';
 import { FlowLogsPage } from '@/pages';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -10,10 +14,7 @@ import {
     RouterProvider,
     createBrowserRouter,
 } from 'react-router-dom';
-import {
-    AppErrorBoundary,
-    FlowLogsErrorBoundary,
-} from '@/components/core/ErrorBoundary';
+import AppConfigProvider from '@/context/AppConfig';
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -59,7 +60,10 @@ const App: React.FC = () => {
     return (
         <ChakraProvider>
             <QueryClientProvider client={queryClient}>
-                <RouterProvider router={router} />
+                <AppConfigProvider>
+                    <RouterProvider router={router} />
+                </AppConfigProvider>
+
                 <ReactQueryDevtools initialIsOpen={false} />
             </QueryClientProvider>
         </ChakraProvider>

whisker/src/__tests__/App.test.tsx

@@ -5,6 +5,10 @@ jest.mock('@/pages', () => ({
     FlowLogsPage: () => 'Mock FlowLogsPage',
 }));
 
+jest.mock('@/hooks', () => ({
+    useClusterId: jest.fn().mockReturnValue('fake-cluster-id'),
+}));
+
 describe('<App />', () => {
     it('should render the App component', () => {
         render(<App />);

whisker/src/api/index.ts

@@ -5,7 +5,9 @@ import {
     UseStreamOptions,
     UseStreamResult,
 } from '@/types/api';
+import { AppConfig } from '@/types/render';
 import { createEventSource } from '@/utils';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 export const API_URL = process.env.APP_API_URL;
@@ -183,6 +185,15 @@ export const useStream = <S, R>({
     };
 };
 
+export const useAppConfigQuery = () =>
+    useQuery<AppConfig>({
+        queryKey: ['config'],
+        queryFn: () =>
+            fetch(process.env.APP_CONFIG_PATH).then((response) =>
+                response.json(),
+            ),
+    });
+
 export default {
     get,
     useStream,

whisker/src/components/layout/AppHeader/__tests__/index.test.tsx

@@ -0,0 +1,19 @@
+import { renderWithRouter, screen } from '@/test-utils/helper';
+import AppHeader from '..';
+
+jest.mock('@/hooks', () => ({
+    useClusterId: jest.fn().mockReturnValue('fake-cluster-id'),
+}));
+
+describe('<AppHeader />', () => {
+    it('should add the whisker id to the calico cloud link', () => {
+        renderWithRouter(<AppHeader />);
+
+        expect(
+            screen.getByTestId('app-header-calico-cloud-link'),
+        ).toHaveProperty(
+            'href',
+            expect.stringContaining(`whisker-id=fake-cluster-id`),
+        );
+    });
+});

whisker/src/components/layout/AppHeader/index.tsx

@@ -2,8 +2,11 @@ import { CalicoCatIcon, CalicoWhiskerIcon } from '@/icons';
 import { Flex, Heading, LinkBox, LinkOverlay, Text } from '@chakra-ui/react';
 import React from 'react';
 import { appHeaderStyles } from './styles';
+import { useClusterId } from '@/hooks';
 
 const AppHeader: React.FC = () => {
+    const clusterId = useClusterId();
+
     return (
         <Flex as='header' sx={appHeaderStyles}>
             <Flex alignItems='center'>
@@ -18,11 +21,12 @@ const AppHeader: React.FC = () => {
                             Calico Whisker is a simplified version of the
                         </Text>
                         <LinkOverlay
+                            data-testId='app-header-calico-cloud-link'
                             fontSize='xs'
                             fontWeight='bold'
                             color='tigeraGoldMedium'
                             isExternal
-                            href='https://calicocloud.io'
+                            href={`https://calicocloud.io?utm_source=whisker&utm_medium=header-link&utm_campaign=oss-ui&whisker-id=${clusterId}`}
                         >
                             Service Graph from Calico Cloud
                         </LinkOverlay>

whisker/src/context/AppConfig/__tests__/index.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@/test-utils/helper';
+import AppConfigProvider from '..';
+import { useAppConfigQuery } from '@/api';
+import { useClusterId } from '@/hooks';
+
+jest.mock('@/api', () => ({ useAppConfigQuery: jest.fn() }));
+
+const TestComponent = () => {
+    const clusterId = useClusterId();
+
+    return <div>ClusterId = {clusterId}</div>;
+};
+
+describe('<AppConfig />', () => {
+    it('should pass context to children', () => {
+        const clusterId = 'my-cluster-id';
+        jest.mocked(useAppConfigQuery).mockReturnValue({
+            data: undefined,
+        } as any);
+
+        const { rerender } = render(
+            <AppConfigProvider>
+                <TestComponent />
+            </AppConfigProvider>,
+        );
+
+        expect(screen.getByText(/ClusterId =/));
+
+        jest.mocked(useAppConfigQuery).mockReturnValue({
+            data: {
+                config: {
+                    cluster_id: clusterId,
+                    cluster_type: '',
+                    calico_version: '',
+                    notifications: '',
+                },
+            },
+        } as any);
+
+        rerender(
+            <AppConfigProvider>
+                <TestComponent />
+            </AppConfigProvider>,
+        );
+
+        expect(screen.getByText(`ClusterId = ${clusterId}`));
+    });
+});

whisker/src/context/AppConfig/index.tsx

@@ -0,0 +1,21 @@
+import { useAppConfigQuery } from '@/api';
+import { AppConfig } from '@/types/render';
+import React from 'react';
+
+export const AppConfigContext = React.createContext<AppConfig | undefined>(
+    undefined,
+);
+
+export const useAppConfig = () => React.useContext(AppConfigContext);
+
+const AppConfigProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+    const { data } = useAppConfigQuery();
+
+    return (
+        <AppConfigContext.Provider value={data}>
+            {children}
+        </AppConfigContext.Provider>
+    );
+};
+
+export default AppConfigProvider;

whisker/src/hooks/index.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelectedListOmniFilters } from './omniFilters';
+import { useAppConfig } from '@/context/AppConfig';
 
 const DEBOUNCE_TIME = 500;
 
@@ -27,4 +28,6 @@ export const useDebouncedCallback = () => {
     };
 };
 
+export const useClusterId = () => useAppConfig()?.config.cluster_id;
+
 export { useSelectedListOmniFilters };

whisker/src/types/env.d.ts

@@ -1,5 +1,6 @@
 declare namespace NodeJS {
     interface ProcessEnv {
         APP_API_URL: string;
+        APP_CONFIG_PATH: string;
     }
 }

whisker/src/types/render.ts

@@ -7,3 +7,12 @@ export type FlowLog = Omit<ApiFlowLog, 'start_time' | 'end_time'> & {
     start_time: Date;
     end_time: Date;
 };
+
+export type AppConfig = {
+    config: {
+        cluster_id: string;
+        cluster_type: string;
+        calico_version: string;
+        notifications: string;
+    };
+};