From 3f6762a8d793b1d22db550ea31031a775c901928 Mon Sep 17 00:00:00 2001 From: Simeon Widdis Date: Thu, 3 Aug 2023 09:39:37 -0700 Subject: [PATCH] Make integration category and template lists dynamic (#782) * Make category list dynamic Signed-off-by: Simeon Widdis * Remove unused category constant Signed-off-by: Simeon Widdis * Remove hardcoded integration template list Signed-off-by: Simeon Widdis --------- Signed-off-by: Simeon Widdis --- common/constants/integrations.ts | 4 -- .../components/added_integration_table.tsx | 18 ++++---- .../available_integration_overview_page.tsx | 44 +++++++++---------- 3 files changed, 29 insertions(+), 37 deletions(-) diff --git a/common/constants/integrations.ts b/common/constants/integrations.ts index 9c8ca0299..9df90f004 100644 --- 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 index 3072bbf39..a5701e0ad 100644 --- 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( { @@ -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 index 1ec40154b..754b02163 100644 --- 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,32 +74,18 @@ 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 = ( 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 @@ -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
{items.map((item, index) => ( updateItem(index)} >