From a60c0c22d9ffe6234340c1a2f10421c7e33e5aa5 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Mon, 11 Sep 2023 09:48:04 -0700 Subject: [PATCH 1/6] add acceleration management UI skeleton Signed-off-by: Shenoy Pratik --- opensearch_dashboards.json | 6 +- .../acceleration_ui/acceleration_header.tsx | 37 ++++++ .../acceleration_ui/acceleration_home.tsx | 23 ++++ .../acceleration_ui/acceleration_indices.tsx | 39 ++++++ .../management/acceleration_management.tsx | 53 ++++++++ .../management/management_table.tsx | 115 ++++++++++++++++++ .../management/source_selector.tsx | 88 ++++++++++++++ .../components/datasource.tsx | 12 +- .../components/datasources_header.tsx | 4 +- .../manage_datasource_description.tsx | 4 +- .../components/manage_datasource_table.tsx | 8 +- public/components/data_connections/home.tsx | 48 ++++---- public/framework/core_refs.ts | 3 +- public/plugin.ts | 1 + 14 files changed, 404 insertions(+), 37 deletions(-) create mode 100644 public/components/data_connections/components/acceleration_ui/acceleration_header.tsx create mode 100644 public/components/data_connections/components/acceleration_ui/acceleration_home.tsx create mode 100644 public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx create mode 100644 public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx create mode 100644 public/components/data_connections/components/acceleration_ui/management/management_table.tsx create mode 100644 public/components/data_connections/components/acceleration_ui/management/source_selector.tsx diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json index 7abafdabd..08b79d1a5 100644 --- a/opensearch_dashboards.json +++ b/opensearch_dashboards.json @@ -18,7 +18,5 @@ "urlForwarding", "visualizations" ], - "optionalPlugins": [ - "managementOverview" - ] -} \ No newline at end of file + "optionalPlugins": ["managementOverview"] +} diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx b/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx new file mode 100644 index 000000000..6152a83c8 --- /dev/null +++ b/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx @@ -0,0 +1,37 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { + EuiLink, + EuiPageHeader, + EuiPageHeaderSection, + EuiSpacer, + EuiText, + EuiTitle, +} from '@elastic/eui'; +import React from 'react'; +import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../../common/constants/integrations'; + +export const AccelerationHeader = () => { + return ( +
+ + + +

Acceleration Indices

+ + + + + + Manage acceleration indices from external data connections.{' '} + + Learn more + + + +
+ ); +}; diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_home.tsx b/public/components/data_connections/components/acceleration_ui/acceleration_home.tsx new file mode 100644 index 000000000..f1565d820 --- /dev/null +++ b/public/components/data_connections/components/acceleration_ui/acceleration_home.tsx @@ -0,0 +1,23 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { HashRouter, Route, Switch } from 'react-router-dom'; +import { AccelerationIndices } from './acceleration_indices'; + +export const AccelerationHome = () => { + return ( + + + ( + + )} + /> + + + ); +}; diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx b/public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx new file mode 100644 index 000000000..aab7bff85 --- /dev/null +++ b/public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx @@ -0,0 +1,39 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useEffect } from 'react'; +import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui'; +import { coreRefs } from '../../../../framework/core_refs'; +import { AccelerationHeader } from './acceleration_header'; +import { AccelerationManagement } from './management/acceleration_management'; + +interface AccelerationIndicesProps { + dataSource: string; +} + +export const AccelerationIndices = ({ dataSource }: AccelerationIndicesProps) => { + useEffect(() => { + coreRefs.chrome?.setBreadcrumbs([ + { + text: 'Datasources', + href: '#/', + }, + { + text: 'Acceleration', + href: '#/manage/acceleration/' + { dataSource }, + }, + ]); + }, [dataSource]); + return ( + + + + + + + + + ); +}; diff --git a/public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx b/public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx new file mode 100644 index 000000000..18da2ef45 --- /dev/null +++ b/public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx @@ -0,0 +1,53 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { + EuiButton, + EuiContextMenuPanel, + EuiFlexGroup, + EuiFlexItem, + EuiHorizontalRule, + EuiPopover, + EuiSpacer, + EuiText, +} from '@elastic/eui'; +import _ from 'lodash'; +import { ManagementTable } from './management_table'; +import { AccelerationDataSourceSelector } from './source_selector'; + +export const AccelerationManagement = () => { + return ( + <> + + + + +

