diff --git a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
index 70ce722efd..0c51766a16 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Log Config component renders empty log config 1`] = `
-<Component
+<LogConfig
   appConfigs={Array []}
   chrome={
     Object {
@@ -444,7 +444,7 @@ exports[`Log Config component renders empty log config 1`] = `
                                   onBlur={[Function]}
                                   onFocus={[Function]}
                                 >
-                                  <Component
+                                  <Autocomplete
                                     baseQuery=""
                                     dslService={
                                       Object {
@@ -561,7 +561,7 @@ exports[`Log Config component renders empty log config 1`] = `
                                         </EuiValidatableControl>
                                       </EuiTextArea>
                                     </div>
-                                  </Component>
+                                  </Autocomplete>
                                   <EuiBadge
                                     className="ppl-link ppl-link-light"
                                     color="hollow"
@@ -616,11 +616,11 @@ exports[`Log Config component renders empty log config 1`] = `
       </div>
     </EuiAccordion>
   </div>
-</Component>
+</LogConfig>
 `;
 
 exports[`Log Config component renders with query 1`] = `
-<Component
+<LogConfig
   appConfigs={Array []}
   chrome={
     Object {
@@ -1068,7 +1068,7 @@ exports[`Log Config component renders with query 1`] = `
                                   onBlur={[Function]}
                                   onFocus={[Function]}
                                 >
-                                  <Component
+                                  <Autocomplete
                                     baseQuery=""
                                     dslService={
                                       Object {
@@ -1185,7 +1185,7 @@ exports[`Log Config component renders with query 1`] = `
                                         </EuiValidatableControl>
                                       </EuiTextArea>
                                     </div>
-                                  </Component>
+                                  </Autocomplete>
                                   <EuiBadge
                                     className="ppl-link ppl-link-light"
                                     color="hollow"
@@ -1240,5 +1240,5 @@ exports[`Log Config component renders with query 1`] = `
       </div>
     </EuiAccordion>
   </div>
-</Component>
+</LogConfig>
 `;
diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
index ec0cf3879e..8bf087911f 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Service Config component renders empty service config 1`] = `
-<Component
+<ServiceConfig
   appConfigs={Array []}
   chrome={
     Object {
@@ -1171,11 +1171,11 @@ exports[`Service Config component renders empty service config 1`] = `
       </div>
     </EuiAccordion>
   </div>
-</Component>
+</ServiceConfig>
 `;
 
 exports[`Service Config component renders with one service selected 1`] = `
-<Component
+<ServiceConfig
   appConfigs={Array []}
   chrome={
     Object {
@@ -2373,5 +2373,5 @@ exports[`Service Config component renders with one service selected 1`] = `
       </div>
     </EuiAccordion>
   </div>
-</Component>
+</ServiceConfig>
 `;
diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
index cf475f481d..ca51495382 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Trace Config component renders empty trace config 1`] = `
-<Component
+<TraceConfig
   chrome={
     Object {
       "addApplicationClass": [MockFunction],
@@ -895,11 +895,11 @@ exports[`Trace Config component renders empty trace config 1`] = `
       </div>
     </EuiAccordion>
   </div>
-</Component>
+</TraceConfig>
 `;
 
 exports[`Trace Config component renders with one trace selected 1`] = `
-<Component
+<TraceConfig
   chrome={
     Object {
       "addApplicationClass": [MockFunction],
@@ -1817,5 +1817,5 @@ exports[`Trace Config component renders with one trace selected 1`] = `
       </div>
     </EuiAccordion>
   </div>
-</Component>
+</TraceConfig>
 `;
diff --git a/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap b/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap
index 553f9b0dff..3e8c7b716a 100644
--- a/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap
+++ b/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Live tail button change live tail to 10s interval 1`] = `
-<Component
+<LiveTailButton
   dataTestSubj=""
   isLiveTailOn={true}
   isLiveTailPopoverOpen={false}
@@ -91,11 +91,11 @@ exports[`Live tail button change live tail to 10s interval 1`] = `
       </button>
     </EuiButtonDisplay>
   </EuiButton>
-</Component>
+</LiveTailButton>
 `;
 
 exports[`Live tail button starts live tail with 5s interval 1`] = `
-<Component
+<LiveTailButton
   dataTestSubj=""
   isLiveTailOn={true}
   isLiveTailPopoverOpen={false}
@@ -180,11 +180,11 @@ exports[`Live tail button starts live tail with 5s interval 1`] = `
       </button>
     </EuiButtonDisplay>
   </EuiButton>
-</Component>
+</LiveTailButton>
 `;
 
 exports[`Live tail off button stop live tail 1`] = `
-<Component
+<StopLiveButton
   StopLive={[MockFunction]}
   dataTestSubj=""
 >
@@ -271,5 +271,5 @@ exports[`Live tail off button stop live tail 1`] = `
       </button>
     </EuiButtonDisplay>
   </EuiButton>
-</Component>
+</StopLiveButton>
 `;
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
index e32dd9ff05..e923079d1e 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Panels Table Component renders empty panel table container 1`] = `
     }
   }
 >
-  <Component
+  <CustomPanelTable
     addSamplePanels={[MockFunction]}
     cloneCustomPanel={[MockFunction]}
     createCustomPanel={[MockFunction]}
@@ -591,7 +591,7 @@ exports[`Panels Table Component renders empty panel table container 1`] = `
         </div>
       </EuiPage>
     </div>
-  </Component>
+  </CustomPanelTable>
 </Provider>
 `;
 
@@ -607,7 +607,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
     }
   }
 >
-  <Component
+  <CustomPanelTable
     addSamplePanels={[MockFunction]}
     cloneCustomPanel={[MockFunction]}
     createCustomPanel={[MockFunction]}
@@ -1220,6 +1220,6 @@ exports[`Panels Table Component renders panel table container 1`] = `
         </div>
       </EuiPage>
     </div>
-  </Component>
+  </CustomPanelTable>
 </Provider>
 `;
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
index 019a73b7a3..2ae613aa25 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Panels View Component renders panel view container with visualizations
     }
   }
 >
-  <Component
+  <CustomPanelView
     chrome={
       Object {
         "addApplicationClass": [MockFunction],
@@ -730,7 +730,7 @@ exports[`Panels View Component renders panel view container with visualizations
                             <div
                               className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <Component
+                              <AddVisualizationPopover
                                 addVizDisabled={false}
                                 showFlyout={[Function]}
                               >
@@ -849,7 +849,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                     </div>
                                   </div>
                                 </EuiPopover>
-                              </Component>
+                              </AddVisualizationPopover>
                             </div>
                           </EuiFlexItem>
                         </div>
@@ -872,7 +872,7 @@ exports[`Panels View Component renders panel view container with visualizations
                         <div
                           className="euiFlexItem"
                         >
-                          <Component
+                          <Autocomplete
                             append={
                               <EuiLink
                                 aria-label="ppl-info"
@@ -1051,7 +1051,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                 </EuiFormControlLayout>
                               </EuiFieldText>
                             </div>
-                          </Component>
+                          </Autocomplete>
                         </div>
                       </EuiFlexItem>
                       <EuiFlexItem
@@ -1588,7 +1588,7 @@ exports[`Panels View Component renders panel view container with visualizations
                       className="euiSpacer euiSpacer--l"
                     />
                   </EuiSpacer>
-                  <Component
+                  <EmptyPanelView
                     addVizDisabled={false}
                     showFlyout={[Function]}
                   >
@@ -1666,7 +1666,7 @@ exports[`Panels View Component renders panel view container with visualizations
                             <div
                               className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <Component
+                              <AddVisualizationPopover
                                 addVizDisabled={false}
                                 showFlyout={[Function]}
                               >
@@ -1785,7 +1785,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                     </div>
                                   </div>
                                 </EuiPopover>
-                              </Component>
+                              </AddVisualizationPopover>
                             </div>
                           </EuiFlexItem>
                         </div>
@@ -1798,8 +1798,8 @@ exports[`Panels View Component renders panel view container with visualizations
                         />
                       </EuiSpacer>
                     </div>
-                  </Component>
-                  <Component
+                  </EmptyPanelView>
+                  <PanelGrid
                     chrome={
                       Object {
                         "addApplicationClass": [MockFunction],
@@ -2330,7 +2330,7 @@ exports[`Panels View Component renders panel view container with visualizations
                         </ReactGridLayout>
                       </ResponsiveReactGridLayout>
                     </WidthProvider>
-                  </Component>
+                  </PanelGrid>
                 </div>
               </EuiPageContentBody>
             </div>
@@ -2338,7 +2338,7 @@ exports[`Panels View Component renders panel view container with visualizations
         </div>
       </EuiPage>
     </div>
-  </Component>
+  </CustomPanelView>
 </Provider>
 `;
 
@@ -2354,7 +2354,7 @@ exports[`Panels View Component renders panel view container without visualizatio
     }
   }
 >
-  <Component
+  <CustomPanelView
     chrome={
       Object {
         "addApplicationClass": [MockFunction],
@@ -2952,7 +2952,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                             <div
                               className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <Component
+                              <AddVisualizationPopover
                                 addVizDisabled={false}
                                 showFlyout={[Function]}
                               >
@@ -3066,7 +3066,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     </div>
                                   </div>
                                 </EuiPopover>
-                              </Component>
+                              </AddVisualizationPopover>
                             </div>
                           </EuiFlexItem>
                         </div>
@@ -3089,7 +3089,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                         <div
                           className="euiFlexItem"
                         >
-                          <Component
+                          <Autocomplete
                             append={
                               <EuiLink
                                 aria-label="ppl-info"
@@ -3268,7 +3268,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                 </EuiFormControlLayout>
                               </EuiFieldText>
                             </div>
-                          </Component>
+                          </Autocomplete>
                         </div>
                       </EuiFlexItem>
                       <EuiFlexItem
@@ -3791,7 +3791,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                       className="euiSpacer euiSpacer--l"
                     />
                   </EuiSpacer>
-                  <Component
+                  <EmptyPanelView
                     addVizDisabled={false}
                     showFlyout={[Function]}
                   >
@@ -3869,7 +3869,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                             <div
                               className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <Component
+                              <AddVisualizationPopover
                                 addVizDisabled={false}
                                 showFlyout={[Function]}
                               >
@@ -3983,7 +3983,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     </div>
                                   </div>
                                 </EuiPopover>
-                              </Component>
+                              </AddVisualizationPopover>
                             </div>
                           </EuiFlexItem>
                         </div>
@@ -3996,8 +3996,8 @@ exports[`Panels View Component renders panel view container without visualizatio
                         />
                       </EuiSpacer>
                     </div>
-                  </Component>
-                  <Component
+                  </EmptyPanelView>
+                  <PanelGrid
                     chrome={
                       Object {
                         "addApplicationClass": [MockFunction],
@@ -4417,7 +4417,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                         </ReactGridLayout>
                       </ResponsiveReactGridLayout>
                     </WidthProvider>
-                  </Component>
+                  </PanelGrid>
                 </div>
               </EuiPageContentBody>
             </div>
@@ -4425,6 +4425,6 @@ exports[`Panels View Component renders panel view container without visualizatio
         </div>
       </EuiPage>
     </div>
-  </Component>
+  </CustomPanelView>
 </Provider>
 `;
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index adf75a180e..c631ea0120 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Utils helper functions renders displayVisualization function 1`] = `
 <div>
-  <Component
+  <Visualization
     visualizations={
       Object {
         "data": Object {
@@ -457,7 +457,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
       }
     }
   >
-    <Component
+    <VisualizationChart
       visualizations={
         Object {
           "data": Object {
@@ -912,7 +912,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
         }
       }
     >
-      <Component
+      <Bar
         config={
           Object {
             "displaylogo": false,
@@ -1574,15 +1574,15 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
             />
           </PlotlyComponent>
         </Plt>
-      </Component>
-    </Component>
-  </Component>
+      </Bar>
+    </VisualizationChart>
+  </Visualization>
 </div>
 `;
 
 exports[`Utils helper functions renders displayVisualization function 2`] = `
 <div>
-  <Component
+  <Visualization
     visualizations={
       Object {
         "data": Object {
@@ -2098,7 +2098,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
       }
     }
   >
-    <Component
+    <VisualizationChart
       visualizations={
         Object {
           "data": Object {
@@ -2614,7 +2614,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
         }
       }
     >
-      <Component
+      <Line
         config={
           Object {
             "barmode": "line",
@@ -3339,15 +3339,15 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             />
           </PlotlyComponent>
         </Plt>
-      </Component>
-    </Component>
-  </Component>
+      </Line>
+    </VisualizationChart>
+  </Visualization>
 </div>
 `;
 
 exports[`Utils helper functions renders displayVisualization function 3`] = `
 <div>
-  <Component
+  <Visualization
     visualizations={
       Object {
         "data": Object {
@@ -3802,7 +3802,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
       }
     }
   >
-    <Component
+    <VisualizationChart
       visualizations={
         Object {
           "data": Object {
@@ -4257,7 +4257,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
         }
       }
     >
-      <Component
+      <Bar
         config={
           Object {
             "displaylogo": false,
@@ -4919,9 +4919,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
             />
           </PlotlyComponent>
         </Plt>
-      </Component>
-    </Component>
-  </Component>
+      </Bar>
+    </VisualizationChart>
+  </Visualization>
 </div>
 `;
 
diff --git a/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap b/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap
index cfc104e68a..0e74bd718b 100644
--- a/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Empty panel view component renders empty panel view with disabled popover 1`] = `
-<Component
+<EmptyPanelView
   addVizDisabled={true}
   showFlyout={[MockFunction]}
 >
@@ -79,7 +79,7 @@ exports[`Empty panel view component renders empty panel view with disabled popov
           <div
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <Component
+            <AddVisualizationPopover
               addVizDisabled={true}
               showFlyout={[MockFunction]}
             >
@@ -193,7 +193,7 @@ exports[`Empty panel view component renders empty panel view with disabled popov
                   </div>
                 </div>
               </EuiPopover>
-            </Component>
+            </AddVisualizationPopover>
           </div>
         </EuiFlexItem>
       </div>
@@ -206,11 +206,11 @@ exports[`Empty panel view component renders empty panel view with disabled popov
       />
     </EuiSpacer>
   </div>
-</Component>
+</EmptyPanelView>
 `;
 
 exports[`Empty panel view component renders empty panel view with enabled popover 1`] = `
-<Component
+<EmptyPanelView
   addVizDisabled={false}
   showFlyout={[MockFunction]}
 >
@@ -288,7 +288,7 @@ exports[`Empty panel view component renders empty panel view with enabled popove
           <div
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <Component
+            <AddVisualizationPopover
               addVizDisabled={false}
               showFlyout={[MockFunction]}
             >
@@ -407,7 +407,7 @@ exports[`Empty panel view component renders empty panel view with enabled popove
                   </div>
                 </div>
               </EuiPopover>
-            </Component>
+            </AddVisualizationPopover>
           </div>
         </EuiFlexItem>
       </div>
@@ -420,5 +420,5 @@ exports[`Empty panel view component renders empty panel view with enabled popove
       />
     </EuiSpacer>
   </div>
-</Component>
+</EmptyPanelView>
 `;
diff --git a/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
index 51b0c4a758..554ebc9e5d 100644
--- a/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Panel Grid Component renders panel grid component with empty visualizations 1`] = `
-<Component
+<PanelGrid
   chrome={
     Object {
       "addApplicationClass": [MockFunction],
@@ -396,5 +396,5 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
       </ReactGridLayout>
     </ResponsiveReactGridLayout>
   </WidthProvider>
-</Component>
+</PanelGrid>
 `;
diff --git a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
index 4ba3e3ec34..778d6e1674 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Visualization Container Component renders add visualization container 1`] = `
-<Component
+<VisualizationContainer
   cloneVisualization={[MockFunction]}
   editMode={true}
   fromTime="now-15m"
@@ -152,5 +152,5 @@ exports[`Visualization Container Component renders add visualization container 1
       </div>
     </div>
   </EuiPanel>
-</Component>
+</VisualizationContainer>
 `;
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
index f9bb8c76ae..0e37e1e4a2 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
-<Component
+<VisaulizationFlyout
   closeFlyout={[MockFunction]}
   end="now"
   http={[MockFunction]}
@@ -18,7 +18,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
   setToast={[MockFunction]}
   start="now-15m"
 >
-  <Component
+  <FlyoutContainers
     ariaLabel="addVisualizationFlyout"
     closeFlyout={[MockFunction]}
     flyoutBody={
@@ -1240,12 +1240,12 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
         </EuiPortal>
       </EuiFlyout>
     </div>
-  </Component>
-</Component>
+  </FlyoutContainers>
+</VisaulizationFlyout>
 `;
 
 exports[`Visualization Flyout Component renders replace visualization Flyout 1`] = `
-<Component
+<VisaulizationFlyout
   closeFlyout={[MockFunction]}
   end="2011-08-12T01:23:45.678Z"
   http={[MockFunction]}
@@ -1263,7 +1263,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
   setToast={[MockFunction]}
   start="2011-08-11T01:23:45.678Z"
 >
-  <Component
+  <FlyoutContainers
     ariaLabel="addVisualizationFlyout"
     closeFlyout={[MockFunction]}
     flyoutBody={
@@ -2509,6 +2509,6 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
         </EuiPortal>
       </EuiFlyout>
     </div>
-  </Component>
-</Component>
+  </FlyoutContainers>
+</VisaulizationFlyout>
 `;
diff --git a/public/components/datasources/components/__tests__/__snapshots__/connection_details.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/connection_details.test.tsx.snap
index 6ebfa5078a..6fb23b7abb 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/connection_details.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/connection_details.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Connection Details test Renders connection details for prometheus datasource 1`] = `
-<Component
+<ConnectionDetails
   connector="PROMETHEUS"
   dataConnection="prom"
   description=""
@@ -16,7 +16,7 @@ exports[`Connection Details test Renders connection details for prometheus datas
       className="euiSpacer euiSpacer--l"
     />
   </EuiSpacer>
-  <Component>
+  <ConnectionManagementCallout>
     <EuiCallOut
       iconType="iInCircle"
       title="Configurations may be managed elsewhere."
@@ -86,7 +86,7 @@ exports[`Connection Details test Renders connection details for prometheus datas
         </EuiText>
       </div>
     </EuiCallOut>
-  </Component>
+  </ConnectionManagementCallout>
   <EuiSpacer>
     <div
       className="euiSpacer euiSpacer--l"
@@ -260,11 +260,11 @@ exports[`Connection Details test Renders connection details for prometheus datas
       className="euiSpacer euiSpacer--l"
     />
   </EuiSpacer>
-</Component>
+</ConnectionDetails>
 `;
 
 exports[`Connection Details test Renders connection details for s3 datasource 1`] = `
-<Component
+<ConnectionDetails
   connector="S3GLUE"
   dataConnection="ya"
   description=""
@@ -280,7 +280,7 @@ exports[`Connection Details test Renders connection details for s3 datasource 1`
       className="euiSpacer euiSpacer--l"
     />
   </EuiSpacer>
-  <Component>
+  <ConnectionManagementCallout>
     <EuiCallOut
       iconType="iInCircle"
       title="Configurations may be managed elsewhere."
@@ -345,7 +345,7 @@ exports[`Connection Details test Renders connection details for s3 datasource 1`
         </EuiText>
       </div>
     </EuiCallOut>
-  </Component>
+  </ConnectionManagementCallout>
   <EuiSpacer>
     <div
       className="euiSpacer euiSpacer--l"
@@ -546,5 +546,5 @@ exports[`Connection Details test Renders connection details for s3 datasource 1`
       className="euiSpacer euiSpacer--l"
     />
   </EuiSpacer>
-</Component>
+</ConnectionDetails>
 `;
diff --git a/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap
index d724537df8..b0af24ae49 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Manage Data Connections Description test Renders manage data connections description 1`] = `
-<Component
+<DataConnectionsDescription
   refresh={[Function]}
 >
   <div>
@@ -157,5 +157,5 @@ exports[`Manage Data Connections Description test Renders manage data connection
       />
     </EuiHorizontalRule>
   </div>
-</Component>
+</DataConnectionsDescription>
 `;
diff --git a/public/components/datasources/components/__tests__/__snapshots__/no_access.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/no_access.test.tsx.snap
index 89c389ab83..a4b27f4544 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/no_access.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/no_access.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`No access test Renders no access view of data source 1`] = `
-<Component>
+<NoAccess>
   <EuiPage>
     <div
       className="euiPage euiPage--paddingMedium euiPage--grow"
@@ -159,5 +159,5 @@ exports[`No access test Renders no access view of data source 1`] = `
       </EuiEmptyPrompt>
     </div>
   </EuiPage>
-</Component>
+</NoAccess>
 `;
diff --git a/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap b/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
index 3e23d7126c..e1782a0b31 100644
--- a/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
+++ b/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`No result component Renders No result component 1`] = `
-<Component>
+<NoResults>
   <EuiPage
     paddingSize="s"
   >
@@ -134,5 +134,5 @@ exports[`No result component Renders No result component 1`] = `
       </EuiFlexGroup>
     </div>
   </EuiPage>
-</Component>
+</NoResults>
 `;
diff --git a/public/components/event_analytics/explorer/log_patterns/__tests__/__snapshots__/patterns_header.test.tsx.snap b/public/components/event_analytics/explorer/log_patterns/__tests__/__snapshots__/patterns_header.test.tsx.snap
index 2ce4cbd870..8777405139 100644
--- a/public/components/event_analytics/explorer/log_patterns/__tests__/__snapshots__/patterns_header.test.tsx.snap
+++ b/public/components/event_analytics/explorer/log_patterns/__tests__/__snapshots__/patterns_header.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Patterns header component Renders header of log patterns 1`] = `
-<Component
+<PatternsHeader
   isPatternConfigPopoverOpen={true}
   onPatternApply={[MockFunction]}
   patternRegexInput="[a-zA-Zd]"
@@ -773,5 +773,5 @@ exports[`Patterns header component Renders header of log patterns 1`] = `
       </EuiFlexItem>
     </div>
   </EuiFlexGroup>
-</Component>
+</PatternsHeader>
 `;
diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
index a3a23c1117..f6f024c453 100644
--- a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
     }
   }
 >
-  <Component
+  <SavePanel
     curVisId="line"
     handleNameChange={[MockFunction]}
     handleOptionChange={[MockFunction]}
@@ -641,6 +641,6 @@ exports[`Saved query table component Renders saved query table 1`] = `
         </div>
       </div>
     </EuiFormRow>
-  </Component>
+  </SavePanel>
 </Provider>
 `;
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
index 7f7e730ccb..acf3d81679 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Field component Renders a sidebar field 1`] = `
     }
   }
 >
-  <Component
+  <Field
     field={
       Object {
         "name": "agent",
@@ -357,6 +357,6 @@ exports[`Field component Renders a sidebar field 1`] = `
         </EuiFlexItem>
       </div>
     </EuiFlexGroup>
-  </Component>
+  </Field>
 </Provider>
 `;
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index 28c6cd8128..102994f08e 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Siderbar component Renders empty sidebar component 1`] = `
     }
   }
 >
-  <Component
+  <Sidebar
     explorerData={Object {}}
     explorerFields={
       Object {
@@ -314,7 +314,7 @@ exports[`Siderbar component Renders empty sidebar component 1`] = `
         </PseudoLocaleWrapper>
       </IntlProvider>
     </I18nProvider>
-  </Component>
+  </Sidebar>
 </Provider>
 `;
 
@@ -330,7 +330,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
     }
   }
 >
-  <Component
+  <Sidebar
     explorerData={
       Object {
         "jsonData": Array [
@@ -1139,7 +1139,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="double_per_ip_bytes"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "double_per_ip_bytes",
@@ -1426,7 +1426,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -1526,7 +1526,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="host"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "host",
@@ -1813,7 +1813,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -1913,7 +1913,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="ip_count"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "ip_count",
@@ -2200,7 +2200,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -2300,7 +2300,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="per_ip_bytes"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "per_ip_bytes",
@@ -2587,7 +2587,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -2687,7 +2687,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="resp_code"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "resp_code",
@@ -2974,7 +2974,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -3074,7 +3074,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="sum_bytes"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "sum_bytes",
@@ -3361,7 +3361,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -3619,7 +3619,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="agent"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "agent",
@@ -3963,7 +3963,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -4063,7 +4063,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="bytes"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "bytes",
@@ -4351,7 +4351,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -4451,7 +4451,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="clientip"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "clientip",
@@ -4739,7 +4739,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -4839,7 +4839,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="event"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "event",
@@ -5127,7 +5127,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -5227,7 +5227,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="extension"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "extension",
@@ -5571,7 +5571,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -5671,7 +5671,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="geo"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "geo",
@@ -5959,7 +5959,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -6059,7 +6059,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="host"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "host",
@@ -6403,7 +6403,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -6503,7 +6503,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="index"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "index",
@@ -6847,7 +6847,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -6947,7 +6947,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="ip"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "ip",
@@ -7235,7 +7235,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -7335,7 +7335,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="machine"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "machine",
@@ -7623,7 +7623,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -7723,7 +7723,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="memory"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "memory",
@@ -8011,7 +8011,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -8111,7 +8111,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="message"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "message",
@@ -8455,7 +8455,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -8555,7 +8555,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="phpmemory"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "phpmemory",
@@ -8843,7 +8843,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -8943,7 +8943,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="referer"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "referer",
@@ -9287,7 +9287,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -9387,7 +9387,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="request"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "request",
@@ -9731,7 +9731,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -9831,7 +9831,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="response"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "response",
@@ -10175,7 +10175,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -10275,7 +10275,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="tags"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "tags",
@@ -10619,7 +10619,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -10719,7 +10719,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="timestamp"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "timestamp",
@@ -11048,7 +11048,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -11148,7 +11148,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="url"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "url",
@@ -11492,7 +11492,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -11592,7 +11592,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                         data-attr-field="utc_time"
                                                         data-test-subj="fieldList-field"
                                                       >
-                                                        <Component
+                                                        <Field
                                                           field={
                                                             Object {
                                                               "name": "utc_time",
@@ -11936,7 +11936,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                               </EuiFlexItem>
                                                             </div>
                                                           </EuiFlexGroup>
-                                                        </Component>
+                                                        </Field>
                                                       </div>
                                                     </EuiPanel>
                                                   </div>
@@ -11971,6 +11971,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
         </PseudoLocaleWrapper>
       </IntlProvider>
     </I18nProvider>
-  </Component>
+  </Sidebar>
 </Provider>
 `;
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index 6162e2a462..84e5c1528c 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Config panel component Renders config panel with visualization data 1`] = `
-<Component
+<ConfigPanel
   changeIsValidConfigOptionState={[MockFunction]}
   setCurVisId={[MockFunction]}
   visualizations={
@@ -4473,7 +4473,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
         onTabClick={[Function]}
         selectedTab={
           Object {
-            "content": <Unknown
+            "content": <VizDataPanel
               curVisId="bar"
               onConfigChange={[Function]}
               tabProps={
@@ -5415,7 +5415,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
         tabs={
           Array [
             Object {
-              "content": <Unknown
+              "content": <VizDataPanel
                 curVisId="bar"
                 onConfigChange={[Function]}
                 tabProps={
@@ -6398,7 +6398,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
             id="random_html_id"
             role="tabpanel"
           >
-            <Component
+            <VizDataPanel
               curVisId="bar"
               onConfigChange={[Function]}
               tabProps={
@@ -7357,7 +7357,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         <div
                           className="euiFormRow__fieldWrapper"
                         >
-                          <Component
+                          <ConfigPanelOptions
                             handleConfigChange={[Function]}
                             id="random_html_id"
                             onBlur={[Function]}
@@ -8259,7 +8259,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 </div>
                               </div>
                             </EuiAccordion>
-                          </Component>
+                          </ConfigPanelOptions>
                         </div>
                       </div>
                     </EuiFormRow>
@@ -8278,7 +8278,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         <div
                           className="euiFormRow__fieldWrapper"
                         >
-                          <Component
+                          <ConfigTooltip
                             handleConfigChange={[Function]}
                             id="random_html_id"
                             onBlur={[Function]}
@@ -9078,7 +9078,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         <div
                                           id="random_html_id"
                                         >
-                                          <Component
+                                          <ButtonGroupItem
                                             defaultSelections={
                                               Array [
                                                 Object {
@@ -9345,7 +9345,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 </fieldset>
                                               </EuiButtonGroup>
                                             </div>
-                                          </Component>
+                                          </ButtonGroupItem>
                                           <EuiSpacer
                                             size="s"
                                           >
@@ -9357,7 +9357,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         <div
                                           id="random_html_id"
                                         >
-                                          <Component
+                                          <ButtonGroupItem
                                             defaultSelections={
                                               Array [
                                                 Object {
@@ -9718,7 +9718,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 </fieldset>
                                               </EuiButtonGroup>
                                             </div>
-                                          </Component>
+                                          </ButtonGroupItem>
                                           <EuiSpacer
                                             size="s"
                                           >
@@ -9733,7 +9733,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 </div>
                               </div>
                             </EuiAccordion>
-                          </Component>
+                          </ConfigTooltip>
                         </div>
                       </div>
                     </EuiFormRow>
@@ -9752,7 +9752,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         <div
                           className="euiFormRow__fieldWrapper"
                         >
-                          <Component
+                          <ConfigLegend
                             handleConfigChange={[Function]}
                             id="random_html_id"
                             onBlur={[Function]}
@@ -10552,7 +10552,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       <div
                                         className="euiAccordion__padding--s"
                                       >
-                                        <Component
+                                        <ButtonGroupItem
                                           defaultSelections={
                                             Array [
                                               Object {
@@ -10818,7 +10818,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </fieldset>
                                             </EuiButtonGroup>
                                           </div>
-                                        </Component>
+                                        </ButtonGroupItem>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -10826,7 +10826,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             className="euiSpacer euiSpacer--s"
                                           />
                                         </EuiSpacer>
-                                        <Component
+                                        <ButtonGroupItem
                                           defaultSelections={
                                             Array [
                                               Object {
@@ -11092,7 +11092,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </fieldset>
                                             </EuiButtonGroup>
                                           </div>
-                                        </Component>
+                                        </ButtonGroupItem>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -11100,7 +11100,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             className="euiSpacer euiSpacer--s"
                                           />
                                         </EuiSpacer>
-                                        <Component
+                                        <InputFieldItem
                                           currentValue=""
                                           handleInputChange={[Function]}
                                           numValue=""
@@ -11164,7 +11164,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </div>
                                             </EuiFormControlLayout>
                                           </EuiFieldNumber>
-                                        </Component>
+                                        </InputFieldItem>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -11178,7 +11178,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 </div>
                               </div>
                             </EuiAccordion>
-                          </Component>
+                          </ConfigLegend>
                         </div>
                       </div>
                     </EuiFormRow>
@@ -11197,7 +11197,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         <div
                           className="euiFormRow__fieldWrapper"
                         >
-                          <Component
+                          <ConfigBarChartStyles
                             handleConfigChange={[Function]}
                             id="random_html_id"
                             onBlur={[Function]}
@@ -12050,7 +12050,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       <div
                                         className="euiAccordion__padding--s"
                                       >
-                                        <Component
+                                        <ButtonGroupItem
                                           defaultSelections={
                                             Array [
                                               Object {
@@ -12316,7 +12316,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </fieldset>
                                             </EuiButtonGroup>
                                           </div>
-                                        </Component>
+                                        </ButtonGroupItem>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -12324,7 +12324,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             className="euiSpacer euiSpacer--s"
                                           />
                                         </EuiSpacer>
-                                        <Component
+                                        <InputFieldItem
                                           handleInputChange={[Function]}
                                           numValue=""
                                           title="Label size"
@@ -12387,7 +12387,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </div>
                                             </EuiFormControlLayout>
                                           </EuiFieldNumber>
-                                        </Component>
+                                        </InputFieldItem>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -12395,7 +12395,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             className="euiSpacer euiSpacer--s"
                                           />
                                         </EuiSpacer>
-                                        <Component
+                                        <SliderConfig
                                           currentRange={0}
                                           handleSliderChange={[Function]}
                                           max={90}
@@ -13372,7 +13372,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </div>
                                             </EuiRangeWrapper>
                                           </EuiRange>
-                                        </Component>
+                                        </SliderConfig>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -13380,7 +13380,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             className="euiSpacer euiSpacer--s"
                                           />
                                         </EuiSpacer>
-                                        <Component
+                                        <SliderConfig
                                           currentRange={0.7}
                                           handleSliderChange={[Function]}
                                           max={1}
@@ -13613,7 +13613,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </div>
                                             </EuiRangeWrapper>
                                           </EuiRange>
-                                        </Component>
+                                        </SliderConfig>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -13621,7 +13621,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             className="euiSpacer euiSpacer--s"
                                           />
                                         </EuiSpacer>
-                                        <Component
+                                        <SliderConfig
                                           currentRange={0.97}
                                           handleSliderChange={[Function]}
                                           max={1}
@@ -13854,7 +13854,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </div>
                                             </EuiRangeWrapper>
                                           </EuiRange>
-                                        </Component>
+                                        </SliderConfig>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -13862,7 +13862,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             className="euiSpacer euiSpacer--s"
                                           />
                                         </EuiSpacer>
-                                        <Component
+                                        <SliderConfig
                                           currentRange={0}
                                           handleSliderChange={[Function]}
                                           max={10}
@@ -14095,7 +14095,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </div>
                                             </EuiRangeWrapper>
                                           </EuiRange>
-                                        </Component>
+                                        </SliderConfig>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -14103,7 +14103,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             className="euiSpacer euiSpacer--s"
                                           />
                                         </EuiSpacer>
-                                        <Component
+                                        <SliderConfig
                                           currentRange={100}
                                           handleSliderChange={[Function]}
                                           max={100}
@@ -14336,7 +14336,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               </div>
                                             </EuiRangeWrapper>
                                           </EuiRange>
-                                        </Component>
+                                        </SliderConfig>
                                         <EuiSpacer
                                           size="s"
                                         >
@@ -14350,7 +14350,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 </div>
                               </div>
                             </EuiAccordion>
-                          </Component>
+                          </ConfigBarChartStyles>
                         </div>
                       </div>
                     </EuiFormRow>
@@ -14369,7 +14369,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         <div
                           className="euiFormRow__fieldWrapper"
                         >
-                          <Component
+                          <ConfigColorTheme
                             handleConfigChange={[Function]}
                             id="random_html_id"
                             onBlur={[Function]}
@@ -15174,18 +15174,18 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 </div>
                               </div>
                             </EuiAccordion>
-                          </Component>
+                          </ConfigColorTheme>
                         </div>
                       </div>
                     </EuiFormRow>
                   </div>
                 </EuiForm>
               </div>
-            </Component>
+            </VizDataPanel>
           </div>
         </div>
       </EuiTabbedContent>
     </div>
   </div>
-</Component>
+</ConfigPanel>
 `;
diff --git a/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
index b9931d0f30..4866f91f5f 100644
--- a/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Count distribution component Renders count distribution component with data 1`] = `
-<Component
+<CountDistribution
   countDistribution={
     Object {
       "data": Object {
@@ -47,4 +47,4 @@ exports[`Count distribution component Renders count distribution component with
 />
 `;
 
-exports[`Count distribution component Renders empty count distribution component 1`] = `<Component />`;
+exports[`Count distribution component Renders empty count distribution component 1`] = `<CountDistribution />`;
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
index 8ad8b6d5f5..5ad92839f3 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Search Bar Component Search Side Bar Component with available metrics 1
     }
   }
 >
-  <Component
+  <SearchBar
     setSearch={[MockFunction]}
   >
     <div
@@ -149,7 +149,7 @@ exports[`Search Bar Component Search Side Bar Component with available metrics 1
         </EuiFlexGroup>
       </EuiSearchBar>
     </div>
-  </Component>
+  </SearchBar>
 </Provider>
 `;
 
@@ -165,7 +165,7 @@ exports[`Search Bar Component Search Side Bar Component with no available metric
     }
   }
 >
-  <Component
+  <SearchBar
     setSearch={[MockFunction]}
   >
     <div
@@ -298,6 +298,6 @@ exports[`Search Bar Component Search Side Bar Component with no available metric
         </EuiFlexGroup>
       </EuiSearchBar>
     </div>
-  </Component>
+  </SearchBar>
 </Provider>
 `;
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index d4daaa853d..73f3e499ad 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
     }
   }
 >
-  <Component>
+  <Sidebar>
     <I18nProvider>
       <IntlProvider
         defaultLocale="en"
@@ -102,7 +102,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
           <section
             className="sidebarHeight"
           >
-            <Component>
+            <SearchBar>
               <div
                 className="metrics-search-bar-input"
                 data-test-subj="metricsSearch"
@@ -233,7 +233,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                   </EuiFlexGroup>
                 </EuiSearchBar>
               </div>
-            </Component>
+            </SearchBar>
             <EuiSpacer
               size="s"
             >
@@ -241,7 +241,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
             </EuiSpacer>
-            <Component
+            <MetricsAccordion
               dataTestSubj="metricsListItems_selectedMetrics"
               handleClick={[Function]}
               headerName="Selected Metrics"
@@ -353,7 +353,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                   </div>
                 </div>
               </EuiAccordion>
-            </Component>
+            </MetricsAccordion>
             <EuiSpacer
               size="s"
             >
@@ -361,7 +361,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
             </EuiSpacer>
-            <Component
+            <MetricsAccordion
               dataTestSubj="metricsListItems_availableMetrics"
               handleClick={[Function]}
               headerName="Available Metrics"
@@ -473,11 +473,11 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                   </div>
                 </div>
               </EuiAccordion>
-            </Component>
+            </MetricsAccordion>
           </section>
         </PseudoLocaleWrapper>
       </IntlProvider>
     </I18nProvider>
-  </Component>
+  </Sidebar>
 </Provider>
 `;
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
index ab196dcedb..c2406a01a9 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
     }
   }
 >
-  <Component
+  <MetricsExportPanel
     http={[MockFunction]}
     selectedPanelOptions={Array []}
     setSelectedPanelOptions={[MockFunction]}
@@ -309,6 +309,6 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
         </div>
       </EuiFormRow>
     </div>
-  </Component>
+  </MetricsExportPanel>
 </Provider>
 `;
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
index dc2ff27603..7a85752536 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
     }
   }
 >
-  <Component
+  <TopMenu
     IsTopPanelDisabled={true}
     editMode={true}
     endTime="now"
@@ -1188,7 +1188,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
         </EuiFlexItem>
       </div>
     </EuiFlexGroup>
-  </Component>
+  </TopMenu>
 </Provider>
 `;
 
@@ -1204,7 +1204,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
     }
   }
 >
-  <Component
+  <TopMenu
     IsTopPanelDisabled={true}
     editMode={false}
     endTime="now"
@@ -2270,7 +2270,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
         </EuiFlexItem>
       </div>
     </EuiFlexGroup>
-  </Component>
+  </TopMenu>
 </Provider>
 `;
 
@@ -2286,7 +2286,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
     }
   }
 >
-  <Component
+  <TopMenu
     IsTopPanelDisabled={false}
     editMode={false}
     endTime="now"
@@ -3348,6 +3348,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
         </EuiFlexItem>
       </div>
     </EuiFlexGroup>
-  </Component>
+  </TopMenu>
 </Provider>
 `;
diff --git a/public/components/metrics/view/__tests__/__snapshots__/empty_view.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/empty_view.test.tsx.snap
index b8a327d4bb..c9427636e0 100644
--- a/public/components/metrics/view/__tests__/__snapshots__/empty_view.test.tsx.snap
+++ b/public/components/metrics/view/__tests__/__snapshots__/empty_view.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Empty View Component renders empty view container without metrics 1`] = `
-<Component>
+<EmptyMetricsView>
   <div>
     <EuiPanel
       className="empty-view-metrics"
@@ -82,5 +82,5 @@ exports[`Empty View Component renders empty view container without metrics 1`] =
       </div>
     </EuiPanel>
   </div>
-</Component>
+</EmptyMetricsView>
 `;
diff --git a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
index 1fac9b7f19..8708e745b2 100644
--- a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
+++ b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
     }
   }
 >
-  <Component
+  <MetricsGrid
     chrome={
       Object {
         "addApplicationClass": [MockFunction],
@@ -731,7 +731,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                   }
                 }
               >
-                <Component
+                <VisualizationContainer
                   editMode={false}
                   fromTime="now-1d"
                   key="Y4muP4QBiaYaSxpXk7r8"
@@ -913,7 +913,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                       </div>
                     </div>
                   </EuiPanel>
-                </Component>
+                </VisualizationContainer>
               </div>
             </GridItem>
             <GridItem
@@ -974,7 +974,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                   }
                 }
               >
-                <Component
+                <VisualizationContainer
                   editMode={false}
                   fromTime="now-1d"
                   key="tomAP4QBiaYaSxpXALls"
@@ -1156,7 +1156,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                       </div>
                     </div>
                   </EuiPanel>
-                </Component>
+                </VisualizationContainer>
               </div>
             </GridItem>
             <GridItem
@@ -1217,7 +1217,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                   }
                 }
               >
-                <Component
+                <VisualizationContainer
                   catalogVisualization={true}
                   editMode={false}
                   fromTime="now-1d"
@@ -1402,13 +1402,13 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                       </div>
                     </div>
                   </EuiPanel>
-                </Component>
+                </VisualizationContainer>
               </div>
             </GridItem>
           </div>
         </ReactGridLayout>
       </ResponsiveReactGridLayout>
     </WidthProvider>
-  </Component>
+  </MetricsGrid>
 </Provider>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index 1529919ed1..4ef2438dcc 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
-<Component
+<Bar
   config={true}
   layout={
     Object {
@@ -807,5 +807,5 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
       />
     </PlotlyComponent>
   </Plt>
-</Component>
+</Bar>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
index bb2075dc0f..10c63f396a 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Gauge component Renders gauge component 1`] = `
-<Component
+<Gauge
   config={true}
   layout={
     Object {
@@ -535,7 +535,7 @@ exports[`Gauge component Renders gauge component 1`] = `
     }
   }
 >
-  <Component
+  <EmptyPlaceholder
     icon="visGauge"
   >
     <EuiText
@@ -611,6 +611,6 @@ exports[`Gauge component Renders gauge component 1`] = `
         </EuiTextAlign>
       </div>
     </EuiText>
-  </Component>
-</Component>
+  </EmptyPlaceholder>
+</Gauge>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
index 013b2106b6..96158b2b1a 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Heatmap component Renders heatmap component 1`] = `
-<Component
+<HeatMap
   config={Object {}}
   layout={
     Object {
@@ -811,5 +811,5 @@ exports[`Heatmap component Renders heatmap component 1`] = `
       />
     </PlotlyComponent>
   </Plt>
-</Component>
+</HeatMap>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
index f56257ba03..944dcc5f6b 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Histogram component Renders histogram component 1`] = `
-<Component
+<Histogram
   config={true}
   layout={
     Object {
@@ -818,5 +818,5 @@ exports[`Histogram component Renders histogram component 1`] = `
       />
     </PlotlyComponent>
   </Plt>
-</Component>
+</Histogram>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
index fd5d086b17..1382d0f088 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Horizontal bar component Renders horizontal bar component 1`] = `
-<Component
+<Bar
   config={true}
   layout={
     Object {
@@ -807,5 +807,5 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
       />
     </PlotlyComponent>
   </Plt>
-</Component>
+</Bar>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index 87f23bc1d4..314d2a1869 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Line component Renders line component 1`] = `
-<Component
+<Line
   config={Object {}}
   layout={
     Object {
@@ -796,5 +796,5 @@ exports[`Line component Renders line component 1`] = `
       />
     </PlotlyComponent>
   </Plt>
-</Component>
+</Line>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
index 0d2c4eea3b..a95c6602b7 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Metrics component Renders Metrics component 1`] = `
-<Component
+<Metrics
   config={true}
   layout={
     Object {
@@ -659,7 +659,7 @@ exports[`Metrics component Renders Metrics component 1`] = `
     }
   }
 >
-  <Component
+  <EmptyPlaceholder
     icon="stats"
   >
     <EuiText
@@ -735,6 +735,6 @@ exports[`Metrics component Renders Metrics component 1`] = `
         </EuiTextAlign>
       </div>
     </EuiText>
-  </Component>
-</Component>
+  </EmptyPlaceholder>
+</Metrics>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index 67b8a13606..568f866a5e 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Pie component Renders pie component 1`] = `
-<Component
+<Pie
   config={Object {}}
   layout={
     Object {
@@ -799,5 +799,5 @@ exports[`Pie component Renders pie component 1`] = `
       />
     </PlotlyComponent>
   </Plt>
-</Component>
+</Pie>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
index a0e8bf52ab..66fd31ddf8 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Text component Renders text component 1`] = `
-<Component
+<Text
   visualizations={
     Object {
       "data": Object {
@@ -694,5 +694,5 @@ exports[`Text component Renders text component 1`] = `
       </div>
     </EuiMarkdownFormat>
   </div>
-</Component>
+</Text>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
index 483149850d..be76152d91 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Treemap component Renders treemap component 1`] = `
-<Component
+<TreeMap
   config={Object {}}
   layout={
     Object {
@@ -843,5 +843,5 @@ exports[`Treemap component Renders treemap component 1`] = `
       />
     </PlotlyComponent>
   </Plt>
-</Component>
+</TreeMap>
 `;