[Searchprofiler] Spacing between rendered shards (#60238) (#60259)

* Added unique key and some spacing to rendered shards * Give key to React.Fragment
elastic · Mar 16, 2020 · d06af4d · d06af4d
1 parent a0605fd
commit d06af4d
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/...ugins/searchprofiler/public/np_ready/application/components/profile_tree/profile_tree.tsx b/...ugins/searchprofiler/public/np_ready/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>