feat: connected instances support query param for env (#6362)

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', {
+    testServerRoute(
+        server,
+        '/api/admin/metrics/instances/my-app/environment/development',
+        {
             instances,
-    });
+        },
-    testServerRoute(server, '/api/admin/metrics/instances/my-app/production', {
+    );
+    testServerRoute(
+        server,
+        '/api/admin/metrics/instances/my-app/environment/production',
+        {
             instances: [
                 {
-                instanceId: 'shouldNotShowUp',
+                    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 () => {

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] = useQueryParam(
-    const [currentEnvironment, setCurrentEnvironment] = useState(
+        'environment',
-        applicationEnvironments[0],
+        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);
 

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<ConnectedInstancesSchema>(
         Boolean(environment),

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: [

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({