[Logs+] Implement Logs Data Stream selector

.github/CODEOWNERS

@@ -309,6 +309,7 @@ src/plugins/dev_tools @elastic/platform-deployment-management
 packages/kbn-dev-utils @elastic/kibana-operations
 examples/developer_examples @elastic/appex-sharedux
 x-pack/plugins/discover_enhanced @elastic/kibana-data-discovery
+examples/discover_extender @elastic/kibana-data-discovery
 src/plugins/discover @elastic/kibana-data-discovery
 packages/kbn-doc-links @elastic/kibana-docs
 packages/kbn-docs-utils @elastic/kibana-operations
@@ -477,6 +478,7 @@ x-pack/plugins/notifications @elastic/appex-sharedux
 packages/kbn-object-versioning @elastic/appex-sharedux
 x-pack/packages/observability/alert_details @elastic/actionable-observability
 x-pack/test/cases_api_integration/common/plugins/observability @elastic/response-ops
+x-pack/plugins/observability_logs @elastic/infra-monitoring-ui
 x-pack/plugins/observability @elastic/actionable-observability
 x-pack/plugins/observability_shared @elastic/actionable-observability
 x-pack/test/security_api_integration/plugins/oidc_provider @elastic/kibana-security

docs/developer/plugin-list.asciidoc

@@ -641,6 +641,10 @@ Elastic.
 |This plugin provides shared components and services for use across observability solutions, as well as the observability landing page UI.
 
 
+|{kib-repo}blob/{branch}/x-pack/plugins/observability_logs/README.md[observabilityLogs]
+|This plugin exposes and registers Logs+ features.
+
+
 |{kib-repo}blob/{branch}/x-pack/plugins/observability_shared/README.md[observabilityShared]
 |A plugin that contains components and utilities shared by all Observability plugins.
 

examples/discover_extender/kibana.jsonc

@@ -0,0 +1,11 @@
+{
+  "type": "plugin",
+  "id": "@kbn/discover-extender-plugin",
+  "owner": "@elastic/kibana-data-discovery",
+  "plugin": {
+    "id": "discoverExtender",
+    "server": false,
+    "browser": true,
+    "requiredPlugins": ["discover"]
+  }
+}

examples/discover_extender/public/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { DiscoverExtenderPlugin } from './plugin';
+
+export function plugin() {
+  return new DiscoverExtenderPlugin();
+}

examples/discover_extender/public/more_menu_cell.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  EuiButtonIcon,
+  EuiContextMenu,
+  EuiDataGridCellValueElementProps,
+  EuiPopover,
+} from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+
+export const MoreMenuCell = ({ setCellProps }: EuiDataGridCellValueElementProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const togglePopover = () => setIsPopoverOpen((open) => !open);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  useEffect(() => {
+    setCellProps({
+      style: {
+        padding: 0,
+      },
+    });
+  }, [setCellProps]);
+
+  return (
+    <EuiPopover
+      button={<EuiButtonIcon color="text" iconType="boxesHorizontal" onClick={togglePopover} />}
+      isOpen={isPopoverOpen}
+      anchorPosition="rightCenter"
+      panelPaddingSize="none"
+      closePopover={closePopover}
+    >
+      <EuiContextMenu
+        size="s"
+        initialPanelId={0}
+        panels={[
+          {
+            id: 0,
+            items: [
+              {
+                name: 'Show host details',
+                onClick: () => alert('Show host details clicked'),
+              },
+              {
+                name: 'Create rule',
+                onClick: () => alert('Create rule clicked'),
+              },
+              {
+                name: 'Create SLO',
+                onClick: () => alert('Create SLO clicked'),
+              },
+            ],
+          },
+        ]}
+      />
+    </EuiPopover>
+  );
+};

examples/discover_extender/public/plugin.tsx

