Enhanced UX for S3 connections with lake formation in Data sources ma…

…nagement and Logs explorer (opensearch-project#1834) * added support for lake formation S3 connections Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * don't show skipping index option in create acceleration flyout Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * updated snapshots Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * fixed UT Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * updated UI to have lesser forks; added new logo; table selector in integration setup Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * addressed PR comments Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * make lakeformation property optional Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * updated snapshots Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> --------- Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
danieldong51 · Jun 3, 2024 · 5e80c1a · 5e80c1a
1 parent c3ab50f
commit 5e80c1a
Show file tree

Hide file tree

Showing 38 changed files with 1,504 additions and 558 deletions.
diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts
@@ -52,6 +52,7 @@ export type DatasourceType = 'S3GLUE' | 'PROMETHEUS';
 export interface S3GlueProperties {
   'glue.indexstore.opensearch.uri': string;
   'glue.indexstore.opensearch.region': string;
+  'glue.lakeformation.enabled'?: boolean;
 }
 
 export interface PrometheusProperties {
@@ -266,6 +267,7 @@ export interface RenderAssociatedObjectsDetailsFlyoutParams {
   dataSourceName: string;
   handleRefresh?: () => void;
   dataSourceMDSId?: string;
+  isS3ConnectionWithLakeFormation?: boolean;
 }
 
 export interface RenderAccelerationDetailsFlyoutParams {

diff --git a/...nents/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap b/...nents/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap
diff --git a/...c/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap b/...c/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
@@ -1,6 +1,99 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Data Connection Page test Renders Prometheus data connection page with data 1`] = `<div />`;
+exports[`Data Connection Page test Renders Prometheus data connection page with data 1`] = `
+<div>
+  <div
+    class="euiPage euiPage--paddingMedium euiPage--grow"
+  >
+    <div
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <header
+        class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+        style="justify-content: spaceBetween;"
+      >
+        <div
+          class="euiPageHeaderSection"
+          style="width: 100%; justify-content: space-between;"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="dataspirceTitle"
+              >
+                prom
+              </h1>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiCallOut euiCallOut--warning"
+      >
+        <div
+          class="euiCallOutHeader"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+            />
+          </svg>
+          <span
+            class="euiCallOutHeader__title"
+          >
+            This data source connection is inactive
+          </span>
+        </div>
+        <div
+          class="euiText euiText--small"
+        >
+          <div
+            class="euiTextColor euiTextColor--default"
+          >
+            <p>
+              Associated objects and accelerations are not available while this connection is inactive.
+            </p>
+            <button
+              class="euiButton euiButton--warning"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Enable connection
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+    </div>
+  </div>
+</div>
+`;
 
 exports[`Data Connection Page test Renders S3 data connection page with data 1`] = `
 <div>
@@ -66,22 +159,54 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
             class="euiFlexItem"
           >
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+              class="euiText euiText--medium overview-title"
+            >
+              Query Access
+            </div>
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <div
-                  class="euiText euiText--medium overview-title"
-                >
-                  Query Access
-                </div>
                 <div
                   class="euiText euiText--small overview-content"
                 >
                   Admin only
                 </div>
               </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButtonEmpty euiButtonEmpty--primary"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButtonEmpty__content"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                      />
+                    </svg>
+                    <span
+                      class="euiButtonEmpty__text"
+                    >
+                      Edit
+                    </span>
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -341,7 +466,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
                         <span
                           class="euiButtonEmpty__text"
                         >
-                          Query in Observability Logs
+                          Query in Log Explorer
                         </span>
                       </span>
                     </button>

diff --git a/...atasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap b/...atasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap
@@ -268,7 +268,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
                     </th>
                     <th
                       class="euiTableHeaderCell"
-                      data-test-subj="tableHeaderCell_status_1"
+                      data-test-subj="tableHeaderCell_Type_1"
                       role="columnheader"
                       scope="col"
                     >
@@ -277,9 +277,26 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="Status"
+                          title="Type"
                         >
-                          Status
+                          Type
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_status_2"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Connection status"
+                        >
+                          Connection status
                         </span>
                       </span>
                     </th>
@@ -307,7 +324,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
                   >
                     <td
                       class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
-                      colspan="3"
+                      colspan="4"
                     >
                       <div
                         class="euiTableCellContent euiTableCellContent--alignCenter"

diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx
@@ -14,8 +14,8 @@ import {
   EuiLoadingSpinner,
   EuiPanel,
   EuiSpacer,
-  EuiTableFieldDataColumnType,
   EuiText,
+  EuiBasicTableColumn,
 } from '@elastic/eui';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
@@ -45,6 +45,7 @@ import {
 interface AccelerationTableProps {
   dataSourceName: string;
   cacheLoadingHooks: any;
+  isS3ConnectionWithLakeFormation: boolean;
 }
 
 interface ModalState {
@@ -55,6 +56,7 @@ interface ModalState {
 export const AccelerationTable = ({
   dataSourceName,
   cacheLoadingHooks,
+  isS3ConnectionWithLakeFormation,
 }: AccelerationTableProps) => {
   const [accelerations, setAccelerations] = useState<CachedAcceleration[]>([]);
   const [updatedTime, setUpdatedTime] = useState<string>();
@@ -236,8 +238,10 @@ export const AccelerationTable = ({
     },
   ];
 
-  const accelerationTableColumns = [
-    {
+  const accelerationTableColumnsCollection: {
+    [columnKey: string]: EuiBasicTableColumn<CachedAcceleration>;
+  } = {
+    name: {
       field: 'indexName',
       name: 'Name',
       sortable: true,
@@ -258,13 +262,13 @@ export const AccelerationTable = ({
         );
       },
     },
-    {
+    status: {
       field: 'status',
       name: 'Status',
       sortable: true,
       render: (status: string) => <AccelerationStatus status={status} />,
     },
-    {
+    type: {
       field: 'type',
       name: 'Type',
       sortable: true,
@@ -286,27 +290,27 @@ export const AccelerationTable = ({
         return <EuiText size="s">{label}</EuiText>;
       },
     },
-    {
+    database: {
       field: 'database',
       name: 'Database',
       sortable: true,
       render: (database: string) => <EuiText size="s">{database}</EuiText>,
     },
-    {
+    table: {
       field: 'table',
       name: 'Table',
       sortable: true,
       render: (table: string) => <EuiText size="s">{table || '-'}</EuiText>,
     },
-    {
+    refreshType: {
       field: 'refreshType',
       name: 'Refresh Type',
       sortable: true,
       render: (autoRefresh: boolean, acceleration: CachedAcceleration) => {
         return <EuiText size="s">{acceleration.autoRefresh ? 'Auto refresh' : 'Manual'}</EuiText>;
       },
     },
-    {
+    flintIndexName: {
       field: 'flintIndexName',
       name: 'Destination Index',
       sortable: true,
@@ -317,11 +321,17 @@ export const AccelerationTable = ({
         return flintIndexName || '-';
       },
     },
-    {
+    actions: {
       name: 'Actions',
       actions: tableActions,
     },
-  ] as Array<EuiTableFieldDataColumnType<any>>;
+  };
+
+  const accelerationTableColumns = !isS3ConnectionWithLakeFormation
+    ? Object.values(accelerationTableColumnsCollection)
+    : Object.entries(accelerationTableColumnsCollection)
+        .filter(([key]) => key !== 'database' && key !== 'table')
+        .map(([_key, val]) => val);
 
   const pagination = {
     initialPageSize: 10,