Manage existing acceleration indices

+ + + + View and Edit acceleration indices{' '} + + + + + + + Delete + + + + Accelerate Table + + + + + + + + + ); +}; diff --git a/public/components/data_connections/components/acceleration_ui/management/management_table.tsx b/public/components/data_connections/components/acceleration_ui/management/management_table.tsx new file mode 100644 index 000000000..8baad8b50 --- /dev/null +++ b/public/components/data_connections/components/acceleration_ui/management/management_table.tsx @@ -0,0 +1,115 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useEffect, useState } from 'react'; +import { + EuiIcon, + EuiInMemoryTable, + EuiSpacer, + EuiTableFieldDataColumnType, + EuiText, +} from '@elastic/eui'; +import _ from 'lodash'; + +interface AccelrationIndicesRecordType { + indexName: string; + accelerationType: string; +} + +export const ManagementTable = () => { + const [accelrationIndicesRecords, setAccelrationIndicesRecords] = useState< + AccelrationIndicesRecordType[] + >([]); + + useEffect(() => { + setAccelrationIndicesRecords([ + { + indexName: 'Sample-skipping-index', + accelerationType: 'Skipping Index', + }, + { + indexName: 'Sample-covering-index', + accelerationType: 'covering Index', + }, + { + indexName: 'Sample-materialized-view', + accelerationType: 'Materialized View', + }, + ]); + }, []); + + const tableColumns = [ + { + field: 'indexName', + name: 'Index Name', + sortable: true, + truncateText: true, + render: (value, record: AccelrationIndicesRecordType) => ( + {_.truncate(record.indexName, { length: 100 })} + ), + }, + { + field: 'accelerationType', + name: 'Acceleration type', + sortable: true, + truncateText: true, + render: (value, record) => ( + {_.truncate(record.accelerationType, { length: 100 })} + ), + }, + { + field: 'actions', + name: 'Actions', + sortable: true, + truncateText: true, + render: (value, record) => ( + { + /* Delete Datasource*/ + }} + /> + ), + }, + ] as Array>; + + const search = { + box: { + incremental: true, + }, + filters: [ + { + type: 'field_value_selection', + field: 'accelerationType', + name: 'Type', + multiSelect: 'or', + options: accelrationIndicesRecords.map((AccelerationIndexRecord) => ({ + value: AccelerationIndexRecord.accelerationType, + name: AccelerationIndexRecord.accelerationType, + view: AccelerationIndexRecord.accelerationType, + })), + }, + ], + }; + + return ( + <> + + + + ); +}; diff --git a/public/components/data_connections/components/acceleration_ui/management/source_selector.tsx b/public/components/data_connections/components/acceleration_ui/management/source_selector.tsx new file mode 100644 index 000000000..fddb537c1 --- /dev/null +++ b/public/components/data_connections/components/acceleration_ui/management/source_selector.tsx @@ -0,0 +1,88 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { EuiComboBox, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui'; +import React, { useState } from 'react'; +import { useEffect } from 'react'; + +interface DataSourceTypes { + label: string; +} + +export const AccelerationDataSourceSelector = () => { + const [dataConnections, setDataConnections] = useState([]); + const [selectedDataConnection, setSelectedDataConnection] = useState([]); + const [tables, setTables] = useState([]); + const [selectedTable, setSelectedTable] = useState([]); + + useEffect(() => { + setDataConnections([ + { + label: 'spark1', + }, + { + label: 'spark2', + }, + ]); + }, []); + + useEffect(() => { + setTables([ + { + label: 'Table1', + }, + { + label: 'Table1', + }, + ]); + }, [dataConnections]); + + const onChangeDataConnection = ( + dataConnectionOptions: React.SetStateAction + ) => { + setSelectedDataConnection(dataConnectionOptions); + }; + const onChangeTable = (tableOptions: React.SetStateAction) => { + setSelectedTable(tableOptions); + }; + + return ( + <> + +

Select data connection

+ + + + Select data connection where the data you want to accelerate resides.{' '} + + + + + + + + + + + ); +}; diff --git a/public/components/data_connections/components/datasource.tsx b/public/components/data_connections/components/datasource.tsx index 19c6b9fbe..a1ccfd2f2 100644 --- a/public/components/data_connections/components/datasource.tsx +++ b/public/components/data_connections/components/datasource.tsx @@ -21,7 +21,7 @@ import { EuiTabs, } from '@elastic/eui'; import React, { useEffect, useState } from 'react'; -import { DATASOURCES_BASE } from '../../../../common/constants/shared'; +import { DATASOURCES_BASE, observabilityDatasourcesID } from '../../../../common/constants/shared'; interface DatasourceDetails { allowedRoles: string[]; @@ -29,7 +29,7 @@ interface DatasourceDetails { cluster: string; } -export function DataSource(props: any) { +export const DataSource = (props: any) => { const { dataSource, pplService, http } = props; const [datasourceDetails, setDatasourceDetails] = useState({ allowedRoles: [], @@ -164,7 +164,11 @@ export function DataSource(props: any) { icon={} title={'Accelerate performance'} description="Accelerate performance through OpenSearch indexing." - onClick={() => {}} + onClick={() => + window.location.assign( + `${observabilityDatasourcesID}#/acceleration/${dataSource}` + ) + } /> @@ -175,4 +179,4 @@ export function DataSource(props: any) { ); -} +}; diff --git a/public/components/data_connections/components/datasources_header.tsx b/public/components/data_connections/components/datasources_header.tsx index 8c0ceb724..045d1cbc8 100644 --- a/public/components/data_connections/components/datasources_header.tsx +++ b/public/components/data_connections/components/datasources_header.tsx @@ -15,7 +15,7 @@ import _ from 'lodash'; import React from 'react'; import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/data_connections'; -export function DataConnectionsHeader() { +export const DataConnectionsHeader = () => { return (
@@ -35,4 +35,4 @@ export function DataConnectionsHeader() {
); -} +}; diff --git a/public/components/data_connections/components/manage_datasource_description.tsx b/public/components/data_connections/components/manage_datasource_description.tsx index f05fb01e2..9c97d5758 100644 --- a/public/components/data_connections/components/manage_datasource_description.tsx +++ b/public/components/data_connections/components/manage_datasource_description.tsx @@ -7,7 +7,7 @@ import { EuiSpacer, EuiText, EuiTitle, EuiHorizontalRule } from '@elastic/eui'; import _ from 'lodash'; import React from 'react'; -export function DataConnectionsDescription() { +export const DataConnectionsDescription = () => { return (
@@ -21,4 +21,4 @@ export function DataConnectionsDescription() {
); -} +}; diff --git a/public/components/data_connections/components/manage_datasource_table.tsx b/public/components/data_connections/components/manage_datasource_table.tsx index 2fd3e01b3..c5650d308 100644 --- a/public/components/data_connections/components/manage_datasource_table.tsx +++ b/public/components/data_connections/components/manage_datasource_table.tsx @@ -21,13 +21,15 @@ import { DataConnectionsHeader } from './datasources_header'; import { HomeProps } from '../home'; import { DataConnectionsDescription } from './manage_datasource_description'; import { DATASOURCES_BASE } from '../../../../common/constants/shared'; +import { ChromeStart } from '../../../../../../src/core/public'; interface DataConnection { connectionType: 'OPENSEARCH' | 'SPARK'; name: string; + chrome: ChromeStart; } -export function ManageDatasourcesTable(props: HomeProps) { +export const ManageDatasourcesTable = (props: HomeProps) => { const { http, chrome, pplService } = props; const [data, setData] = useState([]); @@ -40,7 +42,7 @@ export function ManageDatasourcesTable(props: HomeProps) { }, ]); handleDataRequest(); - }, []); + }, [chrome]); async function handleDataRequest() { http.get(`${DATASOURCES_BASE}`).then((datasources) => @@ -156,4 +158,4 @@ export function ManageDatasourcesTable(props: HomeProps) { ); -} +}; diff --git a/public/components/data_connections/home.tsx b/public/components/data_connections/home.tsx index 88ad367c5..c59a0afd8 100644 --- a/public/components/data_connections/home.tsx +++ b/public/components/data_connections/home.tsx @@ -8,6 +8,7 @@ import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom import { ChromeBreadcrumb, ChromeStart, HttpStart } from '../../../../../src/core/public'; import { DataSource } from './components/datasource'; import { ManageDatasourcesTable } from './components/manage_datasource_table'; +import { AccelerationIndices } from './components/acceleration_ui/acceleration_indices'; export interface HomeProps extends RouteComponentProps { pplService: any; @@ -26,27 +27,32 @@ export const Home = (props: HomeProps) => { }; return ( -
- - - ( - - )} - /> + + + ( + + )} + /> - } - /> - - -
+ } + /> + + ( + + )} + /> + + ); }; diff --git a/public/framework/core_refs.ts b/public/framework/core_refs.ts index 68cf51547..5b3791f95 100644 --- a/public/framework/core_refs.ts +++ b/public/framework/core_refs.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { HttpStart, IToasts } from '../../../../src/core/public'; +import { ChromeStart, HttpStart, IToasts } from '../../../../src/core/public'; import { SavedObjectsClientContract } from '../../../../src/core/public'; import PPLService from '../services/requests/ppl'; @@ -14,6 +14,7 @@ class CoreRefs { public savedObjectsClient?: SavedObjectsClientContract; public pplService?: PPLService; public toasts?: IToasts; + public chrome?: ChromeStart; private constructor() { // ... } diff --git a/public/plugin.ts b/public/plugin.ts index 6d553f63c..81da89b80 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -262,6 +262,7 @@ export class ObservabilityPlugin coreRefs.savedObjectsClient = core.savedObjects.client; coreRefs.pplService = pplService; coreRefs.toasts = core.notifications.toasts; + coreRefs.chrome = core.chrome; return {}; } From 0d94a73a5787cce9a6a1adbe092bea7474b379db Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Mon, 11 Sep 2023 10:36:48 -0700 Subject: [PATCH 2/6] Create new documentation link for acc Signed-off-by: Shenoy Pratik --- common/constants/data_connections.ts | 3 +++ .../components/acceleration_ui/acceleration_header.tsx | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/common/constants/data_connections.ts b/common/constants/data_connections.ts index ce031cb6e..354d797de 100644 --- a/common/constants/data_connections.ts +++ b/common/constants/data_connections.ts @@ -5,3 +5,6 @@ export const OPENSEARCH_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/data-connections/index'; + +export const OPENSEARCH_ACC_DOCUMENTATION_URL = + 'https://opensearch.org/docs/latest/data-acceleration/index'; diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx b/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx index 6152a83c8..babf2ca14 100644 --- a/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx +++ b/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx @@ -12,7 +12,7 @@ import { EuiTitle, } from '@elastic/eui'; import React from 'react'; -import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../../common/constants/integrations'; +import { OPENSEARCH_ACC_DOCUMENTATION_URL } from '../../../../../common/constants/data_connections'; export const AccelerationHeader = () => { return ( @@ -27,7 +27,7 @@ export const AccelerationHeader = () => { Manage acceleration indices from external data connections.{' '} - + Learn more From b860caa5e4023cf103c7aeeb3bac225c242f17bb Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Mon, 11 Sep 2023 12:14:06 -0700 Subject: [PATCH 3/6] fix typos and minor bugs Signed-off-by: Shenoy Pratik --- .../acceleration_ui/acceleration_header.tsx | 2 +- .../acceleration_ui/acceleration_indices.tsx | 2 +- .../management/management_table.tsx | 22 +++++++++---------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx b/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx index babf2ca14..548b45059 100644 --- a/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx +++ b/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx @@ -27,7 +27,7 @@ export const AccelerationHeader = () => { Manage acceleration indices from external data connections.{' '} - + Learn more diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx b/public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx index aab7bff85..2d98c2d28 100644 --- a/public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx +++ b/public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx @@ -30,7 +30,7 @@ export const AccelerationIndices = ({ dataSource }: AccelerationIndicesProps) => - + diff --git a/public/components/data_connections/components/acceleration_ui/management/management_table.tsx b/public/components/data_connections/components/acceleration_ui/management/management_table.tsx index 8baad8b50..6c40230a4 100644 --- a/public/components/data_connections/components/acceleration_ui/management/management_table.tsx +++ b/public/components/data_connections/components/acceleration_ui/management/management_table.tsx @@ -13,18 +13,18 @@ import { } from '@elastic/eui'; import _ from 'lodash'; -interface AccelrationIndicesRecordType { +interface AccelerationIndicesRecordType { indexName: string; accelerationType: string; } export const ManagementTable = () => { - const [accelrationIndicesRecords, setAccelrationIndicesRecords] = useState< - AccelrationIndicesRecordType[] + const [accelerationIndicesRecords, setAccelerationIndicesRecords] = useState< + AccelerationIndicesRecordType[] >([]); useEffect(() => { - setAccelrationIndicesRecords([ + setAccelerationIndicesRecords([ { indexName: 'Sample-skipping-index', accelerationType: 'Skipping Index', @@ -40,13 +40,13 @@ export const ManagementTable = () => { ]); }, []); - const tableColumns = [ + const tableColumns: Array> = [ { field: 'indexName', name: 'Index Name', sortable: true, truncateText: true, - render: (value, record: AccelrationIndicesRecordType) => ( + render: (value, record: AccelerationIndicesRecordType) => ( {_.truncate(record.indexName, { length: 100 })} ), }, @@ -73,7 +73,7 @@ export const ManagementTable = () => { /> ), }, - ] as Array>; + ]; const search = { box: { @@ -85,7 +85,7 @@ export const ManagementTable = () => { field: 'accelerationType', name: 'Type', multiSelect: 'or', - options: accelrationIndicesRecords.map((AccelerationIndexRecord) => ({ + options: accelerationIndicesRecords.map((AccelerationIndexRecord) => ({ value: AccelerationIndexRecord.accelerationType, name: AccelerationIndexRecord.accelerationType, view: AccelerationIndexRecord.accelerationType, @@ -98,13 +98,13 @@ export const ManagementTable = () => { <> Date: Mon, 11 Sep 2023 12:16:08 -0700 Subject: [PATCH 4/6] update snapshot Signed-off-by: Shenoy Pratik --- .../__snapshots__/manage_datasource_description.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap index b9ab1040b..4dbd5ddf8 100644 --- a/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap +++ b/public/components/data_connections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Manage Datasource Description test Renders manage datasource description 1`] = ` - +
- + `; From b443e22d1ace3da3e02456ddd5e29dc864650431 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Mon, 11 Sep 2023 13:45:23 -0700 Subject: [PATCH 5/6] update window location to hash Signed-off-by: Shenoy Pratik --- .../components/data_connections/components/datasource.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/public/components/data_connections/components/datasource.tsx b/public/components/data_connections/components/datasource.tsx index a1ccfd2f2..0964a16a8 100644 --- a/public/components/data_connections/components/datasource.tsx +++ b/public/components/data_connections/components/datasource.tsx @@ -21,7 +21,7 @@ import { EuiTabs, } from '@elastic/eui'; import React, { useEffect, useState } from 'react'; -import { DATASOURCES_BASE, observabilityDatasourcesID } from '../../../../common/constants/shared'; +import { DATASOURCES_BASE } from '../../../../common/constants/shared'; interface DatasourceDetails { allowedRoles: string[]; @@ -164,11 +164,7 @@ export const DataSource = (props: any) => { icon={} title={'Accelerate performance'} description="Accelerate performance through OpenSearch indexing." - onClick={() => - window.location.assign( - `${observabilityDatasourcesID}#/acceleration/${dataSource}` - ) - } + onClick={() => (window.location.hash = `/acceleration/${dataSource}`)} /> From f8b77e838b592c8eb8455ec751dfe7bc8f6062ac Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Mon, 11 Sep 2023 13:51:05 -0700 Subject: [PATCH 6/6] remove unused headers Signed-off-by: Shenoy Pratik --- .../acceleration_ui/management/acceleration_management.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx b/public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx index 18da2ef45..7a8236600 100644 --- a/public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx +++ b/public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx @@ -6,15 +6,12 @@ import React from 'react'; import { EuiButton, - EuiContextMenuPanel, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, - EuiPopover, EuiSpacer, EuiText, } from '@elastic/eui'; -import _ from 'lodash'; import { ManagementTable } from './management_table'; import { AccelerationDataSourceSelector } from './source_selector';