@@ -0,0 +1,248 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  EuiButton,
+  EuiContextMenu,
+  EuiPopover,
+  EuiScreenReaderOnly,
+  EuiWrappingPopover,
+} from '@elastic/eui';
+import type { CoreStart, Plugin, SimpleSavedObject } from '@kbn/core/public';
+import type { DiscoverStart } from '@kbn/discover-plugin/public';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import useObservable from 'react-use/lib/useObservable';
+
+export interface DiscoverExtenderStartPlugins {
+  discover: DiscoverStart;
+}
+
+export class DiscoverExtenderPlugin implements Plugin {
+  setup() {}
+
+  start(core: CoreStart, plugins: DiscoverExtenderStartPlugins) {
+    const { discover } = plugins;
+
+    discover.customize('default', ({ customizations }) => {
+      customizations.set({
+        id: 'top_nav',
+        defaultMenu: {
+          options: { order: 100 },
+          new: { order: 200 },
+          open: { order: 300 },
+          share: { order: 400 },
+          alerts: { order: 500 },
+          inspect: { order: 600 },
+          save: { order: 800 },
+        },
+        getMenuItems: () => [
+          {
+            data: {
+              id: 'logsExplorer',
+              label: 'Logs explorer',
+              iconType: 'logsApp',
+              run: () => {
+                discover.locator?.navigate({ profile: 'extender' });
+              },
+            },
+            order: 700,
+          },
+        ],
+      });
+
+      return () => {
+        // eslint-disable-next-line no-console
+        console.log('Cleaning up Document explorer customizations');
+      };
+    });
+
+    let isOptionsOpen = false;
+    const optionsContainer = document.createElement('div');
+    const closeOptionsPopover = () => {
+      ReactDOM.unmountComponentAtNode(optionsContainer);
+      document.body.removeChild(optionsContainer);
+      isOptionsOpen = false;
+    };
+
+    discover.customize('extender', async ({ customizations, stateContainer }) => {
+      customizations.set({
+        id: 'top_nav',
+        defaultMenu: {
+          options: { disabled: true },
+          new: { disabled: true },
+          open: { disabled: true },
+          share: { order: 200 },
+          alerts: { disabled: true },
+          inspect: { disabled: true },
+          save: { order: 400 },
+        },
+        getMenuItems: () => [
+          {
+            data: {
+              id: 'options',
+              label: 'Options',
+              iconType: 'arrowDown',
+              iconSide: 'right',
+              run: (anchorElement: HTMLElement) => {
+                if (isOptionsOpen) {
+                  closeOptionsPopover();
+                  return;
+                }
+
+                isOptionsOpen = true;
+                document.body.appendChild(optionsContainer);
+
+                const element = (
+                  <EuiWrappingPopover
+                    ownFocus
+                    button={anchorElement}
+                    isOpen={true}
+                    panelPaddingSize="s"
+                    closePopover={closeOptionsPopover}
+                  >
+                    <EuiContextMenu
+                      size="s"
+                      initialPanelId={0}
+                      panels={[
+                        {
+                          id: 0,
+                          items: [
+                            {
+                              name: 'Create new',
+                              icon: 'plusInCircle',
+                              onClick: () => alert('Create new clicked'),
+                            },
+                            {
+                              name: 'Make a copy',
+                              icon: 'copy',
+                              onClick: () => alert('Make a copy clicked'),
+                            },
+                            {
+                              name: 'Manage saved searches',
+                              icon: 'gear',
+                              onClick: () => alert('Manage saved searches clicked'),
+                            },
+                          ],
+                        },
+                      ]}
+                    />
+                  </EuiWrappingPopover>
+                );
+
+                ReactDOM.render(element, optionsContainer);
+              },
+            },
+            order: 100,
+          },
+          {
+            data: {
+              id: 'documentExplorer',
+              label: 'Document explorer',
+              iconType: 'discoverApp',
+              run: () => {
+                discover.locator?.navigate({});
+              },
+            },
+            order: 300,
+          },
+        ],
+      });
+
+      customizations.set({
+        id: 'search_bar',
+        CustomDataViewPicker: () => {
+          const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+          const togglePopover = () => setIsPopoverOpen((open) => !open);
+          const closePopover = () => setIsPopoverOpen(false);
+          const [savedSearches, setSavedSearches] = useState<SimpleSavedObject[]>([]);
+
+          useEffect(() => {
+            core.savedObjects.client.find({ type: 'search' }).then((response) => {
+              setSavedSearches(response.savedObjects);
+            });
+          }, []);
+
+          const currentSavedSearch = useObservable(
+            stateContainer.savedSearchState.getCurrent$(),
+            stateContainer.savedSearchState.getState()
+          );
+
+          return (
+            <EuiPopover
+              button={
+                <EuiButton iconType="arrowDown" iconSide="right" onClick={togglePopover}>
+                  {currentSavedSearch.title ?? 'None selected'}
+                </EuiButton>
+              }
+              isOpen={isPopoverOpen}
+              panelPaddingSize="none"
+              closePopover={closePopover}
+            >
+              <EuiContextMenu
+                size="s"
+                initialPanelId={0}
+                panels={[
+                  {
+                    id: 0,
+                    title: 'Saved logs views',
+                    items: savedSearches.map((savedSearch) => ({
+                      name: savedSearch.get('title'),
+                      onClick: () => stateContainer.actions.onOpenSavedSearch(savedSearch.id),
+                      icon: savedSearch.id === currentSavedSearch.id ? 'check' : 'empty',
+                    })),
+                  },
+                ]}
+              />
+            </EuiPopover>
+          );
+        },
+      });
+
+      customizations.set({
+        id: 'field_popover',
+        CustomBottomButton: () => (
+          <EuiButton
+            color="success"
+            size="s"
+            iconType="machineLearningApp"
+            onClick={() => alert('Categorize flyout opened')}
+          >
+            Categorize
+          </EuiButton>
+        ),
+      });
+
+      const { MoreMenuCell } = await import('./more_menu_cell');
+
+      customizations.set({
+        id: 'data_grid',
+        defaultLeadingControlColumns: {
+          select: { disabled: true },
+        },
+        getLeadingControlColumns: () => [
+          {
+            id: 'moreMenu',
+            width: 24,
+            headerCellRender: () => (
+              <EuiScreenReaderOnly>
+                <span>More menu</span>
+              </EuiScreenReaderOnly>
+            ),
+            rowCellRender: MoreMenuCell,
+          },
+        ],
+      });
+
+      return () => {
+        // eslint-disable-next-line no-console
+        console.log('Cleaning up Logs explorer customizations');
+      };
+    });
+  }
+}

examples/discover_extender/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types"
+  },
+  "include": ["common/**/*", "public/**/*", "server/**/*", "../../typings/**/*"],
+  "kbn_references": [
+    "@kbn/core",
+    "@kbn/discover-plugin",
+  ],
+  "exclude": ["target/**/*"]
+}

package.json

@@ -96,7 +96,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.6.0-canary.3",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "77.1.1",
+    "@elastic/eui": "^80.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
@@ -349,6 +349,8 @@
     "@kbn/dev-tools-plugin": "link:src/plugins/dev_tools",
     "@kbn/developer-examples-plugin": "link:examples/developer_examples",
     "@kbn/discover-enhanced-plugin": "link:x-pack/plugins/discover_enhanced",
+    "@kbn/discover-extender-plugin": "link:examples/discover_extender",
+    "@kbn/discover-log-explorer-plugin": "link:x-pack/plugins/discover_log_explorer",
     "@kbn/discover-plugin": "link:src/plugins/discover",
     "@kbn/doc-links": "link:packages/kbn-doc-links",
     "@kbn/dom-drag-drop": "link:packages/kbn-dom-drag-drop",