add acc index flyout

Signed-off-by: Shenoy Pratik <[email protected]>

public/components/SQLPage/TableView.tsx

@@ -3,106 +3,128 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React, { useState, useEffect } from "react";
-import { EuiEmptyPrompt, EuiIcon, EuiTreeView } from "@elastic/eui";
+import { EuiEmptyPrompt, EuiIcon, EuiTreeView } from '@elastic/eui';
 import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../src/core/public';
-import { ON_LOAD_QUERY } from "../../../common/constants";
+import { ON_LOAD_QUERY } from '../../../common/constants';
+import { AccelerationIndexFlyout } from './acceleration_index_flyout';
 
 interface CustomView {
-    http: CoreStart['http'],
-    dataConnection: string
+  http: CoreStart['http'];
+  dataConnection: string;
 }
 
 export const TableView = ({ http, dataConnection }: CustomView) => {
-    const [tablenames, setTablenames] = useState<string[]>([]);
-    const [selectedNode, setSelectedNode] = useState<string | null>(null);
-    const [childData, setChildData] = useState<string[]>([]);
-    const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
-    const [indexData, setIndexedData] = useState<string[]>([]);
-
-    const getSidebarContent = () => {
-        const query = { query: ON_LOAD_QUERY }
-        http
-            .post(`/api/sql_console/sqlquery`, {
-                body: JSON.stringify(query),
-            })
-            .then((res) => {
-                const responseObj = res.data.resp
-                    ? JSON.parse(res.data.resp)
-                    : '';
-                const datarows: any[][] = _.get(responseObj, 'datarows');
-                const fields = datarows.map((data) => {
-                    return data[2]
-                })
-                setTablenames(fields)
-            })
-            .catch((err) => {
-                console.error(err);
-            });
-    };
-
-    useEffect(() => {
-
-        getSidebarContent();
-    }, []); 
-
-    const handleNodeClick = (nodeLabel: string) => {
-
-        //         // will update after new query
-
-        const newData = ["Child 1", "Child 2", "Child 3"]; 
-        setChildData(newData);
-        setSelectedNode(nodeLabel);
-    };
-
-    const handleChildClick = (nodeLabel1: string) => {
-
-        // will update after new query
-
-        const newData1 = ["Child 4", "Child 5", "Child 6"]; 
-        setIndexedData(newData1);
-        setSelectedChildNode(nodeLabel1);
-    };
-
-
-    const treeData = tablenames.map((element, index) => ({
-        label: element,
-        icon: <EuiIcon type='database' size="m" />,
-        id: 'element_' + index,
-        callback: () => handleNodeClick(element),
-        isSelectable: true, 
-        isExpanded: true,
-        children: dataConnection === 'S3' && selectedNode === element ? childData.map(child => ({
+  const [tablenames, setTablenames] = useState<string[]>([]);
+  const [selectedNode, setSelectedNode] = useState<string | null>(null);
+  const [childData, setChildData] = useState<string[]>([]);
+  const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
+  const [indexData, setIndexedData] = useState<string[]>([]);
+  const [indexFlyout, setIndexFlyout] = useState(<></>);
+
+  const getSidebarContent = () => {
+    const query = { query: ON_LOAD_QUERY };
+    http
+      .post(`/api/sql_console/sqlquery`, {
+        body: JSON.stringify(query),
+      })
+      .then((res) => {
+        const responseObj = res.data.resp ? JSON.parse(res.data.resp) : '';
+        const datarows: any[][] = _.get(responseObj, 'datarows');
+        const fields = datarows.map((data) => {
+          return data[2];
+        });
+        setTablenames(fields);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  useEffect(() => {
+    getSidebarContent();
+  }, []);
+
+  const handleNodeClick = (nodeLabel: string) => {
+    //         // will update after new query
+
+    const newData = ['Child 1', 'Child 2', 'Child 3'];
+    setChildData(newData);
+    setSelectedNode(nodeLabel);
+  };
+
+  const handleChildClick = (nodeLabel1: string) => {
+    // will update after new query
+
+    const newData1 = ['Child 4', 'Child 5', 'Child 6'];
+    setIndexedData(newData1);
+    setSelectedChildNode(nodeLabel1);
+  };
+
+  const resetFlyout = () => {
+    setIndexFlyout(<></>);
+  };
+
+  const handleAcclerationIndexClick = (
+    dataSource: string,
+    database: string,
+    dataTable: string,
+    indexChild: string
+  ) => {
+    setIndexFlyout(
+      <AccelerationIndexFlyout
+        dataSource={dataSource}
+        database={database}
+        dataTable={dataTable}
+        indexName={indexChild}
+        resetFlyout={resetFlyout}
+      />
+    );
+  };
+
+  const treeData = tablenames.map((element, index) => ({
+    label: element,
+    icon: <EuiIcon type="database" size="m" />,
+    id: 'element_' + index,
+    callback: () => handleNodeClick(element),
+    isSelectable: true,
+    isExpanded: true,
+    children:
+      dataConnection === 'S3' && selectedNode === element
+        ? childData.map((child) => ({
             label: child,
             id: `${element}_${child}`,
-            icon: <EuiIcon type='tableDensityCompact' size="s" />,
+            icon: <EuiIcon type="tableDensityCompact" size="s" />,
             callback: () => handleChildClick(child),
-            sSelectable: true, 
+            sSelectable: true,
             isExpanded: true,
-            children: selectedChildNode === child ? indexData.map(indexChild => ({
-                label: indexChild,
-                id: `${child}_${indexChild}`,
-                icon: <EuiIcon type='bolt' size="s" />
-            })):undefined,
-        })) : undefined,
-    }));
-
-    return (
-        <>
-            {treeData.length > 0 ? 
-                <EuiTreeView
-                    aria-label="Sample Folder Tree"
-                    items={treeData}
-                />
-            :   <EuiEmptyPrompt
-                    iconType="alert"
-                    iconColor="danger"
-                    title={<h2>Error loading Datasources</h2>}
-                />
-            }
-        </>
-    )
-}
-
+            children:
+              selectedChildNode === child
+                ? indexData.map((indexChild) => ({
+                    label: indexChild,
+                    id: `${child}_${indexChild}`,
+                    icon: <EuiIcon type="bolt" size="s" />,
+                    callback: () =>
+                      handleAcclerationIndexClick('myGlue', element, child, indexChild),
+                  }))
+                : undefined,
+          }))
+        : undefined,
+  }));
+
+  return (
+    <>
+      {treeData.length > 0 ? (
+        <EuiTreeView aria-label="Sample Folder Tree" items={treeData} />
+      ) : (
+        <EuiEmptyPrompt
+          iconType="alert"
+          iconColor="danger"
+          title={<h2>Error loading Datasources</h2>}
+        />
+      )}
+      {indexFlyout}
+    </>
+  );
+};

public/components/SQLPage/acceleration_index_flyout.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import React from 'react';
+
+interface AccelerationIndexFlyoutProps {
+  dataSource: string;
+  database: string;
+  dataTable: string;
+  indexName: string;
+  resetFlyout: () => void;
+}
+
+export const AccelerationIndexFlyout = ({
+  dataSource,
+  database,
+  dataTable,
+  indexName,
+  resetFlyout,
+}: AccelerationIndexFlyoutProps) => {
+  return (
+    <>
+      <EuiFlyout ownFocus onClose={resetFlyout} aria-labelledby="flyoutTitle" size="m">
+        <EuiFlyoutHeader hasBorder>
+          <div>
+            <EuiPageHeader>
+              <EuiPageHeaderSection>
+                <EuiTitle size="l" data-test-subj="acceleration-index-desc-header">
+                  <h1>{indexName}</h1>
+                </EuiTitle>
+              </EuiPageHeaderSection>
+            </EuiPageHeader>
+          </div>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <h3>Data Source</h3>
+              <EuiSpacer />
+              <p>{dataSource}</p>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <h3>Database</h3>
+              <EuiSpacer />
+              <p>{database}</p>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <h3>Table</h3>
+              <EuiSpacer />
+              <p>{dataTable}</p>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
+                Close
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </>
+  );
+};

public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx

@@ -7,6 +7,7 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,7 +18,6 @@ import {
   EuiSpacer,
   htmlIdGenerator,
 } from '@elastic/eui';
-import { EuiComboBoxOptionOption } from '@opensearch-project/oui';
 import producer from 'immer';
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';