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/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/__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`] = ` - +
- + `; 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..548b45059 --- /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_ACC_DOCUMENTATION_URL } from '../../../../../common/constants/data_connections'; + +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..2d98c2d28 --- /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..7a8236600 --- /dev/null +++ b/public/components/data_connections/components/acceleration_ui/management/acceleration_management.tsx @@ -0,0 +1,50 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiHorizontalRule, + EuiSpacer, + EuiText, +} from '@elastic/eui'; +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..6c40230a4 --- /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 AccelerationIndicesRecordType { + indexName: string; + accelerationType: string; +} + +export const ManagementTable = () => { + const [accelerationIndicesRecords, setAccelerationIndicesRecords] = useState< + AccelerationIndicesRecordType[] + >([]); + + useEffect(() => { + setAccelerationIndicesRecords([ + { + indexName: 'Sample-skipping-index', + accelerationType: 'Skipping Index', + }, + { + indexName: 'Sample-covering-index', + accelerationType: 'covering Index', + }, + { + indexName: 'Sample-materialized-view', + accelerationType: 'Materialized View', + }, + ]); + }, []); + + const tableColumns: Array> = [ + { + field: 'indexName', + name: 'Index Name', + sortable: true, + truncateText: true, + render: (value, record: AccelerationIndicesRecordType) => ( + {_.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*/ + }} + /> + ), + }, + ]; + + const search = { + box: { + incremental: true, + }, + filters: [ + { + type: 'field_value_selection', + field: 'accelerationType', + name: 'Type', + multiSelect: 'or', + options: accelerationIndicesRecords.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..0964a16a8 100644 --- a/public/components/data_connections/components/datasource.tsx +++ b/public/components/data_connections/components/datasource.tsx @@ -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,7 @@ export function DataSource(props: any) { icon={} title={'Accelerate performance'} description="Accelerate performance through OpenSearch indexing." - onClick={() => {}} + onClick={() => (window.location.hash = `/acceleration/${dataSource}`)} /> @@ -175,4 +175,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 {}; }