KEY-58-get-destination-api

odigos-io · Jul 13, 2023 · 9cbe508 · 9cbe508
1 parent 0340b8f
commit 9cbe508
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 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
@@ -33,17 +33,13 @@ export function DestinationCard({ item, onClick, focus }: any) {
   return (
     <KeyvalCard focus={focus}>
       <DestinationCardWrapper onClick={onClick}>
-        <KeyvalImage
-          src={"https://d15jtxgb40qetw.cloudfront.net/blobstorage.svg"}
-          width={56}
-          height={56}
-        />
+        <KeyvalImage src={item.image_url} width={56} height={56} />
         <ApplicationNameWrapper>
           <KeyvalText size={20} weight={700} style={TEXT_STYLE}>
-            {item.display_type}
+            {item.display_name}
           </KeyvalText>
         </ApplicationNameWrapper>
-        <TapList list={monitors} tapStyle={{ padding: "4px 8px" }} />
+        <TapList gap={4} list={monitors} tapStyle={{ padding: "4px 8px" }} />
       </DestinationCardWrapper>
     </KeyvalCard>
   );

diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
@@ -1,19 +1,31 @@
-import React from "react";
+import React, { useMemo } from "react";
 import {
   DestinationListWrapper,
   DestinationTypeTitleWrapper,
 } from "./destination.list.styled";
 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) => (
+  //     <DestinationCard
+  //       key={index}
+  //       item={item}
+  //       onClick={() => onItemClick(item)}
+  //       focus={sectionData?.type === item?.type}
+  //     />
+  //   ));
+  // }, [data, sectionData]);
+
   function renderList() {
+    console.log("renderList");
     return data?.items?.map((item: any, index: number) => (
       <DestinationCard
         key={index}
         item={item}
         onClick={() => 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
@@ -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<string>("");
   const [dropdownData, setDropdownData] = useState<any>(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) {
           <DestinationList
             key={index}
             data={category}
-            onItemClick={(item) => setSectionData(item)}
+            sectionData={sectionData}
+            onItemClick={(item: any) => setSectionData(item)}
           />
         )
       );
     });
   }
 
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <>
       <DestinationOptionMenu
         searchFilter={searchFilter}
         setSearchFilter={setSearchFilter}
         setDropdownData={setDropdownData}
-        data={FAKE.categories}
+        data={data.categories}
       />
       <DestinationListContainer>
         {renderDestinationLists()}

diff --git 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 (
-          <SourcesSection
-            sectionData={sectionData}
-            setSectionData={setSectionData}
-          />
-        );
+        Component = SourcesSection;
+        break;
       case "choose-destination":
-        return (
-          <DestinationSection
-            sectionData={sectionData}
-            setSectionData={setSectionData}
-          />
-        );
-      default:
-        return null;
+        Component = DestinationSection;
+        break;
     }
+
+    return (
+      <Component sectionData={sectionData} setSectionData={setSectionData} />
+    );
   }
 
   function handleNamespacesUpdate() {

diff --git 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
@@ -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 };