Make integration category and template lists dynamic (#782)

* Make category list dynamic Signed-off-by: Simeon Widdis <sawiddis@amazon.com> * Remove unused category constant Signed-off-by: Simeon Widdis <sawiddis@amazon.com> * Remove hardcoded integration template list Signed-off-by: Simeon Widdis <sawiddis@amazon.com> --------- Signed-off-by: Simeon Widdis <sawiddis@amazon.com>
opensearch-project · Aug 3, 2023 · 3f6762a · 3f6762a
1 parent a4b764a
commit 3f6762a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 37 deletions.
diff --git a/common/constants/integrations.ts b/common/constants/integrations.ts
@@ -5,7 +5,3 @@
 
 export const OPENSEARCH_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/integrations/index';
 export const ASSET_FILTER_OPTIONS = ['index-pattern', 'search', 'visualization', 'dashboard'];
-// TODO get this list dynamically from the API
-export const INTEGRATION_TEMPLATE_OPTIONS = ['nginx'];
-// TODO get this list dynamically from the API
-export const INTEGRATION_CATEOGRY_OPTIONS = ['communication', 'http', 'cloud', 'container', 'logs'];
diff --git a/public/components/integrations/components/added_integration_table.tsx b/public/components/integrations/components/added_integration_table.tsx
@@ -18,10 +18,6 @@ import {
 import _ from 'lodash';
 import React, { useState } from 'react';
 import { AddedIntegrationsTableProps } from './added_integration_overview_page';
-import {
-  ASSET_FILTER_OPTIONS,
-  INTEGRATION_TEMPLATE_OPTIONS,
-} from '../../../../common/constants/integrations';
 import { DeleteModal } from '../../../../public/components/common/helpers/delete_modal';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { useToast } from '../../../../public/components/common/toast';
@@ -103,7 +99,7 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
       });
   }
 
-  const getModal = (integrationInstanceId, name) => {
+  const getModal = (integrationInstanceId: string, name: string) => {
     setModalLayout(
       <DeleteModal
         onConfirm={() => {
@@ -120,20 +116,22 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
     setIsModalVisible(true);
   };
 
+  const integTemplateNames = [...new Set(integrations.map((i) => i.templateName))].sort();
+
   const search = {
     box: {
       incremental: true,
     },
     filters: [
       {
-        type: 'field_value_selection',
+        type: 'field_value_selection' as const,
         field: 'templateName',
         name: 'Type',
         multiSelect: false,
-        options: INTEGRATION_TEMPLATE_OPTIONS.map((i) => ({
-          value: i,
-          name: i,
-          view: i,
+        options: integTemplateNames.map((name) => ({
+          name,
+          value: name,
+          view: name,
         })),
       },
     ],

diff --git a/public/components/integrations/components/available_integration_overview_page.tsx b/public/components/integrations/components/available_integration_overview_page.tsx
@@ -16,7 +16,6 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { INTEGRATION_CATEOGRY_OPTIONS } from '../../../../common/constants/integrations';
 import { IntegrationHeader } from './integration_header';
 import { AvailableIntegrationsTable } from './available_integration_table';
 import { AvailableIntegrationsCardView } from './available_integration_card_view';
@@ -75,41 +74,27 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
     setIsPopoverOpen(false);
   };
 
-  const [items, setItems] = useState(
-    INTEGRATION_CATEOGRY_OPTIONS.map((x) => {
-      return { name: x };
-    })
-  );
+  const [items, setItems] = useState([] as Array<{ name: string; checked: boolean }>);
 
-  function updateItem(index) {
+  function updateItem(index: number) {
     if (!items[index]) {
       return;
     }
-
     const newItems = [...items];
-
-    switch (newItems[index].checked) {
-      case 'on':
-        newItems[index].checked = undefined;
-        break;
-
-      default:
-        newItems[index].checked = 'on';
-    }
-
+    newItems[index].checked = !items[index].checked;
     setItems(newItems);
   }
 
-  const helper = items.filter((item) => item.checked === 'on').map((x) => x.name);
+  const helper = items.filter((item) => item.checked).map((x) => x.name);
 
   const button = (
     <EuiFilterButton
       iconType="arrowDown"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={items.length}
-      hasActiveFilters={!!items.find((item) => item.checked === 'on')}
-      numActiveFilters={items.filter((item) => item.checked === 'on').length}
+      hasActiveFilters={!!items.find((item) => item.checked)}
+      numActiveFilters={items.filter((item) => item.checked).length}
     >
       Categories
     </EuiFilterButton>
@@ -126,7 +111,20 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
   }, []);
 
   async function handleDataRequest() {
-    http.get(`${INTEGRATIONS_BASE}/repository`).then((exists) => setData(exists.data));
+    http.get(`${INTEGRATIONS_BASE}/repository`).then((exists) => {
+      setData(exists.data);
+
+      let newItems = exists.data.hits
+        .flatMap((hit: { components: Array<{ name: string }> }) => hit.components)
+        .map((component: { name: string }) => component.name);
+      newItems = [...new Set(newItems)].sort().map((newItem) => {
+        return {
+          name: newItem,
+          checked: false,
+        };
+      });
+      setItems(newItems);
+    });
   }
 
   async function addIntegrationRequest(name: string) {
@@ -163,7 +161,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
           <div className="ouiFilterSelect__items">
             {items.map((item, index) => (
               <EuiFilterSelectItem
-                checked={item.checked}
+                checked={item.checked ? 'on' : 'off'}
                 key={index}
                 onClick={() => updateItem(index)}
               >