ProfileTree render test

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/profile_tree/__tests__/fixtures/search_response.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const searchResponse = [
+export const searchResponse: any = [
   {
     id: ['L22w_FX2SbqlQYOP5QrYDg', '.apm-agent-configuration', '0'],
     searches: [

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/profile_tree/__tests__/init_data.test.ts

@@ -8,14 +8,15 @@ import { Shard } from '../../../types';
 import { initDataFor } from '../init_data';
 
 import { searchResponse } from './fixtures/search_response';
-import { processedSearchResponseNew } from './fixtures/processed_search_response';
+import { processedResponseWithFirstShard } from './fixtures/processed_search_response';
 
 describe('ProfileTree init data', () => {
   test('provides the expected result', () => {
     const input: Shard[] = searchResponse as any;
     const actual = initDataFor('searches')(input);
-    expect(JSON.stringify(actual, null, 2)).toEqual(
-      JSON.stringify(processedSearchResponseNew, null, 2)
-    );
+
+    expect(actual[0].name).toEqual(processedResponseWithFirstShard[0].name);
+    const expectedFirstShard = processedResponseWithFirstShard[0].shards[0];
+    expect(actual[0].shards[0]).toEqual(expectedFirstShard);
   });
 });

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/profile_tree/init_data.ts

@@ -6,7 +6,7 @@
 
 import { produce } from 'immer';
 import { flow } from 'fp-ts/lib/function';
-import { Targets, Shard } from '../../types';
+import { Targets, Shard, ShardSerialized } from '../../types';
 import { calcTimes, normalizeTimes, initTree, normalizeIndices, sortIndices } from './unsafe_utils';
 import { IndexMap } from './types';
 
@@ -51,21 +51,14 @@ export function mutateSearchTimesTree(shard: Shard) {
   shard.time = shardTime;
 }
 
-const initShards = (data: Shard[]) =>
-  produce<Shard[]>(data, draft => {
-    for (const shard of draft) {
-      if (shard.time == null) {
-        shard.time = 0;
-      }
-
-      if (shard.color == null) {
-        shard.color = '';
-      }
-
-      if (shard.relative == null) {
-        shard.relative = 0;
-      }
-    }
+const initShards = (data: ShardSerialized[]) =>
+  produce<ShardSerialized[], Shard[]>(data, draft => {
+    return draft.map(s => ({
+      ...s,
+      time: 0,
+      color: '',
+      relative: 0,
+    }));
   });
 
 export const calculateShardValues = (target: Targets) => (data: Shard[]) =>

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/profile_tree/profile_tree.tsx

@@ -10,32 +10,37 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { IndexDetails } from './index_details';
 import { ShardDetails } from './shard_details';
 import { initDataFor } from './init_data';
-import { Shard, Targets } from '../../types';
+import { Targets, ShardSerialized } from '../../types';
 import { HighlightContextProvider } from './highlight_context';
 
-interface Props {
+export interface Props {
   target: Targets;
-  data: Shard[];
+  data: ShardSerialized[];
 }
 
 export const ProfileTree = ({ data, target }: Props) => {
   if (data.length === 0) {
     return null;
   }
 
-  const profileTreeData = initDataFor(target)(data);
+  const sortedIndices = initDataFor(target)(data);
 
   return (
     <HighlightContextProvider>
-      {profileTreeData.map(index => (
-        <EuiFlexGroup direction="column">
+      {sortedIndices.map(index => (
+        <EuiFlexGroup key={index.name} direction="column">
           <EuiFlexItem>
             <IndexDetails index={index} target={target} />
           </EuiFlexItem>
           <EuiSpacer />
           <EuiFlexItem>
             {index.shards.map(shard => (
-              <ShardDetails index={index} shard={shard} operations={shard[target]!} />
+              <ShardDetails
+                key={shard.id[1]}
+                index={index}
+                shard={shard}
+                operations={shard[target]!}
+              />
             ))}
           </EuiFlexItem>
         </EuiFlexGroup>

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/profile_tree/shard_details/shard_details_tree.tsx

@@ -18,7 +18,7 @@ export interface Props {
 export const ShardDetailTree = ({ data }: Props) => {
   // Recursively render the tree structure
   const renderOperations = (operation: Operation): JSX.Element => {
-    const parent = operation.getParent();
+    const parent = operation.parent;
     const parentVisible = parent ? parent.visible : false;
     return (
       <>

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/profile_tree/shard_details/shard_details_tree_leaf.tsx

@@ -5,8 +5,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiLink, EuiBadge, EuiCodeBlock } from '@elastic/eui';
-import { EuiIcon } from '@elastic/eui/src/components/icon/icon';
+import { EuiLink, EuiBadge, EuiCodeBlock, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { useHighlightTreeLeaf } from '../use_highlight_tree_leaf';
@@ -38,7 +37,7 @@ export const ShardDetailsTreeLeaf = ({ parentVisible, operation }: Props) => {
         <EuiLink
           className="prfDevTool__shardDetails"
           disabled={!operation.hasChildren}
-          onClick={() => {}}
+          onClick={() => setVisible(!visible)}
         >
           {operation.hasChildren ? (
             <EuiIcon type={operation.visible ? 'arrowDown' : 'arrowRight'} />

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/profile_tree/unsafe_utils.ts

@@ -163,9 +163,7 @@ export function initTree<T>(data: Operation[], depth = 0, parent: Operation | nu
     }
 
     // Use named function for tests.
-    child.getParent = function getParent() {
-      return parent;
-    };
+    child.parent = parent;
     child.time = timeInMilliseconds(child);
     child.lucene = child.description;
     child.query_type = child.type!.split('.').pop()!;

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/types.ts

@@ -31,9 +31,10 @@ export interface Index {
   visible: boolean;
 }
 
-export interface FlattenedStats {
-  time: number;
-  selfTime: number;
+export interface ShardSerialized {
+  id: string[];
+  searches: Operation[];
+  aggregations: Operation[];
 }
 
 export interface Operation {
@@ -45,7 +46,7 @@ export interface Operation {
   absoluteColor: string;
   time: number;
 
-  getParent(): Operation | null;
+  parent: Operation | null;
   children: Operation[];
 
   // Only exists on top level