Add table acceleration flyout

common/constants/index.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const PLUGIN_ID = 'queryWorkbenchDashboards';
+export const PLUGIN_NAME = 'Query Workbench';
+export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
+
+export const ACCELERATION_INDEX_TYPES = [
+  { label: 'Skipping Index', value: 'skipping' },
+  { label: 'Covering Index', value: 'covering' },
+  { label: 'Materialized View', value: 'materialized' },
+];
+
+export const ACCELERATION_AGGREGRATION_FUNCTIONS = [
+  { label: 'count', value: 'count' },
+  { label: 'sum', value: 'sum' },
+  { label: 'avg', value: 'avg' },
+  { label: 'max', value: 'max' },
+  { label: 'min', value: 'min' },
+];

common/types/index.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface MaterializedViewColumn {
+  id: string;
+  functionName: 'count' | 'sum' | 'avg' | 'min' | 'max';
+  functionParam: string;
+  fieldAlias?: string;
+}
+
+export interface SkippingIndexRowType {
+  id: string;
+  fieldName: string;
+  dataType: string;
+  accelerationMethod: 'PARTITION' | 'VALUE_SET' | 'MIN_MAX';
+}
+
+export interface DataTableFieldsType {
+  id: string;
+  fieldName: string;
+  dataType: string;
+}
+
+export interface CreateAccelerationForm {
+  dataSource: string;
+  dataTable: string;
+  dataTableFields: DataTableFieldsType[];
+  accelerationIndexType: 'skipping' | 'covering' | 'materialized';
+  queryBuilderType: 'visual' | 'code';
+  skippingIndexQueryData: SkippingIndexRowType[];
+  coveringIndexQueryData: string;
+  materializedViewQueryData: string;
+  accelerationIndexName: string;
+  accelerationIndexAlias: string;
+  primaryShardsCount: number;
+  replicaShardsCount: number;
+  refreshType: 'interval' | 'auto';
+  refreshIntervalSeconds: string | undefined;
+}

opensearch_dashboards.json

@@ -4,8 +4,6 @@
   "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
-  "requiredPlugins": [
-    "navigation"
-  ],
+  "requiredPlugins": ["navigation"],
   "optionalPlugins": []
-}
+}

public/components/acceleration/create/caution_banner_callout.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiCallOut } from '@elastic/eui';
+import React from 'react';
+
+export const CautionBannerCallout = () => {
+  return (
+    <EuiCallOut title="Considerations for data indexing" color="warning" iconType="iInCircle">
+      <p>
+        Warning about not indexing personal or sensitive data, something about the cost of indexing.
+      </p>
+    </EuiCallOut>
+  );
+};

public/components/acceleration/create/create_acceleration.tsx

@@ -0,0 +1,113 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiSpacer,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiFlyoutFooter,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { CreateAccelerationHeader } from './create_acceleration_header';
+import { CautionBannerCallout } from './caution_banner_callout';
+import { AccelerationDataSourceSelector } from '../selectors/source_selector';
+import { IndexTypeSelector } from '../selectors/index_type_selector';
+import { CreateAccelerationForm } from '../../../../common/types/';
+import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
+import { accelerationQueryBuilder } from '../visual_editors/query_builder';
+
+export interface CreateAccelerationProps {
+  dataSource: string;
+  setIsFlyoutVisible(visible: boolean): void;
+  updateQueries: (query: string) => void;
+}
+
+export const CreateAcceleration = ({
+  dataSource,
+  setIsFlyoutVisible,
+  updateQueries,
+}: CreateAccelerationProps) => {
+  const [accelerationFormData, setAccelerationFormData] = useState<CreateAccelerationForm>({
+    dataSource: '',
+    dataTable: '',
+    dataTableFields: [],
+    accelerationIndexType: 'skipping',
+    queryBuilderType: 'visual',
+    skippingIndexQueryData: [],
+    coveringIndexQueryData: '',
+    materializedViewQueryData: '',
+    accelerationIndexName: '',
+    accelerationIndexAlias: '',
+    primaryShardsCount: 5,
+    replicaShardsCount: 1,
+    refreshType: 'auto',
+    refreshIntervalSeconds: undefined,
+  });
+
+  const copyToEditor = () => {
+    updateQueries(accelerationQueryBuilder(accelerationFormData));
+  };
+
+  return (
+    <>
+      <EuiFlyout
+        ownFocus
+        onClose={() => setIsFlyoutVisible(false)}
+        aria-labelledby="flyoutTitle"
+        size="m"
+      >
+        <EuiFlyoutHeader hasBorder>
+          <CreateAccelerationHeader />
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <CautionBannerCallout />
+          <EuiSpacer size="l" />
+          <AccelerationDataSourceSelector
+            accelerationFormData={accelerationFormData}
+            setAccelerationFormData={setAccelerationFormData}
+          />
+          <IndexTypeSelector
+            accelerationFormData={accelerationFormData}
+            setAccelerationFormData={setAccelerationFormData}
+          />
+          <EuiSpacer size="m" />
+          <QueryVisualEditor
+            accelerationFormData={accelerationFormData}
+            setAccelerationFormData={setAccelerationFormData}
+          />
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                iconType="cross"
+                onClick={() => setIsFlyoutVisible(false)}
+                flush="left"
+              >
+                Close
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                onClick={() => {
+                  copyToEditor();
+                  setIsFlyoutVisible(false);
+                }}
+                fill
+              >
+                Copy Query to Editor
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </>
+  );
+};

public/components/acceleration/create/create_acceleration_header.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiSpacer,
+  EuiText,
+  EuiLink,
+} from '@elastic/eui';
+import React from 'react';
+import { OPENSEARCH_ACC_DOCUMENTATION_URL } from '../../../../common/constants';
+
+export const CreateAccelerationHeader = () => {
+  return (
+    <div>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l" data-test-subj="acceleration-header">
+            <h1>Create Acceleration Index</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Create OpenSearch Indexes from external data connections for better performance.{' '}
+        <EuiLink external={true} href={OPENSEARCH_ACC_DOCUMENTATION_URL} target="_blank">
+          Learn more
+        </EuiLink>
+      </EuiText>
+    </div>
+  );
+};

public/components/acceleration/selectors/index_type_selector.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiComboBox, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
+import React, { useState } from 'react';
+import { ACCELERATION_INDEX_TYPES } from '../../../../common/constants';
+import { CreateAccelerationForm } from '../../../../common/types';
+
+interface Indextypes {
+  label: string;
+  value: string;
+}
+
+interface IndexTypeSelectorProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const IndexTypeSelector = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: IndexTypeSelectorProps) => {
+  const [selectedIndexType, setSelectedIndexType] = useState<Indextypes[]>([
+    ACCELERATION_INDEX_TYPES[0],
+  ]);
+  return (
+    <>
+      <EuiText data-test-subj="index-type-selector-header">
+        <h3>Define index</h3>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiFormRow
+        label="Index Type"
+        helpText="Select the type of index you want to create. Each index type has benefits and costs."
+      >
+        <EuiComboBox
+          placeholder="Acceleration Index Type"
+          singleSelection={{ asPlainText: true }}
+          options={ACCELERATION_INDEX_TYPES}
+          selectedOptions={selectedIndexType}
+          onChange={(indexType) => {
+            setAccelerationFormData({
+              ...accelerationFormData,
+              accelerationIndexType: indexType[0].value,
+            });
+            setSelectedIndexType(indexType);
+          }}
+        />
+      </EuiFormRow>
+    </>
+  );
+};