Add acceleration management UI (opensearch-project#989)

* add acceleration management UI skeleton Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * Create new documentation link for acc Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * fix typos and minor bugs Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * update snapshot Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * update window location to hash Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * remove unused headers Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> --------- Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
mengweieric · Sep 13, 2023 · deef7a0 · deef7a0
1 parent 9f7f2e9
commit deef7a0
Show file tree

Hide file tree

Showing 16 changed files with 401 additions and 38 deletions.
diff --git 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
@@ -18,7 +18,5 @@
     "urlForwarding",
     "visualizations"
   ],
-  "optionalPlugins": [
-    "managementOverview"
-  ]
-}
+  "optionalPlugins": ["managementOverview"]
+}
diff --git a/...onnections/components/__tests__/__snapshots__/manage_datasource_description.test.tsx.snap b/...onnections/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`] = `
-<DataConnectionsDescription>
+<Component>
   <div>
     <EuiTitle
       size="s"
@@ -46,5 +46,5 @@ exports[`Manage Datasource Description test Renders manage datasource descriptio
       />
     </EuiHorizontalRule>
   </div>
-</DataConnectionsDescription>
+</Component>
 `;
diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_header.tsx 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 (
+    <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_ACC_DOCUMENTATION_URL} target="_blank">
+          Learn more
+        </EuiLink>
+      </EuiText>
+      <EuiSpacer size="l" />
+    </div>
+  );
+};
diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_home.tsx 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 (
+    <HashRouter>
+      <Switch>
+        <Route
+          path={'/acceleration/:id+'}
+          render={(routerProps) => (
+            <AccelerationIndices dataSource={decodeURIComponent(routerProps.match.params.id)} />
+          )}
+        />
+      </Switch>
+    </HashRouter>
+  );
+};
diff --git a/public/components/data_connections/components/acceleration_ui/acceleration_indices.tsx 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 (
+    <EuiPage>
+      <EuiPageBody component="div">
+        <AccelerationHeader />
+        <EuiPageContent data-test-subj="manage-acceleration-indices">
+          <AccelerationManagement />
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
diff --git a/...onents/data_connections/components/acceleration_ui/management/acceleration_management.tsx b/...onents/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 (
+    <>
+      <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 />
+    </>
+  );
+};
diff --git a/...ic/components/data_connections/components/acceleration_ui/management/management_table.tsx b/...ic/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<EuiTableFieldDataColumnType<AccelerationIndicesRecordType>> = [
+    {
+      field: 'indexName',
+      name: 'Index Name',
+      sortable: true,
+      truncateText: true,
+      render: (value, record: AccelerationIndicesRecordType) => (
+        <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*/
+          }}
+        />
+      ),
+    },
+  ];
+
+  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 (
+    <>
+      <EuiSpacer size="s" />
+      <EuiInMemoryTable
+        items={accelerationIndicesRecords}
+        itemId="id"
+        columns={tableColumns}
+        tableLayout="auto"
+        pagination={{
+          initialPageSize: 20,
+          pageSizeOptions: [10, 20, 50],
+        }}
+        search={search}
+        allowNeutralSort={false}
+        isSelectable={true}
+      />
+    </>
+  );
+};
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
@@ -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" />
+    </>
+  );
+};