Link integrations from datasources UI

Signed-off-by: Derek Ho <dxho@amazon.com>
derek-ho · Oct 30, 2023 · 75d92b3 · 75d92b3
1 parent e4e2bca
commit 75d92b3
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 0 deletions.
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
@@ -675,6 +675,51 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
                     </div>
                   </div>
                 </div>
+                <div
+                  class="euiFlexItem"
+                >
+                  <div
+                    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
+                  >
+                    <div
+                      class="euiCard__top"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--xxLarge euiIcon-isLoading euiCard__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </div>
+                    <div
+                      class="euiCard__content"
+                    >
+                      <span
+                        class="euiTitle euiTitle--small euiCard__title"
+                        id="random_html_idTitle"
+                      >
+                        <button
+                          aria-describedby=" random_html_idDescription"
+                          class="euiCard__titleButton"
+                        >
+                          Integrate data
+                        </button>
+                      </span>
+                      <div
+                        class="euiText euiText--small euiCard__description"
+                        id="random_html_idDescription"
+                      >
+                        <p>
+                          Explore data faster through integrations
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>

diff --git a/public/components/datasources/components/manage/data_connection.tsx b/public/components/datasources/components/manage/data_connection.tsx
@@ -98,6 +98,14 @@ export const DataConnection = (props: any) => {
             }
           />
         </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiCard
+            icon={<EuiIcon size="xxl" type="integrationGeneral" />}
+            title={'Integrate data'}
+            description="Explore data faster through integrations"
+            onClick={() => application!.navigateToApp(observabilityIntegrationsID)}
+          />
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
   };

diff --git a/public/components/datasources/components/manage/manage_data_connections_table.tsx b/public/components/datasources/components/manage/manage_data_connections_table.tsx
@@ -22,6 +22,7 @@ import { HomeProps } from '../../home';
 import { DataConnectionsDescription } from './manage_data_connections_description';
 import {
   DATACONNECTIONS_BASE,
+  observabilityIntegrationsID,
   observabilityLogsID,
   observabilityMetricsID,
 } from '../../../../../common/constants/shared';
@@ -137,6 +138,17 @@ export const ManageDataConnectionsTable = (props: HomeProps) => {
       },
       'data-test-subj': 'action-accelerate',
     },
+    {
+      name: 'Integrate data',
+      isPrimary: false,
+      icon: 'integrationGeneral',
+      type: 'icon',
+      available: (datasource: DataConnection) => datasource.connectionType !== 'PROMETHEUS',
+      onClick: () => {
+        application!.navigateToApp(observabilityIntegrationsID);
+      },
+      'data-test-subj': 'action-integrate',
+    },
     {
       name: 'Delete',
       description: 'Delete this data source',