[Inspector] Disambigutate request names (#133511) (#133556)

* disambigutate request names

* remove unnecessary copy of object

(cherry picked from commit 4f8080f788)

Co-authored-by: Jean-Louis Leysens <jeanlouis.leysens@elastic.co>

src/plugins/inspector/public/views/requests/components/disambiguate_request_names.test.ts

@@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Request } from '../../../../common/adapters/request/types';
+import { disambiguateRequestNames } from './disambiguate_request_names';
+
+describe('disambiguateRequestNames', () => {
+  test('correctly disambiguates request names and preserves order', () => {
+    const requests = [
+      {
+        id: '1',
+        name: 'Name A',
+      },
+      {
+        id: '2',
+        name: 'Name B',
+      },
+      {
+        id: '3',
+        name: 'Name A',
+      },
+      {
+        id: '4',
+        name: 'Name C',
+      },
+      {
+        id: '5',
+        name: 'Name B',
+      },
+      {
+        id: '6',
+        name: 'Name A',
+      },
+    ] as Request[];
+
+    expect(disambiguateRequestNames(requests)).toEqual([
+      {
+        id: '1',
+        name: 'Name A (1)',
+      },
+      {
+        id: '2',
+        name: 'Name B (1)',
+      },
+      {
+        id: '3',
+        name: 'Name A (2)',
+      },
+      {
+        id: '4',
+        name: 'Name C',
+      },
+      {
+        id: '5',
+        name: 'Name B (2)',
+      },
+      {
+        id: '6',
+        name: 'Name A (3)',
+      },
+    ]);
+  });
+
+  test('does not change names unnecessarily', () => {
+    const requests = [
+      {
+        id: '1',
+        name: 'Test 1',
+      },
+      {
+        id: '2',
+        name: 'Test 2',
+      },
+      {
+        id: '3',
+        name: 'Test 3',
+      },
+    ] as Request[];
+
+    expect(disambiguateRequestNames(requests)).toEqual(requests);
+  });
+
+  test('correctly handles empty arrays', () => {
+    expect(disambiguateRequestNames([])).toEqual([]);
+  });
+});

src/plugins/inspector/public/views/requests/components/disambiguate_request_names.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { groupBy } from 'lodash';
+import type { Request } from '../../../../common/adapters/request/types';
+
+export function disambiguateRequestNames(requests: Request[]): Request[] {
+  const requestsByName = groupBy(requests, (r) => r.name);
+
+  const newNamesById = Object.entries(requestsByName).reduce<{ [requestId: string]: string }>(
+    (acc, [name, reqs]) => {
+      const moreThanOne = reqs.length > 1;
+      reqs.forEach((req, idx) => {
+        const id = req.id;
+        acc[id] = moreThanOne ? `${name} (${idx + 1})` : name;
+      });
+      return acc;
+    },
+    {}
+  );
+
+  return requests.map((request) => ({
+    ...request,
+    name: newNamesById[request.id],
+  }));
+}

src/plugins/inspector/public/views/requests/components/requests_view.tsx

@@ -17,6 +17,7 @@ import { InspectorViewProps } from '../../../types';
 
 import { RequestSelector } from './request_selector';
 import { RequestDetails } from './request_details';
+import { disambiguateRequestNames } from './disambiguate_request_names';
 
 interface RequestSelectorState {
   requests: Request[];
@@ -34,15 +35,19 @@ export class RequestsViewComponent extends Component<InspectorViewProps, Request
 
     props.adapters.requests!.on('change', this._onRequestsChange);
 
-    const requests = props.adapters.requests!.getRequests();
+    const requests = this.getRequests();
     this.state = {
       requests,
       request: requests.length ? requests[0] : null,
     };
   }
 
+  getRequests(): Request[] {
+    return disambiguateRequestNames(this.props.adapters.requests!.getRequests());
+  }
+
   _onRequestsChange = () => {
-    const requests = this.props.adapters.requests!.getRequests();
+    const requests = this.getRequests();
     const newState = { requests } as RequestSelectorState;
 
     if (!this.state.request || !requests.includes(this.state.request)) {