Add acceleration management UI

opensearch_dashboards.json

@@ -18,7 +18,5 @@
  "urlForwarding",
  "visualizations"
  ],
- "optionalPlugins": [
- "managementOverview"
- ]
-}
+ "optionalPlugins": ["managementOverview"]
+}

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 (
+ <div>
+ <EuiPageHeader>
+ <EuiPageHeaderSection>
+ <EuiTitle size="l" data-test-subj="acceleration-header">
+ <h1>Acceleration Indices</h1>
+ </EuiTitle>
+ </EuiPageHeaderSection>
+ </EuiPageHeader>
+ <EuiSpacer size="s" />
+ <EuiText size="s" color="subdued">
+ Manage acceleration indices from external data connections.{' '}
+ <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+ Learn more
+ </EuiLink>
+ </EuiText>
+ <EuiSpacer size="l" />
+ </div>
+ );
+};

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 (
+ <HashRouter>
+ <Switch>
+ <Route
+ path={'/acceleration/:id+'}
+ render={(routerProps) => (
+ <AccelerationIndices dataSource={decodeURIComponent(routerProps.match.params.id)} />
+ )}
+ />
+ </Switch>
+ </HashRouter>
+ );
+};

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 (
+ <EuiPage>
+ <EuiPageBody component="div">
+ <AccelerationHeader />
+ <EuiPageContent data-test-subj="manageAccelerationIndices">
+ <AccelerationManagement />
+ </EuiPageContent>
+ </EuiPageBody>
+ </EuiPage>
+ );
+};

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 (
+ <>
+ <AccelerationDataSourceSelector />
+ <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
+ <EuiFlexItem>
+ <EuiText data-test-subj="acceleration-management-header">
+ <h3>Manage existing acceleration indices</h3>
+ </EuiText>
+ <EuiSpacer size="s" />
+ <EuiText size="s" color="subdued">
+ View and Edit acceleration indices{' '}
+ </EuiText>
+ </EuiFlexItem>
+
+ <EuiFlexItem>
+ <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+ <EuiFlexItem grow={false}>
+ <EuiButton>Delete</EuiButton>
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiButton fill href="#/create" data-test-subj="create-acceleration-indexBtn">
+ Accelerate Table
+ </EuiButton>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ <EuiHorizontalRule size="full" />
+ <ManagementTable />
+ </>
+ );
+};

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) => (
+ <EuiText>{_.truncate(record.indexName, { length: 100 })}</EuiText>
+ ),
+ },
+ {
+ field: 'accelerationType',
+ name: 'Acceleration type',
+ sortable: true,
+ truncateText: true,
+ render: (value, record) => (
+ <EuiText>{_.truncate(record.accelerationType, { length: 100 })}</EuiText>
+ ),
+ },
+ {
+ field: 'actions',
+ name: 'Actions',
+ sortable: true,
+ truncateText: true,
+ render: (value, record) => (
+ <EuiIcon
+ type={'trash'}
+ onClick={() => {
+ /* Delete Datasource*/
+ }}
+ />
+ ),
+ },
+ ] as Array<EuiTableFieldDataColumnType<any>>;
+
+ 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 (
+ <>
+ <EuiSpacer size="s" />
+ <EuiInMemoryTable
+ items={accelrationIndicesRecords}
+ itemId="id"
+ columns={tableColumns}
+ tableLayout="auto"
+ pagination={{
+ initialPageSize: 10,
+ pageSizeOptions: [5, 10, 15],
+ }}
+ search={search}
+ allowNeutralSort={false}
+ isSelectable={true}
+ />
+ </>
+ );
+};

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<DataSourceTypes[]>([]);
+ const [selectedDataConnection, setSelectedDataConnection] = useState<DataSourceTypes[]>([]);
+ const [tables, setTables] = useState<DataSourceTypes[]>([]);
+ const [selectedTable, setSelectedTable] = useState<DataSourceTypes[]>([]);
+
+ useEffect(() => {
+ setDataConnections([
+ {
+ label: 'spark1',
+ },
+ {
+ label: 'spark2',
+ },
+ ]);
+ }, []);
+
+ useEffect(() => {
+ setTables([
+ {
+ label: 'Table1',
+ },
+ {
+ label: 'Table1',
+ },
+ ]);
+ }, [dataConnections]);
+
+ const onChangeDataConnection = (
+ dataConnectionOptions: React.SetStateAction<DataSourceTypes[]>
+ ) => {
+ setSelectedDataConnection(dataConnectionOptions);
+ };
+ const onChangeTable = (tableOptions: React.SetStateAction<DataSourceTypes[]>) => {
+ setSelectedTable(tableOptions);
+ };
+
+ return (
+ <>
+ <EuiText data-test-subj="datasource-selector-header">
+ <h3>Select data connection</h3>
+ </EuiText>
+ <EuiSpacer size="s" />
+ <EuiText size="s" color="subdued">
+ Select data connection where the data you want to accelerate resides.{' '}
+ </EuiText>
+ <EuiSpacer size="s" />
+ <EuiFormRow
+ label="Data connection"
+ helpText="A data connection has to be configured and active to be able to select it and index data from."
+ >
+ <EuiComboBox
+ placeholder="Spark connection name"
+ singleSelection={{ asPlainText: true }}
+ options={dataConnections}
+ selectedOptions={selectedDataConnection}
+ onChange={onChangeDataConnection}
+ />
+ </EuiFormRow>
+ <EuiFormRow
+ label="Select Table"
+ helpText="Select the Spark table that has the data you would like to index."
+ >
+ <EuiComboBox
+ placeholder="Table name"
+ singleSelection={{ asPlainText: true }}
+ options={tables}
+ selectedOptions={selectedTable}
+ onChange={onChangeTable}
+ />
+ </EuiFormRow>
+ <EuiSpacer size="xxl" />
+ </>
+ );
+};