From 1f8e938b9c9b996e438df8cae11da62c59ec743b Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Mon, 16 Mar 2020 14:38:31 +0100
Subject: [PATCH] [Searchprofiler] Spacing between rendered shards (#60238)
* Added unique key and some spacing to rendered shards
* Give key to React.Fragment
---
.../components/profile_tree/profile_tree.tsx | 14 ++++++--------
1 file changed, 6 insertions(+), 8 deletions(-)
diff --git a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx
index 87a73cdefba31..1dec8f0161c52 100644
--- a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx
+++ b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx
@@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React, { memo } from 'react';
+import React, { memo, Fragment } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { IndexDetails } from './index_details';
@@ -53,13 +53,11 @@ export const ProfileTree = memo(({ data, target, onHighlight }: Props) => {
</EuiFlexItem>
<EuiSpacer size="s" />
<EuiFlexItem grow={false}>
- {index.shards.map(shard => (
- <ShardDetails
- key={shard.id[1]}
- index={index}
- shard={shard}
- operations={shard[target]!}
- />
+ {index.shards.map((shard, idx) => (
+ <Fragment key={shard.id[1] + `_${idx}`}>
+ <ShardDetails index={index} shard={shard} operations={shard[target]!} />
+ {idx < index.shards.length - 1 ? <EuiSpacer size="s" /> : undefined}
+ </Fragment>
))}
</EuiFlexItem>
</EuiFlexGroup>