[7.x] [Core UI] Kibana Overview Page (#75827) (#79708)

* [Core UI] Kibana Overview Page (#75827)

* Added kibana landing page

Created kivana_overview plugin

Removed test from home plugin

Added CSS

Fixed page header links

Added news feed

Fixed spacers between news items

[Core UI] Kibana Overview Page Style Tweaks (#76712)

Fixed link to index management

Added solution cards to kibana landing page

Added solution links

Fixed ts errors

Using publishReplay() to support multiple consumers in newsfeed plugin

Added createNewsFeed$ to newsfeed plugin start

Added tests

Removed unnecessary export

Hides overview link when other Kibana apps are not available

Added icon to overview plugin

Removed question mark from news feed title

Updated plugin-list

Fixed i18n errors

Revert snapshot

Updated getting started page copy

Hide news feed when no news feed results

Disables Kibana overview page when kibana apps are unavailable

Updated snapshots

Refactor to use KibanaContextProvider

Fixed security tests

Fixed newsfeed api test

Moved overview_footer and overview_header to kibana-react plugin

[Core UI] Kibana Overview Page Style Fixes (#78677)

* Fixed a11y issues

* Made newsfeed optional dep of kibana overview plugin

* Removed duplicate license copy

* Fixed management security test

* Added toast to change default route button

* Updated snapshots

* Simplified toast notification

* Fixed i18n error

* Assigned kibana_overview plugin to Core UI in CODEOWNERS

* Updated snapshots

* Fix import

* [Core UI] Kibana Overview Page Style Fixes, Part 3 (#78970)

* fix overview cards not stretching height equally

* change var name for better specificity

* [Core UI] Kibana Overview Page Style Fixes, Part 4 (#79136)

* Adds support for all newsfeed plugin config settings in createNewsFeed$

* Fixed type

* Updated kibana overview page route

* Fixed imports in page_footer and page_header

* Update Kibana overview graphics (#79534)

* Updated snapshots

* Updated snapshots

* Changes newsfeed endpoint to kibana analytics in kibana_overview plugin

* Renamed components

* Fixed overview page footer and header component class names

* Removed extraneous files

* Fixed import

* Replaced SVGs with optimized SVGs

* Fixed header and footer in home and kibana overview pages

* Updated snapshots

* Changed url_forwarding plugin appRoute

* Fixed aria-labelledby value

* Updated snapshots

* Added base paths

Co-authored-by: Michael Marcialis <michael.marcialis@elastic.co>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>
# Conflicts:
#	.github/CODEOWNERS

* Updated kibana_overview application order

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

.i18nrc.json

@@ -29,6 +29,7 @@
     "indexPatternManagement": "src/plugins/index_pattern_management",
     "advancedSettings": "src/plugins/advanced_settings",
     "kibana_legacy": "src/plugins/kibana_legacy",
+    "kibanaOverview": "src/plugins/kibana_overview",
     "kibana_react": "src/legacy/core_plugins/kibana_react",
     "kibana-react": "src/plugins/kibana_react",
     "kibana_utils": "src/plugins/kibana_utils",

docs/developer/plugin-list.asciidoc

@@ -98,6 +98,10 @@ in Kibana, e.g. visualizations. It has the form of a flyout panel.
 |This plugin contains several helpers and services to integrate pieces of the legacy Kibana app with the new Kibana platform.
 
 
+|{kib-repo}blob/{branch}/src/plugins/kibana_overview/README.md[kibanaOverview]
+|An overview page highlighting Kibana apps
+
+
 |{kib-repo}blob/{branch}/src/plugins/kibana_react/README.md[kibanaReact]
 |Tools for building React applications in Kibana.
 

src/plugins/advanced_settings/public/management_app/advanced_settings.tsx

@@ -121,7 +121,18 @@ export class AdvancedSettingsComponent extends Component<
       setTimeout(() => {
         const id = hash.replace('#', '');
         const element = document.getElementById(id);
-        const globalNavOffset = document.getElementById('globalHeaderBars')?.offsetHeight || 0;
+
+        let globalNavOffset = 0;
+
+        const globalNavBars = document
+          .getElementById('globalHeaderBars')
+          ?.getElementsByClassName('euiHeader');
+
+        if (globalNavBars) {
+          Array.from(globalNavBars).forEach((navBar) => {
+            globalNavOffset += (navBar as HTMLDivElement).offsetHeight;
+          });
+        }
 
         if (element) {
           element.scrollIntoView();

src/plugins/dashboard/public/plugin.tsx

@@ -395,6 +395,9 @@ export class DashboardPlugin
         title: i18n.translate('dashboard.featureCatalogue.dashboardTitle', {
           defaultMessage: 'Dashboard',
         }),
+        subtitle: i18n.translate('dashboard.featureCatalogue.dashboardSubtitle', {
+          defaultMessage: 'Analyze data in dashboards.',
+        }),
         description: i18n.translate('dashboard.featureCatalogue.dashboardDescription', {
           defaultMessage: 'Display and share a collection of visualizations and saved searches.',
         }),
@@ -402,6 +405,8 @@ export class DashboardPlugin
         path: `/app/dashboards#${DashboardConstants.LANDING_PAGE_PATH}`,
         showOnHomePage: false,
         category: FeatureCatalogueCategory.DATA,
+        solutionId: 'kibana',
+        order: 100,
       });
     }
   }

src/plugins/discover/public/register_feature.ts

@@ -25,6 +25,9 @@ export function registerFeature(home: HomePublicPluginSetup) {
     title: i18n.translate('discover.discoverTitle', {
       defaultMessage: 'Discover',
     }),
+    subtitle: i18n.translate('discover.discoverSubtitle', {
+      defaultMessage: 'Search and find insights.',
+    }),
     description: i18n.translate('discover.discoverDescription', {
       defaultMessage: 'Interactively explore your data by querying and filtering raw documents.',
     }),
@@ -32,5 +35,7 @@ export function registerFeature(home: HomePublicPluginSetup) {
     path: '/app/discover#/',
     showOnHomePage: false,
     category: FeatureCatalogueCategory.DATA,
+    solutionId: 'kibana',
+    order: 200,
   });
 }

src/plugins/home/public/application/components/__snapshots__/synopsis.test.js.snap

@@ -9,6 +9,7 @@ exports[`props iconType 1`] = `
   href="link_to_item"
   icon={
     <EuiIcon
+      color="text"
       size="l"
       title=""
       type="logoApache"

src/plugins/home/public/application/components/_add_data.scss

@@ -17,6 +17,7 @@
  * under the License.
  */
 
-.homDataAdd__content .euiIcon__fillSecondary {
-  fill: $euiColorDarkestShade;
+// Accounting for no `flush="both"` prop on EuiButtonEmpty
+.homDataAdd__actionButton {
+  margin-right: 0;
 }

src/plugins/home/public/application/components/_home.scss

@@ -17,9 +17,6 @@
  * under the License.
  */
 
-// Local page variables
-$homePageWidth: 1200px;
-
 .homWrapper {
   background-color: $euiColorEmptyShade;
   display: flex;
@@ -27,37 +24,9 @@ $homePageWidth: 1200px;
   min-height: calc(100vh - #{$euiHeaderHeightCompensation});
 }
 
-.homHeader {
-  background-color: $euiPageBackgroundColor;
-  border-bottom: $euiBorderWidthThin solid $euiColorLightShade;
-}
-
-.homHeader__inner {
-  margin: 0 auto;
-  max-width: $homePageWidth;
-  padding: $euiSizeXL $euiSize;
-
-  .homHeader--hasSolutions & {
-    padding-bottom: $euiSizeXL + $euiSizeL;
-  }
-}
-
-#homHeader__title {
-  @include euiBreakpoint('xs', 's') {
-    text-align: center;
-  }
-}
-
-.homHeader__actionItem {
-  @include euiBreakpoint('xs', 's') {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-  }
-}
-
 .homContent {
   margin: 0 auto;
-  max-width: $homePageWidth;
+  max-width: 1200px;
   padding: $euiSizeXL $euiSize;
   width: 100%;
 }

src/plugins/home/public/application/components/_index.scss

@@ -7,7 +7,6 @@
 
 @import 'home';
 @import 'add_data';
-@import 'manage_data';
 @import 'sample_data_set_cards';
 @import 'solutions_section';
 @import 'synopsis';

src/plugins/home/public/application/components/_solutions_section.scss

@@ -30,10 +30,12 @@
 }
 
 .homSolutions__group {
-  max-width: 50%;
+  @include euiBreakpoint('l') {
+    max-width: calc(75% - #{$euiSizeM * 2});
+  }
 
-  @include euiBreakpoint('xs', 's') {
-    max-width: none;
+  @include euiBreakpoint('xl') {
+    max-width: calc(50% - #{$euiSizeM * 2});
   }
 }
 
@@ -48,20 +50,20 @@
     @include euiSlightShadowHover;
     transform: translateY(-2px);
 
-    .euiTitle {
+    .homSolutionPanel__title {
       text-decoration: underline;
     }
   }
+}
 
-  &,
-  .euiPanel {
-    display: flex;
-    flex-direction: column;
-  }
+.homSolutionPanel,
+.homSolutionPanel__inner {
+  display: flex;
+  flex-direction: column;
+}
 
-  .euiPanel {
-    overflow: hidden;
-  }
+.homSolutionPanel__inner {
+  overflow: hidden;
 }
 
 .homSolutionPanel__header {

src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap

@@ -7,7 +7,6 @@ exports[`AddData render 1`] = `
 >
   <EuiFlexGroup
     alignItems="center"
-    responsive={false}
   >
     <EuiFlexItem
       grow={1}
@@ -27,20 +26,24 @@ exports[`AddData render 1`] = `
       </EuiTitle>
     </EuiFlexItem>
     <EuiFlexItem
+      className="homDataAdd__actions"
       grow={false}
     >
-      <EuiButtonEmpty
-        flush="right"
-        href="#/tutorial_directory/sampleData"
-        iconType="visTable"
-        size="xs"
-      >
-        <FormattedMessage
-          defaultMessage="Try our sample data"
-          id="home.addData.sampleDataButtonLabel"
-          values={Object {}}
-        />
-      </EuiButtonEmpty>
+      <div>
+        <EuiButtonEmpty
+          className="homDataAdd__actionButton"
+          flush="left"
+          href="#/tutorial_directory/sampleData"
+          iconType="visTable"
+          size="xs"
+        >
+          <FormattedMessage
+            defaultMessage="Try our sample data"
+            id="home.addData.sampleDataButtonLabel"
+            values={Object {}}
+          />
+        </EuiButtonEmpty>
+      </div>
     </EuiFlexItem>
   </EuiFlexGroup>
   <EuiSpacer

src/plugins/home/public/application/components/add_data/add_data.test.tsx

@@ -17,25 +17,6 @@
  * under the License.
  */
 
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
 import React from 'react';
 import { AddData } from './add_data';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
@@ -56,7 +37,7 @@ const mockFeatures = [
   {
     category: 'data',
     description: 'Ingest data from popular apps and services.',
-    homePageSection: 'add_data',
+    showOnHomePage: true,
     icon: 'indexOpen',
     id: 'home_tutorial_directory',
     order: 500,
@@ -66,7 +47,7 @@ const mockFeatures = [
   {
     category: 'admin',
     description: 'Add and manage your fleet of Elastic Agents and integrations.',
-    homePageSection: 'add_data',
+    showOnHomePage: true,
     icon: 'indexManagementApp',
     id: 'ingestManager',
     order: 510,
@@ -76,7 +57,7 @@ const mockFeatures = [
   {
     category: 'data',
     description: 'Import your own CSV, NDJSON, or log file',
-    homePageSection: 'add_data',
+    showOnHomePage: true,
     icon: 'document',
     id: 'ml_file_data_visualizer',
     order: 520,

src/plugins/home/public/application/components/add_data/add_data.tsx

@@ -34,7 +34,7 @@ interface Props {
 
 export const AddData: FC<Props> = ({ addBasePath, features }) => (
   <section className="homDataAdd" aria-labelledby="homDataAdd__title">
-    <EuiFlexGroup alignItems="center" responsive={false}>
+    <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={1}>
         <EuiTitle size="s">
           <h2 id="homDataAdd__title">
@@ -43,18 +43,21 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => (
         </EuiTitle>
       </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty
-          iconType="visTable"
-          href="#/tutorial_directory/sampleData"
-          size="xs"
-          flush="right"
-        >
-          <FormattedMessage
-            id="home.addData.sampleDataButtonLabel"
-            defaultMessage="Try our sample data"
-          />
-        </EuiButtonEmpty>
+      <EuiFlexItem className="homDataAdd__actions" grow={false}>
+        <div>
+          <EuiButtonEmpty
+            className="homDataAdd__actionButton"
+            flush="left"
+            href="#/tutorial_directory/sampleData"
+            iconType="visTable"
+            size="xs"
+          >
+            <FormattedMessage
+              id="home.addData.sampleDataButtonLabel"
+              defaultMessage="Try our sample data"
+            />
+          </EuiButtonEmpty>
+        </div>
       </EuiFlexItem>
     </EuiFlexGroup>
 

src/plugins/home/public/application/components/home.js

@@ -20,18 +20,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  EuiButtonEmpty,
-  EuiTitle,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import {
+  OverviewPageFooter,
+  OverviewPageHeader,
+} from '../../../../../../src/plugins/kibana_react/public';
+import { HOME_APP_BASE_PATH } from '../../../common/constants';
 import { FeatureCatalogueCategory } from '../../services';
 import { getServices } from '../kibana_services';
 import { AddData } from './add_data';
-import { createAppNavigationHandler } from './app_navigation_handler';
 import { ManageData } from './manage_data';
 import { SolutionsSection } from './solutions_section';
 import { Welcome } from './welcome';
@@ -121,12 +119,9 @@ export class Home extends Component {
       .sort((directoryA, directoryB) => directoryA.order - directoryB.order);
 
   renderNormal() {
-    const { addBasePath, solutions } = this.props;
+    const { addBasePath, solutions, directories } = this.props;
 
     const devTools = this.findDirectoryById('console');
-    const stackManagement = this.findDirectoryById('stack-management');
-    const advancedSettings = this.findDirectoryById('advanced_settings');
-
     const addDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.DATA);
     const manageDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.ADMIN);
 
@@ -136,68 +131,27 @@ export class Home extends Component {
     }
 
     return (
-      <main aria-labelledby="homHeader__title" className="homWrapper" data-test-subj="homeApp">
-        <header
-          className={`homHeader ${
-            solutions.length ? 'homHeader--hasSolutions' : 'homHeader--noSolutions'
-          }`}
-        >
-          <div className="homHeader__inner">
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiTitle size="m">
-                  <h1 id="homHeader__title">
-                    <FormattedMessage id="home.pageHeader.title" defaultMessage="Home" />
-                  </h1>
-                </EuiTitle>
-              </EuiFlexItem>
-
-              <EuiFlexItem grow={false}>
-                <EuiFlexGroup className="homHeader__actions">
-                  <EuiFlexItem className="homHeader__actionItem">
-                    <EuiButtonEmpty href="#/tutorial_directory" iconType="indexOpen">
-                      {i18n.translate('home.pageHeader.addDataButtonLabel', {
-                        defaultMessage: 'Add data',
-                      })}
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-
-                  {stackManagement ? (
-                    <EuiFlexItem
-                      className="homHeader__actionItem"
-                      data-test-subj="homManagementActionItem"
-                    >
-                      <EuiButtonEmpty
-                        onClick={createAppNavigationHandler(stackManagement.path)}
-                        iconType="gear"
-                      >
-                        {i18n.translate('home.pageHeader.stackManagementButtonLabel', {
-                          defaultMessage: 'Manage',
-                        })}
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-                  ) : null}
-
-                  {devTools ? (
-                    <EuiFlexItem className="homHeader__actionItem">
-                      <EuiButtonEmpty
-                        onClick={createAppNavigationHandler(devTools.path)}
-                        iconType="wrench"
-                      >
-                        {i18n.translate('home.pageHeader.devToolsButtonLabel', {
-                          defaultMessage: 'Dev tools',
-                        })}
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-                  ) : null}
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </div>
-        </header>
+      <main
+        aria-labelledby="kbnOverviewPageHeader__title"
+        className="homWrapper"
+        data-test-subj="homeApp"
+      >
+        <OverviewPageHeader
+          addBasePath={addBasePath}
+          overlap={solutions.length}
+          showDevToolsLink
+          showManagementLink
+          title={<FormattedMessage id="home.header.title" defaultMessage="Home" />}
+        />
 
         <div className="homContent">
-          {solutions.length && <SolutionsSection addBasePath={addBasePath} solutions={solutions} />}
+          {solutions.length ? (
+            <SolutionsSection
+              addBasePath={addBasePath}
+              solutions={solutions}
+              directories={directories}
+            />
+          ) : null}
 
           <EuiFlexGroup
             className={`homData ${
@@ -217,41 +171,7 @@ export class Home extends Component {
 
           <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
-          <footer className="homFooter">
-            <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-              <EuiFlexItem grow={false}>
-                {advancedSettings && (
-                  <EuiButtonEmpty
-                    iconType="home"
-                    onClick={createAppNavigationHandler(
-                      '/app/management/kibana/settings#defaultRoute'
-                    )}
-                    size="xs"
-                  >
-                    <FormattedMessage
-                      id="home.changeHomeRouteLink"
-                      defaultMessage="Display a different page on log in"
-                    />
-                  </EuiButtonEmpty>
-                )}
-              </EuiFlexItem>
-
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  data-test-subj="allPlugins"
-                  href="#/feature_directory"
-                  size="xs"
-                  flush="right"
-                  iconType="apps"
-                >
-                  <FormattedMessage
-                    id="home.appDirectory.appDirectoryButtonLabel"
-                    defaultMessage="View app directory"
-                  />
-                </EuiButtonEmpty>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </footer>
+          <OverviewPageFooter addBasePath={addBasePath} path={HOME_APP_BASE_PATH} />
         </div>
       </main>
     );
@@ -294,12 +214,14 @@ Home.propTypes = {
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
+      subtitle: PropTypes.string,
       description: PropTypes.string.isRequired,
       icon: PropTypes.string.isRequired,
       path: PropTypes.string.isRequired,
       showOnHomePage: PropTypes.bool.isRequired,
       category: PropTypes.string.isRequired,
       order: PropTypes.number,
+      solutionId: PropTypes.string,
     })
   ),
   solutions: PropTypes.arrayOf(
@@ -307,7 +229,8 @@ Home.propTypes = {
       id: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
       subtitle: PropTypes.string.isRequired,
-      descriptions: PropTypes.arrayOf(PropTypes.string).isRequired,
+      description: PropTypes.string,
+      appDescriptions: PropTypes.arrayOf(PropTypes.string).isRequired,
       icon: PropTypes.string.isRequired,
       path: PropTypes.string.isRequired,
       order: PropTypes.number,

src/plugins/home/public/application/components/home.test.js

@@ -35,6 +35,11 @@ jest.mock('../kibana_services', () => ({
   }),
 }));
 
+jest.mock('../../../../../../src/plugins/kibana_react/public', () => ({
+  OverviewPageFooter: jest.fn().mockReturnValue(<></>),
+  OverviewPageHeader: jest.fn().mockReturnValue(<></>),
+}));
+
 describe('home', () => {
   let defaultProps;
 
@@ -142,7 +147,7 @@ describe('home', () => {
         id: 'kibana',
         title: 'Kibana',
         subtitle: 'Visualize & analyze',
-        descriptions: ['Analyze data in dashboards'],
+        appDescriptions: ['Analyze data in dashboards'],
         icon: 'logoKibana',
         path: 'kibana_landing_page',
         order: 1,
@@ -151,7 +156,7 @@ describe('home', () => {
         id: 'solution-2',
         title: 'Solution two',
         subtitle: 'Subtitle for solution two',
-        descriptions: ['Example use case'],
+        appDescriptions: ['Example use case'],
         icon: 'empty',
         path: 'path-to-solution-two',
         order: 2,
@@ -160,7 +165,7 @@ describe('home', () => {
         id: 'solution-3',
         title: 'Solution three',
         subtitle: 'Subtitle for solution three',
-        descriptions: ['Example use case'],
+        appDescriptions: ['Example use case'],
         icon: 'empty',
         path: 'path-to-solution-three',
         order: 3,
@@ -169,7 +174,7 @@ describe('home', () => {
         id: 'solution-4',
         title: 'Solution four',
         subtitle: 'Subtitle for solution four',
-        descriptions: ['Example use case'],
+        appDescriptions: ['Example use case'],
         icon: 'empty',
         path: 'path-to-solution-four',
         order: 4,

src/plugins/home/public/application/components/home_app.js

@@ -104,12 +104,14 @@ HomeApp.propTypes = {
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
+      subtitle: PropTypes.string,
       description: PropTypes.string.isRequired,
       icon: PropTypes.string.isRequired,
       path: PropTypes.string.isRequired,
       showOnHomePage: PropTypes.bool.isRequired,
       category: PropTypes.string.isRequired,
       order: PropTypes.number,
+      solutionId: PropTypes.string,
     })
   ),
   solutions: PropTypes.arrayOf(
@@ -117,7 +119,8 @@ HomeApp.propTypes = {
       id: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
       subtitle: PropTypes.string.isRequired,
-      descriptions: PropTypes.arrayOf(PropTypes.string).isRequired,
+      description: PropTypes.string,
+      appDescriptions: PropTypes.arrayOf(PropTypes.string).isRequired,
       icon: PropTypes.string.isRequired,
       path: PropTypes.string.isRequired,
       order: PropTypes.number,

src/plugins/home/public/application/components/manage_data/manage_data.test.tsx

@@ -37,7 +37,6 @@ const mockFeatures = [
   {
     category: 'admin',
     description: 'Control who has access and what tasks they can perform.',
-    homePageSection: 'manage_data',
     icon: 'securityApp',
     id: 'security',
     order: 600,
@@ -48,7 +47,6 @@ const mockFeatures = [
   {
     category: 'admin',
     description: 'Track the real-time health and performance of your deployment.',
-    homePageSection: 'manage_data',
     icon: 'monitoringApp',
     id: 'monitoring',
     order: 610,
@@ -60,7 +58,6 @@ const mockFeatures = [
     category: 'admin',
     description:
       'Save snapshots to a backup repository, and restore to recover index and cluster state.',
-    homePageSection: 'manage_data',
     icon: 'storage',
     id: 'snapshot_restore',
     order: 630,
@@ -71,7 +68,6 @@ const mockFeatures = [
   {
     category: 'admin',
     description: 'Define lifecycle policies to automatically perform operations as an index ages.',
-    homePageSection: 'manage_data',
     icon: 'indexSettings',
     id: 'index_lifecycle_management',
     order: 640,

src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_panel.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`SolutionPanel renders the solution panel for the given solution 1`] = `
     onClick={[Function]}
   >
     <EuiPanel
+      className="homSolutionPanel__inner"
       paddingSize="none"
     >
       <EuiFlexGroup

src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`SolutionTitle renders the title section of the solution panel 1`] = `
       size="l"
     />
     <EuiTitle
-      className="eui-textInheritColor"
+      className="homSolutionPanel__title eui-textInheritColor"
       size="s"
     >
       <h3>

src/plugins/home/public/application/components/solutions_section/__snapshots__/solutions_section.test.tsx.snap

@@ -7,19 +7,15 @@ exports[`SolutionsSection only renders a spacer if no solutions are available 1`
     className="homSolutions"
   >
     <EuiScreenReaderOnly>
-      <EuiTitle
-        size="s"
+      <h2
+        id="homSolutions__title"
       >
-        <h2
-          id="homSolutions__title"
-        >
-          <FormattedMessage
-            defaultMessage="Pick your solution"
-            id="home.solutionsSection.sectionTitle"
-            values={Object {}}
-          />
-        </h2>
-      </EuiTitle>
+        <FormattedMessage
+          defaultMessage="Pick your solution"
+          id="home.solutionsSection.sectionTitle"
+          values={Object {}}
+        />
+      </h2>
     </EuiScreenReaderOnly>
     <EuiFlexGroup
       className="homSolutions__content"
@@ -40,19 +36,15 @@ exports[`SolutionsSection renders a single solution 1`] = `
     className="homSolutions"
   >
     <EuiScreenReaderOnly>
-      <EuiTitle
-        size="s"
+      <h2
+        id="homSolutions__title"
       >
-        <h2
-          id="homSolutions__title"
-        >
-          <FormattedMessage
-            defaultMessage="Pick your solution"
-            id="home.solutionsSection.sectionTitle"
-            values={Object {}}
-          />
-        </h2>
-      </EuiTitle>
+        <FormattedMessage
+          defaultMessage="Pick your solution"
+          id="home.solutionsSection.sectionTitle"
+          values={Object {}}
+        />
+      </h2>
     </EuiScreenReaderOnly>
     <EuiFlexGroup
       className="homSolutions__content"
@@ -62,7 +54,7 @@ exports[`SolutionsSection renders a single solution 1`] = `
         addBasePath={[Function]}
         solution={
           Object {
-            "descriptions": Array [
+            "appDescriptions": Array [
               "Analyze data in dashboards",
             ],
             "icon": "logoKibana",
@@ -90,19 +82,15 @@ exports[`SolutionsSection renders multiple solutions in a single column when Kib
     className="homSolutions"
   >
     <EuiScreenReaderOnly>
-      <EuiTitle
-        size="s"
+      <h2
+        id="homSolutions__title"
       >
-        <h2
-          id="homSolutions__title"
-        >
-          <FormattedMessage
-            defaultMessage="Pick your solution"
-            id="home.solutionsSection.sectionTitle"
-            values={Object {}}
-          />
-        </h2>
-      </EuiTitle>
+        <FormattedMessage
+          defaultMessage="Pick your solution"
+          id="home.solutionsSection.sectionTitle"
+          values={Object {}}
+        />
+      </h2>
     </EuiScreenReaderOnly>
     <EuiFlexGroup
       className="homSolutions__content"
@@ -120,9 +108,10 @@ exports[`SolutionsSection renders multiple solutions in a single column when Kib
             key="solution-2"
             solution={
               Object {
-                "descriptions": Array [
+                "appDescriptions": Array [
                   "Example use case",
                 ],
+                "description": "Description for solution two",
                 "icon": "empty",
                 "id": "solution-2",
                 "order": 2,
@@ -137,9 +126,10 @@ exports[`SolutionsSection renders multiple solutions in a single column when Kib
             key="solution-3"
             solution={
               Object {
-                "descriptions": Array [
+                "appDescriptions": Array [
                   "Example use case",
                 ],
+                "description": "Description for solution three",
                 "icon": "empty",
                 "id": "solution-3",
                 "order": 3,
@@ -154,9 +144,10 @@ exports[`SolutionsSection renders multiple solutions in a single column when Kib
             key="solution-4"
             solution={
               Object {
-                "descriptions": Array [
+                "appDescriptions": Array [
                   "Example use case",
                 ],
+                "description": "Description for solution four",
                 "icon": "empty",
                 "id": "solution-4",
                 "order": 4,
@@ -184,19 +175,15 @@ exports[`SolutionsSection renders multiple solutions in two columns with Kibana
     className="homSolutions"
   >
     <EuiScreenReaderOnly>
-      <EuiTitle
-        size="s"
+      <h2
+        id="homSolutions__title"
       >
-        <h2
-          id="homSolutions__title"
-        >
-          <FormattedMessage
-            defaultMessage="Pick your solution"
-            id="home.solutionsSection.sectionTitle"
-            values={Object {}}
-          />
-        </h2>
-      </EuiTitle>
+        <FormattedMessage
+          defaultMessage="Pick your solution"
+          id="home.solutionsSection.sectionTitle"
+          values={Object {}}
+        />
+      </h2>
     </EuiScreenReaderOnly>
     <EuiFlexGroup
       className="homSolutions__content"
@@ -214,9 +201,10 @@ exports[`SolutionsSection renders multiple solutions in two columns with Kibana
             key="solution-2"
             solution={
               Object {
-                "descriptions": Array [
+                "appDescriptions": Array [
                   "Example use case",
                 ],
+                "description": "Description for solution two",
                 "icon": "empty",
                 "id": "solution-2",
                 "order": 2,
@@ -231,9 +219,10 @@ exports[`SolutionsSection renders multiple solutions in two columns with Kibana
             key="solution-3"
             solution={
               Object {
-                "descriptions": Array [
+                "appDescriptions": Array [
                   "Example use case",
                 ],
+                "description": "Description for solution three",
                 "icon": "empty",
                 "id": "solution-3",
                 "order": 3,
@@ -248,9 +237,10 @@ exports[`SolutionsSection renders multiple solutions in two columns with Kibana
             key="solution-4"
             solution={
               Object {
-                "descriptions": Array [
+                "appDescriptions": Array [
                   "Example use case",
                 ],
+                "description": "Description for solution four",
                 "icon": "empty",
                 "id": "solution-4",
                 "order": 4,
@@ -266,7 +256,7 @@ exports[`SolutionsSection renders multiple solutions in two columns with Kibana
         addBasePath={[Function]}
         solution={
           Object {
-            "descriptions": Array [
+            "appDescriptions": Array [
               "Analyze data in dashboards",
             ],
             "icon": "logoKibana",

src/plugins/home/public/application/components/solutions_section/solution_panel.test.tsx

@@ -25,7 +25,8 @@ const solutionEntry = {
   id: 'kibana',
   title: 'Kibana',
   subtitle: 'Visualize & analyze',
-  descriptions: ['Analyze data in dashboards'],
+  description: 'Explore and analyze your data',
+  appDescriptions: ['Analyze data in dashboards'],
   icon: 'logoKibana',
   path: 'kibana_landing_page',
   order: 1,

src/plugins/home/public/application/components/solutions_section/solution_panel.tsx

@@ -19,7 +19,7 @@
 
 import React, { FC } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
-import { FeatureCatalogueSolution } from '../../../';
+import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 import { SolutionTitle } from './solution_title';
 
@@ -42,15 +42,18 @@ const addSpacersBetweenElementsReducer = (
   return acc;
 };
 
-const getDescriptions = (descriptions: string[]) =>
-  descriptions.map(getDescriptionText).reduce<JSX.Element[]>(addSpacersBetweenElementsReducer, []);
+const getDescriptions = (appDescriptions: string[]) =>
+  appDescriptions
+    .map(getDescriptionText)
+    .reduce<JSX.Element[]>(addSpacersBetweenElementsReducer, []);
 
 interface Props {
   addBasePath: (path: string) => string;
   solution: FeatureCatalogueSolution;
+  apps?: FeatureCatalogueEntry[];
 }
 
-export const SolutionPanel: FC<Props> = ({ addBasePath, solution }) => (
+export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [] }) => (
   <EuiFlexItem
     key={solution.id}
     data-test-subj={`homSolutionPanel homSolutionPanel_${solution.id}`}
@@ -64,7 +67,7 @@ export const SolutionPanel: FC<Props> = ({ addBasePath, solution }) => (
       href={addBasePath(solution.path)}
       onClick={createAppNavigationHandler(solution.path)}
     >
-      <EuiPanel paddingSize="none">
+      <EuiPanel className="homSolutionPanel__inner" paddingSize="none">
         <EuiFlexGroup gutterSize="none">
           <EuiFlexItem grow={1} className={`homSolutionPanel__header`}>
             <SolutionTitle
@@ -75,7 +78,9 @@ export const SolutionPanel: FC<Props> = ({ addBasePath, solution }) => (
           </EuiFlexItem>
 
           <EuiFlexItem grow={1} className="homSolutionPanel__content">
-            {getDescriptions(solution.descriptions)}
+            {getDescriptions(
+              apps.length ? apps.map(({ subtitle = '' }) => subtitle) : solution.appDescriptions
+            )}
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPanel>

src/plugins/home/public/application/components/solutions_section/solution_title.tsx

@@ -45,7 +45,7 @@ export const SolutionTitle: FC<Props> = ({ title, subtitle, iconType }) => (
         className="homSolutionPanel__icon"
       />
 
-      <EuiTitle className="eui-textInheritColor" size="s">
+      <EuiTitle className="homSolutionPanel__title eui-textInheritColor" size="s">
         <h3>{title}</h3>
       </EuiTitle>
 

src/plugins/home/public/application/components/solutions_section/solutions_section.test.tsx

@@ -20,12 +20,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { SolutionsSection } from './solutions_section';
+import { FeatureCatalogueCategory } from '../../../services';
 
 const solutionEntry1 = {
   id: 'kibana',
   title: 'Kibana',
   subtitle: 'Visualize & analyze',
-  descriptions: ['Analyze data in dashboards'],
+  appDescriptions: ['Analyze data in dashboards'],
   icon: 'logoKibana',
   path: 'kibana_landing_page',
   order: 1,
@@ -34,7 +35,8 @@ const solutionEntry2 = {
   id: 'solution-2',
   title: 'Solution two',
   subtitle: 'Subtitle for solution two',
-  descriptions: ['Example use case'],
+  description: 'Description for solution two',
+  appDescriptions: ['Example use case'],
   icon: 'empty',
   path: 'path-to-solution-two',
   order: 2,
@@ -43,7 +45,8 @@ const solutionEntry3 = {
   id: 'solution-3',
   title: 'Solution three',
   subtitle: 'Subtitle for solution three',
-  descriptions: ['Example use case'],
+  description: 'Description for solution three',
+  appDescriptions: ['Example use case'],
   icon: 'empty',
   path: 'path-to-solution-three',
   order: 3,
@@ -52,23 +55,64 @@ const solutionEntry4 = {
   id: 'solution-4',
   title: 'Solution four',
   subtitle: 'Subtitle for solution four',
-  descriptions: ['Example use case'],
+  description: 'Description for solution four',
+  appDescriptions: ['Example use case'],
   icon: 'empty',
   path: 'path-to-solution-four',
   order: 4,
 };
 
+const mockDirectories = [
+  {
+    id: 'dashboard',
+    title: 'Dashboard',
+    description: 'Description of dashboard',
+    icon: 'dashboardApp',
+    path: 'dashboard_landing_page',
+    showOnHomePage: false,
+    category: FeatureCatalogueCategory.DATA,
+  },
+  {
+    id: 'discover',
+    title: 'Discover',
+    description: 'Description of discover',
+    icon: 'discoverApp',
+    path: 'discover_landing_page',
+    showOnHomePage: false,
+    category: FeatureCatalogueCategory.DATA,
+  },
+  {
+    id: 'canvas',
+    title: 'Canvas',
+    description: 'Description of canvas',
+    icon: 'canvasApp',
+    path: 'canvas_landing_page',
+    showOnHomePage: false,
+    category: FeatureCatalogueCategory.DATA,
+  },
+];
+
 const addBasePathMock = (path: string) => (path ? path : 'path');
 
 describe('SolutionsSection', () => {
   test('only renders a spacer if no solutions are available', () => {
-    const component = shallow(<SolutionsSection addBasePath={addBasePathMock} solutions={[]} />);
+    const component = shallow(
+      <SolutionsSection
+        addBasePath={addBasePathMock}
+        solutions={[]}
+        directories={mockDirectories}
+      />
+    );
     expect(component).toMatchSnapshot();
   });
 
   test('renders a single solution', () => {
     const component = shallow(
-      <SolutionsSection addBasePath={addBasePathMock} solutions={[solutionEntry1]} />
+      <SolutionsSection
+        addBasePath={addBasePathMock}
+        solutions={[solutionEntry1]}
+        directories={mockDirectories}
+      />
     );
     expect(component).toMatchSnapshot();
   });
@@ -78,6 +122,7 @@ describe('SolutionsSection', () => {
       <SolutionsSection
         addBasePath={addBasePathMock}
         solutions={[solutionEntry1, solutionEntry2, solutionEntry3, solutionEntry4]}
+        directories={mockDirectories}
       />
     );
     expect(component).toMatchSnapshot();
@@ -87,6 +132,7 @@ describe('SolutionsSection', () => {
       <SolutionsSection
         addBasePath={addBasePathMock}
         solutions={[solutionEntry2, solutionEntry3, solutionEntry4]}
+        directories={mockDirectories}
       />
     );
     expect(component).toMatchSnapshot();

src/plugins/home/public/application/components/solutions_section/solutions_section.tsx

@@ -19,16 +19,10 @@
 
 import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiScreenReaderOnly,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiScreenReaderOnly } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { SolutionPanel } from './solution_panel';
-import { FeatureCatalogueSolution } from '../../../';
+import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../';
 
 const sortByOrder = (
   { order: orderA = 0 }: FeatureCatalogueSolution,
@@ -38,25 +32,25 @@ const sortByOrder = (
 interface Props {
   addBasePath: (path: string) => string;
   solutions: FeatureCatalogueSolution[];
+  directories: FeatureCatalogueEntry[];
 }
 
-export const SolutionsSection: FC<Props> = ({ addBasePath, solutions }) => {
+export const SolutionsSection: FC<Props> = ({ addBasePath, solutions, directories }) => {
   // Separate Kibana from other solutions
   const kibana = solutions.find(({ id }) => id === 'kibana');
+  const kibanaApps = directories.filter(({ solutionId }) => solutionId === 'kibana');
   solutions = solutions.sort(sortByOrder).filter(({ id }) => id !== 'kibana');
 
   return (
     <>
       <section aria-labelledby="homSolutions__title" className="homSolutions">
         <EuiScreenReaderOnly>
-          <EuiTitle size="s">
-            <h2 id="homSolutions__title">
-              <FormattedMessage
-                id="home.solutionsSection.sectionTitle"
-                defaultMessage="Pick your solution"
-              />
-            </h2>
-          </EuiTitle>
+          <h2 id="homSolutions__title">
+            <FormattedMessage
+              id="home.solutionsSection.sectionTitle"
+              defaultMessage="Pick your solution"
+            />
+          </h2>
         </EuiScreenReaderOnly>
 
         <EuiFlexGroup className="homSolutions__content" justifyContent="spaceAround">
@@ -69,7 +63,13 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions }) => {
               </EuiFlexGroup>
             </EuiFlexItem>
           ) : null}
-          {kibana ? <SolutionPanel solution={kibana} addBasePath={addBasePath} /> : null}
+          {kibana ? (
+            <SolutionPanel
+              solution={kibana}
+              addBasePath={addBasePath}
+              apps={kibanaApps.length ? kibanaApps : undefined}
+            />
+          ) : null}
         </EuiFlexGroup>
       </section>
 
@@ -79,12 +79,28 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions }) => {
 };
 
 SolutionsSection.propTypes = {
+  addBasePath: PropTypes.func.isRequired,
+  directories: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      subtitle: PropTypes.string,
+      description: PropTypes.string.isRequired,
+      icon: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+      showOnHomePage: PropTypes.bool.isRequired,
+      category: PropTypes.string.isRequired,
+      order: PropTypes.number,
+      solutionId: PropTypes.string,
+    })
+  ),
   solutions: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
       subtitle: PropTypes.string.isRequired,
-      descriptions: PropTypes.arrayOf(PropTypes.string).isRequired,
+      description: PropTypes.string,
+      appDescriptions: PropTypes.arrayOf(PropTypes.string).isRequired,
       icon: PropTypes.string.isRequired,
       path: PropTypes.string.isRequired,
       order: PropTypes.number,

src/plugins/home/public/application/components/synopsis.js

@@ -38,7 +38,7 @@ export function Synopsis({
   if (iconUrl) {
     optionalImg = <img alt="" className="synopsisIcon" src={iconUrl} />;
   } else if (iconType) {
-    optionalImg = <EuiIcon size="l" title="" type={iconType} />;
+    optionalImg = <EuiIcon color="text" size="l" title="" type={iconType} />;
   }
 
   const classes = classNames('homSynopsis__card', {

src/plugins/home/public/index.ts

@@ -24,6 +24,7 @@ export {
   EnvironmentSetup,
   TutorialSetup,
   HomePublicPluginSetup,
+  HomePublicPluginStart,
 } from './plugin';
 export {
   FeatureCatalogueEntry,

src/plugins/home/public/plugin.test.ts

@@ -52,23 +52,6 @@ describe('HomePublicPlugin', () => {
       );
     });
 
-    test('registers kibana solution to feature catalogue', async () => {
-      const setup = await new HomePublicPlugin(mockInitializerContext).setup(
-        coreMock.createSetup() as any,
-        {
-          urlForwarding: urlForwardingPluginMock.createSetupContract(),
-        }
-      );
-      expect(setup).toHaveProperty('featureCatalogue');
-      expect(setup.featureCatalogue.registerSolution).toHaveBeenCalledTimes(1);
-      expect(setup.featureCatalogue.registerSolution).toHaveBeenCalledWith(
-        expect.objectContaining({
-          icon: 'logoKibana',
-          id: 'kibana',
-        })
-      );
-    });
-
     test('wires up and returns registry', async () => {
       const setup = await new HomePublicPlugin(mockInitializerContext).setup(
         coreMock.createSetup() as any,

src/plugins/home/public/plugin.ts

@@ -58,7 +58,12 @@ export interface HomePluginSetupDependencies {
 
 export class HomePublicPlugin
   implements
-    Plugin<HomePublicPluginSetup, void, HomePluginSetupDependencies, HomePluginStartDependencies> {
+    Plugin<
+      HomePublicPluginSetup,
+      HomePublicPluginStart,
+      HomePluginSetupDependencies,
+      HomePluginStartDependencies
+    > {
   private readonly featuresCatalogueRegistry = new FeatureCatalogueRegistry();
   private readonly environmentService = new EnvironmentService();
   private readonly tutorialService = new TutorialService();
@@ -128,39 +133,6 @@ export class HomePublicPlugin
       order: 500,
     });
 
-    featureCatalogue.registerSolution({
-      id: 'kibana',
-      title: i18n.translate('home.kibana.featureCatalogue.title', {
-        defaultMessage: 'Kibana',
-      }),
-      subtitle: i18n.translate('home.kibana.featureCatalogue.subtitle', {
-        defaultMessage: 'Visualize & analyze',
-      }),
-      descriptions: [
-        i18n.translate('home.kibana.featureCatalogueDescription1', {
-          defaultMessage: 'Analyze data in dashboards.',
-        }),
-        i18n.translate('home.kibana.featureCatalogueDescription2', {
-          defaultMessage: 'Search and find insights.',
-        }),
-        i18n.translate('home.kibana.featureCatalogueDescription3', {
-          defaultMessage: 'Design pixel-perfect reports.',
-        }),
-        i18n.translate('home.kibana.featureCatalogueDescription4', {
-          defaultMessage: 'Plot geographic data.',
-        }),
-        i18n.translate('home.kibana.featureCatalogueDescription5', {
-          defaultMessage: 'Model, predict, and detect.',
-        }),
-        i18n.translate('home.kibana.featureCatalogueDescription6', {
-          defaultMessage: 'Reveal patterns and relationships.',
-        }),
-      ],
-      icon: 'logoKibana',
-      path: '/app/dashboards',
-      order: 400,
-    });
-
     return {
       featureCatalogue,
       environment: { ...this.environmentService.setup() },
@@ -188,6 +160,8 @@ export class HomePublicPlugin
         }
       });
     }
+
+    return { featureCatalogue: this.featuresCatalogueRegistry };
   }
 }
 
@@ -212,3 +186,6 @@ export interface HomePublicPluginSetup {
 
   environment: EnvironmentSetup;
 }
+export interface HomePublicPluginStart {
+  featureCatalogue: FeatureCatalogueRegistry;
+}

src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts

@@ -36,6 +36,7 @@ const createMock = (): jest.Mocked<PublicMethodsOf<FeatureCatalogueRegistry>> =>
     start: jest.fn(),
     get: jest.fn(() => []),
     getSolutions: jest.fn(() => []),
+    removeFeature: jest.fn(),
   };
   service.setup.mockImplementation(createSetupMock);
   return service;

src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts

@@ -38,7 +38,7 @@ const KIBANA_SOLUTION: FeatureCatalogueSolution = {
   id: 'kibana',
   title: 'Kibana',
   subtitle: 'Visualize & analyze',
-  descriptions: ['Analyze data in dashboards.', 'Search and find insights.'],
+  appDescriptions: ['Analyze data in dashboards.', 'Search and find insights.'],
   icon: 'kibanaApp',
   path: `/app/home`,
 };

src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts

@@ -35,6 +35,8 @@ export interface FeatureCatalogueEntry {
   readonly title: string;
   /** {@link FeatureCatalogueCategory} to display this feature in. */
   readonly category: FeatureCatalogueCategory;
+  /** A tagline of feature displayed to the user. */
+  readonly subtitle?: string;
   /** One-line description of feature displayed to the user. */
   readonly description: string;
   /** EUI `IconType` for icon to be displayed to the user. EUI supports any known EUI icon, SVG URL, or ReactElement. */
@@ -47,6 +49,8 @@ export interface FeatureCatalogueEntry {
   readonly order?: number;
   /** Optional function to control visibility of this feature. */
   readonly visible?: () => boolean;
+  /** Unique string identifier of the solution this feature belongs to */
+  readonly solutionId?: string;
 }
 
 /** @public */
@@ -57,8 +61,10 @@ export interface FeatureCatalogueSolution {
   readonly title: string;
   /** The tagline of the solution displayed to the user. */
   readonly subtitle: string;
+  /** One-line description of the solution displayed to the user. */
+  readonly description?: string;
   /** A list of use cases for this solution displayed to the user. */
-  readonly descriptions: string[];
+  readonly appDescriptions: string[];
   /** EUI `IconType` for icon to be displayed to the user. EUI supports any known EUI icon, SVG URL, or ReactElement. */
   readonly icon: IconType;
   /** URL path to link to this future. Should not include the basePath. */
@@ -99,7 +105,7 @@ export class FeatureCatalogueRegistry {
     this.capabilities = capabilities;
   }
 
-  public get(): readonly FeatureCatalogueEntry[] {
+  public get(): FeatureCatalogueEntry[] {
     if (this.capabilities === null) {
       throw new Error('Catalogue entries are only available after start phase');
     }
@@ -112,7 +118,7 @@ export class FeatureCatalogueRegistry {
       .sort(compareByKey('title'));
   }
 
-  public getSolutions(): readonly FeatureCatalogueSolution[] {
+  public getSolutions(): FeatureCatalogueSolution[] {
     if (this.capabilities === null) {
       throw new Error('Catalogue entries are only available after start phase');
     }
@@ -121,6 +127,10 @@ export class FeatureCatalogueRegistry {
       .filter((solution) => capabilities.catalogue[solution.id] !== false)
       .sort(compareByKey('title'));
   }
+
+  public removeFeature(appId: string) {
+    this.features.delete(appId);
+  }
 }
 
 export type FeatureCatalogueRegistrySetup = ReturnType<FeatureCatalogueRegistry['setup']>;

src/plugins/kibana_overview/README.md

@@ -0,0 +1,9 @@
+# kibana-overview
+
+> An overview page highlighting Kibana apps
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment.

src/plugins/kibana_overview/common/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const PLUGIN_ID = 'kibanaOverview';
+export const PLUGIN_NAME = 'Overview';
+export const PLUGIN_PATH = `/app/kibana_overview`;
+export const PLUGIN_ICON = 'logoKibana';

src/plugins/kibana_overview/kibana.json

@@ -0,0 +1,9 @@
+{
+  "id": "kibanaOverview",
+  "version": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["navigation", "data", "home"],
+  "optionalPlugins": ["newsfeed"],
+  "requiredBundles": ["kibanaReact", "newsfeed"]
+}

src/plugins/kibana_overview/public/application.tsx

@@ -0,0 +1,62 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { I18nProvider } from '@kbn/i18n/react';
+import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
+import { NewsfeedApiEndpoint } from '../../../../src/plugins/newsfeed/public';
+import { AppMountParameters, CoreStart } from '../../../../src/core/public';
+import { AppPluginStartDependencies } from './types';
+import { KibanaOverviewApp } from './components/app';
+
+export const renderApp = (
+  core: CoreStart,
+  deps: AppPluginStartDependencies,
+  { appBasePath, element }: AppMountParameters
+) => {
+  const { notifications, http } = core;
+  const { newsfeed, home, navigation } = deps;
+  const newsfeed$ = newsfeed?.createNewsFeed$(NewsfeedApiEndpoint.KIBANA_ANALYTICS);
+  const navLinks = core.chrome.navLinks.getAll();
+  const solutions = home.featureCatalogue
+    .getSolutions()
+    .filter(({ id }) => id !== 'kibana')
+    .filter(({ id }) => navLinks.find(({ category, hidden }) => !hidden && category?.id === id));
+  const features = home.featureCatalogue.get();
+
+  ReactDOM.render(
+    <I18nProvider>
+      <KibanaContextProvider services={{ ...core, ...deps }}>
+        <KibanaOverviewApp
+          basename={appBasePath}
+          notifications={notifications}
+          http={http}
+          navigation={navigation}
+          newsfeed$={newsfeed$}
+          solutions={solutions}
+          features={features}
+        />
+      </KibanaContextProvider>
+    </I18nProvider>,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

src/plugins/kibana_overview/public/assets/kibana_canvas_dark.svg

@@ -0,0 +1,69 @@
+<svg width="268" height="151" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#25262E" d="M0 0h268v151H0z"/>
+  <g filter="url(#kibana_canvas_dark__filter0_d)">
+    <rect x="12" y="12" width="176" height="127" rx="2" fill="#1D1E24"/>
+  </g>
+  <rect x="89" y="132" width="22" height="2" rx="1" fill="#343741"/>
+  <path d="M115.5 131.5l1.5 1.5-1.5 1.5m-30.5-3l-1.5 1.5 1.5 1.5" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="60" y="21" width="82" height="16" rx="1" fill="#1D1E24" stroke="#343741" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 2"/>
+  <rect x="81" y="28" width="40" height="2" rx="1" fill="#54B399"/>
+  <rect x="104" y="45" width="76" height="76" rx="1" fill="#1D1E24" stroke="#343741" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 2"/>
+  <rect x="116" y="81" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="112" y="81" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="146" y="81" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="150" y="81" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="112" y="65" width="60" height="8" rx="2" fill="#D36086"/>
+  <rect x="116" y="87" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="112" y="87" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="146" y="87" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="150" y="87" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="116" y="93" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="112" y="93" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="146" y="93" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="150" y="93" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="116" y="99" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="112" y="99" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="146" y="99" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="150" y="99" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="20" y="45" width="76" height="76" rx="1" fill="#1D1E24" stroke="#6A717D" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 2"/>
+  <path fill="#1D1E24" stroke="#6A717D" stroke-linecap="round" stroke-linejoin="round" d="M18.5 43.5h3v3h-3zm0 76h3v3h-3zm76 0h3v3h-3zm0-76h3v3h-3zm-38 0h3v3h-3zm-38 38h3v3h-3zm38 38h3v3h-3zm38-38h3v3h-3z"/>
+  <rect x="47" y="104" width="22" height="2" rx="1" fill="#535966"/>
+  <path d="M41.03 99.97a24 24 0 1133.94 0l-5.668-5.668a15.984 15.984 0 10-22.604 0l-5.669 5.669z" fill="#343741"/>
+  <path d="M41.03 99.97a24.002 24.002 0 019.488-39.774 24 24 0 0126.378 8.007l-6.311 4.942a15.986 15.986 0 00-23.183-2.11 15.983 15.983 0 00-.704 23.267l-5.669 5.669z" fill="#6092C0"/>
+  <g filter="url(#kibana_canvas_dark__filter1_d)">
+    <rect x="200" y="12" width="56" height="127" rx="2" fill="#1D1E24"/>
+  </g>
+  <rect x="204" y="56" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="204" y="98" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="204" y="120" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="204" y="104" width="9" height="4" rx="2" fill="#343741"/>
+  <rect x="217" y="104" width="9" height="4" rx="2" fill="#343741"/>
+  <rect x="230" y="104" width="9" height="4" rx="2" fill="#343741"/>
+  <rect x="243" y="104" width="9" height="4" rx="2" fill="#343741"/>
+  <rect x="204.5" y="24.5" width="47" height="7" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <rect x="204.5" y="62.5" width="47" height="23" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <rect x="204.5" y="36.5" width="21" height="7" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <rect x="204.5" y="126.5" width="7" height="7" rx=".5" fill="#54B399" stroke="#343741"/>
+  <rect x="230.5" y="36.5" width="21" height="7" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <rect x="204" y="16" width="27" height="2" rx="1" fill="#A7AFBE"/>
+  <defs>
+    <filter id="kibana_canvas_dark__filter0_d" x="4" y="6" width="192" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_canvas_dark__filter1_d" x="192" y="6" width="72" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_canvas_light.svg

@@ -0,0 +1,69 @@
+<svg width="268" height="151" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#F5F7FA" d="M0 0h268v151H0z"/>
+  <g filter="url(#kibana_canvas_light__filter0_d)">
+    <rect x="12" y="12" width="176" height="127" rx="2" fill="#fff"/>
+  </g>
+  <rect x="89" y="132" width="22" height="2" rx="1" fill="#AFB0B3"/>
+  <path d="M115.5 131.5l1.5 1.5-1.5 1.5m-30.5-3l-1.5 1.5 1.5 1.5" stroke="#AFB0B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="60" y="21" width="82" height="16" rx="1" fill="#fff" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 2"/>
+  <rect x="81" y="28" width="40" height="2" rx="1" fill="#54B399"/>
+  <rect x="104" y="45" width="76" height="76" rx="1" fill="#fff" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 2"/>
+  <rect x="116" y="81" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="112" y="81" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="146" y="81" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="150" y="81" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="112" y="65" width="60" height="8" rx="2" fill="#D36086"/>
+  <rect x="116" y="87" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="112" y="87" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="146" y="87" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="150" y="87" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="116" y="93" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="112" y="93" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="146" y="93" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="150" y="93" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="116" y="99" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="112" y="99" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="146" y="99" width="2" height="2" rx="1" fill="#D36086"/>
+  <rect x="150" y="99" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="20" y="45" width="76" height="76" rx="1" fill="#fff" stroke="#AFB0B3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 2"/>
+  <path fill="#fff" stroke="#AFB0B3" stroke-linecap="round" stroke-linejoin="round" d="M18.5 43.5h3v3h-3zm0 76h3v3h-3zm76 0h3v3h-3zm0-76h3v3h-3zm-38 0h3v3h-3zm-38 38h3v3h-3zm38 38h3v3h-3zm38-38h3v3h-3z"/>
+  <rect x="47" y="104" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <path d="M41.03 99.97a24 24 0 1133.94 0l-5.668-5.668a15.984 15.984 0 10-22.604 0l-5.669 5.669z" fill="#D3DAE6"/>
+  <path d="M41.03 99.97a24.002 24.002 0 019.488-39.774 24 24 0 0126.378 8.007l-6.311 4.942a15.986 15.986 0 00-23.183-2.11 15.983 15.983 0 00-.704 23.267l-5.669 5.669z" fill="#6092C0"/>
+  <g filter="url(#kibana_canvas_light__filter1_d)">
+    <rect x="200" y="12" width="56" height="127" rx="2" fill="#fff"/>
+  </g>
+  <rect x="204" y="56" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="204" y="98" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="204" y="120" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="204" y="104" width="9" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="217" y="104" width="9" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="230" y="104" width="9" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="243" y="104" width="9" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="204.5" y="24.5" width="47" height="7" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <rect x="204.5" y="62.5" width="47" height="23" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <rect x="204.5" y="36.5" width="21" height="7" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <rect x="204.5" y="126.5" width="7" height="7" rx=".5" fill="#54B399" stroke="#D3DAE6"/>
+  <rect x="230.5" y="36.5" width="21" height="7" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <rect x="204" y="16" width="27" height="2" rx="1" fill="#6A717D"/>
+  <defs>
+    <filter id="kibana_canvas_light__filter0_d" x="4" y="6" width="192" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_canvas_light__filter1_d" x="192" y="6" width="72" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_dashboard_dark.svg

@@ -0,0 +1,116 @@
+<svg width="568" height="320" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#25262E" d="M0 0h568v320H0z"/>
+  <g filter="url(#kibana_dashboard_dark__filter0_d)">
+    <rect x="24" y="172" width="248" height="124" rx="4" fill="#1D1E24"/>
+  </g>
+  <rect x="32" y="180" width="120" height="4" rx="2" fill="#A7AFBE"/>
+  <rect x="40" y="200" width="16" height="4" rx="2" fill="#535966"/>
+  <rect x="72" y="284" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="125" y="284" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="178" y="284" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="231" y="284" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="32" y="221" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="36" y="242" width="20" height="4" rx="2" fill="#535966"/>
+  <rect x="40" y="263" width="16" height="4" rx="2" transform="rotate(-.17 40 263)" fill="#535966"/>
+  <path d="M64.5 192.5v9.5m199 73.5H243M64.5 202h-4m4 0v21m0 0h-4m4 0v21m0 0h-4m4 0v21m0 0v10.5H84M64.5 265h-4M84 279.5v-4m0 0h53m0 0v4m0-4h53m0 0v4m0-4h53m0 0v4" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="67" y="194" width="181" height="16" rx="1" fill="#54B399"/>
+  <rect x="67" y="236" width="59" height="16" rx="1" fill="#D36086"/>
+  <rect x="67" y="215" width="120" height="16" rx="1" fill="#6092C0"/>
+  <rect x="67" y="257" width="30" height="16" rx="1" fill="#9170B8"/>
+  <g filter="url(#kibana_dashboard_dark__filter1_d)">
+    <rect x="24" y="24" width="520" height="124" rx="4" fill="#1D1E24"/>
+  </g>
+  <rect x="32" y="32" width="101" height="4" rx="2" fill="#A7AFBE"/>
+  <rect x="38" y="52" width="18" height="4" rx="2" fill="#535966"/>
+  <rect x="32" y="73" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="40" y="94" width="16" height="4" rx="2" fill="#535966"/>
+  <rect x="36" y="115" width="20" height="4" rx="2" fill="#535966"/>
+  <rect x="72" y="136" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="216" y="136" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="360" y="136" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="504" y="136" width="24" height="4" rx="2" fill="#535966"/>
+  <path opacity=".1" d="M80.177 118L65 110v17h470.5V90.5l-15.177 12.692-15.178 1.346-15.177-8.846-15.178 17.885-15.177.961-15.178-5.384-15.177-.769-15.177 5.384-15.178-5.846-15.177-40.615-15.178 18.077-15.177-38.462L338.194 104l-15.178-16.308-15.177 12.923-15.178-9.538-15.177 5.615-15.178-24.384L247.129 71l-15.177-15.615-15.178 49.077-15.177 4.615-15.178-22.154-15.177-5.385L156.065 50l-15.178 37.923-15.177 6.923-15.178 19.692-15.177-4.692L80.177 118z" fill="#54B399"/>
+  <path d="M65 110l15.177 8 15.178-8.154 15.177 4.692 15.178-19.692 15.177-6.923L156.065 50l15.177 31.538 15.177 5.385 15.178 22.154 15.177-4.615 15.178-49.077L247.129 71l15.177 1.308 15.178 24.384 15.177-5.615 15.178 9.538 15.177-12.923L338.194 104l15.177-57.077 15.177 38.462 15.178-18.077 15.177 40.615 15.178 5.846 15.177-5.384 15.177.769 15.178 5.384 15.177-.961 15.178-17.885 15.177 8.846 15.178-1.346L535.5 90.5" stroke="#54B399" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle opacity=".1" cx="100" cy="63" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="232" cy="55" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="323" cy="88" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="353" cy="47" r="7.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="523" cy="47" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="106" cy="68" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="156" cy="50" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="240" cy="55" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="262" cy="72" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="345" cy="48" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="484" cy="92" r="3.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="490" cy="96" r="4" fill="#6092C0"/>
+  <circle cx="100" cy="63" r="7.5" stroke="#6092C0"/>
+  <circle cx="232" cy="55" r="7.5" stroke="#6092C0"/>
+  <circle cx="323" cy="88" r="7.5" stroke="#6092C0"/>
+  <circle cx="353" cy="47" r="7.5" stroke="#6092C0"/>
+  <circle cx="523" cy="47" r="7.5" stroke="#6092C0"/>
+  <circle cx="106" cy="68" r="3.5" stroke="#6092C0"/>
+  <circle cx="156" cy="50" r="3.5" stroke="#6092C0"/>
+  <circle cx="240" cy="55" r="3.5" stroke="#6092C0"/>
+  <circle cx="262" cy="72" r="3.5" stroke="#6092C0"/>
+  <circle cx="345" cy="48" r="3.5" stroke="#6092C0"/>
+  <circle cx="484" cy="92" r="3.5" stroke="#6092C0"/>
+  <circle cx="490" cy="96" r="3.5" stroke="#6092C0"/>
+  <path d="M64.5 44.5V54m471 73.5H516M64.5 54h-4m4 0v21m0 0h-4m4 0v21m0 0h-4m4 0v21m0 0v10.5H84M64.5 117h-4M84 131.5v-4m0 0h144m0 0v4m0-4h144m0 0v4m0-4h144m0 0v4" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <g filter="url(#kibana_dashboard_dark__filter2_d)">
+    <rect x="296" y="172" width="248" height="124" rx="4" fill="#1D1E24"/>
+  </g>
+  <rect x="304" y="180" width="80" height="4" rx="2" fill="#A7AFBE"/>
+  <path d="M448.284 268.284a39.997 39.997 0 00-10.054-63.888 39.997 39.997 0 00-24.383-3.92l2.461 15.81a24 24 0 0120.663 40.685l11.313 11.313z" fill="#54B399"/>
+  <mask id="a" maskUnits="userSpaceOnUse" x="385" y="250" width="72" height="31" fill="#000">
+    <path fill="#fff" d="M385 250h72v31h-72z"/>
+    <path d="M386.416 261.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24 24 0 01-40.932 1.031l-13.433 8.691z"/>
+  </mask>
+  <path d="M386.416 261.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24 24 0 01-40.932 1.031l-13.433 8.691z" fill="#6092C0"/>
+  <path d="M386.416 261.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24 24 0 01-40.932 1.031l-13.433 8.691z" stroke="#1D1E24" stroke-width="2" mask="url(#a)"/>
+  <mask id="b" maskUnits="userSpaceOnUse" x="379" y="213" width="24" height="54" fill="#000">
+    <path fill="#fff" d="M379 213h24v54h-24z"/>
+    <path d="M388.645 215.163a40 40 0 00.54 50.341l12.326-10.202a24 24 0 01-.324-30.204l-12.542-9.935z"/>
+  </mask>
+  <path d="M388.645 215.163a40 40 0 00.54 50.341l12.326-10.202a24 24 0 01-.324-30.204l-12.542-9.935z" fill="#D36086"/>
+  <path d="M388.645 215.163a40 40 0 00.54 50.341l12.326-10.202a24 24 0 01-.324-30.204l-12.542-9.935z" stroke="#1D1E24" stroke-width="2" mask="url(#b)"/>
+  <mask id="c" maskUnits="userSpaceOnUse" x="384" y="199" width="37" height="30" fill="#000">
+    <path fill="#fff" d="M384 199h37v30h-37z"/>
+    <path d="M420 200a40.005 40.005 0 00-33.929 18.814l13.572 8.474A24.004 24.004 0 01420 216v-16z"/>
+  </mask>
+  <path d="M420 200a40.005 40.005 0 00-33.929 18.814l13.572 8.474A24.004 24.004 0 01420 216v-16z" fill="#9170B8"/>
+  <path d="M420 200a40.005 40.005 0 00-33.929 18.814l13.572 8.474A24.004 24.004 0 01420 216v-16z" stroke="#1D1E24" stroke-width="2" mask="url(#c)"/>
+  <rect x="367" y="192" width="22" height="4" rx="2" fill="#535966"/>
+  <rect x="345" y="250" width="16" height="4" rx="2" fill="#535966"/>
+  <rect x="441" y="284" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="471" y="210" width="24" height="4" rx="2" fill="#535966"/>
+  <path d="M393.5 194h4l4 8.5m65 9.5h-4l-7 4.5m-26.5 64l3.5 5.5h4m-58-41l-9 7h-4" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <defs>
+    <filter id="kibana_dashboard_dark__filter0_d" x="8" y="160" width="280" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_dashboard_dark__filter1_d" x="8" y="12" width="552" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_dashboard_dark__filter2_d" x="280" y="160" width="280" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_dashboard_light.svg

@@ -0,0 +1,116 @@
+<svg width="568" height="320" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#F5F7FA" d="M0 0h568v320H0z"/>
+  <g filter="url(#kibana_dashboard_light__filter0_d)">
+    <rect x="24" y="172" width="248" height="124" rx="4" fill="#fff"/>
+  </g>
+  <rect x="32" y="180" width="120" height="4" rx="2" fill="#6A717D"/>
+  <rect x="40" y="200" width="16" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="72" y="284" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="125" y="284" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="178" y="284" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="231" y="284" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="32" y="221" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="36" y="242" width="20" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="40" y="263" width="16" height="4" rx="2" transform="rotate(-.17 40 263)" fill="#98A2B3"/>
+  <path d="M64.5 192.5v9.5m199 73.5H243M64.5 202h-4m4 0v21m0 0h-4m4 0v21m0 0h-4m4 0v21m0 0v10.5H84M64.5 265h-4M84 279.5v-4m0 0h53m0 0v4m0-4h53m0 0v4m0-4h53m0 0v4" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="67" y="194" width="181" height="16" rx="1" fill="#54B399"/>
+  <rect x="67" y="236" width="59" height="16" rx="1" fill="#D36086"/>
+  <rect x="67" y="215" width="120" height="16" rx="1" fill="#6092C0"/>
+  <rect x="67" y="257" width="30" height="16" rx="1" fill="#9170B8"/>
+  <g filter="url(#kibana_dashboard_light__filter1_d)">
+    <rect x="24" y="24" width="520" height="124" rx="4" fill="#fff"/>
+  </g>
+  <rect x="32" y="32" width="101" height="4" rx="2" fill="#6A717D"/>
+  <rect x="38" y="52" width="18" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="32" y="73" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="40" y="94" width="16" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="36" y="115" width="20" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="72" y="136" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="216" y="136" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="360" y="136" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="504" y="136" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <path opacity=".1" d="M80.177 118L65 110v17h470.5V90.5l-15.177 12.692-15.178 1.346-15.177-8.846-15.178 17.885-15.177.961-15.178-5.384-15.177-.769-15.177 5.384-15.178-5.846-15.177-40.615-15.178 18.077-15.177-38.462L338.194 104l-15.178-16.308-15.177 12.923-15.178-9.538-15.177 5.615-15.178-24.384L247.129 71l-15.177-15.615-15.178 49.077-15.177 4.615-15.178-22.154-15.177-5.385L156.065 50l-15.178 37.923-15.177 6.923-15.178 19.692-15.177-4.692L80.177 118z" fill="#54B399"/>
+  <path d="M65 110l15.177 8 15.178-8.154 15.177 4.692 15.178-19.692 15.177-6.923L156.065 50l15.177 31.538 15.177 5.385 15.178 22.154 15.177-4.615 15.178-49.077L247.129 71l15.177 1.308 15.178 24.384 15.177-5.615 15.178 9.538 15.177-12.923L338.194 104l15.177-57.077 15.177 38.462 15.178-18.077 15.177 40.615 15.178 5.846 15.177-5.384 15.177.769 15.178 5.384 15.177-.961 15.178-17.885 15.177 8.846 15.178-1.346L535.5 90.5" stroke="#54B399" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle opacity=".1" cx="100" cy="63" r="7.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="232" cy="55" r="7.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="323" cy="88" r="7.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="353" cy="47" r="7.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="523" cy="47" r="7.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="106" cy="68" r="3.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="156" cy="50" r="3.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="240" cy="55" r="3.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="262" cy="72" r="3.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="345" cy="48" r="3.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="484" cy="92" r="3.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle opacity=".1" cx="490" cy="96" r="3.5" fill="#6092C0" stroke="#6092C0"/>
+  <circle cx="100" cy="63" r="7.5" stroke="#6092C0"/>
+  <circle cx="232" cy="55" r="7.5" stroke="#6092C0"/>
+  <circle cx="323" cy="88" r="7.5" stroke="#6092C0"/>
+  <circle cx="353" cy="47" r="7.5" stroke="#6092C0"/>
+  <circle cx="523" cy="47" r="7.5" stroke="#6092C0"/>
+  <circle cx="106" cy="68" r="3.5" stroke="#6092C0"/>
+  <circle cx="156" cy="50" r="3.5" stroke="#6092C0"/>
+  <circle cx="240" cy="55" r="3.5" stroke="#6092C0"/>
+  <circle cx="262" cy="72" r="3.5" stroke="#6092C0"/>
+  <circle cx="345" cy="48" r="3.5" stroke="#6092C0"/>
+  <circle cx="484" cy="92" r="3.5" stroke="#6092C0"/>
+  <circle cx="490" cy="96" r="3.5" stroke="#6092C0"/>
+  <path d="M64.5 44.5V54m471 73.5H516M64.5 54h-4m4 0v21m0 0h-4m4 0v21m0 0h-4m4 0v21m0 0v10.5H84M64.5 117h-4M84 131.5v-4m0 0h144m0 0v4m0-4h144m0 0v4m0-4h144m0 0v4" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round"/>
+  <g filter="url(#kibana_dashboard_light__filter2_d)">
+    <rect x="296" y="172" width="248" height="124" rx="4" fill="#fff"/>
+  </g>
+  <rect x="304" y="180" width="80" height="4" rx="2" fill="#6A717D"/>
+  <path d="M448.284 268.284a39.997 39.997 0 00-10.054-63.888 39.997 39.997 0 00-24.383-3.92l2.461 15.81a24 24 0 0120.663 40.685l11.313 11.313z" fill="#54B399"/>
+  <mask id="a" maskUnits="userSpaceOnUse" x="385" y="250" width="72" height="31" fill="#000">
+    <path fill="#fff" d="M385 250h72v31h-72z"/>
+    <path d="M386.416 261.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24 24 0 01-40.932 1.031l-13.433 8.691z"/>
+  </mask>
+  <path d="M386.416 261.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24 24 0 01-40.932 1.031l-13.433 8.691z" fill="#6092C0"/>
+  <path d="M386.416 261.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24 24 0 01-40.932 1.031l-13.433 8.691z" stroke="#fff" stroke-width="2" mask="url(#a)"/>
+  <mask id="b" maskUnits="userSpaceOnUse" x="379" y="213" width="24" height="54" fill="#000">
+    <path fill="#fff" d="M379 213h24v54h-24z"/>
+    <path d="M388.645 215.163a40 40 0 00.54 50.341l12.326-10.202a24 24 0 01-.324-30.204l-12.542-9.935z"/>
+  </mask>
+  <path d="M388.645 215.163a40 40 0 00.54 50.341l12.326-10.202a24 24 0 01-.324-30.204l-12.542-9.935z" fill="#D36086"/>
+  <path d="M388.645 215.163a40 40 0 00.54 50.341l12.326-10.202a24 24 0 01-.324-30.204l-12.542-9.935z" stroke="#fff" stroke-width="2" mask="url(#b)"/>
+  <mask id="c" maskUnits="userSpaceOnUse" x="384" y="199" width="37" height="30" fill="#000">
+    <path fill="#fff" d="M384 199h37v30h-37z"/>
+    <path d="M420 200a40.005 40.005 0 00-33.929 18.814l13.572 8.474A24.004 24.004 0 01420 216v-16z"/>
+  </mask>
+  <path d="M420 200a40.005 40.005 0 00-33.929 18.814l13.572 8.474A24.004 24.004 0 01420 216v-16z" fill="#9170B8"/>
+  <path d="M420 200a40.005 40.005 0 00-33.929 18.814l13.572 8.474A24.004 24.004 0 01420 216v-16z" stroke="#fff" stroke-width="2" mask="url(#c)"/>
+  <rect x="367" y="192" width="22" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="345" y="250" width="16" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="441" y="284" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="471" y="210" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <path d="M393.5 194h4l4 8.5m65 9.5h-4l-7 4.5m-26.5 64l3.5 5.5h4m-58-41l-9 7h-4" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round"/>
+  <defs>
+    <filter id="kibana_dashboard_light__filter0_d" x="8" y="160" width="280" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_dashboard_light__filter1_d" x="8" y="12" width="552" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_dashboard_light__filter2_d" x="280" y="160" width="280" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_discover_dark.svg

@@ -0,0 +1,145 @@
+<svg width="568" height="320" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#25262E" d="M0 0h568v320H0z"/>
+  <g filter="url(#kibana_discover_dark__filter0_d)">
+    <rect x="160" y="24" width="384" height="124" rx="4" fill="#1D1E24"/>
+  </g>
+  <rect x="292" y="32" width="120" height="4" rx="2" fill="#A7AFBE"/>
+  <rect x="176" y="56" width="16" height="4" rx="2" fill="#535966"/>
+  <rect x="237" y="136" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="317" y="136" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="397" y="136" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="477" y="136" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="168" y="76" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="172" y="96" width="20" height="4" rx="2" fill="#535966"/>
+  <rect x="176" y="116" width="16" height="4" rx="2" transform="rotate(-.17 176 116)" fill="#535966"/>
+  <path d="M200.5 48.5V58m335 69.5H489M200.5 58h-4m4 0v20m0 0h-4m4 0v20m0 0h-4m4 0v20m0 0v9.5H249m-48.5-9.5h-4m52.5 13.5v-4m0 0h80m0 0v4m0-4h80m0 0v4m0-4h80m0 0v4" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="210" y="101" width="16" height="24" rx="1" fill="#54B399"/>
+  <rect x="230" y="97" width="16" height="28" rx="1" fill="#54B399"/>
+  <rect x="250" y="99" width="16" height="26" rx="1" fill="#54B399"/>
+  <rect x="270" y="92" width="16" height="33" rx="1" fill="#54B399"/>
+  <rect x="290" y="53" width="16" height="72" rx="1" fill="#54B399"/>
+  <rect x="310" y="59" width="16" height="66" rx="1" fill="#54B399"/>
+  <rect x="330" y="101" width="16" height="24" rx="1" fill="#54B399"/>
+  <rect x="350" y="105" width="16" height="20" rx="1" fill="#54B399"/>
+  <rect x="370" y="103" width="16" height="22" rx="1" fill="#54B399"/>
+  <rect x="390" y="89" width="16" height="36" rx="1" fill="#54B399"/>
+  <rect x="410" y="53" width="16" height="72" rx="1" fill="#54B399"/>
+  <rect x="430" y="63" width="16" height="62" rx="1" fill="#54B399"/>
+  <rect x="450" y="109" width="16" height="16" rx="1" fill="#54B399"/>
+  <rect x="470" y="112" width="16" height="13" rx="1" fill="#54B399"/>
+  <rect x="490" y="101" width="16" height="24" rx="1" fill="#54B399"/>
+  <rect x="510" y="105" width="16" height="20" rx="1" fill="#54B399"/>
+  <g filter="url(#kibana_discover_dark__filter1_d)">
+    <rect x="24" y="24" width="112" height="272" rx="4" fill="#1D1E24"/>
+  </g>
+  <rect x="32" y="32" width="58" height="4" rx="2" fill="#A7AFBE"/>
+  <rect x="32" y="88" width="51" height="4" rx="2" fill="#535966"/>
+  <rect x="40" y="100" width="63" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="112" width="54" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="124" width="72" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="136" width="68" height="4" rx="2" fill="#343741"/>
+  <rect x="32" y="164" width="43" height="4" rx="2" fill="#535966"/>
+  <rect x="40" y="176" width="68" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="188" width="63" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="200" width="78" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="212" width="50" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="224" width="78" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="236" width="68" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="248" width="61" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="260" width="66" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="272" width="63" height="4" rx="2" fill="#343741"/>
+  <rect x="40" y="284" width="70" height="4" rx="2" fill="#343741"/>
+  <rect x="32.5" y="48.5" width="95" height="15" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M44 55a3 3 0 11-6 0 3 3 0 016 0zm1 0a4 4 0 01-6.453 3.16l-2.693 2.694a.5.5 0 01-.708-.708l2.694-2.693A4 4 0 1145 55z" fill="#535966"/>
+  <rect x="32" y="100" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="112" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="124" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="136" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="176" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="188" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="200" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="212" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="224" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="236" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="248" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="260" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="272" width="4" height="4" rx="1" fill="#535966"/>
+  <rect x="32" y="284" width="4" height="4" rx="1" fill="#535966"/>
+  <g filter="url(#kibana_discover_dark__filter2_d)">
+    <rect x="160" y="172" width="384" height="124" rx="4" fill="#1D1E24"/>
+  </g>
+  <rect x="178" y="180" width="54" height="4" rx="2" fill="#535966"/>
+  <rect x="270" y="180" width="32" height="4" rx="2" fill="#535966"/>
+  <rect x="362" y="180" width="50" height="4" rx="2" fill="#535966"/>
+  <rect x="454" y="180" width="55" height="4" rx="2" fill="#535966"/>
+  <rect x="178" y="200" width="59" height="4" rx="2" fill="#343741"/>
+  <rect x="270" y="200" width="39" height="4" rx="2" fill="#343741"/>
+  <rect x="362" y="200" width="57" height="4" rx="2" fill="#343741"/>
+  <rect x="454" y="200" width="45" height="4" rx="2" fill="#343741"/>
+  <path d="M168.5 200.5l1.5 1.5-1.5 1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="212" width="52" height="4" rx="2" fill="#343741"/>
+  <rect x="270" y="212" width="44" height="4" rx="2" fill="#343741"/>
+  <rect x="362" y="212" width="50" height="4" rx="2" fill="#343741"/>
+  <rect x="454" y="212" width="39" height="4" rx="2" fill="#343741"/>
+  <path d="M168.5 212.5l1.5 1.5-1.5 1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="224" width="54" height="4" rx="2" fill="#343741"/>
+  <rect x="270" y="224" width="34" height="4" rx="2" fill="#343741"/>
+  <rect x="362" y="224" width="55" height="4" rx="2" fill="#343741"/>
+  <rect x="454" y="224" width="59" height="4" rx="2" fill="#343741"/>
+  <path d="M168.5 224.5l1.5 1.5-1.5 1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="236" width="57" height="4" rx="2" fill="#343741"/>
+  <rect x="270" y="236" width="51" height="4" rx="2" fill="#343741"/>
+  <rect x="362" y="236" width="48" height="4" rx="2" fill="#343741"/>
+  <rect x="454" y="236" width="51" height="4" rx="2" fill="#343741"/>
+  <path d="M168.5 236.5l1.5 1.5-1.5 1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="248" width="47" height="4" rx="2" fill="#343741"/>
+  <rect x="270" y="248" width="48" height="4" rx="2" fill="#343741"/>
+  <rect x="362" y="248" width="50" height="4" rx="2" fill="#343741"/>
+  <rect x="454" y="248" width="54" height="4" rx="2" fill="#343741"/>
+  <path d="M168.5 248.5l1.5 1.5-1.5 1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="260" width="63" height="4" rx="2" fill="#343741"/>
+  <rect x="270" y="260" width="44" height="4" rx="2" fill="#343741"/>
+  <rect x="362" y="260" width="46" height="4" rx="2" fill="#343741"/>
+  <rect x="454" y="260" width="47" height="4" rx="2" fill="#343741"/>
+  <path d="M168.5 260.5l1.5 1.5-1.5 1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="272" width="54" height="4" rx="2" fill="#343741"/>
+  <rect x="270" y="272" width="56" height="4" rx="2" fill="#343741"/>
+  <rect x="362" y="272" width="57" height="4" rx="2" fill="#343741"/>
+  <rect x="454" y="272" width="53" height="4" rx="2" fill="#343741"/>
+  <path d="M168.5 272.5l1.5 1.5-1.5 1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="284" width="60" height="4" rx="2" fill="#343741"/>
+  <rect x="270" y="284" width="51" height="4" rx="2" fill="#343741"/>
+  <rect x="362" y="284" width="50" height="4" rx="2" fill="#343741"/>
+  <rect x="454" y="284" width="62" height="4" rx="2" fill="#343741"/>
+  <path d="M168.5 284.5l1.5 1.5-1.5 1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M168.5 192h367" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <defs>
+    <filter id="kibana_discover_dark__filter0_d" x="144" y="12" width="416" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_discover_dark__filter1_d" x="8" y="12" width="144" height="304" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_discover_dark__filter2_d" x="144" y="160" width="416" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_discover_light.svg

@@ -0,0 +1,145 @@
+<svg width="568" height="320" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#F5F7FA" d="M0 0h568v320H0z"/>
+  <g filter="url(#kibana_discover_light__filter0_d)">
+    <rect x="160" y="24" width="384" height="124" rx="4" fill="#fff"/>
+  </g>
+  <rect x="292" y="32" width="120" height="4" rx="2" fill="#6A717D"/>
+  <rect x="176" y="56" width="16" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="237" y="136" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="317" y="136" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="397" y="136" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="477" y="136" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="168" y="76" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="172" y="96" width="20" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="176" y="116" width="16" height="4" rx="2" transform="rotate(-.17 176 116)" fill="#98A2B3"/>
+  <path d="M200.5 48.5V58m335 69.5H489M200.5 58h-4m4 0v20m0 0h-4m4 0v20m0 0h-4m4 0v20m0 0v9.5H249m-48.5-9.5h-4m52.5 13.5v-4m0 0h80m0 0v4m0-4h80m0 0v4m0-4h80m0 0v4" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="210" y="101" width="16" height="24" rx="1" fill="#54B399"/>
+  <rect x="230" y="97" width="16" height="28" rx="1" fill="#54B399"/>
+  <rect x="250" y="99" width="16" height="26" rx="1" fill="#54B399"/>
+  <rect x="270" y="92" width="16" height="33" rx="1" fill="#54B399"/>
+  <rect x="290" y="53" width="16" height="72" rx="1" fill="#54B399"/>
+  <rect x="310" y="59" width="16" height="66" rx="1" fill="#54B399"/>
+  <rect x="330" y="101" width="16" height="24" rx="1" fill="#54B399"/>
+  <rect x="350" y="105" width="16" height="20" rx="1" fill="#54B399"/>
+  <rect x="370" y="103" width="16" height="22" rx="1" fill="#54B399"/>
+  <rect x="390" y="89" width="16" height="36" rx="1" fill="#54B399"/>
+  <rect x="410" y="53" width="16" height="72" rx="1" fill="#54B399"/>
+  <rect x="430" y="63" width="16" height="62" rx="1" fill="#54B399"/>
+  <rect x="450" y="109" width="16" height="16" rx="1" fill="#54B399"/>
+  <rect x="470" y="112" width="16" height="13" rx="1" fill="#54B399"/>
+  <rect x="490" y="101" width="16" height="24" rx="1" fill="#54B399"/>
+  <rect x="510" y="105" width="16" height="20" rx="1" fill="#54B399"/>
+  <g filter="url(#kibana_discover_light__filter1_d)">
+    <rect x="24" y="24" width="112" height="272" rx="4" fill="#fff"/>
+  </g>
+  <rect x="32" y="32" width="58" height="4" rx="2" fill="#6A717D"/>
+  <rect x="32.5" y="48.5" width="95" height="15" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <rect x="32" y="88" width="51" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="40" y="100" width="63" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="112" width="54" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="124" width="72" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="136" width="68" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="32" y="164" width="43" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="40" y="176" width="68" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="188" width="63" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="200" width="78" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="212" width="50" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="224" width="78" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="236" width="68" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="248" width="61" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="260" width="66" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="272" width="63" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="40" y="284" width="70" height="4" rx="2" fill="#D3DAE6"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M44 55a3 3 0 11-6 0 3 3 0 016 0zm1 0a4 4 0 01-6.453 3.16l-2.693 2.694a.5.5 0 01-.708-.708l2.694-2.693A4 4 0 1145 55z" fill="#98A2B3"/>
+  <rect x="32" y="100" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="112" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="124" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="136" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="176" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="188" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="200" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="212" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="224" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="236" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="248" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="260" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="272" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <rect x="32" y="284" width="4" height="4" rx="1" fill="#98A2B3"/>
+  <g filter="url(#kibana_discover_light__filter2_d)">
+    <rect x="160" y="172" width="384" height="124" rx="4" fill="#fff"/>
+  </g>
+  <rect x="178" y="180" width="54" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="270" y="180" width="32" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="362" y="180" width="50" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="454" y="180" width="55" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="178" y="200" width="59" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="270" y="200" width="39" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="362" y="200" width="57" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="454" y="200" width="45" height="4" rx="2" fill="#D3DAE6"/>
+  <path d="M168.5 200.5l1.5 1.5-1.5 1.5" stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="212" width="52" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="270" y="212" width="44" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="362" y="212" width="50" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="454" y="212" width="39" height="4" rx="2" fill="#D3DAE6"/>
+  <path d="M168.5 212.5l1.5 1.5-1.5 1.5" stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="224" width="54" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="270" y="224" width="34" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="362" y="224" width="55" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="454" y="224" width="59" height="4" rx="2" fill="#D3DAE6"/>
+  <path d="M168.5 224.5l1.5 1.5-1.5 1.5" stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="236" width="57" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="270" y="236" width="51" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="362" y="236" width="48" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="454" y="236" width="51" height="4" rx="2" fill="#D3DAE6"/>
+  <path d="M168.5 236.5l1.5 1.5-1.5 1.5" stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="248" width="47" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="270" y="248" width="48" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="362" y="248" width="50" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="454" y="248" width="54" height="4" rx="2" fill="#D3DAE6"/>
+  <path d="M168.5 248.5l1.5 1.5-1.5 1.5" stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="260" width="63" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="270" y="260" width="44" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="362" y="260" width="46" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="454" y="260" width="47" height="4" rx="2" fill="#D3DAE6"/>
+  <path d="M168.5 260.5l1.5 1.5-1.5 1.5" stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="272" width="54" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="270" y="272" width="56" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="362" y="272" width="57" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="454" y="272" width="53" height="4" rx="2" fill="#D3DAE6"/>
+  <path d="M168.5 272.5l1.5 1.5-1.5 1.5" stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="178" y="284" width="60" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="270" y="284" width="51" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="362" y="284" width="50" height="4" rx="2" fill="#D3DAE6"/>
+  <rect x="454" y="284" width="62" height="4" rx="2" fill="#D3DAE6"/>
+  <path d="M168.5 284.5l1.5 1.5-1.5 1.5" stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M168.5 192h367" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round"/>
+  <defs>
+    <filter id="kibana_discover_light__filter0_d" x="144" y="12" width="416" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_discover_light__filter1_d" x="8" y="12" width="144" height="304" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_discover_light__filter2_d" x="144" y="160" width="416" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_graph_dark.svg

@@ -0,0 +1,68 @@
+<svg width="268" height="151" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#25262E" d="M0 0h268v151H0z"/>
+  <g filter="url(#kibana_graph_dark__filter0_d)">
+    <rect x="20" y="20" width="228" height="111" rx="2" fill="#1D1E24"/>
+    <rect x="24" y="24" width="12" height="4" rx="1" fill="#54B399"/>
+    <rect x="40" y="24" width="12" height="4" rx="1" fill="#6092C0"/>
+    <rect x="56" y="24" width="12" height="4" rx="1" fill="#D36086"/>
+    <rect x="72" y="24" width="12" height="4" rx="1" fill="#9170B8"/>
+    <path d="M139 87l24 12m0 0l-24 12m24-12l24 12m-24-12h34m-34 0l24-12M89 55l16 20m0 0L71 63m34 12H81m24 0L71 87m34-12L89 95m16-20l16 20m-16-20h24m-24 0l16-20m-16 20l34-12m-34 12l34 12m0-48l24 12m0 0l-24 12m24-12l24-12m-24 12l24 12" stroke="#343741"/>
+    <circle cx="105" cy="75" r="4.5" fill="#9170B8" stroke="#1D1E24"/>
+    <circle cx="163" cy="99" r="4.5" fill="#6092C0" stroke="#1D1E24"/>
+    <circle cx="163" cy="51" r="4.5" fill="#D36086" stroke="#1D1E24"/>
+    <circle cx="121" cy="55" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="139" cy="39" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="187" cy="39" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="187" cy="63" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="187" cy="111" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="197" cy="99" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="187" cy="87" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="139" cy="63" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="139" cy="87" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="139" cy="111" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="129" cy="75" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="121" cy="95" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="89" cy="55" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="81" cy="75" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="89" cy="95" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="71" cy="87" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="71" cy="63" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <rect x="97.5" y="80.5" width="15" height="3" rx="1.5" fill="#535966" stroke="#1D1E24"/>
+    <rect x="158.5" y="104.5" width="9" height="3" rx="1.5" fill="#535966" stroke="#1D1E24"/>
+    <rect x="157.5" y="56.5" width="11" height="3" rx="1.5" fill="#535966" stroke="#1D1E24"/>
+  </g>
+  <g filter="url(#kibana_graph_dark__filter1_d)">
+    <rect x="204" y="12" width="52" height="56" rx="2" fill="#1D1E24"/>
+  </g>
+  <rect x="208.5" y="56.5" width="43" height="7" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <rect x="208" y="16" width="26" height="2" rx="1" fill="#A7AFBE"/>
+  <rect x="208" y="50" width="26" height="2" rx="1" fill="#A7AFBE"/>
+  <rect x="212" y="22" width="29" height="2" rx="1" fill="#535966"/>
+  <rect x="212" y="28" width="23" height="2" rx="1" fill="#535966"/>
+  <rect x="212" y="34" width="26" height="2" rx="1" fill="#535966"/>
+  <rect x="212" y="40" width="33" height="2" rx="1" fill="#535966"/>
+  <circle cx="209" cy="23" r="1" fill="#54B399"/>
+  <circle cx="209" cy="29" r="1" fill="#6092C0"/>
+  <circle cx="209" cy="35" r="1" fill="#D36086"/>
+  <circle cx="209" cy="41" r="1" fill="#9170B8"/>
+  <defs>
+    <filter id="kibana_graph_dark__filter0_d" x="12" y="14" width="244" height="127" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_graph_dark__filter1_d" x="196" y="6" width="68" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_graph_light.svg

@@ -0,0 +1,68 @@
+<svg width="268" height="151" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#F5F7FA" d="M0 0h268v151H0z"/>
+  <g filter="url(#kibana_graph_light__filter0_d)">
+    <rect x="20" y="20" width="228" height="111" rx="2" fill="#fff"/>
+    <rect x="24" y="24" width="12" height="4" rx="1" fill="#54B399"/>
+    <rect x="40" y="24" width="12" height="4" rx="1" fill="#6092C0"/>
+    <rect x="56" y="24" width="12" height="4" rx="1" fill="#D36086"/>
+    <rect x="72" y="24" width="12" height="4" rx="1" fill="#9170B8"/>
+    <path d="M139 87l24 12m0 0l-24 12m24-12l24 12m-24-12h34m-34 0l24-12M89 55l16 20m0 0L71 63m34 12H81m24 0L71 87m34-12L89 95m16-20l16 20m-16-20h24m-24 0l16-20m-16 20l34-12m-34 12l34 12m0-48l24 12m0 0l-24 12m24-12l24-12m-24 12l24 12" stroke="#D3DAE6"/>
+    <circle cx="105" cy="75" r="4.5" fill="#9170B8" stroke="#fff"/>
+    <circle cx="163" cy="99" r="4.5" fill="#6092C0" stroke="#fff"/>
+    <circle cx="163" cy="51" r="4.5" fill="#D36086" stroke="#fff"/>
+    <circle cx="121" cy="55" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="139" cy="39" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="187" cy="39" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="187" cy="63" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="187" cy="111" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="197" cy="99" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="187" cy="87" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="139" cy="63" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="139" cy="87" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="139" cy="111" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="129" cy="75" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="121" cy="95" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="89" cy="55" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="81" cy="75" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="89" cy="95" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="71" cy="87" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="71" cy="63" r="4.5" fill="#54B399" stroke="#fff"/>
+    <rect x="97.5" y="80.5" width="15" height="3" rx="1.5" fill="#98A2B3" stroke="#fff"/>
+    <rect x="158.5" y="104.5" width="9" height="3" rx="1.5" fill="#98A2B3" stroke="#fff"/>
+    <rect x="157.5" y="56.5" width="11" height="3" rx="1.5" fill="#98A2B3" stroke="#fff"/>
+  </g>
+  <g filter="url(#kibana_graph_light__filter1_d)">
+    <rect x="204" y="12" width="52" height="56" rx="2" fill="#fff"/>
+  </g>
+  <rect x="208.5" y="56.5" width="43" height="7" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <rect x="208" y="16" width="26" height="2" rx="1" fill="#6A717D"/>
+  <rect x="208" y="50" width="26" height="2" rx="1" fill="#6A717D"/>
+  <rect x="212" y="22" width="29" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="212" y="28" width="23" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="212" y="34" width="26" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="212" y="40" width="33" height="2" rx="1" fill="#98A2B3"/>
+  <circle cx="209" cy="23" r="1" fill="#54B399"/>
+  <circle cx="209" cy="29" r="1" fill="#6092C0"/>
+  <circle cx="209" cy="35" r="1" fill="#D36086"/>
+  <circle cx="209" cy="41" r="1" fill="#DD0A73"/>
+  <defs>
+    <filter id="kibana_graph_light__filter0_d" x="12" y="14" width="244" height="127" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_graph_light__filter1_d" x="196" y="6" width="68" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_ml_dark.svg

@@ -0,0 +1,141 @@
+<svg width="268" height="151" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#25262E" d="M0 0h268v151H0z"/>
+  <g filter="url(#kibana_ml_dark__filter0_d)">
+    <rect x="80" y="12" width="176" height="127" rx="2" fill="#1D1E24"/>
+  </g>
+  <rect x="90" y="29" width="16" height="2" rx="1" fill="#535966"/>
+  <rect x="93" y="63" width="13" height="2" rx="1" fill="#535966"/>
+  <rect x="89" y="76" width="17" height="2" rx="1" fill="#535966"/>
+  <rect x="86" y="89" width="20" height="2" rx="1" fill="#535966"/>
+  <rect x="92" y="102" width="14" height="2" rx="1" fill="#535966"/>
+  <rect x="88" y="115" width="18" height="2" rx="1" fill="#535966"/>
+  <rect x="87" y="128" width="19" height="2" rx="1" fill="#535966"/>
+  <rect x="84.5" y="46.5" width="37" height="7" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <rect x="123.5" y="46.5" width="37" height="7" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <path d="M118.5 49.5L117 51l-1.5-1.5m42 0L156 51l-1.5-1.5" stroke="#434548" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="84" y="16" width="61" height="2" rx="1" fill="#A7AFBE"/>
+  <g filter="url(#kibana_ml_dark__filter1_d)">
+    <rect x="12" y="12" width="56" height="127" rx="2" fill="#1D1E24"/>
+  </g>
+  <rect x="16" y="16" width="21" height="2" rx="1" fill="#A7AFBE"/>
+  <rect x="16" y="24" width="22" height="2" rx="1" fill="#535966"/>
+  <rect x="20" y="30" width="23" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="38" width="19" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="46" width="23" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="54" width="14" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="33" width="34" height="1" rx=".5" fill="#9170B8"/>
+  <rect x="20" y="41" width="31" height="1" rx=".5" fill="#9170B8"/>
+  <rect x="20" y="49" width="29" height="1" rx=".5" fill="#9170B8"/>
+  <rect x="20" y="57" width="24" height="1" rx=".5" fill="#D36086"/>
+  <rect x="16" y="70" width="28" height="2" rx="1" fill="#535966"/>
+  <rect x="20" y="76" width="14" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="84" width="20" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="79" width="20" height="1" rx=".5" fill="#D36086"/>
+  <rect x="20" y="87" width="16" height="1" rx=".5" fill="#D36086"/>
+  <rect x="16" y="100" width="13" height="2" rx="1" fill="#535966"/>
+  <rect x="20" y="106" width="15" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="114" width="21" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="122" width="19" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="130" width="15" height="2" rx="1" fill="#343741"/>
+  <rect x="20" y="109" width="13" height="1" rx=".5" fill="#6092C0"/>
+  <rect x="20" y="117" width="10" height="1" rx=".5" fill="#6092C0"/>
+  <rect x="20" y="125" width="6" height="1" rx=".5" fill="#54B399"/>
+  <rect x="20" y="133" width="5" height="1" rx=".5" fill="#54B399"/>
+  <rect x="110" y="24" width="12" height="12" rx="1" fill="#54B399"/>
+  <rect x="123" y="24" width="12" height="12" rx="1" fill="#6092C0"/>
+  <rect x="136" y="24" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="149" y="24" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="162" y="24" width="12" height="12" rx="1" fill="#9170B8"/>
+  <rect x="175" y="24" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="188" y="24" width="12" height="12" rx="1" fill="#54B399"/>
+  <rect x="201" y="24" width="12" height="12" rx="1" fill="#54B399"/>
+  <rect x="214" y="24" width="12" height="12" rx="1" fill="#6092C0"/>
+  <rect x="227" y="24" width="12" height="12" rx="1" fill="#6092C0"/>
+  <rect x="240" y="24" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="110" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="123" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="136" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="149" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="162" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="175" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="188" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="201" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="214" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="227" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="240" y="58" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="110" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="123" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="136" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="149" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="162" y="71" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="175" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="188" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="201" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="214" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="227" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="240" y="71" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="110" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="123" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="136" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="149" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="162" y="84" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="175" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="188" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="201" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="214" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="227" y="84" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="240" y="84" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="110" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="123" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="136" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="149" y="97" width="12" height="12" rx="1" fill="#6092C0"/>
+  <rect x="162" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="175" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="188" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="201" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="214" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="227" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="240" y="97" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="110" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="123" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="136" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="149" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="162" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="175" y="110" width="12" height="12" rx="1" fill="#54B399"/>
+  <rect x="188" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="201" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="214" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="227" y="110" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="240" y="110" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="110" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="123" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="136" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="149" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="162" y="123" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="175" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="188" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="201" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="214" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="227" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <rect x="240" y="123" width="12" height="12" rx="1" fill="#25262E"/>
+  <defs>
+    <filter id="kibana_ml_dark__filter0_d" x="72" y="6" width="192" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_ml_dark__filter1_d" x="4" y="6" width="72" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_ml_light.svg

@@ -0,0 +1,141 @@
+<svg width="268" height="151" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#F5F7FA" d="M0 0h268v151H0z"/>
+  <g filter="url(#kibana_ml_light__filter0_d)">
+    <rect x="80" y="12" width="176" height="127" rx="2" fill="#fff"/>
+  </g>
+  <rect x="90" y="29" width="16" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="93" y="63" width="13" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="89" y="76" width="17" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="86" y="89" width="20" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="92" y="102" width="14" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="88" y="115" width="18" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="87" y="128" width="19" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="84.5" y="46.5" width="37" height="7" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <rect x="123.5" y="46.5" width="37" height="7" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <path d="M118.5 49.5L117 51l-1.5-1.5m42 0L156 51l-1.5-1.5" stroke="#AFB0B3" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="84" y="16" width="61" height="2" rx="1" fill="#6A717D"/>
+  <g filter="url(#kibana_ml_light__filter1_d)">
+    <rect x="12" y="12" width="56" height="127" rx="2" fill="#fff"/>
+  </g>
+  <rect x="16" y="16" width="21" height="2" rx="1" fill="#6A717D"/>
+  <rect x="16" y="24" width="22" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="20" y="30" width="23" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="38" width="19" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="46" width="23" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="54" width="14" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="33" width="34" height="1" rx=".5" fill="#9170B8"/>
+  <rect x="20" y="41" width="31" height="1" rx=".5" fill="#9170B8"/>
+  <rect x="20" y="49" width="29" height="1" rx=".5" fill="#9170B8"/>
+  <rect x="20" y="57" width="24" height="1" rx=".5" fill="#D36086"/>
+  <rect x="16" y="70" width="28" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="20" y="76" width="14" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="84" width="20" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="79" width="20" height="1" rx=".5" fill="#D36086"/>
+  <rect x="20" y="87" width="16" height="1" rx=".5" fill="#D36086"/>
+  <rect x="16" y="100" width="13" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="20" y="106" width="15" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="114" width="21" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="122" width="19" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="130" width="15" height="2" rx="1" fill="#D3DAE6"/>
+  <rect x="20" y="109" width="13" height="1" rx=".5" fill="#6092C0"/>
+  <rect x="20" y="117" width="10" height="1" rx=".5" fill="#6092C0"/>
+  <rect x="20" y="125" width="6" height="1" rx=".5" fill="#54B399"/>
+  <rect x="20" y="133" width="5" height="1" rx=".5" fill="#54B399"/>
+  <rect x="110" y="24" width="12" height="12" rx="1" fill="#54B399"/>
+  <rect x="123" y="24" width="12" height="12" rx="1" fill="#6092C0"/>
+  <rect x="136" y="24" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="149" y="24" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="162" y="24" width="12" height="12" rx="1" fill="#9170B8"/>
+  <rect x="175" y="24" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="188" y="24" width="12" height="12" rx="1" fill="#54B399"/>
+  <rect x="201" y="24" width="12" height="12" rx="1" fill="#54B399"/>
+  <rect x="214" y="24" width="12" height="12" rx="1" fill="#6092C0"/>
+  <rect x="227" y="24" width="12" height="12" rx="1" fill="#6092C0"/>
+  <rect x="240" y="24" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="110" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="123" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="136" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="149" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="162" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="175" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="188" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="201" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="214" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="227" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="240" y="58" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="110" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="123" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="136" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="149" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="162" y="71" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="175" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="188" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="201" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="214" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="227" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="240" y="71" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="110" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="123" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="136" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="149" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="162" y="84" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="175" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="188" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="201" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="214" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="227" y="84" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="240" y="84" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="110" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="123" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="136" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="149" y="97" width="12" height="12" rx="1" fill="#6092C0"/>
+  <rect x="162" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="175" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="188" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="201" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="214" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="227" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="240" y="97" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="110" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="123" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="136" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="149" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="162" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="175" y="110" width="12" height="12" rx="1" fill="#54B399"/>
+  <rect x="188" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="201" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="214" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="227" y="110" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="240" y="110" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="110" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="123" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="136" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="149" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="162" y="123" width="12" height="12" rx="1" fill="#D36086"/>
+  <rect x="175" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="188" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="201" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="214" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="227" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <rect x="240" y="123" width="12" height="12" rx="1" fill="#F5F7FA"/>
+  <defs>
+    <filter id="kibana_ml_light__filter0_d" x="72" y="6" width="192" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_ml_light__filter1_d" x="4" y="6" width="72" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_montage_dark.svg

@@ -0,0 +1,178 @@
+<svg width="584" height="347" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#kibana_montage_dark__filter0_d)">
+    <rect x="24" y="117" width="520" height="124" rx="4" fill="#25262E"/>
+  </g>
+  <rect x="32" y="125" width="101" height="4" rx="2" fill="#A7AFBE"/>
+  <rect x="38" y="145" width="18" height="4" rx="2" fill="#535966"/>
+  <rect x="32" y="166" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="40" y="187" width="16" height="4" rx="2" fill="#535966"/>
+  <rect x="36" y="208" width="20" height="4" rx="2" fill="#535966"/>
+  <rect x="72" y="229" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="216" y="229" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="360" y="229" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="504" y="229" width="24" height="4" rx="2" fill="#535966"/>
+  <path opacity=".1" d="M80.177 211L65 203v17h470.5v-36.5l-15.177 12.692-15.178 1.346-15.177-8.846-15.178 17.885-15.177.961-15.178-5.384-15.177-.769-15.177 5.384-15.178-5.846-15.177-40.615-15.178 18.077-15.177-38.462L338.194 197l-15.178-16.308-15.177 12.923-15.178-9.538-15.177 5.615-15.178-24.384L247.129 164l-15.177-15.615-15.178 49.077-15.177 4.615-15.178-22.154-15.177-5.385L156.065 143l-15.178 37.923-15.177 6.923-15.178 19.692-15.177-4.692L80.177 211z" fill="#54B399"/>
+  <path d="M65 203l15.177 8 15.178-8.154 15.177 4.692 15.178-19.692 15.177-6.923L156.065 143l15.177 31.538 15.177 5.385 15.178 22.154 15.177-4.615 15.178-49.077L247.129 164l15.177 1.308 15.178 24.384 15.177-5.615 15.178 9.538 15.177-12.923L338.194 197l15.177-57.077 15.177 38.462 15.178-18.077 15.177 40.615 15.178 5.846 15.177-5.384 15.177.769 15.178 5.384 15.177-.961 15.178-17.885 15.177 8.846 15.178-1.346L535.5 183.5" stroke="#54B399" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle opacity=".1" cx="100" cy="156" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="232" cy="148" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="323" cy="181" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="353" cy="140" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="523" cy="140" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="106" cy="161" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="156" cy="143" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="240" cy="148" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="262" cy="165" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="345" cy="141" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="484" cy="185" r="4" fill="#7DE2D1"/>
+  <circle opacity=".1" cx="490" cy="189" r="4" fill="#7DE2D1"/>
+  <circle cx="100" cy="156" r="7.5" stroke="#6092C0"/>
+  <circle cx="232" cy="148" r="7.5" stroke="#6092C0"/>
+  <circle cx="323" cy="181" r="7.5" stroke="#6092C0"/>
+  <circle cx="353" cy="140" r="7.5" stroke="#6092C0"/>
+  <circle cx="523" cy="140" r="7.5" stroke="#6092C0"/>
+  <circle cx="106" cy="161" r="3.5" stroke="#6092C0"/>
+  <circle cx="156" cy="143" r="3.5" stroke="#6092C0"/>
+  <circle cx="240" cy="148" r="3.5" stroke="#6092C0"/>
+  <circle cx="262" cy="165" r="3.5" stroke="#6092C0"/>
+  <circle cx="345" cy="141" r="3.5" stroke="#6092C0"/>
+  <circle cx="484" cy="185" r="3.5" stroke="#7DE2D1"/>
+  <circle cx="490" cy="189" r="3.5" stroke="#7DE2D1"/>
+  <path d="M64.5 137.5v9.5m471 73.5H516M64.5 147h-4m4 0v21m0 0h-4m4 0v21m0 0h-4m4 0v21m0 0v10.5H84M64.5 210h-4M84 224.5v-4m0 0h144m0 0v4m0-4h144m0 0v4m0-4h144m0 0v4" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <g filter="url(#kibana_montage_dark__filter1_d)">
+    <rect x="160" y="12" width="248" height="124" rx="4" fill="#25262E"/>
+  </g>
+  <rect x="168" y="20" width="80" height="4" rx="2" fill="#A7AFBE"/>
+  <path d="M312.284 108.284a39.996 39.996 0 00-10.054-63.888 40 40 0 00-24.383-3.92l2.461 15.81a23.999 23.999 0 0120.663 40.685l11.313 11.313z" fill="#54B399"/>
+  <mask id="a" maskUnits="userSpaceOnUse" x="249" y="90" width="72" height="31" fill="#000">
+    <path fill="#fff" d="M249 90h72v31h-72z"/>
+    <path d="M250.416 101.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24.004 24.004 0 01-20.177 11.986 24.003 24.003 0 01-20.755-10.955l-13.433 8.691z"/>
+  </mask>
+  <path d="M250.416 101.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24.004 24.004 0 01-20.177 11.986 24.003 24.003 0 01-20.755-10.955l-13.433 8.691z" fill="#6092C0"/>
+  <path d="M250.416 101.728a39.996 39.996 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24.004 24.004 0 01-20.177 11.986 24.003 24.003 0 01-20.755-10.955l-13.433 8.691z" stroke="#1D1E24" stroke-width="2" mask="url(#a)"/>
+  <mask id="b" maskUnits="userSpaceOnUse" x="243" y="53" width="24" height="54" fill="#000">
+    <path fill="#fff" d="M243 53h24v54h-24z"/>
+    <path d="M252.645 55.163a40.002 40.002 0 00.54 50.341l12.326-10.202a23.999 23.999 0 01-.324-30.204l-12.542-9.935z"/>
+  </mask>
+  <path d="M252.645 55.163a40.002 40.002 0 00.54 50.341l12.326-10.202a23.999 23.999 0 01-.324-30.204l-12.542-9.935z" fill="#D36086"/>
+  <path d="M252.645 55.163a40.002 40.002 0 00.54 50.341l12.326-10.202a23.999 23.999 0 01-.324-30.204l-12.542-9.935z" stroke="#1D1E24" stroke-width="2" mask="url(#b)"/>
+  <mask id="c" maskUnits="userSpaceOnUse" x="248" y="39" width="37" height="30" fill="#000">
+    <path fill="#fff" d="M248 39h37v30h-37z"/>
+    <path d="M284 40a40.001 40.001 0 00-33.929 18.814l13.572 8.474A24.002 24.002 0 01284 56V40z"/>
+  </mask>
+  <path d="M284 40a40.001 40.001 0 00-33.929 18.814l13.572 8.474A24.002 24.002 0 01284 56V40z" fill="#9170B8"/>
+  <path d="M284 40a40.001 40.001 0 00-33.929 18.814l13.572 8.474A24.002 24.002 0 01284 56V40z" stroke="#1D1E24" stroke-width="2" mask="url(#c)"/>
+  <rect x="231" y="32" width="22" height="4" rx="2" fill="#535966"/>
+  <rect x="209" y="90" width="16" height="4" rx="2" fill="#535966"/>
+  <rect x="305" y="124" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="335" y="50" width="24" height="4" rx="2" fill="#535966"/>
+  <path d="M257.5 34h4l4 8.5m65 9.5h-4l-7 4.5m-26.5 64l3.5 5.5h4m-58-41l-9 7h-4" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <g filter="url(#kibana_montage_dark__filter2_d)">
+    <rect x="48" y="216" width="228" height="111" rx="4" fill="#25262E"/>
+    <rect x="52" y="220" width="12" height="4" rx="1" fill="#54B399"/>
+    <rect x="68" y="220" width="12" height="4" rx="1" fill="#6092C0"/>
+    <rect x="84" y="220" width="12" height="4" rx="1" fill="#D36086"/>
+    <rect x="100" y="220" width="12" height="4" rx="1" fill="#9170B8"/>
+    <path d="M167 283l24 12m0 0l-24 12m24-12l24 12m-24-12h34m-34 0l24-12m-98-32l16 20m0 0l-34-12m34 12h-24m24 0l-34 12m34-12l-16 20m16-20l16 20m-16-20h24m-24 0l16-20m-16 20l34-12m-34 12l34 12m0-48l24 12m0 0l-24 12m24-12l24-12m-24 12l24 12" stroke="#343741"/>
+    <circle cx="133" cy="271" r="4.5" fill="#9170B8" stroke="#1D1E24"/>
+    <circle cx="191" cy="295" r="4.5" fill="#6092C0" stroke="#1D1E24"/>
+    <circle cx="191" cy="247" r="4.5" fill="#D36086" stroke="#1D1E24"/>
+    <circle cx="149" cy="251" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="167" cy="235" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="215" cy="235" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="215" cy="259" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="215" cy="307" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="225" cy="295" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="215" cy="283" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="167" cy="259" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="167" cy="283" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="167" cy="307" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="157" cy="271" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="149" cy="291" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="117" cy="251" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="109" cy="271" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="117" cy="291" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="99" cy="283" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <circle cx="99" cy="259" r="4.5" fill="#54B399" stroke="#1D1E24"/>
+    <rect x="125.5" y="276.5" width="15" height="3" rx="1.5" fill="#535966" stroke="#1D1E24"/>
+    <rect x="186.5" y="300.5" width="9" height="3" rx="1.5" fill="#535966" stroke="#1D1E24"/>
+    <rect x="185.5" y="252.5" width="11" height="3" rx="1.5" fill="#535966" stroke="#1D1E24"/>
+  </g>
+  <g filter="url(#kibana_montage_dark__filter3_d)">
+    <rect x="232" y="208" width="52" height="56" rx="4" fill="#25262E"/>
+  </g>
+  <rect x="236.5" y="252.5" width="43" height="7" rx=".5" fill="#1D1E24" stroke="#343741"/>
+  <rect x="236" y="212" width="26" height="2" rx="1" fill="#A7AFBE"/>
+  <rect x="236" y="246" width="26" height="2" rx="1" fill="#A7AFBE"/>
+  <rect x="240" y="218" width="29" height="2" rx="1" fill="#535966"/>
+  <rect x="240" y="224" width="23" height="2" rx="1" fill="#535966"/>
+  <rect x="240" y="230" width="26" height="2" rx="1" fill="#535966"/>
+  <rect x="240" y="236" width="33" height="2" rx="1" fill="#535966"/>
+  <circle cx="237" cy="219" r="1" fill="#54B399"/>
+  <circle cx="237" cy="225" r="1" fill="#6092C0"/>
+  <circle cx="237" cy="231" r="1" fill="#D36086"/>
+  <circle cx="237" cy="237" r="1" fill="#9170B8"/>
+  <g filter="url(#kibana_montage_dark__filter4_d)">
+    <rect x="320" y="169" width="248" height="124" rx="4" fill="#25262E"/>
+  </g>
+  <rect x="328" y="177" width="120" height="4" rx="2" fill="#A7AFBE"/>
+  <rect x="336" y="197" width="16" height="4" rx="2" fill="#535966"/>
+  <rect x="368" y="281" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="421" y="281" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="474" y="281" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="527" y="281" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="328" y="218" width="24" height="4" rx="2" fill="#535966"/>
+  <rect x="332" y="239" width="20" height="4" rx="2" fill="#535966"/>
+  <rect x="336" y="260" width="16" height="4" rx="2" transform="rotate(-.17 336 260)" fill="#535966"/>
+  <path d="M360.5 189.5v9.5m199 73.5H539M360.5 199h-4m4 0v21m0 0h-4m4 0v21m0 0h-4m4 0v21m0 0v10.5H380M360.5 262h-4m23.5 14.5v-4m0 0h53m0 0v4m0-4h53m0 0v4m0-4h53m0 0v4" stroke="#343741" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="363" y="191" width="181" height="16" rx="1" fill="#54B399"/>
+  <rect x="363" y="233" width="59" height="16" rx="1" fill="#D36086"/>
+  <rect x="363" y="212" width="120" height="16" rx="1" fill="#6092C0"/>
+  <rect x="363" y="254" width="30" height="16" rx="1" fill="#9170B8"/>
+  <defs>
+    <filter id="kibana_montage_dark__filter0_d" x="8" y="105" width="552" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_montage_dark__filter1_d" x="144" y="0" width="280" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_montage_dark__filter2_d" x="32" y="204" width="260" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_montage_dark__filter3_d" x="216" y="196" width="84" height="88" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_montage_dark__filter4_d" x="304" y="157" width="280" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/assets/kibana_montage_light.svg

@@ -0,0 +1,218 @@
+<svg width="580" height="339" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#kibana_montage_light__filter0_ddd)">
+    <rect x="24" y="111" width="520" height="124" rx="4" fill="#fff"/>
+  </g>
+  <rect x="32" y="119" width="101" height="4" rx="2" fill="#6A717D"/>
+  <rect x="38" y="139" width="18" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="32" y="160" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="40" y="181" width="16" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="36" y="202" width="20" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="72" y="223" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="216" y="223" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="360" y="223" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="504" y="223" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <path opacity=".1" d="M80.177 205L65 197v17h470.5v-36.5l-15.177 12.692-15.178 1.346-15.177-8.846-15.178 17.885-15.177.961-15.178-5.384-15.177-.769-15.177 5.384-15.178-5.846-15.177-40.615-15.178 18.077-15.177-38.462L338.194 191l-15.178-16.308-15.177 12.923-15.178-9.538-15.177 5.615-15.178-24.384L247.129 158l-15.177-15.615-15.178 49.077-15.177 4.615-15.178-22.154-15.177-5.385L156.065 137l-15.178 37.923-15.177 6.923-15.178 19.692-15.177-4.692L80.177 205z" fill="#54B399"/>
+  <path d="M65 197l15.177 8 15.178-8.154 15.177 4.692 15.178-19.692 15.177-6.923L156.065 137l15.177 31.538 15.177 5.385 15.178 22.154 15.177-4.615 15.178-49.077L247.129 158l15.177 1.308 15.178 24.384 15.177-5.615 15.178 9.538 15.177-12.923L338.194 191l15.177-57.077 15.177 38.462 15.178-18.077 15.177 40.615 15.178 5.846 15.177-5.384 15.177.769 15.178 5.384 15.177-.961 15.178-17.885 15.177 8.846 15.178-1.346L535.5 177.5" stroke="#54B399" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle opacity=".1" cx="100" cy="150" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="232" cy="142" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="323" cy="175" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="353" cy="134" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="523" cy="134" r="8" fill="#6092C0"/>
+  <circle opacity=".1" cx="106" cy="155" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="156" cy="137" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="240" cy="142" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="262" cy="159" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="345" cy="135" r="4" fill="#6092C0"/>
+  <circle opacity=".1" cx="484" cy="179" r="4" fill="#017D73"/>
+  <circle opacity=".1" cx="490" cy="183" r="4" fill="#017D73"/>
+  <circle cx="100" cy="150" r="7.5" stroke="#6092C0"/>
+  <circle cx="232" cy="142" r="7.5" stroke="#6092C0"/>
+  <circle cx="323" cy="175" r="7.5" stroke="#6092C0"/>
+  <circle cx="353" cy="134" r="7.5" stroke="#6092C0"/>
+  <circle cx="523" cy="134" r="7.5" stroke="#6092C0"/>
+  <circle cx="106" cy="155" r="3.5" stroke="#6092C0"/>
+  <circle cx="156" cy="137" r="3.5" stroke="#6092C0"/>
+  <circle cx="240" cy="142" r="3.5" stroke="#6092C0"/>
+  <circle cx="262" cy="159" r="3.5" stroke="#6092C0"/>
+  <circle cx="345" cy="135" r="3.5" stroke="#6092C0"/>
+  <circle cx="484" cy="179" r="3.5" stroke="#017D73"/>
+  <circle cx="490" cy="183" r="3.5" stroke="#017D73"/>
+  <path d="M64.5 131.5v9.5m471 73.5H516M64.5 141h-4m4 0v21m0 0h-4m4 0v21m0 0h-4m4 0v21m0 0v10.5H84M64.5 204h-4M84 218.5v-4m0 0h144m0 0v4m0-4h144m0 0v4m0-4h144m0 0v4" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round"/>
+  <g filter="url(#kibana_montage_light__filter1_ddd)">
+    <rect x="160" y="6" width="248" height="124" rx="4" fill="#fff"/>
+  </g>
+  <rect x="168" y="14" width="80" height="4" rx="2" fill="#6A717D"/>
+  <path d="M312.284 102.284a39.996 39.996 0 00-10.054-63.888 40 40 0 00-24.383-3.92l2.461 15.81a23.999 23.999 0 0120.663 40.685l11.313 11.313z" fill="#54B399"/>
+  <mask id="a" maskUnits="userSpaceOnUse" x="249" y="84" width="72" height="31" fill="#000">
+    <path fill="#fff" d="M249 84h72v31h-72z"/>
+    <path d="M250.416 95.728a39.995 39.995 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24.003 24.003 0 01-31.985 9.218 24.008 24.008 0 01-8.947-8.187l-13.433 8.69z"/>
+  </mask>
+  <path d="M250.416 95.728a39.995 39.995 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24.003 24.003 0 01-31.985 9.218 24.008 24.008 0 01-8.947-8.187l-13.433 8.69z" fill="#6092C0"/>
+  <path d="M250.416 95.728a39.995 39.995 0 0034.591 18.259 39.994 39.994 0 0033.628-19.976l-13.854-8.005a24.003 24.003 0 01-31.985 9.218 24.008 24.008 0 01-8.947-8.187l-13.433 8.69z" stroke="#fff" stroke-width="2" mask="url(#a)"/>
+  <mask id="b" maskUnits="userSpaceOnUse" x="243" y="47" width="24" height="54" fill="#000">
+    <path fill="#fff" d="M243 47h24v54h-24z"/>
+    <path d="M252.645 49.163a40.002 40.002 0 00.54 50.34l12.326-10.2a23.999 23.999 0 01-.324-30.205l-12.542-9.935z"/>
+  </mask>
+  <path d="M252.645 49.163a40.002 40.002 0 00.54 50.34l12.326-10.2a23.999 23.999 0 01-.324-30.205l-12.542-9.935z" fill="#D36086"/>
+  <path d="M252.645 49.163a40.002 40.002 0 00.54 50.34l12.326-10.2a23.999 23.999 0 01-.324-30.205l-12.542-9.935z" stroke="#fff" stroke-width="2" mask="url(#b)"/>
+  <mask id="c" maskUnits="userSpaceOnUse" x="248" y="33" width="37" height="30" fill="#000">
+    <path fill="#fff" d="M248 33h37v30h-37z"/>
+    <path d="M284 34a40.001 40.001 0 00-33.929 18.814l13.572 8.474A24.002 24.002 0 01284 50V34z"/>
+  </mask>
+  <path d="M284 34a40.001 40.001 0 00-33.929 18.814l13.572 8.474A24.002 24.002 0 01284 50V34z" fill="#9170B8"/>
+  <path d="M284 34a40.001 40.001 0 00-33.929 18.814l13.572 8.474A24.002 24.002 0 01284 50V34z" stroke="#fff" stroke-width="2" mask="url(#c)"/>
+  <rect x="231" y="26" width="22" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="209" y="84" width="16" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="305" y="118" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="335" y="44" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <path d="M257.5 28h4l4 8.5m65 9.5h-4l-7 4.5m-26.5 64l3.5 5.5h4m-58-41l-9 7h-4" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round"/>
+  <g filter="url(#kibana_montage_light__filter2_ddd)">
+    <rect x="48" y="210" width="228" height="111" rx="4" fill="#fff"/>
+    <rect x="52" y="214" width="12" height="4" rx="1" fill="#54B399"/>
+    <rect x="68" y="214" width="12" height="4" rx="1" fill="#6092C0"/>
+    <rect x="84" y="214" width="12" height="4" rx="1" fill="#D36086"/>
+    <rect x="100" y="214" width="12" height="4" rx="1" fill="#9170B8"/>
+    <path d="M167 277l24 12m0 0l-24 12m24-12l24 12m-24-12h34m-34 0l24-12m-98-32l16 20m0 0l-34-12m34 12h-24m24 0l-34 12m34-12l-16 20m16-20l16 20m-16-20h24m-24 0l16-20m-16 20l34-12m-34 12l34 12m0-48l24 12m0 0l-24 12m24-12l24-12m-24 12l24 12" stroke="#D3DAE6"/>
+    <circle cx="133" cy="265" r="4.5" fill="#9170B8" stroke="#fff"/>
+    <circle cx="191" cy="289" r="4.5" fill="#6092C0" stroke="#fff"/>
+    <circle cx="191" cy="241" r="4.5" fill="#D36086" stroke="#fff"/>
+    <circle cx="149" cy="245" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="167" cy="229" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="215" cy="229" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="215" cy="253" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="215" cy="301" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="225" cy="289" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="215" cy="277" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="167" cy="253" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="167" cy="277" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="167" cy="301" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="157" cy="265" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="149" cy="285" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="117" cy="245" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="109" cy="265" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="117" cy="285" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="99" cy="277" r="4.5" fill="#54B399" stroke="#fff"/>
+    <circle cx="99" cy="253" r="4.5" fill="#54B399" stroke="#fff"/>
+    <rect x="125.5" y="270.5" width="15" height="3" rx="1.5" fill="#98A2B3" stroke="#fff"/>
+    <rect x="186.5" y="294.5" width="9" height="3" rx="1.5" fill="#98A2B3" stroke="#fff"/>
+    <rect x="185.5" y="246.5" width="11" height="3" rx="1.5" fill="#98A2B3" stroke="#fff"/>
+  </g>
+  <g filter="url(#kibana_montage_light__filter3_d)">
+    <rect x="232" y="202" width="52" height="56" rx="4" fill="#fff"/>
+  </g>
+  <rect x="236.5" y="246.5" width="43" height="7" rx=".5" fill="#fff" stroke="#D3DAE6"/>
+  <rect x="236" y="206" width="26" height="2" rx="1" fill="#6A717D"/>
+  <rect x="236" y="240" width="26" height="2" rx="1" fill="#6A717D"/>
+  <rect x="240" y="212" width="29" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="240" y="218" width="23" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="240" y="224" width="26" height="2" rx="1" fill="#98A2B3"/>
+  <rect x="240" y="230" width="33" height="2" rx="1" fill="#98A2B3"/>
+  <circle cx="237" cy="213" r="1" fill="#54B399"/>
+  <circle cx="237" cy="219" r="1" fill="#6092C0"/>
+  <circle cx="237" cy="225" r="1" fill="#D36086"/>
+  <circle cx="237" cy="231" r="1" fill="#9170B8"/>
+  <g filter="url(#kibana_montage_light__filter4_ddd)">
+    <rect x="320" y="163" width="248" height="124" rx="4" fill="#fff"/>
+  </g>
+  <rect x="328" y="171" width="120" height="4" rx="2" fill="#6A717D"/>
+  <rect x="336" y="191" width="16" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="368" y="275" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="421" y="275" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="474" y="275" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="527" y="275" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="328" y="212" width="24" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="332" y="233" width="20" height="4" rx="2" fill="#98A2B3"/>
+  <rect x="336" y="254" width="16" height="4" rx="2" transform="rotate(-.17 336 254)" fill="#98A2B3"/>
+  <path d="M360.5 183.5v9.5m199 73.5H539M360.5 193h-4m4 0v21m0 0h-4m4 0v21m0 0h-4m4 0v21m0 0v10.5H380M360.5 256h-4m23.5 14.5v-4m0 0h53m0 0v4m0-4h53m0 0v4m0-4h53m0 0v4" stroke="#D3DAE6" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="363" y="185" width="181" height="16" rx="1" fill="#54B399"/>
+  <rect x="363" y="227" width="59" height="16" rx="1" fill="#D36086"/>
+  <rect x="363" y="206" width="120" height="16" rx="1" fill="#6092C0"/>
+  <rect x="363" y="248" width="30" height="16" rx="1" fill="#9170B8"/>
+  <defs>
+    <filter id="kibana_montage_light__filter0_ddd" x="12" y="105" width="544" height="148" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="6"/>
+      <feGaussianBlur stdDeviation="6"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_montage_light__filter1_ddd" x="148" y="0" width="272" height="148" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="6"/>
+      <feGaussianBlur stdDeviation="6"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_montage_light__filter2_ddd" x="36" y="204" width="252" height="135" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="6"/>
+      <feGaussianBlur stdDeviation="6"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_montage_light__filter3_d" x="216" y="190" width="84" height="88" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="kibana_montage_light__filter4_ddd" x="308" y="157" width="272" height="148" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="6"/>
+      <feGaussianBlur stdDeviation="6"/>
+      <feColorMatrix values="0 0 0 0 0.596078 0 0 0 0 0.635294 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+      <feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

src/plugins/kibana_overview/public/components/_index.scss

@@ -0,0 +1 @@
+@import 'overview';

src/plugins/kibana_overview/public/components/_overview.scss

@@ -0,0 +1,120 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.kbnOverviewWrapper {
+  background-color: $euiColorEmptyShade;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - #{$euiHeaderHeightCompensation});
+}
+
+.kbnOverviewContent {
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: $euiSizeXL $euiSize;
+  width: 100%;
+
+  // Ensure card heights are stretched equally when wrapped with this element
+  .kbnRedirectCrossAppLinks {
+    align-items: flex-start;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
+
+.kbnOverviewApps__item {
+  .kbnOverviewApps__group--primary & {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      max-width: calc(50% - #{$euiSizeM * 2});
+    }
+  }
+
+  .kbnOverviewApps__group--secondary & {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      max-width: calc(25% - #{$euiSizeM * 2});
+    }
+  }
+}
+
+.kbnOverviewNews__content article {
+  & + article {
+    margin-top: $euiSizeL;
+  }
+
+  &,
+  header {
+    & > * + * {
+      margin-top: $euiSizeXS;
+    }
+  }
+
+  h3 {
+    font-weight: inherit;
+  }
+}
+
+.kbnOverviewMore__item {
+  @include euiBreakpoint('m', 'l', 'xl') {
+    max-width: calc(33.333333333333333% - #{$euiSizeM * 2});
+  }
+}
+
+.kbnOverviewSolution__icon {
+  background-color: $euiColorEmptyShade !important;
+  box-shadow: none !important;
+  height: $euiSizeL * 2;
+  padding: $euiSizeM;
+  width: $euiSizeL * 2;
+}
+
+.kbnOverviewSupplements--noNews .kbnOverviewMore {
+  h2 {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      text-align: center;
+    }
+  }
+
+  .kbnOverviewMore__content {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      justify-content: center;
+    }
+  }
+}
+
+.kbnOverviewData--expanded {
+  flex-direction: column;
+
+  &,
+  & > * {
+    margin-bottom: 0 !important;
+    margin-top: 0 !important;
+  }
+}
+
+// Accounting for no `flush="both"` prop on EuiButtonEmpty
+.kbnOverviewDataAdd__actionButton {
+  margin-right: 0;
+}
+
+.kbnOverviewDataManage__item:not(:only-child) {
+  @include euiBreakpoint('m', 'l', 'xl') {
+    flex: 0 0 calc(50% - #{$euiSizeM * 2});
+  }
+}

src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddData render 1`] = `
+<section
+  aria-labelledby="kbnOverviewDataAdd__title"
+  className="kbnOverviewDataAdd"
+>
+  <EuiFlexGroup
+    alignItems="center"
+  >
+    <EuiFlexItem
+      grow={1}
+    >
+      <EuiTitle
+        size="s"
+      >
+        <h2
+          id="kbnOverviewDataAdd__title"
+        >
+          <FormattedMessage
+            defaultMessage="Ingest your data"
+            id="kibanaOverview.addData.sectionTitle"
+            values={Object {}}
+          />
+        </h2>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="kbnOverviewDataAdd__actions"
+      grow={false}
+    >
+      <div>
+        <EuiButtonEmpty
+          className="kbnOverviewDataAdd__actionButton"
+          flush="left"
+          href="#/tutorial_directory/sampleData"
+          iconType="visTable"
+          size="xs"
+        >
+          <FormattedMessage
+            defaultMessage="Try our sample data"
+            id="kibanaOverview.addData.sampleDataButtonLabel"
+            values={Object {}}
+          />
+        </EuiButtonEmpty>
+      </div>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="m"
+  />
+  <EuiFlexGroup
+    className="kbnOverviewDataAdd__content"
+  >
+    <EuiFlexItem
+      key="home_tutorial_directory"
+    >
+      <RedirectAppLinks>
+        <Synopsis
+          description="Ingest data from popular apps and services."
+          iconType="indexOpen"
+          id="home_tutorial_directory"
+          isBeta={false}
+          title="Ingest data"
+          url="/app/home#/tutorial_directory"
+          wrapInPanel={true}
+        />
+      </RedirectAppLinks>
+    </EuiFlexItem>
+    <EuiFlexItem
+      key="ingestManager"
+    >
+      <RedirectAppLinks>
+        <Synopsis
+          description="Add and manage your fleet of Elastic Agents and integrations."
+          iconType="indexManagementApp"
+          id="ingestManager"
+          isBeta={false}
+          title="Add Elastic Agent"
+          url="/app/ingestManager"
+          wrapInPanel={true}
+        />
+      </RedirectAppLinks>
+    </EuiFlexItem>
+    <EuiFlexItem
+      key="ml_file_data_visualizer"
+    >
+      <RedirectAppLinks>
+        <Synopsis
+          description="Import your own CSV, NDJSON, or log file"
+          iconType="document"
+          id="ml_file_data_visualizer"
+          isBeta={false}
+          title="Upload a file"
+          url="/app/ml#/filedatavisualizer"
+          wrapInPanel={true}
+        />
+      </RedirectAppLinks>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</section>
+`;

src/plugins/kibana_overview/public/components/add_data/add_data.test.tsx

@@ -0,0 +1,67 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { AddData } from './add_data';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { FeatureCatalogueCategory } from 'src/plugins/home/public';
+
+const mockFeatures = [
+  {
+    category: FeatureCatalogueCategory.DATA,
+    description: 'Ingest data from popular apps and services.',
+    showOnHomePage: true,
+    icon: 'indexOpen',
+    id: 'home_tutorial_directory',
+    order: 500,
+    path: '/app/home#/tutorial_directory',
+    title: 'Ingest data',
+  },
+  {
+    category: FeatureCatalogueCategory.ADMIN,
+    description: 'Add and manage your fleet of Elastic Agents and integrations.',
+    showOnHomePage: true,
+    icon: 'indexManagementApp',
+    id: 'ingestManager',
+    order: 510,
+    path: '/app/ingestManager',
+    title: 'Add Elastic Agent',
+  },
+  {
+    category: FeatureCatalogueCategory.DATA,
+    description: 'Import your own CSV, NDJSON, or log file',
+    showOnHomePage: true,
+    icon: 'document',
+    id: 'ml_file_data_visualizer',
+    order: 520,
+    path: '/app/ml#/filedatavisualizer',
+    title: 'Upload a file',
+  },
+];
+
+const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
+
+describe('AddData', () => {
+  test('render', () => {
+    const component = shallowWithIntl(
+      <AddData addBasePath={addBasePathMock} features={mockFeatures} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/kibana_overview/public/components/add_data/add_data.tsx

@@ -0,0 +1,108 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { CoreStart } from 'kibana/public';
+import { RedirectAppLinks, useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { FeatureCatalogueEntry } from '../../../../../../src/plugins/home/public';
+// @ts-expect-error untyped component
+import { Synopsis } from '../synopsis';
+
+interface Props {
+  addBasePath: (path: string) => string;
+  features: FeatureCatalogueEntry[];
+}
+
+export const AddData: FC<Props> = ({ addBasePath, features }) => {
+  const {
+    services: { application },
+  } = useKibana<CoreStart>();
+
+  return (
+    <section className="kbnOverviewDataAdd" aria-labelledby="kbnOverviewDataAdd__title">
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={1}>
+          <EuiTitle size="s">
+            <h2 id="kbnOverviewDataAdd__title">
+              <FormattedMessage
+                id="kibanaOverview.addData.sectionTitle"
+                defaultMessage="Ingest your data"
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+
+        <EuiFlexItem className="kbnOverviewDataAdd__actions" grow={false}>
+          <div>
+            <EuiButtonEmpty
+              className="kbnOverviewDataAdd__actionButton"
+              flush="left"
+              href={addBasePath('#/tutorial_directory/sampleData')}
+              iconType="visTable"
+              size="xs"
+            >
+              <FormattedMessage
+                id="kibanaOverview.addData.sampleDataButtonLabel"
+                defaultMessage="Try our sample data"
+              />
+            </EuiButtonEmpty>
+          </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer size="m" />
+
+      <EuiFlexGroup className="kbnOverviewDataAdd__content">
+        {features.map((feature) => (
+          <EuiFlexItem key={feature.id}>
+            <RedirectAppLinks application={application}>
+              <Synopsis
+                id={feature.id}
+                description={feature.description}
+                iconType={feature.icon}
+                title={feature.title}
+                url={addBasePath(feature.path)}
+                wrapInPanel
+              />
+            </RedirectAppLinks>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </section>
+  );
+};
+
+AddData.propTypes = {
+  addBasePath: PropTypes.func.isRequired,
+  features: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      icon: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+      showOnHomePage: PropTypes.bool.isRequired,
+      category: PropTypes.string.isRequired,
+      order: PropTypes.number,
+    })
+  ),
+};

src/plugins/kibana_overview/public/components/add_data/index.ts

@@ -17,6 +17,4 @@
  * under the License.
  */
 
-.homDataManage__content .euiIcon__fillSecondary {
-  fill: $euiColorDarkestShade;
-}
+export * from './add_data';

src/plugins/kibana_overview/public/components/app.tsx

@@ -0,0 +1,69 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Observable } from 'rxjs';
+import { I18nProvider } from '@kbn/i18n/react';
+import { HashRouter as Router, Switch, Route } from 'react-router-dom';
+import { CoreStart } from 'src/core/public';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { FetchResult } from 'src/plugins/newsfeed/public';
+import { FeatureCatalogueEntry, FeatureCatalogueSolution } from 'src/plugins/home/public';
+import { Overview } from './overview';
+
+interface KibanaOverviewAppDeps {
+  basename: string;
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+  navigation: NavigationPublicPluginStart;
+  newsfeed$?: Observable<FetchResult | null | void>;
+  solutions: FeatureCatalogueSolution[];
+  features: FeatureCatalogueEntry[];
+}
+
+export const KibanaOverviewApp = ({
+  basename,
+  newsfeed$,
+  solutions,
+  features,
+}: KibanaOverviewAppDeps) => {
+  const [newsFetchResult, setNewsFetchResult] = useState<FetchResult | null | void>(null);
+
+  useEffect(() => {
+    if (newsfeed$) {
+      const subscription = newsfeed$.subscribe((res: FetchResult | void | null) => {
+        setNewsFetchResult(res);
+      });
+
+      return () => subscription.unsubscribe();
+    }
+  }, [newsfeed$]);
+
+  return (
+    <Router basename={basename}>
+      <I18nProvider>
+        <Switch>
+          <Route exact path="/">
+            <Overview newsFetchResult={newsFetchResult} solutions={solutions} features={features} />
+          </Route>
+        </Switch>
+      </I18nProvider>
+    </Router>
+  );
+};

src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap

@@ -0,0 +1,391 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GettingStarted dark mode on 1`] = `
+<section
+  aria-labelledby="kbnOverviewGettingStarted__title"
+  className="kbnOverviewGettingStarted"
+>
+  <EuiFlexGroup
+    alignItems="center"
+  >
+    <EuiFlexItem
+      className="kbnOverviewGettingStarted__content"
+    >
+      <div>
+        <EuiTitle
+          size="s"
+        >
+          <h2
+            id="kbnOverviewGettingStarted__title"
+          >
+            <FormattedMessage
+              defaultMessage="Getting started with Kibana"
+              id="kibanaOverview.gettingStarted.title"
+              values={Object {}}
+            />
+          </h2>
+        </EuiTitle>
+        <EuiSpacer
+          size="m"
+        />
+        <EuiText>
+          <p>
+            <FormattedMessage
+              defaultMessage="Kibana empowers you to visualize your data, your way.  Start with one question, and see where the answer leads you."
+              id="kibanaOverview.gettingStarted.description"
+              values={Object {}}
+            />
+          </p>
+        </EuiText>
+        <EuiSpacer
+          size="xl"
+        />
+        <EuiFlexGrid
+          className="kbnOverviewGettingStarted__apps"
+          columns={2}
+        >
+          <EuiFlexItem
+            key="Dashboard"
+          >
+            <EuiCard
+              description="Analyze data in dashboards."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="dashboardApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Dashboard"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Discover"
+          >
+            <EuiCard
+              description="Search and find insights."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="discoverApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Discover"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Canvas"
+          >
+            <EuiCard
+              description="Design pixel-perfect reports."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="canvasApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Canvas"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Maps"
+          >
+            <EuiCard
+              description="Plot geographic data."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="gisApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Maps"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Machine Learning"
+          >
+            <EuiCard
+              description="Model, predict, and detect."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="machineLearningApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Machine Learning"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Graph"
+          >
+            <EuiCard
+              description="Reveal patterns and relationships."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="graphApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Graph"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+        </EuiFlexGrid>
+        <EuiSpacer
+          size="xl"
+        />
+        <RedirectAppLinks>
+          <EuiButton
+            fill={true}
+            href="/app/management/kibana/indexPatterns"
+            iconType="indexOpen"
+          >
+            <FormattedMessage
+              defaultMessage="Add your data"
+              id="kibanaOverview.gettingStarted.addDataButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </RedirectAppLinks>
+      </div>
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="kbnOverviewGettingStarted__graphic"
+    >
+      <EuiImage
+        alt="Kibana visualizations illustration"
+        url="/plugins/kibanaOverview/assets/kibana_montage_dark.svg"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</section>
+`;
+
+exports[`GettingStarted render 1`] = `
+<section
+  aria-labelledby="kbnOverviewGettingStarted__title"
+  className="kbnOverviewGettingStarted"
+>
+  <EuiFlexGroup
+    alignItems="center"
+  >
+    <EuiFlexItem
+      className="kbnOverviewGettingStarted__content"
+    >
+      <div>
+        <EuiTitle
+          size="s"
+        >
+          <h2
+            id="kbnOverviewGettingStarted__title"
+          >
+            <FormattedMessage
+              defaultMessage="Getting started with Kibana"
+              id="kibanaOverview.gettingStarted.title"
+              values={Object {}}
+            />
+          </h2>
+        </EuiTitle>
+        <EuiSpacer
+          size="m"
+        />
+        <EuiText>
+          <p>
+            <FormattedMessage
+              defaultMessage="Kibana empowers you to visualize your data, your way.  Start with one question, and see where the answer leads you."
+              id="kibanaOverview.gettingStarted.description"
+              values={Object {}}
+            />
+          </p>
+        </EuiText>
+        <EuiSpacer
+          size="xl"
+        />
+        <EuiFlexGrid
+          className="kbnOverviewGettingStarted__apps"
+          columns={2}
+        >
+          <EuiFlexItem
+            key="Dashboard"
+          >
+            <EuiCard
+              description="Analyze data in dashboards."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="dashboardApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Dashboard"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Discover"
+          >
+            <EuiCard
+              description="Search and find insights."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="discoverApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Discover"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Canvas"
+          >
+            <EuiCard
+              description="Design pixel-perfect reports."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="canvasApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Canvas"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Maps"
+          >
+            <EuiCard
+              description="Plot geographic data."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="gisApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Maps"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Machine Learning"
+          >
+            <EuiCard
+              description="Model, predict, and detect."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="machineLearningApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Machine Learning"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            key="Graph"
+          >
+            <EuiCard
+              description="Reveal patterns and relationships."
+              display="plain"
+              icon={
+                <EuiIcon
+                  color="text"
+                  size="l"
+                  type="graphApp"
+                />
+              }
+              layout="horizontal"
+              paddingSize="none"
+              title="Graph"
+              titleElement="h3"
+              titleSize="xs"
+            />
+          </EuiFlexItem>
+        </EuiFlexGrid>
+        <EuiSpacer
+          size="xl"
+        />
+        <RedirectAppLinks>
+          <EuiButton
+            fill={true}
+            href="/app/management/kibana/indexPatterns"
+            iconType="indexOpen"
+          >
+            <FormattedMessage
+              defaultMessage="Add your data"
+              id="kibanaOverview.gettingStarted.addDataButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </RedirectAppLinks>
+      </div>
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="kbnOverviewGettingStarted__graphic"
+    >
+      <EuiImage
+        alt="Kibana visualizations illustration"
+        url="/plugins/kibanaOverview/assets/kibana_montage_light.svg"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</section>
+`;

src/plugins/kibana_overview/public/components/getting_started/getting_started.test.tsx

@@ -0,0 +1,118 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { GettingStarted } from './getting_started';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { FeatureCatalogueCategory } from 'src/plugins/home/public';
+
+const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
+
+const mockApps = [
+  {
+    category: FeatureCatalogueCategory.DATA,
+    description: 'Display and share a collection of visualizations and saved searches.',
+    icon: 'dashboardApp',
+    id: 'dashboard',
+    order: 100,
+    path: 'path-to-dashboard',
+    showOnHomePage: false,
+    solutionId: 'kibana',
+    subtitle: 'Analyze data in dashboards.',
+    title: 'Dashboard',
+  },
+  {
+    category: FeatureCatalogueCategory.DATA,
+    description: 'Interactively explore your data by querying and filtering raw documents.',
+    icon: 'discoverApp',
+    id: 'discover',
+    order: 200,
+    path: 'path-to-discover',
+
+    showOnHomePage: false,
+    solutionId: 'kibana',
+    subtitle: 'Search and find insights.',
+    title: 'Discover',
+  },
+  {
+    category: FeatureCatalogueCategory.DATA,
+    description: 'Showcase your data in a pixel-perfect way.',
+    icon: 'canvasApp',
+    id: 'canvas',
+    order: 300,
+    path: 'path-to-canvas',
+
+    showOnHomePage: false,
+    solutionId: 'kibana',
+    subtitle: 'Design pixel-perfect reports.',
+    title: 'Canvas',
+  },
+  {
+    category: FeatureCatalogueCategory.DATA,
+    description: 'Explore geospatial data from Elasticsearch and the Elastic Maps Service.',
+    icon: 'gisApp',
+    id: 'maps',
+    order: 400,
+    path: 'path-to-maps',
+    showOnHomePage: false,
+    solutionId: 'kibana',
+    subtitle: 'Plot geographic data.',
+    title: 'Maps',
+  },
+  {
+    category: FeatureCatalogueCategory.DATA,
+    description:
+      'Automatically model the normal behavior of your time series data to detect anomalies.',
+    icon: 'machineLearningApp',
+    id: 'ml',
+    order: 500,
+    path: 'path-to-ml',
+    showOnHomePage: false,
+    solutionId: 'kibana',
+    subtitle: 'Model, predict, and detect.',
+    title: 'Machine Learning',
+  },
+  {
+    category: FeatureCatalogueCategory.DATA,
+    description: 'Surface and analyze relevant relationships in your Elasticsearch data.',
+    icon: 'graphApp',
+    id: 'graph',
+    order: 600,
+    path: 'path-to-graph',
+    showOnHomePage: false,
+    solutionId: 'kibana',
+    subtitle: 'Reveal patterns and relationships.',
+    title: 'Graph',
+  },
+];
+
+describe('GettingStarted', () => {
+  test('render', () => {
+    const component = shallowWithIntl(
+      <GettingStarted addBasePath={addBasePathMock} isDarkTheme={false} apps={mockApps} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  test('dark mode on', () => {
+    const component = shallowWithIntl(
+      <GettingStarted addBasePath={addBasePathMock} isDarkTheme={true} apps={mockApps} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx

@@ -0,0 +1,126 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FC } from 'react';
+import {
+  EuiButton,
+  EuiCard,
+  EuiFlexGrid,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiImage,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { CoreStart } from 'kibana/public';
+import { RedirectAppLinks, useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { FeatureCatalogueEntry } from '../../../../../../src/plugins/home/public';
+import { PLUGIN_ID } from '../../../common';
+
+interface Props {
+  addBasePath: (path: string) => string;
+  isDarkTheme: boolean;
+  apps: FeatureCatalogueEntry[];
+}
+
+export const GettingStarted: FC<Props> = ({ addBasePath, isDarkTheme, apps }) => {
+  const {
+    services: { application },
+  } = useKibana<CoreStart>();
+  const gettingStartedGraphicURL = `/plugins/${PLUGIN_ID}/assets/kibana_montage_${
+    isDarkTheme ? 'dark' : 'light'
+  }.svg`;
+
+  return (
+    <section
+      aria-labelledby="kbnOverviewGettingStarted__title"
+      className="kbnOverviewGettingStarted"
+    >
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem className="kbnOverviewGettingStarted__content">
+          <div>
+            <EuiTitle size="s">
+              <h2 id="kbnOverviewGettingStarted__title">
+                <FormattedMessage
+                  id="kibanaOverview.gettingStarted.title"
+                  defaultMessage="Getting started with Kibana"
+                />
+              </h2>
+            </EuiTitle>
+
+            <EuiSpacer size="m" />
+
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  id="kibanaOverview.gettingStarted.description"
+                  defaultMessage="Kibana empowers you to visualize your data, your way.  Start with one question, and see where the answer leads you."
+                />
+              </p>
+            </EuiText>
+
+            <EuiSpacer size="xl" />
+
+            <EuiFlexGrid className="kbnOverviewGettingStarted__apps" columns={2}>
+              {apps.map(({ subtitle = '', icon, title }) => (
+                <EuiFlexItem key={title}>
+                  <EuiCard
+                    description={subtitle}
+                    display="plain"
+                    icon={<EuiIcon color="text" size="l" type={icon} />}
+                    layout="horizontal"
+                    paddingSize="none"
+                    title={title}
+                    titleElement="h3"
+                    titleSize="xs"
+                  />
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGrid>
+
+            <EuiSpacer size="xl" />
+
+            <RedirectAppLinks application={application}>
+              <EuiButton
+                fill
+                iconType="indexOpen"
+                href={addBasePath('/app/management/kibana/indexPatterns')}
+              >
+                <FormattedMessage
+                  defaultMessage="Add your data"
+                  id="kibanaOverview.gettingStarted.addDataButtonLabel"
+                />
+              </EuiButton>
+            </RedirectAppLinks>
+          </div>
+        </EuiFlexItem>
+
+        <EuiFlexItem className="kbnOverviewGettingStarted__graphic">
+          <EuiImage
+            alt="Kibana visualizations illustration"
+            url={addBasePath(gettingStartedGraphicURL)}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </section>
+  );
+};

src/plugins/kibana_overview/public/components/getting_started/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './getting_started';

src/plugins/kibana_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManageData render 1`] = `
+<Fragment>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <section
+    aria-labelledby="kbnOverviewDataManage__title"
+    className="kbnOverviewDataManage"
+    data-test-subj="kbnOverviewDataManage"
+  >
+    <EuiTitle
+      size="s"
+    >
+      <h2
+        id="kbnOverviewDataManage__title"
+      >
+        <FormattedMessage
+          defaultMessage="Manage your data"
+          id="kibanaOverview.manageData.sectionTitle"
+          values={Object {}}
+        />
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="m"
+    />
+    <EuiFlexGroup
+      className="kbnOverviewDataManage__content"
+      wrap={true}
+    >
+      <EuiFlexItem
+        className="kbnOverviewDataManage__item"
+        key="security"
+      >
+        <RedirectAppLinks>
+          <Synopsis
+            description="Control who has access and what tasks they can perform."
+            iconType="securityApp"
+            id="security"
+            isBeta={false}
+            title="Protect your data"
+            url="path-to-security-roles"
+            wrapInPanel={true}
+          />
+        </RedirectAppLinks>
+      </EuiFlexItem>
+      <EuiFlexItem
+        className="kbnOverviewDataManage__item"
+        key="monitoring"
+      >
+        <RedirectAppLinks>
+          <Synopsis
+            description="Track the real-time health and performance of your deployment."
+            iconType="monitoringApp"
+            id="monitoring"
+            isBeta={false}
+            title="Monitor the stack"
+            url="path-to-monitoring"
+            wrapInPanel={true}
+          />
+        </RedirectAppLinks>
+      </EuiFlexItem>
+      <EuiFlexItem
+        className="kbnOverviewDataManage__item"
+        key="snapshot_restore"
+      >
+        <RedirectAppLinks>
+          <Synopsis
+            description="Save snapshots to a backup repository, and restore to recover index and cluster state."
+            iconType="storage"
+            id="snapshot_restore"
+            isBeta={false}
+            title="Store & recover backups"
+            url="path-to-snapshot-restore"
+            wrapInPanel={true}
+          />
+        </RedirectAppLinks>
+      </EuiFlexItem>
+      <EuiFlexItem
+        className="kbnOverviewDataManage__item"
+        key="index_lifecycle_management"
+      >
+        <RedirectAppLinks>
+          <Synopsis
+            description="Define lifecycle policies to automatically perform operations as an index ages."
+            iconType="indexSettings"
+            id="index_lifecycle_management"
+            isBeta={false}
+            title="Manage index lifecycles"
+            url="path-to-index-lifecycle-management"
+            wrapInPanel={true}
+          />
+        </RedirectAppLinks>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </section>
+</Fragment>
+`;
+
+exports[`ManageData render empty without any features 1`] = `<Fragment />`;

src/plugins/kibana_overview/public/components/manage_data/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './manage_data';

src/plugins/kibana_overview/public/components/manage_data/manage_data.test.tsx

@@ -0,0 +1,83 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { ManageData } from './manage_data';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { FeatureCatalogueCategory } from 'src/plugins/home/public';
+
+const mockFeatures = [
+  {
+    category: FeatureCatalogueCategory.ADMIN,
+    description: 'Control who has access and what tasks they can perform.',
+    icon: 'securityApp',
+    id: 'security',
+    order: 600,
+    path: 'path-to-security-roles',
+    title: 'Protect your data',
+    showOnHomePage: true,
+  },
+  {
+    category: FeatureCatalogueCategory.ADMIN,
+    description: 'Track the real-time health and performance of your deployment.',
+    icon: 'monitoringApp',
+    id: 'monitoring',
+    order: 610,
+    path: 'path-to-monitoring',
+    title: 'Monitor the stack',
+    showOnHomePage: true,
+  },
+  {
+    category: FeatureCatalogueCategory.ADMIN,
+    description:
+      'Save snapshots to a backup repository, and restore to recover index and cluster state.',
+    icon: 'storage',
+    id: 'snapshot_restore',
+    order: 630,
+    path: 'path-to-snapshot-restore',
+    title: 'Store & recover backups',
+    showOnHomePage: true,
+  },
+  {
+    category: FeatureCatalogueCategory.ADMIN,
+    description: 'Define lifecycle policies to automatically perform operations as an index ages.',
+    icon: 'indexSettings',
+    id: 'index_lifecycle_management',
+    order: 640,
+    path: 'path-to-index-lifecycle-management',
+    title: 'Manage index lifecycles',
+    showOnHomePage: true,
+  },
+];
+
+const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
+
+describe('ManageData', () => {
+  test('render', () => {
+    const component = shallowWithIntl(
+      <ManageData addBasePath={addBasePathMock} features={mockFeatures} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('render empty without any features', () => {
+    const component = shallowWithIntl(<ManageData addBasePath={addBasePathMock} features={[]} />);
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/kibana_overview/public/components/manage_data/manage_data.tsx

@@ -0,0 +1,95 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { CoreStart } from 'kibana/public';
+import { RedirectAppLinks, useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { FeatureCatalogueEntry } from '../../../../../../src/plugins/home/public';
+// @ts-expect-error untyped component
+import { Synopsis } from '../synopsis';
+
+interface Props {
+  addBasePath: (path: string) => string;
+  features: FeatureCatalogueEntry[];
+}
+
+export const ManageData: FC<Props> = ({ addBasePath, features }) => {
+  const {
+    services: { application },
+  } = useKibana<CoreStart>();
+  return (
+    <>
+      {features.length > 1 ? <EuiHorizontalRule margin="xl" aria-hidden="true" /> : null}
+
+      {features.length > 0 ? (
+        <section
+          className="kbnOverviewDataManage"
+          aria-labelledby="kbnOverviewDataManage__title"
+          data-test-subj="kbnOverviewDataManage"
+        >
+          <EuiTitle size="s">
+            <h2 id="kbnOverviewDataManage__title">
+              <FormattedMessage
+                id="kibanaOverview.manageData.sectionTitle"
+                defaultMessage="Manage your data"
+              />
+            </h2>
+          </EuiTitle>
+
+          <EuiSpacer size="m" />
+
+          <EuiFlexGroup className="kbnOverviewDataManage__content" wrap>
+            {features.map((feature) => (
+              <EuiFlexItem className="kbnOverviewDataManage__item" key={feature.id}>
+                <RedirectAppLinks application={application}>
+                  <Synopsis
+                    id={feature.id}
+                    description={feature.description}
+                    iconType={feature.icon}
+                    title={feature.title}
+                    url={addBasePath(feature.path)}
+                    wrapInPanel
+                  />
+                </RedirectAppLinks>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        </section>
+      ) : null}
+    </>
+  );
+};
+
+ManageData.propTypes = {
+  features: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      icon: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+      showOnHomePage: PropTypes.bool.isRequired,
+      category: PropTypes.string.isRequired,
+      order: PropTypes.number,
+    })
+  ),
+};

src/plugins/kibana_overview/public/components/news_feed/__snapshots__/news_feed.test.tsx.snap

@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeedItem render 1`] = `
+<section
+  aria-labelledby="kbnOverviewNews__title"
+  className="kbnOverviewNews"
+>
+  <EuiTitle
+    size="s"
+  >
+    <h2
+      id="kbnOverviewNews__title"
+    >
+      <FormattedMessage
+        defaultMessage="What's new"
+        id="kibanaOverview.news.title"
+        values={Object {}}
+      />
+    </h2>
+  </EuiTitle>
+  <EuiSpacer
+    size="m"
+  />
+  <div
+    className="kbnOverviewNews__content"
+  >
+    <article
+      aria-labelledby="kbnOverviewNews__title0"
+      key="Blog Post 1"
+    >
+      <header>
+        <EuiTitle
+          size="xxs"
+        >
+          <h3
+            id="kbnOverviewNews__title0"
+          >
+            <EuiLink
+              href="link-blog-post-1"
+              target="_blank"
+            >
+              Blog Post 1
+            </EuiLink>
+          </h3>
+        </EuiTitle>
+        <EuiText
+          color="subdued"
+          size="xs"
+        >
+          <p>
+            <time
+              dateTime="2020-08-31"
+            >
+              31 August 2020
+            </time>
+          </p>
+        </EuiText>
+      </header>
+      <EuiText
+        size="xs"
+      >
+        <p>
+          Content of blog post 1
+        </p>
+      </EuiText>
+    </article>
+    <article
+      aria-labelledby="kbnOverviewNews__title1"
+      key="Alerting and anomaly detection for uptime and reliability"
+    >
+      <header>
+        <EuiTitle
+          size="xxs"
+        >
+          <h3
+            id="kbnOverviewNews__title1"
+          >
+            <EuiLink
+              href="link-blog-post-2"
+              target="_blank"
+            >
+              Alerting and anomaly detection for uptime and reliability
+            </EuiLink>
+          </h3>
+        </EuiTitle>
+        <EuiText
+          color="subdued"
+          size="xs"
+        >
+          <p>
+            <time
+              dateTime="2020-08-14"
+            >
+              14 August 2020
+            </time>
+          </p>
+        </EuiText>
+      </header>
+      <EuiText
+        size="xs"
+      >
+        <p>
+          Content of blog post 2
+        </p>
+      </EuiText>
+    </article>
+    <article
+      aria-labelledby="kbnOverviewNews__title2"
+      key="Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management"
+    >
+      <header>
+        <EuiTitle
+          size="xxs"
+        >
+          <h3
+            id="kbnOverviewNews__title2"
+          >
+            <EuiLink
+              href="link-blog-post-3"
+              target="_blank"
+            >
+              Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management
+            </EuiLink>
+          </h3>
+        </EuiTitle>
+        <EuiText
+          color="subdued"
+          size="xs"
+        >
+          <p>
+            <time
+              dateTime="2020-08-01"
+            >
+              01 August 2020
+            </time>
+          </p>
+        </EuiText>
+      </header>
+      <EuiText
+        size="xs"
+      >
+        <p>
+          Content of blog post 1
+        </p>
+      </EuiText>
+    </article>
+  </div>
+</section>
+`;

src/plugins/kibana_overview/public/components/news_feed/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './news_feed';

src/plugins/kibana_overview/public/components/news_feed/news_feed.test.tsx

@@ -0,0 +1,68 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import moment from 'moment';
+import React from 'react';
+import { NewsFeed } from './news_feed';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+
+const mockNewsFetchResult = {
+  error: null,
+  feedItems: [
+    {
+      badge: null,
+      description: 'Content of blog post 1',
+      expireOn: moment('2050-12-31T11:59:59Z'),
+      hash: 'hash1',
+      linkText: 'Read more on the blog',
+      linkUrl: 'link-blog-post-1',
+      publishOn: moment('2020-08-31T11:23:47Z'),
+      title: 'Blog Post 1',
+    },
+    {
+      badge: null,
+      description: 'Content of blog post 2',
+      expireOn: moment('2050-12-31T11:59:59Z'),
+      hash: 'hash2',
+      linkText: 'Read more on the blog',
+      linkUrl: 'link-blog-post-2',
+      publishOn: moment('2020-08-14T11:23:47Z'),
+      title: 'Alerting and anomaly detection for uptime and reliability',
+    },
+    {
+      badge: null,
+      description: 'Content of blog post 1',
+      expireOn: moment('2050-12-31T11:59:59Z'),
+      hash: 'hash3',
+      linkText: 'Learn more on the blog',
+      linkUrl: 'link-blog-post-3',
+      publishOn: moment('2020-08-01T11:23:47Z'),
+      title: 'Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management',
+    },
+  ],
+  hasNew: true,
+  kibanaVersion: '8.0.0',
+};
+
+describe('FeedItem', () => {
+  test('render', () => {
+    const component = shallowWithIntl(<NewsFeed newsFetchResult={mockNewsFetchResult} />);
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/kibana_overview/public/components/news_feed/news_feed.tsx

@@ -0,0 +1,69 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FC } from 'react';
+import { EuiLink, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { FetchResult } from 'src/plugins/newsfeed/public';
+
+interface Props {
+  newsFetchResult: FetchResult;
+}
+
+export const NewsFeed: FC<Props> = ({ newsFetchResult }) => (
+  <section aria-labelledby="kbnOverviewNews__title" className="kbnOverviewNews">
+    <EuiTitle size="s">
+      <h2 id="kbnOverviewNews__title">
+        <FormattedMessage id="kibanaOverview.news.title" defaultMessage="What's new" />
+      </h2>
+    </EuiTitle>
+
+    <EuiSpacer size="m" />
+
+    <div className="kbnOverviewNews__content">
+      {newsFetchResult.feedItems
+        .slice(0, 3)
+        .map(({ title, description, linkUrl, publishOn }, index) => (
+          <article key={title} aria-labelledby={`kbnOverviewNews__title${index}`}>
+            <header>
+              <EuiTitle size="xxs">
+                <h3 id={`kbnOverviewNews__title${index}`}>
+                  <EuiLink href={linkUrl} target="_blank">
+                    {title}
+                  </EuiLink>
+                </h3>
+              </EuiTitle>
+
+              <EuiText size="xs" color="subdued">
+                <p>
+                  <time dateTime={publishOn.format('YYYY-MM-DD')}>
+                    {publishOn.format('DD MMMM YYYY')}
+                  </time>
+                </p>
+              </EuiText>
+            </header>
+
+            <EuiText size="xs">
+              <p>{description}</p>
+            </EuiText>
+          </article>
+        ))}
+    </div>
+  </section>
+);

src/plugins/kibana_overview/public/components/overview/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './overview';

src/plugins/kibana_overview/public/components/overview/overview.test.tsx

@@ -0,0 +1,180 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import moment from 'moment';
+import React from 'react';
+import { Overview } from './overview';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { FeatureCatalogueCategory } from 'src/plugins/home/public';
+
+jest.mock('../../../../../../src/plugins/kibana_react/public', () => ({
+  useKibana: jest.fn().mockReturnValue({
+    services: {
+      http: { basePath: { prepend: jest.fn((path: string) => (path ? path : 'path')) } },
+      data: { indexPatterns: {} },
+      uiSettings: { get: jest.fn() },
+    },
+  }),
+  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
+  OverviewPageFooter: jest.fn().mockReturnValue(<></>),
+  OverviewPageHeader: jest.fn().mockReturnValue(<></>),
+}));
+
+afterAll(() => jest.clearAllMocks());
+
+const mockNewsFetchResult = {
+  error: null,
+  feedItems: [
+    {
+      badge: null,
+      description:
+        'The official Go client now includes features like request retries and node discovery. Learn more about its architecture and package and repository layout.',
+      expireOn: moment('2050-12-31T11:59:59Z'),
+      hash: '8e18fcedbc',
+      linkText: 'Read more on the blog',
+      linkUrl:
+        'https://www.elastic.co/blog/the-go-client-for-elasticsearch-introduction?blade=kibanafeed',
+      publishOn: moment('2020-08-31T10:23:47Z'),
+      title: 'The Go client for Elasticsearch: Introduction',
+    },
+    {
+      badge: null,
+      description:
+        'Learn how to use Elastic Uptime to configure alerting and anomaly detection for sites, services, and APIs.',
+      expireOn: moment('2050-12-31T11:59:59Z'),
+      hash: 'fb3e3d42ef',
+      linkText: 'Read more on the blog',
+      linkUrl:
+        'https://www.elastic.co/blog/alerting-and-anomaly-detection-for-uptime-and-reliability?blade=kibanafeed',
+      publishOn: moment('2020-08-14T10:23:47Z'),
+      title: 'Alerting and anomaly detection for uptime and reliability',
+    },
+    {
+      badge: null,
+      description:
+        'Managing data using hot-warm architecture and ILM is a cost-effective way of retaining data — and a great way to easily keep your cloud costs down.',
+      expireOn: moment('2050-12-31T11:59:59Z'),
+      hash: 'b2fc7d47d5',
+      linkText: 'Learn more on the blog',
+      linkUrl:
+        'https://www.elastic.co/blog/optimizing-costs-elastic-cloud-hot-warm-index-lifecycle-management?blade=kibanafeed',
+      publishOn: moment('2020-08-01T10:23:47Z'),
+      title: 'Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management',
+    },
+  ],
+  hasNew: true,
+  kibanaVersion: '8.0.0',
+};
+
+const mockSolutions = [
+  {
+    id: 'kibana',
+    title: 'Kibana',
+    subtitle: 'Visualize & analyze',
+    appDescriptions: ['Analyze data in dashboards'],
+    icon: 'logoKibana',
+    path: 'kibana_landing_page',
+    order: 1,
+  },
+  {
+    id: 'solution-2',
+    title: 'Solution two',
+    subtitle: 'Subtitle for solution two',
+    description: 'Description of solution two',
+    appDescriptions: ['Example use case'],
+    icon: 'empty',
+    path: 'path-to-solution-two',
+    order: 2,
+  },
+  {
+    id: 'solution-3',
+    title: 'Solution three',
+    subtitle: 'Subtitle for solution three',
+    description: 'Description of solution three',
+    appDescriptions: ['Example use case'],
+    icon: 'empty',
+    path: 'path-to-solution-three',
+    order: 3,
+  },
+  {
+    id: 'solution-4',
+    title: 'Solution four',
+    subtitle: 'Subtitle for solution four',
+    description: 'Description of solution four',
+    appDescriptions: ['Example use case'],
+    icon: 'empty',
+    path: 'path-to-solution-four',
+    order: 4,
+  },
+];
+
+const mockFeatures = [
+  {
+    id: 'dashboard',
+    title: 'Dashboard',
+    description: 'Description of dashboard',
+    icon: 'dashboardApp',
+    path: 'dashboard_landing_page',
+    showOnHomePage: false,
+    category: FeatureCatalogueCategory.DATA,
+  },
+  {
+    id: 'discover',
+    title: 'Discover',
+    description: 'Description of discover',
+    icon: 'discoverApp',
+    path: 'discover_landing_page',
+    showOnHomePage: false,
+    category: FeatureCatalogueCategory.DATA,
+  },
+  {
+    id: 'canvas',
+    title: 'Canvas',
+    description: 'Description of canvas',
+    icon: 'canvasApp',
+    path: 'canvas_landing_page',
+    showOnHomePage: false,
+    category: FeatureCatalogueCategory.DATA,
+  },
+];
+
+describe('Overview', () => {
+  test('render', () => {
+    const component = shallowWithIntl(
+      <Overview
+        newsFetchResult={mockNewsFetchResult}
+        solutions={mockSolutions}
+        features={mockFeatures}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  test('without solutions', () => {
+    const component = shallowWithIntl(
+      <Overview newsFetchResult={mockNewsFetchResult} solutions={[]} features={mockFeatures} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  test('without features', () => {
+    const component = shallowWithIntl(
+      <Overview newsFetchResult={mockNewsFetchResult} solutions={mockSolutions} features={[]} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/kibana_overview/public/components/overview/overview.tsx

@@ -0,0 +1,259 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { snakeCase } from 'lodash';
+import React, { FC, useState, useEffect } from 'react';
+import {
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiScreenReaderOnly,
+  EuiSpacer,
+  EuiTitle,
+  EuiToken,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { CoreStart } from 'kibana/public';
+import {
+  RedirectAppLinks,
+  useKibana,
+  OverviewPageFooter,
+  OverviewPageHeader,
+} from '../../../../../../src/plugins/kibana_react/public';
+import { FetchResult } from '../../../../../../src/plugins/newsfeed/public';
+import {
+  FeatureCatalogueEntry,
+  FeatureCatalogueSolution,
+  FeatureCatalogueCategory,
+} from '../../../../../../src/plugins/home/public';
+import { PLUGIN_ID, PLUGIN_PATH } from '../../../common';
+import { AppPluginStartDependencies } from '../../types';
+import { AddData } from '../add_data';
+import { GettingStarted } from '../getting_started';
+import { ManageData } from '../manage_data';
+import { NewsFeed } from '../news_feed';
+
+const sortByOrder = (featureA: FeatureCatalogueEntry, featureB: FeatureCatalogueEntry) =>
+  (featureA.order || Infinity) - (featureB.order || Infinity);
+
+interface Props {
+  newsFetchResult: FetchResult | null | void;
+  solutions: FeatureCatalogueSolution[];
+  features: FeatureCatalogueEntry[];
+}
+
+export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) => {
+  const [isNewKibanaInstance, setNewKibanaInstance] = useState(false);
+  const {
+    services: { http, data, uiSettings, application },
+  } = useKibana<CoreStart & AppPluginStartDependencies>();
+  const addBasePath = http.basePath.prepend;
+  const indexPatternService = data.indexPatterns;
+  const IS_DARK_THEME = uiSettings.get('theme:darkMode');
+
+  const getFeaturesByCategory = (category: string) =>
+    features
+      .filter((feature) => feature.showOnHomePage && feature.category === category)
+      .sort(sortByOrder);
+
+  const getSolutionGraphicURL = (solutionId: string) =>
+    `/plugins/${PLUGIN_ID}/assets/solutions_${solutionId}_${
+      IS_DARK_THEME ? 'dark' : 'light'
+    }_2x.png`;
+
+  const findFeatureById = (featureId: string) => features.find(({ id }) => id === featureId);
+  const kibanaApps = features.filter(({ solutionId }) => solutionId === 'kibana').sort(sortByOrder);
+  const addDataFeatures = getFeaturesByCategory(FeatureCatalogueCategory.DATA);
+  const manageDataFeatures = getFeaturesByCategory(FeatureCatalogueCategory.ADMIN);
+  const devTools = findFeatureById('console');
+
+  // Show card for console if none of the manage data plugins are available, most likely in OSS
+  if (manageDataFeatures.length < 1 && devTools) {
+    manageDataFeatures.push(devTools);
+  }
+
+  useEffect(() => {
+    const fetchIsNewKibanaInstance = async () => {
+      const resp = await indexPatternService.getTitles();
+
+      setNewKibanaInstance(resp.length === 0);
+    };
+
+    fetchIsNewKibanaInstance();
+  }, [indexPatternService]);
+
+  const renderAppCard = (appId: string) => {
+    const app = kibanaApps.find(({ id }) => id === appId);
+
+    return app ? (
+      <EuiFlexItem className="kbnOverviewApps__item" key={appId}>
+        <RedirectAppLinks application={application}>
+          <EuiCard
+            description={app?.subtitle || ''}
+            href={addBasePath(app.path)}
+            image={addBasePath(
+              `/plugins/${PLUGIN_ID}/assets/kibana_${appId}_${IS_DARK_THEME ? 'dark' : 'light'}.svg`
+            )}
+            title={app.title}
+            titleElement="h3"
+            titleSize="s"
+          />
+        </RedirectAppLinks>
+      </EuiFlexItem>
+    ) : null;
+  };
+
+  // Dashboard and discover are displayed in larger cards
+  const mainApps = ['dashboard', 'discover'];
+  const remainingApps = kibanaApps.map(({ id }) => id).filter((id) => !mainApps.includes(id));
+
+  return (
+    <main aria-labelledby="kbnOverviewPageHeader__title" className="kbnOverviewWrapper">
+      <OverviewPageHeader
+        addBasePath={addBasePath}
+        hideToolbar={isNewKibanaInstance}
+        iconType="logoKibana"
+        title={<FormattedMessage defaultMessage="Kibana" id="kibanaOverview.header.title" />}
+      />
+
+      <div className="kbnOverviewContent">
+        {isNewKibanaInstance ? (
+          <GettingStarted addBasePath={addBasePath} isDarkTheme={IS_DARK_THEME} apps={kibanaApps} />
+        ) : (
+          <>
+            <section aria-labelledby="kbnOverviewApps__title" className="kbnOverviewApps">
+              <EuiScreenReaderOnly>
+                <h2 id="kbnOverviewApps__title">
+                  <FormattedMessage
+                    id="kibanaOverview.apps.title"
+                    defaultMessage="Explore these apps"
+                  />
+                </h2>
+              </EuiScreenReaderOnly>
+
+              {mainApps.length ? (
+                <>
+                  <EuiFlexGroup
+                    className="kbnOverviewApps__group kbnOverviewApps__group--primary"
+                    justifyContent="center"
+                  >
+                    {mainApps.map(renderAppCard)}
+                  </EuiFlexGroup>
+
+                  <EuiSpacer size="l" />
+                </>
+              ) : null}
+
+              {remainingApps.length ? (
+                <EuiFlexGroup
+                  className="kbnOverviewApps__group kbnOverviewApps__group--secondary"
+                  justifyContent="center"
+                >
+                  {remainingApps.map(renderAppCard)}
+                </EuiFlexGroup>
+              ) : null}
+            </section>
+
+            <EuiHorizontalRule aria-hidden="true" margin="xl" />
+
+            <EuiFlexGroup
+              alignItems="flexStart"
+              className={`kbnOverviewSupplements ${
+                newsFetchResult && newsFetchResult.feedItems.length
+                  ? 'kbnOverviewSupplements--hasNews'
+                  : 'kbnOverviewSupplements--noNews'
+              }`}
+            >
+              {newsFetchResult && newsFetchResult.feedItems.length ? (
+                <EuiFlexItem grow={1}>
+                  <NewsFeed newsFetchResult={newsFetchResult} />
+                </EuiFlexItem>
+              ) : null}
+
+              <EuiFlexItem grow={3}>
+                {solutions.length ? (
+                  <section aria-labelledby="kbnOverviewMore__title" className="kbnOverviewMore">
+                    <EuiTitle size="s">
+                      <h2 id="kbnOverviewMore__title">
+                        <FormattedMessage
+                          id="kibanaOverview.more.title"
+                          defaultMessage="Do more with Elastic"
+                        />
+                      </h2>
+                    </EuiTitle>
+
+                    <EuiSpacer size="m" />
+
+                    <EuiFlexGroup className="kbnOverviewMore__content">
+                      {solutions.map(({ id, title, description, icon, path }) => (
+                        <EuiFlexItem className="kbnOverviewMore__item" key={id}>
+                          <RedirectAppLinks application={application}>
+                            <EuiCard
+                              className="kbnOverviewSolution"
+                              description={description ? description : ''}
+                              href={addBasePath(path)}
+                              icon={
+                                <EuiToken
+                                  className="kbnOverviewSolution__icon"
+                                  fill="light"
+                                  iconType={icon}
+                                  shape="circle"
+                                  size="l"
+                                />
+                              }
+                              image={addBasePath(getSolutionGraphicURL(snakeCase(id)))}
+                              title={title}
+                              titleElement="h3"
+                              titleSize="xs"
+                            />
+                          </RedirectAppLinks>
+                        </EuiFlexItem>
+                      ))}
+                    </EuiFlexGroup>
+                  </section>
+                ) : (
+                  <EuiFlexGroup
+                    className={`kbnOverviewData ${
+                      addDataFeatures.length === 1 && manageDataFeatures.length === 1
+                        ? 'kbnOverviewData--compressed'
+                        : 'kbnOverviewData--expanded'
+                    }`}
+                  >
+                    <EuiFlexItem>
+                      <AddData addBasePath={addBasePath} features={addDataFeatures} />
+                    </EuiFlexItem>
+
+                    <EuiFlexItem>
+                      <ManageData addBasePath={addBasePath} features={manageDataFeatures} />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                )}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </>
+        )}
+
+        <EuiHorizontalRule margin="xl" aria-hidden="true" />
+
+        <OverviewPageFooter addBasePath={addBasePath} path={PLUGIN_PATH} />
+      </div>
+    </main>
+  );
+};

src/plugins/kibana_overview/public/components/synopsis/__snapshots__/synopsis.test.js.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`props iconType 1`] = `
+<EuiCard
+  betaBadgeLabel={null}
+  className="homSynopsis__card homSynopsis__card--noPanel"
+  data-test-subj="homeSynopsisLinktutorial"
+  description="this is a great tutorial about..."
+  href="link_to_item"
+  icon={
+    <EuiIcon
+      color="text"
+      size="l"
+      title=""
+      type="logoApache"
+    />
+  }
+  layout="horizontal"
+  title="Great tutorial"
+  titleElement="h3"
+  titleSize="xs"
+/>
+`;
+
+exports[`props iconUrl 1`] = `
+<EuiCard
+  betaBadgeLabel={null}
+  className="homSynopsis__card homSynopsis__card--noPanel"
+  data-test-subj="homeSynopsisLinktutorial"
+  description="this is a great tutorial about..."
+  href="link_to_item"
+  icon={
+    <img
+      alt=""
+      className="synopsisIcon"
+      src="icon_url"
+    />
+  }
+  layout="horizontal"
+  title="Great tutorial"
+  titleElement="h3"
+  titleSize="xs"
+/>
+`;
+
+exports[`props isBeta 1`] = `
+<EuiCard
+  betaBadgeLabel="Beta"
+  className="homSynopsis__card homSynopsis__card--noPanel"
+  data-test-subj="homeSynopsisLinktutorial"
+  description="this is a great tutorial about..."
+  href="link_to_item"
+  layout="horizontal"
+  title="Great tutorial"
+  titleElement="h3"
+  titleSize="xs"
+/>
+`;
+
+exports[`render 1`] = `
+<EuiCard
+  betaBadgeLabel={null}
+  className="homSynopsis__card homSynopsis__card--noPanel"
+  data-test-subj="homeSynopsisLinktutorial"
+  description="this is a great tutorial about..."
+  href="link_to_item"
+  layout="horizontal"
+  title="Great tutorial"
+  titleElement="h3"
+  titleSize="xs"
+/>
+`;

src/plugins/kibana_overview/public/components/synopsis/index.js

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './synopsis';

src/plugins/kibana_overview/public/components/synopsis/synopsis.js

@@ -0,0 +1,77 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { EuiCard, EuiIcon } from '@elastic/eui';
+
+export function Synopsis({
+  id,
+  description,
+  iconUrl,
+  iconType,
+  title,
+  url,
+  wrapInPanel,
+  onClick,
+  isBeta,
+}) {
+  let optionalImg;
+  if (iconUrl) {
+    optionalImg = <img alt="" className="synopsisIcon" src={iconUrl} />;
+  } else if (iconType) {
+    optionalImg = <EuiIcon color="text" size="l" title="" type={iconType} />;
+  }
+
+  const classes = classNames('homSynopsis__card', {
+    'homSynopsis__card--noPanel': !wrapInPanel,
+  });
+
+  return (
+    <EuiCard
+      className={classes}
+      layout="horizontal"
+      icon={optionalImg}
+      titleSize="xs"
+      title={title}
+      description={description}
+      onClick={onClick}
+      href={url}
+      data-test-subj={`homeSynopsisLink${id.toLowerCase()}`}
+      betaBadgeLabel={isBeta ? 'Beta' : null}
+      titleElement="h3"
+    />
+  );
+}
+
+Synopsis.propTypes = {
+  description: PropTypes.string.isRequired,
+  iconUrl: PropTypes.string,
+  iconType: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  isBeta: PropTypes.bool,
+};
+
+Synopsis.defaultProps = {
+  isBeta: false,
+};

src/plugins/kibana_overview/public/components/synopsis/synopsis.test.js

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Synopsis } from './synopsis';
+
+test('render', () => {
+  const component = shallow(
+    <Synopsis
+      id={'tutorial'}
+      description="this is a great tutorial about..."
+      title="Great tutorial"
+      url="link_to_item"
+    />
+  );
+  expect(component).toMatchSnapshot(); // eslint-disable-line
+});
+
+describe('props', () => {
+  test('iconType', () => {
+    const component = shallow(
+      <Synopsis
+        id={'tutorial'}
+        description="this is a great tutorial about..."
+        title="Great tutorial"
+        url="link_to_item"
+        iconType="logoApache"
+      />
+    );
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
+
+  test('iconUrl', () => {
+    const component = shallow(
+      <Synopsis
+        id={'tutorial'}
+        description="this is a great tutorial about..."
+        title="Great tutorial"
+        url="link_to_item"
+        iconUrl="icon_url"
+      />
+    );
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
+
+  test('isBeta', () => {
+    const component = shallow(
+      <Synopsis
+        id={'tutorial'}
+        description="this is a great tutorial about..."
+        title="Great tutorial"
+        url="link_to_item"
+        isBeta={true}
+      />
+    );
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
+});

src/plugins/kibana_overview/public/index.scss

@@ -0,0 +1 @@
+@import 'components/index';

src/plugins/kibana_overview/public/index.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import './index.scss';
+
+import { KibanaOverviewPlugin } from './plugin';
+
+// This exports static code and TypeScript types,
+// as well as, Kibana Platform `plugin()` initializer.
+export function plugin() {
+  return new KibanaOverviewPlugin();
+}
+export { KibanaOverviewPluginSetup, KibanaOverviewPluginStart } from './types';

src/plugins/kibana_overview/public/plugin.ts

@@ -0,0 +1,139 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { from } from 'rxjs';
+import { distinct, map, switchMap } from 'rxjs/operators';
+import {
+  AppMountParameters,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  DEFAULT_APP_CATEGORIES,
+  AppStatus,
+  AppNavLinkStatus,
+} from '../../../../src/core/public';
+import {
+  KibanaOverviewPluginSetup,
+  KibanaOverviewPluginStart,
+  AppPluginSetupDependencies,
+  AppPluginStartDependencies,
+} from './types';
+import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_PATH, PLUGIN_ICON } from '../common';
+
+export class KibanaOverviewPlugin
+  implements
+    Plugin<
+      KibanaOverviewPluginSetup,
+      KibanaOverviewPluginStart,
+      AppPluginSetupDependencies,
+      AppPluginStartDependencies
+    > {
+  public setup(
+    core: CoreSetup<AppPluginStartDependencies>,
+    { home }: AppPluginSetupDependencies
+  ): KibanaOverviewPluginSetup {
+    const appUpdater$ = from(core.getStartServices()).pipe(
+      switchMap(([coreDeps]) => coreDeps.chrome.navLinks.getNavLinks$()),
+      map((navLinks) => {
+        const hasKibanaApp = Boolean(
+          navLinks.find(
+            ({ id, category, hidden }) => !hidden && category?.id === 'kibana' && id !== PLUGIN_ID
+          )
+        );
+
+        return hasKibanaApp;
+      }),
+      distinct(),
+      map((hasKibanaApp) => {
+        return () => {
+          if (!hasKibanaApp) {
+            return { status: AppStatus.inaccessible, navLinkStatus: AppNavLinkStatus.hidden };
+          } else {
+            return { status: AppStatus.accessible, navLinkStatus: AppNavLinkStatus.default };
+          }
+        };
+      })
+    );
+
+    // Register an application into the side navigation menu
+    core.application.register({
+      category: DEFAULT_APP_CATEGORIES.kibana,
+      id: PLUGIN_ID,
+      title: PLUGIN_NAME,
+      euiIconType: PLUGIN_ICON,
+      order: -2000,
+      updater$: appUpdater$,
+      appRoute: PLUGIN_PATH,
+      async mount(params: AppMountParameters) {
+        // Load application bundle
+        const { renderApp } = await import('./application');
+        // Get start services as specified in kibana.json
+        const [coreStart, depsStart] = await core.getStartServices();
+
+        // Render the application
+        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params);
+      },
+    });
+
+    if (home) {
+      home.featureCatalogue.registerSolution({
+        id: 'kibana',
+        title: i18n.translate('kibanaOverview.kibana.solution.title', {
+          defaultMessage: 'Kibana',
+        }),
+        subtitle: i18n.translate('kibanaOverview.kibana.solution.subtitle', {
+          defaultMessage: 'Visualize & analyze',
+        }),
+        appDescriptions: [
+          i18n.translate('kibanaOverview.kibana.appDescription1', {
+            defaultMessage: 'Analyze data in dashboards.',
+          }),
+          i18n.translate('kibanaOverview.kibana.appDescription2', {
+            defaultMessage: 'Search and find insights.',
+          }),
+          i18n.translate('kibanaOverview.kibana.appDescription3', {
+            defaultMessage: 'Design pixel-perfect reports.',
+          }),
+          i18n.translate('kibanaOverview.kibana.appDescription4', {
+            defaultMessage: 'Plot geographic data.',
+          }),
+          i18n.translate('kibanaOverview.kibana.appDescription5', {
+            defaultMessage: 'Model, predict, and detect.',
+          }),
+          i18n.translate('kibanaOverview.kibana.appDescription6', {
+            defaultMessage: 'Reveal patterns and relationships.',
+          }),
+        ],
+        icon: 'logoKibana',
+        path: PLUGIN_PATH,
+        order: 400,
+      });
+    }
+
+    // Return methods that should be available to other plugins
+    return {};
+  }
+
+  public start(core: CoreStart): KibanaOverviewPluginStart {
+    return {};
+  }
+
+  public stop() {}
+}

src/plugins/kibana_overview/public/types.ts

@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { HomePublicPluginSetup, HomePublicPluginStart } from 'src/plugins/home/public';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { DataPublicPluginStart } from 'src/plugins/data/public';
+import { NewsfeedPublicPluginStart } from 'src/plugins/newsfeed/public';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface KibanaOverviewPluginSetup {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface KibanaOverviewPluginStart {}
+
+export interface AppPluginSetupDependencies {
+  home: HomePublicPluginSetup;
+}
+
+export interface AppPluginStartDependencies {
+  home: HomePublicPluginStart;
+  data: DataPublicPluginStart;
+  navigation: NavigationPublicPluginStart;
+  newsfeed?: NewsfeedPublicPluginStart;
+}

src/plugins/kibana_react/public/index.ts

@@ -20,6 +20,7 @@
 export * from './code_editor';
 export * from './exit_full_screen_button';
 export * from './context';
+export * from './overview_page';
 export * from './overlays';
 export * from './ui_settings';
 export * from './field_icon';

src/plugins/kibana_react/public/overview_page/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './overview_page_footer';
+export * from './overview_page_header';

src/plugins/kibana_react/public/overview_page/overview_page_footer/__snapshots__/overview_page_footer.test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverviewPageFooter render 1`] = `
+<footer
+  className="kbnOverviewPageFooter"
+>
+  <EuiFlexGroup
+    justifyContent="spaceBetween"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <div />
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <div>
+        <mockConstructor
+          application={
+            Object {
+              "capabilities": Object {
+                "advancedSettings": Object {
+                  "show": true,
+                },
+              },
+            }
+          }
+        >
+          <EuiButtonEmpty
+            className="kbnOverviewPageFooter__button"
+            data-test-subj="allPlugins"
+            flush="both"
+            href="/app/home#/feature_directory"
+            iconType="apps"
+            size="xs"
+          >
+            <FormattedMessage
+              defaultMessage="View app directory"
+              id="kibana-react.pageFooter.appDirectoryButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </mockConstructor>
+      </div>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</footer>
+`;

src/plugins/kibana_react/public/overview_page/overview_page_footer/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './overview_page_footer';

src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.test.tsx

@@ -0,0 +1,52 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { OverviewPageFooter } from './overview_page_footer';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+
+jest.mock('../../app_links', () => ({
+  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
+}));
+
+jest.mock('../../context', () => ({
+  useKibana: jest.fn().mockReturnValue({
+    services: {
+      application: { capabilities: { advancedSettings: { show: true } } },
+      notifications: { toast: { addSuccess: jest.fn() } },
+    },
+  }),
+}));
+
+jest.mock('../../ui_settings', () => ({
+  useUiSetting$: jest.fn().mockReturnValue(['path-to-default-route', jest.fn()]),
+}));
+
+afterEach(() => jest.clearAllMocks());
+
+const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
+
+describe('OverviewPageFooter', () => {
+  test('render', () => {
+    const component = shallowWithIntl(
+      <OverviewPageFooter addBasePath={addBasePathMock} path="new-default-route" />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx

@@ -0,0 +1,114 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FC } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { CoreStart } from 'kibana/public';
+import { RedirectAppLinks } from '../../app_links';
+import { useKibana } from '../../context';
+import { useUiSetting$ } from '../../ui_settings';
+
+interface Props {
+  addBasePath: (path: string) => string;
+  /** The path to set as the new default route in advanced settings */
+  path: string;
+}
+
+export const OverviewPageFooter: FC<Props> = ({ addBasePath, path }) => {
+  const [defaultRoute, setDefaultRoute] = useUiSetting$<string>('defaultRoute');
+  const {
+    services: {
+      application,
+      notifications: { toasts },
+    },
+  } = useKibana<CoreStart>();
+
+  const { show, save } = application.capabilities.advancedSettings;
+  const isAdvancedSettingsEnabled = show && save;
+
+  const defaultRoutebutton =
+    defaultRoute === path ? (
+      <RedirectAppLinks application={application}>
+        <EuiButtonEmpty
+          className="kbnOverviewPageFooter__button"
+          flush="both"
+          href={addBasePath('/app/management/kibana/settings#defaultRoute')}
+          iconType="home"
+          size="xs"
+        >
+          <FormattedMessage
+            id="kibana-react.pageFooter.changeHomeRouteLink"
+            defaultMessage="Display a different page on log in"
+          />
+        </EuiButtonEmpty>
+      </RedirectAppLinks>
+    ) : (
+      <EuiButtonEmpty
+        className="kbnOverviewPageFooter__button"
+        flush="both"
+        iconType="home"
+        onClick={() => {
+          setDefaultRoute(path);
+          toasts.addSuccess({
+            title: i18n.translate('kibana-react.pageFooter.changeDefaultRouteSuccessToast', {
+              defaultMessage: 'Landing page updated',
+            }),
+          });
+        }}
+        size="xs"
+      >
+        <FormattedMessage
+          id="kibana-react.pageFooter.makeDefaultRouteLink"
+          defaultMessage="Make this my landing page"
+        />
+      </EuiButtonEmpty>
+    );
+
+  return (
+    <footer className="kbnOverviewPageFooter">
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <div>{isAdvancedSettingsEnabled ? defaultRoutebutton : null}</div>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <div>
+            <RedirectAppLinks application={application}>
+              <EuiButtonEmpty
+                className="kbnOverviewPageFooter__button"
+                data-test-subj="allPlugins"
+                flush="both"
+                href={addBasePath('/app/home#/feature_directory')}
+                iconType="apps"
+                size="xs"
+              >
+                <FormattedMessage
+                  id="kibana-react.pageFooter.appDirectoryButtonLabel"
+                  defaultMessage="View app directory"
+                />
+              </EuiButtonEmpty>
+            </RedirectAppLinks>
+          </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </footer>
+  );
+};

src/plugins/kibana_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverviewPageHeader render 1`] = `
+<header
+  className="kbnOverviewPageHeader kbnOverviewPageHeader--noOverlap"
+>
+  <div
+    className="kbnOverviewPageHeader__inner"
+  >
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiFlexGroup
+          gutterSize="m"
+          responsive={false}
+        >
+          <EuiFlexItem>
+            <EuiTitle
+              size="m"
+            >
+              <h1
+                id="kbnOverviewPageHeader__title"
+              >
+                Page Title
+              </h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiFlexGroup
+          className="kbnOverviewPageHeader__actions"
+          responsive={false}
+          wrap={true}
+        >
+          <EuiFlexItem
+            className="kbnOverviewPageHeader__actionItem"
+            grow={false}
+          >
+            <mockConstructor
+              application={
+                Object {
+                  "capabilities": Object {
+                    "navLinks": Object {
+                      "dev_tools": true,
+                      "management": true,
+                    },
+                  },
+                }
+              }
+            >
+              <EuiButtonEmpty
+                className="kbnOverviewPageHeader__actionButton"
+                flush="both"
+                href="/app/home#/tutorial_directory"
+                iconType="indexOpen"
+              >
+                Add data
+              </EuiButtonEmpty>
+            </mockConstructor>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+</header>
+`;

src/plugins/kibana_react/public/overview_page/overview_page_header/_overview_page_header.scss

@@ -0,0 +1,33 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.kbnOverviewPageHeader {
+  background-color: $euiPageBackgroundColor;
+  border-bottom: $euiBorderWidthThin solid $euiColorLightShade;
+}
+
+.kbnOverviewPageHeader__inner {
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: $euiSizeXL $euiSize;
+
+  .kbnOverviewPageHeader--hasOverlap & {
+    padding-bottom: $euiSizeXL + $euiSizeL;
+  }
+}

src/plugins/kibana_react/public/overview_page/overview_page_header/index.scss

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@import './overview_page_header';

src/plugins/kibana_react/public/overview_page/overview_page_header/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './overview_page_header';

src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.test.tsx

@@ -0,0 +1,49 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { OverviewPageHeader } from './overview_page_header';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+
+jest.mock('../../app_links', () => ({
+  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
+}));
+
+jest.mock('../../context', () => ({
+  useKibana: jest.fn().mockReturnValue({
+    services: {
+      application: { capabilities: { navLinks: { management: true, dev_tools: true } } },
+      notifications: { toast: { addSuccess: jest.fn() } },
+    },
+  }),
+}));
+
+afterAll(() => jest.clearAllMocks());
+
+const mockTitle = 'Page Title';
+const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
+
+describe('OverviewPageHeader', () => {
+  test('render', () => {
+    const component = shallowWithIntl(
+      <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.tsx

@@ -0,0 +1,149 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FC } from 'react';
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiTitle,
+  IconType,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { CoreStart } from 'kibana/public';
+import { RedirectAppLinks } from '../../app_links';
+import { useKibana } from '../../context';
+
+import './index.scss';
+
+interface Props {
+  hideToolbar?: boolean;
+  iconType?: IconType;
+  overlap?: boolean;
+  showDevToolsLink?: boolean;
+  showManagementLink?: boolean;
+  title: JSX.Element | string;
+  addBasePath: (path: string) => string;
+}
+
+export const OverviewPageHeader: FC<Props> = ({
+  hideToolbar,
+  iconType,
+  overlap,
+  showDevToolsLink,
+  showManagementLink,
+  title,
+  addBasePath,
+}) => {
+  const {
+    services: { application },
+  } = useKibana<CoreStart>();
+
+  const {
+    management: isManagementEnabled,
+    dev_tools: isDevToolsEnabled,
+  } = application.capabilities.navLinks;
+
+  return (
+    <header
+      className={`kbnOverviewPageHeader ${
+        overlap ? 'kbnOverviewPageHeader--hasOverlap' : 'kbnOverviewPageHeader--noOverlap'
+      }`}
+    >
+      <div className="kbnOverviewPageHeader__inner">
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFlexGroup gutterSize="m" responsive={false}>
+              {iconType && (
+                <EuiFlexItem grow={false}>
+                  <EuiIcon size="xxl" type={iconType} />
+                </EuiFlexItem>
+              )}
+
+              <EuiFlexItem>
+                <EuiTitle size="m">
+                  <h1 id="kbnOverviewPageHeader__title">{title}</h1>
+                </EuiTitle>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+
+          {!hideToolbar && (
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup className="kbnOverviewPageHeader__actions" responsive={false} wrap>
+                <EuiFlexItem className="kbnOverviewPageHeader__actionItem" grow={false}>
+                  <RedirectAppLinks application={application}>
+                    <EuiButtonEmpty
+                      className="kbnOverviewPageHeader__actionButton"
+                      flush="both"
+                      href={addBasePath('/app/home#/tutorial_directory')}
+                      iconType="indexOpen"
+                    >
+                      {i18n.translate('kibana-react.kbnOverviewPageHeader.addDataButtonLabel', {
+                        defaultMessage: 'Add data',
+                      })}
+                    </EuiButtonEmpty>
+                  </RedirectAppLinks>
+                </EuiFlexItem>
+
+                {showManagementLink && isManagementEnabled ? (
+                  <EuiFlexItem className="kbnOverviewPageHeader__actionItem" grow={false}>
+                    <RedirectAppLinks application={application}>
+                      <EuiButtonEmpty
+                        className="kbnOverviewPageHeader__actionButton"
+                        flush="both"
+                        iconType="gear"
+                        href={addBasePath('/app/management')}
+                      >
+                        {i18n.translate(
+                          'kibana-react.kbnOverviewPageHeader.stackManagementButtonLabel',
+                          {
+                            defaultMessage: 'Manage',
+                          }
+                        )}
+                      </EuiButtonEmpty>
+                    </RedirectAppLinks>
+                  </EuiFlexItem>
+                ) : null}
+
+                {showDevToolsLink && isDevToolsEnabled ? (
+                  <EuiFlexItem className="kbnOverviewPageHeader__actionItem" grow={false}>
+                    <RedirectAppLinks application={application}>
+                      <EuiButtonEmpty
+                        className="kbnOverviewPageHeader__actionButton"
+                        flush="both"
+                        iconType="wrench"
+                        href={addBasePath('/app/dev_tools#/console')}
+                      >
+                        {i18n.translate('kibana-react.kbnOverviewPageHeader.devToolsButtonLabel', {
+                          defaultMessage: 'Dev tools',
+                        })}
+                      </EuiButtonEmpty>
+                    </RedirectAppLinks>
+                  </EuiFlexItem>
+                ) : null}
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </div>
+    </header>
+  );
+};