From 9cbe5081e34afaf21107dcfacc2c7c82079007ee Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Thu, 13 Jul 2023 10:43:46 +0300 Subject: [PATCH] KEY-58-get-destination-api --- .../destination.card/destination.card.tsx | 10 +-- .../destination.list/destination.list.tsx | 18 ++++- .../setup/destination/destination.section.tsx | 69 +++++-------------- .../setup/setup.section/setup.section.tsx | 24 +++---- frontend/webapp/services/setup.tsx | 4 ++ frontend/webapp/utils/constants/urls.tsx | 2 + 6 files changed, 52 insertions(+), 75 deletions(-) diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx index bce037d55..2066d51d0 100644 --- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx +++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx @@ -33,17 +33,13 @@ export function DestinationCard({ item, onClick, focus }: any) { return ( - + - {item.display_type} + {item.display_name} - + ); diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx index 8aa5eb76a..db38c21eb 100644 --- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx +++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import { DestinationListWrapper, DestinationTypeTitleWrapper, @@ -6,14 +6,26 @@ import { import { KeyvalText } from "@/design.system"; import { DestinationCard } from "../destination.card/destination.card"; -export function DestinationList({ data = [], onItemClick, selectedData }: any) { +export function DestinationList({ data = [], onItemClick, sectionData }: any) { + // const memorizedList = useMemo(() => { + // return data?.items?.map((item: any, index: number) => ( + // onItemClick(item)} + // focus={sectionData?.type === item?.type} + // /> + // )); + // }, [data, sectionData]); + function renderList() { + console.log("renderList"); return data?.items?.map((item: any, index: number) => ( onItemClick(item)} - focus={selectedData?.type === item?.type} + focus={sectionData?.type === item?.type} /> )); } diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx index 71cea73f5..29a3a25d1 100644 --- a/frontend/webapp/containers/setup/destination/destination.section.tsx +++ b/frontend/webapp/containers/setup/destination/destination.section.tsx @@ -1,59 +1,21 @@ import { DestinationList, DestinationOptionMenu } from "@/components/setup"; import React, { useState } from "react"; import { DestinationListContainer } from "./destination.section.styled"; - -const FAKE = { - categories: [ - { - name: "Managed", - items: [ - { - type: "newrelic", - display_type: "New Relic", - image_url: "https://s3.amazonaws.com/keyval-dev/newrelic.jpg", - supported_signals: { - traces: { - supported: true, - }, - metrics: { - supported: true, - }, - logs: { - supported: false, - }, - }, - }, - ], - }, - { - name: "Self hosted", - items: [ - { - type: "jaeger", - display_type: "Jaeger", - image_url: "https://s3.amazonaws.com/keyval-dev/jaeger.jpg", - supported_signals: { - traces: { - supported: true, - }, - metrics: { - supported: false, - }, - logs: { - supported: false, - }, - }, - }, - ], - }, - ], -}; +import { QUERIES } from "@/utils/constants"; +import { useQuery } from "react-query"; +import { getDestinations } from "@/services/setup"; export function DestinationSection({ sectionData, setSectionData }: any) { const [searchFilter, setSearchFilter] = useState(""); const [dropdownData, setDropdownData] = useState(null); + + const { isLoading, data } = useQuery( + [QUERIES.API_DESTINATIONS], + getDestinations + ); + function filterData() { - const filteredData = FAKE.categories.map((category: any) => { + const filteredData = data?.categories.map((category: any) => { const items = category.items.filter((item: any) => { const displayType = item.display_type.toLowerCase(); const searchFilterLower = searchFilter.toLowerCase(); @@ -71,7 +33,7 @@ export function DestinationSection({ sectionData, setSectionData }: any) { } function renderDestinationLists() { - const list = searchFilter ? filterData() : FAKE.categories; //TODO change to real data (sectionData) + const list = searchFilter ? filterData() : data?.categories; //TODO change to real data (sectionData) return list?.map((category: any, index: number) => { const displayItem = @@ -82,20 +44,25 @@ export function DestinationSection({ sectionData, setSectionData }: any) { setSectionData(item)} + sectionData={sectionData} + onItemClick={(item: any) => setSectionData(item)} /> ) ); }); } + if (isLoading) { + return
Loading...
; + } + return ( <> {renderDestinationLists()} diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx index 6a806a3f4..6a543b0ca 100644 --- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx +++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx @@ -50,24 +50,20 @@ export function SetupSection() { }, [JSON.stringify(sectionData)]); function renderCurrentSection() { + let Component: any = null; + switch (currentStep?.id) { case "choose-source": - return ( - - ); + Component = SourcesSection; + break; case "choose-destination": - return ( - - ); - default: - return null; + Component = DestinationSection; + break; } + + return ( + + ); } function handleNamespacesUpdate() { diff --git a/frontend/webapp/services/setup.tsx b/frontend/webapp/services/setup.tsx index 7b14ae6c4..4d93d11e6 100644 --- a/frontend/webapp/services/setup.tsx +++ b/frontend/webapp/services/setup.tsx @@ -12,3 +12,7 @@ export async function getApplication(id: string) { export async function setNamespaces(body: any) { return await post(API.NAMESPACES, body); } + +export async function getDestinations() { + return await get(API.DESTINATION); +} diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx index fb5f5a457..19683f475 100644 --- a/frontend/webapp/utils/constants/urls.tsx +++ b/frontend/webapp/utils/constants/urls.tsx @@ -7,12 +7,14 @@ const API = { CONFIG: `${BASE_URL}/config`, NAMESPACES: `${BASE_URL}/namespaces`, APPLICATIONS: `${BASE_URL}/applications`, + DESTINATION: `${BASE_URL}/destinations`, }; const QUERIES = { API_CONFIG: "apiConfig", API_NAMESPACES: "apiNamespaces", API_APPLICATIONS: "apiApplications", + API_DESTINATIONS: "apiDestinations", }; export { API, QUERIES };