From b82a650dab9aea3da82959a6c1166bcf7301b17a Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Wed, 28 Feb 2024 08:57:34 +0100 Subject: [PATCH] feat: connected instances support query param for env (#6362) --- .../ConnectedInstances.test.tsx | 46 +++++++++++++------ .../ConnectedInstances/ConnectedInstances.tsx | 8 ++-- .../useConnectedInstances.ts | 2 +- src/lib/routes/admin-api/metrics.ts | 2 +- .../e2e/api/admin/applications.e2e.test.ts | 4 +- 5 files changed, 41 insertions(+), 21 deletions(-) diff --git a/frontend/src/component/application/ConnectedInstances/ConnectedInstances.test.tsx b/frontend/src/component/application/ConnectedInstances/ConnectedInstances.test.tsx index 9c015a3e12..5e353c89d6 100644 --- a/frontend/src/component/application/ConnectedInstances/ConnectedInstances.test.tsx +++ b/frontend/src/component/application/ConnectedInstances/ConnectedInstances.test.tsx @@ -14,19 +14,27 @@ const setupApi = ( environments: [{ name: 'development' }, { name: 'production' }], }); testServerRoute(server, '/api/admin/ui-config', {}); - testServerRoute(server, '/api/admin/metrics/instances/my-app/development', { - instances, - }); - testServerRoute(server, '/api/admin/metrics/instances/my-app/production', { - instances: [ - { - instanceId: 'shouldNotShowUp', - clientIp: 'irrelevant', - lastSeen: '2024-02-26T14:00:59.980Z', - sdkVersion: 'irrelevant', - }, - ], - }); + testServerRoute( + server, + '/api/admin/metrics/instances/my-app/environment/development', + { + instances, + }, + ); + testServerRoute( + server, + '/api/admin/metrics/instances/my-app/environment/production', + { + instances: [ + { + instanceId: 'prodInstance', + clientIp: 'irrelevant', + lastSeen: '2024-02-26T14:00:59.980Z', + sdkVersion: 'irrelevant', + }, + ], + }, + ); }; test('Display connected instances', async () => { @@ -57,20 +65,28 @@ test('Display connected instances', async () => { ); await screen.findByText('development'); - await screen.findByText('production'); + const prodButton = await screen.findByText('production'); await screen.findByText('devInstance1'); await screen.findByText('devInstance2'); await screen.findByText('192.168.0.1'); await screen.findByText('192.168.0.2'); await screen.findByText('unleash-client-node:5.5.0'); await screen.findByText('unleash-client-node:5.5.1'); - expect(screen.queryByText('prodInstance')).not.toBeInTheDocument(); // check order const [, row1, row2] = screen.getAllByRole('row'); expect(row1.textContent?.includes('devInstance1')).toBe(true); expect(row2.textContent?.includes('devInstance2')).toBe(true); + + // switch tab + prodButton.click(); + + await screen.findByText('prodInstance'); + expect(screen.queryByText('devInstance1')).not.toBeInTheDocument(); + expect(window.location.href).toContain( + 'applications/my-app/instances?environment=production', + ); }); test('Display no connected instances', async () => { diff --git a/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx b/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx index e4740d045c..9c8ff50814 100644 --- a/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx +++ b/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx @@ -8,6 +8,7 @@ import { useApplicationOverview } from 'hooks/api/getters/useApplicationOverview import { useConnectedInstances } from 'hooks/api/getters/useConnectedInstances/useConnectedInstances'; import { ApplicationEnvironmentInstancesSchemaInstancesItem } from '../../../openapi'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { StringParam, useQueryParam, withDefault } from 'use-query-params'; const useEnvironments = (application: string) => { const { data: applicationOverview } = useApplicationOverview(application); @@ -15,9 +16,9 @@ const useEnvironments = (application: string) => { const applicationEnvironments = applicationOverview.environments .map((env) => env.name) .sort(); - - const [currentEnvironment, setCurrentEnvironment] = useState( - applicationEnvironments[0], + const [currentEnvironment, setCurrentEnvironment] = useQueryParam( + 'environment', + withDefault(StringParam, applicationEnvironments[0]), ); useEffect(() => { @@ -35,6 +36,7 @@ const useEnvironments = (application: string) => { export const ConnectedInstances: FC = () => { const name = useRequiredPathParam('name'); + const { currentEnvironment, setCurrentEnvironment, environments } = useEnvironments(name); diff --git a/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts b/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts index 912797b28a..c505f8bd56 100644 --- a/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts +++ b/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts @@ -18,7 +18,7 @@ export const useConnectedInstances = ( options: SWRConfiguration = {}, ) => { const path = formatApiPath( - `api/admin/metrics/instances/${application}/${environment}`, + `api/admin/metrics/instances/${application}/environment/${environment}`, ); const { data, error } = useConditionalSWR( Boolean(environment), diff --git a/src/lib/routes/admin-api/metrics.ts b/src/lib/routes/admin-api/metrics.ts index 01ef7ccfb1..adc3430aae 100644 --- a/src/lib/routes/admin-api/metrics.ts +++ b/src/lib/routes/admin-api/metrics.ts @@ -158,7 +158,7 @@ class MetricsController extends Controller { }); this.route({ method: 'get', - path: '/instances/:appName/:environment', + path: '/instances/:appName/environment/:environment', handler: this.getApplicationEnvironmentInstances, permission: NONE, middleware: [ diff --git a/src/test/e2e/api/admin/applications.e2e.test.ts b/src/test/e2e/api/admin/applications.e2e.test.ts index e394a50c35..c34a22db92 100644 --- a/src/test/e2e/api/admin/applications.e2e.test.ts +++ b/src/test/e2e/api/admin/applications.e2e.test.ts @@ -136,7 +136,9 @@ test('should show correct number of total', async () => { expect(body).toMatchObject(expected); const { body: instancesBody } = await app.request - .get(`/api/admin/metrics/instances/${metrics.appName}/default`) + .get( + `/api/admin/metrics/instances/${metrics.appName}/environment/default`, + ) .expect(200); expect(instancesBody).toMatchObject({